feat: spin the wheel, objednavani scrape menu, historie cen

client/src/context/settings.tsx

@@ -6,9 +6,18 @@ const HIDE_SOUPS_KEY = 'hide_soups';
 const THEME_KEY = 'theme_preference';
 const ACCENT_HUE_KEY = 'accent_hue';
 const LEGACY_COLOR_THEME_KEY = 'color_theme';
+const STYLE_THEME_KEY = 'style_theme';
 
 export type ThemePreference = 'system' | 'light' | 'dark';
 
+/** Vizuální styl aplikace (nezávislý na světlém/tmavém režimu). */
+export type StyleTheme = 'simple' | 'umamusume';
+
+export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
+  { value: 'simple', label: 'Jednoduchý' },
+  { value: 'umamusume', label: 'Umamusume' },
+];
+
 export type SettingsContextProps = {
   bankAccount?: string,
   holderName?: string,
@@ -16,11 +25,13 @@ export type SettingsContextProps = {
   themePreference: ThemePreference,
   accentHue: number,
   effectiveDark: boolean,
+  styleTheme: StyleTheme,
   setBankAccountNumber: (accountNumber?: string) => void,
   setBankAccountHolderName: (holderName?: string) => void,
   setHideSoupsOption: (hideSoups?: boolean) => void,
   setThemePreference: (theme: ThemePreference) => void,
   setAccentHue: (hue: number) => void,
+  setStyleTheme: (theme: StyleTheme) => void,
 }
 
 type ContextProps = {
@@ -50,6 +61,17 @@ function getInitialTheme(): ThemePreference {
   return 'system';
 }
 
+function getInitialStyleTheme(): StyleTheme {
+  try {
+    if (localStorage.getItem(STYLE_THEME_KEY) === 'umamusume') {
+      return 'umamusume';
+    }
+  } catch {
+    // localStorage nedostupný
+  }
+  return 'simple';
+}
+
 function getInitialAccentHue(): number {
   try {
     const saved = localStorage.getItem(ACCENT_HUE_KEY);
@@ -90,6 +112,12 @@ function adjustedL(hue: number, sat: number, targetL: number): number {
   return l;
 }
 
+const ACCENT_PROPERTIES = ['--luncher-primary', '--luncher-primary-hover', '--luncher-primary-light', '--luncher-action-icon', '--luncher-success'];
+
+function clearAccentColors(): void {
+  ACCENT_PROPERTIES.forEach(p => document.documentElement.style.removeProperty(p));
+}
+
 function applyAccentColors(hue: number, isDark: boolean): void {
   const sat = 70;
   const baseL = adjustedL(hue, sat, isDark ? 55 : 38);
@@ -110,6 +138,7 @@ function useProvideSettings(): SettingsContextProps {
   const [hideSoups, setHideSoups] = useState<boolean | undefined>();
   const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);
   const [accentHue, setHue] = useState<number>(getInitialAccentHue);
+  const [styleTheme, setStyle] = useState<StyleTheme>(getInitialStyleTheme);
   const [effectiveDark, setEffectiveDark] = useState<boolean>(() => {
     try {
       const pref = localStorage.getItem(THEME_KEY) as ThemePreference | null;
@@ -178,11 +207,21 @@ function useProvideSettings(): SettingsContextProps {
     }
   }, [themePreference]);
 
-  // Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý
+  useEffect(() => {
+    localStorage.setItem(STYLE_THEME_KEY, styleTheme);
+    document.documentElement.setAttribute('data-luncher-theme', styleTheme);
+  }, [styleTheme]);
+
+  // Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
+  // Styl Umamusume má vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
   useEffect(() => {
     localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
-    applyAccentColors(accentHue, effectiveDark);
-  }, [accentHue, effectiveDark]);
+    if (styleTheme === 'simple') {
+      applyAccentColors(accentHue, effectiveDark);
+    } else {
+      clearAccentColors();
+    }
+  }, [accentHue, effectiveDark, styleTheme]);
 
   function setBankAccountNumber(bankAccount?: string) {
     setBankAccount(bankAccount);
@@ -204,6 +243,10 @@ function useProvideSettings(): SettingsContextProps {
     setHue(hue);
   }
 
+  function setStyleTheme(theme: StyleTheme) {
+    setStyle(theme);
+  }
+
   return {
     bankAccount,
     holderName,
@@ -216,5 +259,7 @@ function useProvideSettings(): SettingsContextProps {
     setHideSoupsOption,
     setThemePreference,
     setAccentHue,
+    styleTheme,
+    setStyleTheme,
   }
 }