add option to show board coordinates

src/atoms/atoms.ts

@@ -100,6 +100,7 @@ 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 pieceSetAtom = atomWithStorage<string>("piece-set", "staunty");
 export const primaryColorAtom = atomWithStorage<MantineColor>(
     "mantine-primary-color",

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>