Remove zod and add mute setting

imkunet · Mar 11, 2024 · c5a8f46 · c5a8f46
1 parent a437816
commit c5a8f46
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 28 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
     "solid-icons": "^1.1.0",
     "solid-js": "^1.8.15",
     "solid-motionone": "^1.0.0",
-    "zod": "^3.22.4",
     "zod_utilz": "^0.8.2"
   },
   "devDependencies": {

diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx
@@ -137,13 +137,13 @@ export default function Game() {
     setGrid(emptyGrid());
     setGrid([...gridSolution().map((v) => v.map((v1) => v1))]);
     setSolutionShown(true);
-    playPlaceSound(audioCtx(), true);
+    if (!settings().muted) playPlaceSound(audioCtx(), true);
   };
   const trash = () => {
     if (solved() || !inGame()) return;
     setGrid(gridSolution().map((v) => v.map((v1) => (v1 == 'block' ? 'block' : null))));
     setWizard(false);
-    playPlaceSound(audioCtx(), false);
+    if (!settings().muted) playPlaceSound(audioCtx(), false);
   };
 
   let boardElement: HTMLDivElement;
@@ -276,7 +276,7 @@ export default function Game() {
       }
 
       setGrid(currentGrid);
-      playPlaceSound(audioCtx(), true);
+      if (!settings().muted) playPlaceSound(audioCtx(), true);
       return;
     }
 
@@ -296,7 +296,7 @@ export default function Game() {
     setWizard(false);
     setGrid(currentGrid);
 
-    playPlaceSound(audioCtx(), false);
+    if (!settings().muted) playPlaceSound(audioCtx(), false);
   });
 
   createEffect(() => {
@@ -317,6 +317,7 @@ export default function Game() {
     if (colNumbers().find((v, i) => v != colSolvedNumbers()[i]) != undefined) return;
     if (rowNumbers().find((v, i) => v != rowSolvedNumbers()[i]) != undefined) return;
     setSolved(true);
+    if (settings().muted) return;
     playDingSound(audioCtx());
   });
 

diff --git a/src/styles/settings.css b/src/styles/settings.css
@@ -10,9 +10,9 @@
 }
 
 .settings-container {
-  margin-top: 1rem;
+  margin-top: 2rem;
   margin-right: auto;
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
   margin-left: auto;
   border-radius: var(--game-board-radius);
   background: var(--color-bg);

diff --git a/src/utils/settings.ts b/src/utils/settings.ts
@@ -1,19 +1,27 @@
-import { z } from 'zod';
-import { zu } from 'zod_utilz';
-
-export const SettingsObject = z.object({
-  colorBlindMode: z.boolean().default(false),
-  showSolveButton: z.boolean().default(false),
-  strictControls: z.boolean().default(false),
-  hideTime: z.boolean().default(false),
-  hideEndorsement: z.boolean().default(false),
-  hideTrash: z.boolean().default(false),
-  darkMode: z.boolean().default(false),
-});
+export type Settings = {
+  muted: boolean;
+  colorBlindMode: boolean;
+  darkMode: boolean;
+  showSolveButton: boolean;
+  strictControls: boolean;
+  hideTime: boolean;
+  hideEndorsement: boolean;
+  hideTrash: boolean;
+};
 
-export type Settings = z.infer<typeof SettingsObject>;
+export const defaultSettings: Settings = {
+  muted: false,
+  colorBlindMode: false,
+  showSolveButton: false,
+  strictControls: false,
+  hideTime: false,
+  hideEndorsement: false,
+  hideTrash: false,
+  darkMode: false,
+};
 
 export const settingsDescription: Record<keyof Settings, [string, string]> = {
+  muted: ['Muted', 'Whether to play the neat little sounds or not'],
   colorBlindMode: [
     'Color Blind Mode',
     'Turns solved numbers blue for those who are red/green colorblind',
@@ -39,18 +47,39 @@ export const saveSettings = (settings: Settings) => {
   localStorage.setItem('settings', JSON.stringify(settings));
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const validateSettings = (v: any): Settings => {
+  const validSettings = { ...defaultSettings };
+  let key: keyof typeof validSettings;
+  for (key in validSettings) {
+    const valid = validSettings[key];
+    const current = v[key];
+    if (current === undefined) continue;
+    if (typeof valid === typeof current) {
+      validSettings[key] = current;
+      continue;
+    }
+    console.log(`Invalid setting value for ${key}: '${current}', setting to default '${valid}'`);
+  }
+  return validSettings;
+};
+
 export const loadSettings = (): Settings => {
   const settingsString = localStorage.getItem('settings') || '{}';
-  const parsed = zu.stringToJSON().pipe(SettingsObject).safeParse(settingsString);
 
-  if (!parsed.success) {
-    console.error('Failed to read settings ', parsed.error);
+  try {
+    const parsedJson = JSON.parse(settingsString);
+    const settings = validateSettings(parsedJson);
+    saveSettings(settings);
+    return settings;
+  } catch {
+    const failTime = Date.now();
+    console.log('Failed to parse the settings! Trying again from scratch.');
+    console.log(`The old (broken) settings have been saved as 'settings-${failTime}'.`);
+
+    localStorage.setItem(`settings-${failTime}`, settingsString);
     localStorage.setItem('settings', '{}');
-    // just try again which can cause an infinite loop
-    // but this will never break... right? :)
+
     return loadSettings();
   }
-
-  saveSettings(parsed.data);
-  return parsed.data;
 };