diff --git a/src/atoms/atoms.ts b/src/atoms/atoms.ts index 9f3c2a4a..78b7dd6c 100644 --- a/src/atoms/atoms.ts +++ b/src/atoms/atoms.ts @@ -100,6 +100,7 @@ export const showArrowsAtom = atomWithStorage("show-arrows", true); export const autoPromoteAtom = atomWithStorage("auto-promote", true); export const autoSaveAtom = atomWithStorage("auto-save", true); export const forcedEnPassantAtom = atomWithStorage("forced-ep", false); +export const showCoordinatesAtom = atomWithStorage("show-coordinates", false); export const pieceSetAtom = atomWithStorage("piece-set", "staunty"); export const primaryColorAtom = atomWithStorage( "mantine-primary-color", diff --git a/src/components/boards/BoardPlay.tsx b/src/components/boards/BoardPlay.tsx index 614bf041..4e4afdba 100644 --- a/src/components/boards/BoardPlay.tsx +++ b/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 diff --git a/src/components/puzzles/PuzzleBoard.tsx b/src/components/puzzles/PuzzleBoard.tsx index a5925957..bab007e6 100644 --- a/src/components/puzzles/PuzzleBoard.tsx +++ b/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={{ diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx index 7f6de33e..a25f00f5 100644 --- a/src/components/settings/SettingsPage.tsx +++ b/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() { + +
+ Coordinates + + Show coordinates on the board + +
+ +
Auto Save