10-04-2026

frontend/_src/stores/settings.js

@@ -0,0 +1,107 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+const STORAGE_KEY = 'thatsme-settings'
+
+export const ACCENT_COLORS = [
+  { label: 'Standard', value: 'default', hex: '#9e9e9e' },
+  { label: 'Blau', value: 'blue', hex: '#2196F3' },
+  { label: 'Grün', value: 'green', hex: '#4CAF50' },
+  { label: 'Gelb', value: 'yellow', hex: '#FFC107' },
+  { label: 'Rosa', value: 'pink', hex: '#E91E63' },
+  { label: 'Orange', value: 'orange', hex: '#FF9800' }
+]
+
+export const LANGUAGES = [
+  { label: 'Deutsch', value: 'de' },
+  { label: 'English', value: 'en' }
+]
+
+const FLOATING_LINES_DEFAULTS = {
+  // Linien
+  speed: 1.0,
+  lineCount: 10,
+  spread: 0.05,
+  fanSpread: 0.05,
+  lineSharpness: 8.0,
+  waveFrequency: 7.0,
+  bezierCurvature: 0.2,
+  circleRadius: 75,
+  glowSize: 18,
+  glowStrength: 1.5,
+  lineBrightness: 1.0,
+  // Hintergrund
+  bgCenter: '#0a0514',
+  bgEdge: '#000000',
+  gradientStops: '#e947f5\n#2f4ba2\n#0a0a12',
+  backgroundImage: '',
+  // Labels
+  labelSize: 'small',    // 'small' | 'medium' | 'large'
+  labelColor: '#ffffff'
+}
+
+function loadFromStorage() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    return stored ? JSON.parse(stored) : null
+  } catch {
+    return null
+  }
+}
+
+export { FLOATING_LINES_DEFAULTS }
+
+export const useSettingsStore = defineStore('settings', () => {
+  const stored = loadFromStorage()
+
+  const theme = ref(stored?.theme ?? 'light')
+  const floatingLines = ref(stored?.floatingLines ?? { ...FLOATING_LINES_DEFAULTS })
+
+  // App preferences
+  const appearance = ref(stored?.appearance ?? 'system') // 'system' | 'light' | 'dark'
+  const accentColor = ref(stored?.accentColor ?? 'default')
+  const language = ref(stored?.language ?? 'de')
+
+  // Developer / debug
+  const showFps = ref(stored?.showFps ?? false)
+
+  function persist() {
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        theme: theme.value,
+        floatingLines: floatingLines.value,
+        appearance: appearance.value,
+        accentColor: accentColor.value,
+        language: language.value,
+        showFps: showFps.value
+      })
+    )
+  }
+
+  watch([theme, floatingLines, appearance, accentColor, language, showFps], persist, { deep: true })
+
+  function toggleTheme() {
+    theme.value = theme.value === 'light' ? 'dark' : 'light'
+  }
+
+  function updateFloatingLines(updates) {
+    floatingLines.value = { ...floatingLines.value, ...updates }
+  }
+
+  function resetFloatingLines() {
+    floatingLines.value = { ...FLOATING_LINES_DEFAULTS }
+  }
+
+  return {
+    theme,
+    floatingLines,
+    appearance,
+    accentColor,
+    language,
+    showFps,
+    toggleTheme,
+    updateFloatingLines,
+    resetFloatingLines
+  }
+})