107 lines
2.6 KiB
JavaScript
107 lines
2.6 KiB
JavaScript
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
|
|
}
|
|
})
|