fix(settings): persist pause menu preferences

src/managers/stores/useSettingsStore.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 import { AudioManager } from "@/managers/AudioManager";
 import type { AudioCategory } from "@/managers/AudioManager";
 import type { SubtitleLanguage } from "@/types/settings/settings";
@@ -33,6 +34,8 @@ const DEFAULT_SETTINGS: SettingsState = {
   subtitleLanguage: "fr",
 };
 
+const SETTINGS_STORAGE_KEY = "la-fabrik-settings";
+
 function clampVolume(volume: number): number {
   return Math.max(0, Math.min(1, volume));
 }
@@ -46,24 +49,22 @@ function setAudioCategoryVolume(
   return nextVolume;
 }
 
-function applyDefaultAudioSettings(): void {
+function applyAudioSettings(
-  AudioManager.getInstance().setCategoryVolume(
+  settings: Pick<SettingsState, "musicVolume" | "sfxVolume" | "dialogueVolume">,
-    "music",
+): void {
-    DEFAULT_SETTINGS.musicVolume,
+  AudioManager.getInstance().setCategoryVolume("music", settings.musicVolume);
-  );
+  AudioManager.getInstance().setCategoryVolume("sfx", settings.sfxVolume);
-  AudioManager.getInstance().setCategoryVolume(
-    "sfx",
-    DEFAULT_SETTINGS.sfxVolume,
-  );
   AudioManager.getInstance().setCategoryVolume(
     "dialogue",
-    DEFAULT_SETTINGS.dialogueVolume,
+    settings.dialogueVolume,
   );
 }
 
-applyDefaultAudioSettings();
+applyAudioSettings(DEFAULT_SETTINGS);
 
-export const useSettingsStore = create<SettingsStore>()((set) => ({
+export const useSettingsStore = create<SettingsStore>()(
+  persist(
+    (set) => ({
       ...DEFAULT_SETTINGS,
       setSettingsMenuOpen: (isSettingsMenuOpen) => set({ isSettingsMenuOpen }),
       setMusicVolume: (volume) =>
@@ -75,7 +76,23 @@ export const useSettingsStore = create<SettingsStore>()((set) => ({
       setSubtitlesEnabled: (subtitlesEnabled) => set({ subtitlesEnabled }),
       setSubtitleLanguage: (subtitleLanguage) => set({ subtitleLanguage }),
       resetSettings: () => {
-    applyDefaultAudioSettings();
+        applyAudioSettings(DEFAULT_SETTINGS);
         set(DEFAULT_SETTINGS);
       },
-}));
+    }),
+    {
+      name: SETTINGS_STORAGE_KEY,
+      storage: createJSONStorage(() => window.localStorage),
+      partialize: (state) => ({
+        dialogueVolume: state.dialogueVolume,
+        musicVolume: state.musicVolume,
+        sfxVolume: state.sfxVolume,
+        subtitleLanguage: state.subtitleLanguage,
+        subtitlesEnabled: state.subtitlesEnabled,
+      }),
+      onRehydrateStorage: () => (state) => {
+        if (state) applyAudioSettings(state);
+      },
+    },
+  ),
+);

src/managers/stores/useWorldSettingsStore.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 import { CLOUD_DEFAULTS, type CloudState } from "@/data/world/cloudConfig";
 import { FOG_CONFIG, type FogState } from "@/data/world/fogConfig";
 import { WIND_DEFAULTS, type WindState } from "@/data/world/windConfig";
@@ -46,7 +47,11 @@ const DEFAULT_STATE: WorldSettingsState = {
   graphics: { ...GRAPHICS_DEFAULTS },
 };
 
-export const useWorldSettingsStore = create<WorldSettingsStore>()((set) => ({
+const WORLD_SETTINGS_STORAGE_KEY = "la-fabrik-world-settings";
+
+export const useWorldSettingsStore = create<WorldSettingsStore>()(
+  persist(
+    (set) => ({
       ...DEFAULT_STATE,
 
       setClouds: (cloudsUpdate) =>
@@ -115,4 +120,16 @@ export const useWorldSettingsStore = create<WorldSettingsStore>()((set) => ({
         })),
 
       resetToDefaults: () => set(DEFAULT_STATE),
-}));
+    }),
+    {
+      name: WORLD_SETTINGS_STORAGE_KEY,
+      storage: createJSONStorage(() => window.localStorage),
+      partialize: (state) => ({
+        clouds: state.clouds,
+        fog: state.fog,
+        graphics: state.graphics,
+        wind: state.wind,
+      }),
+    },
+  ),
+);

src/utils/debug/Debug.ts

@@ -9,6 +9,7 @@ const DEBUG_CONTROLS_STORAGE_KEY = "la-fabrik-debug-controls";
 
 interface StoredDebugControls {
   cameraMode: CameraMode;
+  handTrackingSource: HandTrackingSource;
   sceneMode: SceneMode;
 }
 
@@ -39,6 +40,10 @@ function isSceneMode(value: unknown): value is SceneMode {
   return value === "game" || value === "physics";
 }
 
+function isHandTrackingSource(value: unknown): value is HandTrackingSource {
+  return value === "browser" || value === "backend";
+}
+
 function getStoredDebugControls(): Partial<StoredDebugControls> {
   try {
     const rawValue = window.localStorage.getItem(DEBUG_CONTROLS_STORAGE_KEY);
@@ -51,6 +56,9 @@ function getStoredDebugControls(): Partial<StoredDebugControls> {
       ...(isCameraMode(parsedValue.cameraMode)
         ? { cameraMode: parsedValue.cameraMode }
         : {}),
+      ...(isHandTrackingSource(parsedValue.handTrackingSource)
+        ? { handTrackingSource: parsedValue.handTrackingSource }
+        : {}),
       ...(isSceneMode(parsedValue.sceneMode)
         ? { sceneMode: parsedValue.sceneMode }
         : {}),
@@ -94,7 +102,7 @@ export class Debug {
     this.controls = {
       cameraMode: storedControls.cameraMode ?? "player",
       fogEnabled: FOG_CONFIG.enabled,
-      handTrackingSource: "browser",
+      handTrackingSource: storedControls.handTrackingSource ?? "browser",
       showDebugOverlay: true,
       showHandTrackingSvg: false,
       showInteractionSpheres: false,
@@ -159,7 +167,7 @@ export class Debug {
         .name("Source")
         .onChange((value: HandTrackingSource) => {
           this.controls.handTrackingSource = value;
-          this.emit();
+          this.saveAndEmit();
         });
     }
   }
@@ -246,7 +254,7 @@ export class Debug {
 
   setHandTrackingSource(value: HandTrackingSource): void {
     this.controls.handTrackingSource = value;
-    this.emit();
+    this.saveAndEmit();
   }
 
   getFogEnabled(): boolean {
@@ -285,6 +293,7 @@ export class Debug {
         DEBUG_CONTROLS_STORAGE_KEY,
         JSON.stringify({
           cameraMode: this.controls.cameraMode,
+          handTrackingSource: this.controls.handTrackingSource,
           sceneMode: this.controls.sceneMode,
         }),
       );