feat: možnost vypnout motýlky v nastavení

client/src/AppRoutes.tsx

@@ -1,5 +1,5 @@
 import { Routes, Route } from "react-router-dom";
-import { ProvideSettings } from "./context/settings";
+import { ProvideSettings, useSettings } from "./context/settings";
 import FlyingButterflies, { BUTTERFLY_PRESETS } from "./FlyingButterflies";
 import "./FlyingButterflies.scss";
 import { ToastContainer } from "react-toastify";
@@ -13,6 +13,15 @@ export const STATS_URL = '/stats';
 export const OBJEDNANI_URL = '/objednani';
 export const NAVRHY_URL = '/navrhy';
 
+/** Motýlci se vykreslují jen pokud je uživatel nevypnul v nastavení. */
+function Butterflies() {
+    const settings = useSettings();
+    if (settings?.showButterflies === false) {
+        return null;
+    }
+    return <FlyingButterflies numButterflies={BUTTERFLY_PRESETS.NORMAL} />;
+}
+
 export default function AppRoutes() {
     return (
         <Routes>
@@ -34,7 +43,7 @@ export default function AppRoutes() {
                 <ProvideSettings>
                     <SocketContext.Provider value={socket}>
                         <>
-                            <FlyingButterflies numButterflies={BUTTERFLY_PRESETS.NORMAL} />
+                            <Butterflies />
                             <App />
                         </>
                         <ToastContainer />

client/src/components/modals/SettingsModal.tsx

@@ -20,6 +20,7 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
     const hideSoupsRef = useRef<HTMLInputElement>(null);
     const themeRef = useRef<HTMLSelectElement>(null);
     const styleThemeRef = useRef<HTMLSelectElement>(null);
+    const showButterfliesRef = useRef<HTMLInputElement>(null);
 
     const reminderTimeRef = useRef<HTMLInputElement>(null);
     const boltDeliveredRef = useRef<HTMLInputElement>(null);
@@ -79,6 +80,9 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
         if (styleThemeRef.current?.value) {
             settings?.setStyleTheme(styleThemeRef.current.value as StyleTheme);
         }
+        if (showButterfliesRef.current) {
+            settings?.setShowButterflies(showButterfliesRef.current.checked);
+        }
         onSave(
             bankAccountRef.current?.value,
             nameRef.current?.value,
@@ -108,6 +112,18 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
                         <option value="dark">Tmavý</option>
                     </Form.Select>
                 </Form.Group>
+                <Form.Group className="mb-3">
+                    <Form.Check
+                        id="showButterfliesCheckbox"
+                        ref={showButterfliesRef}
+                        type="checkbox"
+                        label="Zobrazit motýlky"
+                        defaultChecked={settings?.showButterflies ?? true}
+                    />
+                    <Form.Text className="text-muted">
+                        Po vypnutí se poletující motýlci ani minihra nebudou vůbec zobrazovat.
+                    </Form.Text>
+                </Form.Group>
 
                 <hr />
 

client/src/context/settings.tsx

@@ -7,6 +7,7 @@ const THEME_KEY = 'theme_preference';
 const ACCENT_HUE_KEY = 'accent_hue';
 const LEGACY_COLOR_THEME_KEY = 'color_theme';
 const STYLE_THEME_KEY = 'style_theme';
+const SHOW_BUTTERFLIES_KEY = 'show_butterflies';
 
 export type ThemePreference = 'system' | 'light' | 'dark';
 
@@ -28,12 +29,14 @@ export type SettingsContextProps = {
   accentHue: number,
   effectiveDark: boolean,
   styleTheme: StyleTheme,
+  showButterflies: boolean,
   setBankAccountNumber: (accountNumber?: string) => void,
   setBankAccountHolderName: (holderName?: string) => void,
   setHideSoupsOption: (hideSoups?: boolean) => void,
   setThemePreference: (theme: ThemePreference) => void,
   setAccentHue: (hue: number) => void,
   setStyleTheme: (theme: StyleTheme) => void,
+  setShowButterflies: (show: boolean) => void,
 }
 
 type ContextProps = {
@@ -76,6 +79,15 @@ function getInitialStyleTheme(): StyleTheme {
   return 'simple';
 }
 
+function getInitialShowButterflies(): boolean {
+  try {
+    return localStorage.getItem(SHOW_BUTTERFLIES_KEY) !== 'false';
+  } catch {
+    // localStorage nedostupný
+  }
+  return true;
+}
+
 function getInitialAccentHue(): number {
   try {
     const saved = localStorage.getItem(ACCENT_HUE_KEY);
@@ -143,6 +155,7 @@ function useProvideSettings(): SettingsContextProps {
   const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);
   const [accentHue, setHue] = useState<number>(getInitialAccentHue);
   const [styleTheme, setStyle] = useState<StyleTheme>(getInitialStyleTheme);
+  const [showButterflies, setShowButterfliesState] = useState<boolean>(getInitialShowButterflies);
   const [effectiveDark, setEffectiveDark] = useState<boolean>(() => {
     try {
       const pref = localStorage.getItem(THEME_KEY) as ThemePreference | null;
@@ -216,6 +229,10 @@ function useProvideSettings(): SettingsContextProps {
     document.documentElement.setAttribute('data-luncher-theme', styleTheme);
   }, [styleTheme]);
 
+  useEffect(() => {
+    localStorage.setItem(SHOW_BUTTERFLIES_KEY, showButterflies ? 'true' : 'false');
+  }, [showButterflies]);
+
   // Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
   // Tematické styly (Umamusume, My Little Pony, Hell Girl) mají vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
   useEffect(() => {
@@ -251,6 +268,10 @@ function useProvideSettings(): SettingsContextProps {
     setStyle(theme);
   }
 
+  function setShowButterflies(show: boolean) {
+    setShowButterfliesState(show);
+  }
+
   return {
     bankAccount,
     holderName,
@@ -265,5 +286,7 @@ function useProvideSettings(): SettingsContextProps {
     setAccentHue,
     styleTheme,
     setStyleTheme,
+    showButterflies,
+    setShowButterflies,
   }
 }