add font size slider in settings

franciscoBSalgueiro · Nov 19, 2023 · 153d407 · 153d407
1 parent 347be41
commit 153d407
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 65 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -29,7 +29,13 @@ import {
 import { useEffect } from "react";
 import DatabasesPage from "./components/databases/DatabasesPage";
 import { useAtom, useAtomValue } from "jotai";
-import { activeTabAtom, pieceSetAtom, primaryColorAtom, tabsAtom } from "./atoms/atoms";
+import {
+  activeTabAtom,
+  fontSizeAtom,
+  pieceSetAtom,
+  primaryColorAtom,
+  tabsAtom,
+} from "./atoms/atoms";
 
 import "@/styles/chessgroundBaseOverride.css";
 import "@/styles/chessgroundColorsOverride.css";
@@ -107,6 +113,12 @@ export default function App() {
     })();
   }, []);
 
+  const fontSize = useAtomValue(fontSizeAtom);
+
+  useEffect(() => {
+    document.documentElement.style.fontSize = `${fontSize}%`;
+  }, [fontSize]);
+
   return (
     <ColorSchemeProvider
       colorScheme={colorScheme}

diff --git a/src/atoms/atoms.ts b/src/atoms/atoms.ts
@@ -3,19 +3,31 @@ import { Card, buildFromTree } from "@/components/files/opening";
 import { LocalOptions } from "@/components/panels/database/DatabasePanel";
 import { DatabaseInfo } from "@/utils/db";
 import { Engine } from "@/utils/engines";
-import { LichessGamesOptions, MasterGamesOptions } from "@/utils/lichess/lichessexplorer";
+import {
+    LichessGamesOptions,
+    MasterGamesOptions,
+} from "@/utils/lichess/lichessexplorer";
 import { MissingMove } from "@/utils/repertoire";
 import { Tab, genID } from "@/utils/tabs";
 import { GameHeaders, TreeNode } from "@/utils/treeReducer";
 import { MantineColor } from "@mantine/core";
-import { BaseDirectory, readTextFile, removeFile, writeTextFile } from "@tauri-apps/api/fs";
+import {
+    BaseDirectory,
+    readTextFile,
+    removeFile,
+    writeTextFile,
+} from "@tauri-apps/api/fs";
 import { PrimitiveAtom, atom } from "jotai";
-import { atomFamily, atomWithStorage, createJSONStorage, loadable } from "jotai/utils";
+import {
+    atomFamily,
+    atomWithStorage,
+    createJSONStorage,
+    loadable,
+} from "jotai/utils";
 import { AtomFamily } from "jotai/vanilla/utils/atomFamily";
 import { AsyncStringStorage } from "jotai/vanilla/utils/atomWithStorage";
 import { Session } from "../utils/session";
 
-
 const options = { dir: BaseDirectory.AppData };
 const fileStorage: AsyncStringStorage = {
     async getItem(key) {
@@ -29,22 +41,22 @@ const fileStorage: AsyncStringStorage = {
         try {
             await writeTextFile(key, newValue, options);
         } catch (error) {
-            throw new Error('Unable to set item.');
+            throw new Error("Unable to set item.");
         }
     },
     async removeItem(key) {
         try {
             await removeFile(key, options);
         } catch (error) {
-            throw new Error('Unable to remove item.');
+            throw new Error("Unable to remove item.");
         }
-    }
-}
+    },
+};
 
 export const enginesAtom = atomWithStorage<Engine[]>(
     "engines/engines.json",
     [],
-    createJSONStorage(() => fileStorage),
+    createJSONStorage(() => fileStorage)
 );
 
 const loadableEnginesAtom = loadable(enginesAtom);
@@ -94,13 +106,21 @@ export const currentTabAtom = atom(
 
 // Settings
 
+export const fontSizeAtom = atomWithStorage(
+    "font-size",
+    parseInt(document.documentElement.style.fontSize) || 100
+);
+
 export const moveInputAtom = atomWithStorage<boolean>("move-input", false);
 export const showDestsAtom = atomWithStorage<boolean>("show-dests", true);
 export const showArrowsAtom = atomWithStorage<boolean>("show-arrows", true);
 export const autoPromoteAtom = atomWithStorage<boolean>("auto-promote", true);
 export const autoSaveAtom = atomWithStorage<boolean>("auto-save", true);
 export const forcedEnPassantAtom = atomWithStorage<boolean>("forced-ep", false);
-export const showCoordinatesAtom = atomWithStorage<boolean>("show-coordinates", false);
+export const showCoordinatesAtom = atomWithStorage<boolean>(
+    "show-coordinates",
+    false
+);
 export const pieceSetAtom = atomWithStorage<string>("piece-set", "staunty");
 export const primaryColorAtom = atomWithStorage<MantineColor>(
     "mantine-primary-color",
@@ -169,26 +189,34 @@ export const currentInvisibleAtom = tabValue(invisibleFamily);
 const tabFamily = atomFamily((tab: string) => atom("info"));
 export const currentTabSelectedAtom = tabValue(tabFamily);
 
-const localOptionsFamily = atomFamily((tab: string) => atom<LocalOptions>({
-    path: null,
-    type: "exact",
-    fen: ""
-}));
+const localOptionsFamily = atomFamily((tab: string) =>
+    atom<LocalOptions>({
+        path: null,
+        type: "exact",
+        fen: "",
+    })
+);
 export const currentLocalOptionsAtom = tabValue(localOptionsFamily);
 
-const lichessOptionsFamily = atomFamily((tab: string) => atom<LichessGamesOptions>({
-    fen: "",
-    ratings: [1000, 1200, 1400, 1600, 1800, 2000, 2200, 2500],
-    speeds: ["bullet", "blitz", "rapid", "classical", "correspondence"],
-}));
+const lichessOptionsFamily = atomFamily((tab: string) =>
+    atom<LichessGamesOptions>({
+        fen: "",
+        ratings: [1000, 1200, 1400, 1600, 1800, 2000, 2200, 2500],
+        speeds: ["bullet", "blitz", "rapid", "classical", "correspondence"],
+    })
+);
 export const currentLichessOptionsAtom = tabValue(lichessOptionsFamily);
 
-const masterOptionsFamily = atomFamily((tab: string) => atom<MasterGamesOptions>({
-    fen: ""
-}));
+const masterOptionsFamily = atomFamily((tab: string) =>
+    atom<MasterGamesOptions>({
+        fen: "",
+    })
+);
 export const currentMasterOptionsAtom = tabValue(masterOptionsFamily);
 
-const dbTypeFamily = atomFamily((tab: string) => atom<"local" | "lch_all" | "lch_master">("local"));
+const dbTypeFamily = atomFamily((tab: string) =>
+    atom<"local" | "lch_all" | "lch_master">("local")
+);
 export const currentDbTypeAtom = tabValue(dbTypeFamily);
 
 const dbTabFamily = atomFamily((tab: string) => atom("stats"));
@@ -197,12 +225,14 @@ export const currentDbTabAtom = tabValue(dbTabFamily);
 const analysisTabFamily = atomFamily((tab: string) => atom("engines"));
 export const currentAnalysisTabAtom = tabValue(analysisTabFamily);
 
-const pgnOptionsFamily = atomFamily((tab: string) => atom({
-    comments: true,
-    annotations: true,
-    variations: true,
-    symbols: false,
-}));
+const pgnOptionsFamily = atomFamily((tab: string) =>
+    atom({
+        comments: true,
+        annotations: true,
+        variations: true,
+        symbols: false,
+    })
+);
 export const currentPgnOptionsAtom = tabValue(pgnOptionsFamily);
 
 // Practice
@@ -249,27 +279,30 @@ export const tabEngineSettingsFamily = atomFamily(
         const savedDefault = localStorage.getItem(`engine-${engine}`);
         return atom<EngineSettings>(
             savedDefault !== null
-                ? { ...JSON.parse(savedDefault), enabled: false } as EngineSettings
-                :
-                {
-                    enabled: false,
-                    go: {
-                        t: "Depth",
-                        c: 24,
-                    },
-                    options: {
-                        threads: 2,
-                        multipv: 3,
-                        hash: 16,
-                        extraOptions: [],
-                    }
-                })
+                ? ({
+                      ...JSON.parse(savedDefault),
+                      enabled: false,
+                  } as EngineSettings)
+                : {
+                      enabled: false,
+                      go: {
+                          t: "Depth",
+                          c: 24,
+                      },
+                      options: {
+                          threads: 2,
+                          multipv: 3,
+                          hash: 16,
+                          extraOptions: [],
+                      },
+                  }
+        );
     },
     (a, b) => a.tab === b.tab && a.engine === b.engine
 );
 
-export const allEnabledAtom = loadable(atom(
-    async (get) => {
+export const allEnabledAtom = loadable(
+    atom(async (get) => {
         const engines = await get(enginesAtom);
 
         const v = engines
@@ -283,23 +316,18 @@ export const allEnabledAtom = loadable(atom(
             });
 
         return v;
-    },
-));
+    })
+);
 
-export const enableAllAtom = atom(
-    null,
-    (get, set, value: boolean) => {
-        const engines = get(loadableEnginesAtom);
-        if (!(engines.state === "hasData")) return;
-
-        for (const engine of engines.data.filter((e) => e.loaded)) {
-            const atom = tabEngineSettingsFamily({
-                tab: get(activeTabAtom)!,
-                engine: engine.name,
-            });
-            set(atom, { ...get(atom), enabled: value });
-        }
+export const enableAllAtom = atom(null, (get, set, value: boolean) => {
+    const engines = get(loadableEnginesAtom);
+    if (!(engines.state === "hasData")) return;
 
+    for (const engine of engines.data.filter((e) => e.loaded)) {
+        const atom = tabEngineSettingsFamily({
+            tab: get(activeTabAtom)!,
+            engine: engine.name,
+        });
+        set(atom, { ...get(atom), enabled: value });
     }
-
-);
+});
diff --git a/src/components/settings/FontSizeSlider.tsx b/src/components/settings/FontSizeSlider.tsx
@@ -0,0 +1,31 @@
+import { fontSizeAtom } from "@/atoms/atoms";
+import { Slider } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useState, useEffect } from "react";
+
+export default function FontSizeSlider() {
+  const [fontSize, setFontSize] = useAtom(fontSizeAtom);
+  const [tempFontSize, setTempFontSize] = useState(fontSize);
+
+  useEffect(() => {
+    setTempFontSize(fontSize);
+  }, [fontSize]);
+
+  return (
+    <Slider
+      min={50}
+      max={200}
+      step={10}
+      value={tempFontSize}
+      w="15rem"
+      onChange={(value) => {
+        setTempFontSize(value as number);
+      }}
+      onChangeEnd={setFontSize}
+      marks={["50%", "100%", "150%", "200%"].map((label) => ({
+        value: parseInt(label),
+        label,
+      }))}
+    />
+  );
+}
diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
@@ -18,6 +18,7 @@ import SettingsSwitch from "./SettingsSwitch";
 import ThemeButton from "./ThemeButton";
 import { useLoaderData } from "react-router-dom";
 import { IconBook, IconBrush, IconChess, IconFlag } from "@tabler/icons-react";
+import FontSizeSlider from "./FontSizeSlider";
 
 const useStyles = createStyles((theme) => ({
   card: {
@@ -279,6 +280,20 @@ export default function Page() {
               </div>
               <ThemeButton />
             </Group>
+            <Group
+              position="apart"
+              noWrap
+              spacing="xl"
+              className={classes.item}
+            >
+              <div>
+                <Text>Font Size</Text>
+                <Text size="xs" color="dimmed">
+                  Overall font size
+                </Text>
+              </div>
+              <FontSizeSlider />
+            </Group>
             <Group
               position="apart"
               noWrap