thats-me/frontend/src/stores/settings.js
2026-03-06 13:56:20 +01:00

73 lines
1.5 KiB
JavaScript

import { defineStore } from 'pinia'
import { ref, watch } from 'vue'
const STORAGE_KEY = 'thatsme-settings'
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,
// Hintergrund
bgCenter: '#0a0514',
bgEdge: '#000000',
gradientStops: '#e947f5\n#2f4ba2\n#0a0a12',
backgroundImage: ''
}
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 })
function persist() {
localStorage.setItem(
STORAGE_KEY,
JSON.stringify({
theme: theme.value,
floatingLines: floatingLines.value
})
)
}
watch([theme, floatingLines], 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,
toggleTheme,
updateFloatingLines,
resetFloatingLines
}
})