Add setting to show board coordinates

src/atoms/atoms.ts

@@ -80,7 +80,7 @@
         const activeTab = get(activeTabAtom);
         const nextValue =
             typeof newValue === "function"
                 ? newValue(get(currentTabAtom)!)
                 : newValue;
         const newTabs = tabs.map((tab) => {
             if (tab.value === activeTab) {
@@ -100,6 +100,7 @@
 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 pieceSetAtom = atomWithStorage<string>("piece-set", "staunty");
 export const primaryColorAtom = atomWithStorage<MantineColor>(
     "mantine-primary-color",
@@ -162,38 +163,38 @@
 
 // Per tab settings
 
 const invisibleFamily = atomFamily((tab: string) => atom(false));
 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: ""
 }));
 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"],
 }));
 export const currentLichessOptionsAtom = tabValue(lichessOptionsFamily);
 
 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"));
 export const currentDbTypeAtom = tabValue(dbTypeFamily);
 
 const dbTabFamily = atomFamily((tab: string) => atom("stats"));
 export const currentDbTabAtom = tabValue(dbTabFamily);
 
 const analysisTabFamily = atomFamily((tab: string) => atom("engines"));
 export const currentAnalysisTabAtom = tabValue(analysisTabFamily);
 
 const pgnOptionsFamily = atomFamily((tab: string) => atom({

src/components/boards/BoardPlay.tsx

@@ -51,6 +51,7 @@ import {
   forcedEnPassantAtom,
   moveInputAtom,
   showArrowsAtom,
+  showCoordinatesAtom,
   showDestsAtom,
 } from "@/atoms/atoms";
 import PromotionModal from "./PromotionModal";
@@ -120,6 +121,7 @@ function BoardPlay({
   const showArrows = useAtomValue(showArrowsAtom);
   const autoPromote = useAtomValue(autoPromoteAtom);
   const forcedEP = useAtomValue(forcedEnPassantAtom);
+  const showCoordinates = useAtomValue(showCoordinatesAtom);
   const autoSave = useAtomValue(autoSaveAtom);
 
   const activeTab = useAtomValue(currentTabAtom);
@@ -318,7 +320,7 @@ function BoardPlay({
             height={boardSize}
             orientation={side ?? orientation}
             fen={currentNode.fen}
-            coordinates={false}
+            coordinates={showCoordinates}
             movable={{
               free: editingMode,
               color: practiceLock

src/components/puzzles/PuzzleBoard.tsx

@@ -8,6 +8,8 @@ import { Completion, Puzzle } from "@/utils/puzzles";
 import PromotionModal from "../boards/PromotionModal";
 import { chessboard } from "@/styles/Chessboard.css";
 import { Chessground } from "@/chessground/Chessground";
+import { useAtomValue } from "jotai";
+import { showCoordinatesAtom } from "@/atoms/atoms";
 
 function PuzzleBoard({
   puzzles,
@@ -45,6 +47,7 @@ function PuzzleBoard({
   const dests = toDests(chess, false);
   const fen = chess.fen();
   const turn = formatMove(chess.turn());
+  const showCoordinates = useAtomValue(showCoordinatesAtom);
 
   const boardSize = getBoardSize(window.innerHeight, window.innerWidth);
 
@@ -87,6 +90,7 @@ function PuzzleBoard({
             enabled: true,
           }}
           width={boardSize}
+          coordinates={showCoordinates}
           height={boardSize}
           orientation={orientation}
           movable={{

src/components/settings/SettingsPage.tsx

@@ -8,6 +8,7 @@ import {
   forcedEnPassantAtom,
   pieceSetAtom,
   showDestsAtom,
+  showCoordinatesAtom,
 } from "@/atoms/atoms";
 import { Card, createStyles, Group, Stack, Text } from "@mantine/core";
 import ColorControl from "./ColorControl";
@@ -122,6 +123,15 @@ export default function Page() {
           </div>
           <SettingsSwitch atom={autoPromoteAtom} />
         </Group>
+        <Group position="apart" noWrap spacing="xl" className={classes.item}>
+          <div>
+            <Text>Coordinates</Text>
+            <Text size="xs" color="dimmed">
+              Show coordinates on the board
+            </Text>
+          </div>
+          <SettingsSwitch atom={showCoordinatesAtom} />
+        </Group>
         <Group position="apart" noWrap spacing="xl" className={classes.item}>
           <div>
             <Text>Auto Save</Text>