added board backgrounds in settings

src/components/board/index.tsx

@@ -19,7 +19,7 @@ import EvaluationBar from "./evaluationBar";
 import { CLASSIFICATION_COLORS } from "@/constants";
 import { Player } from "@/types/game";
 import PlayerHeader from "./playerHeader";
-import { boardHueAtom, pieceSetAtom } from "./states";
+import { boardHueAtom, pieceSetAtom, boardSetAtom } from "./states";
 import tinycolor from "tinycolor2";
 
 export interface Props {
@@ -61,6 +61,7 @@ export default function Board({
   const [moveClickFrom, setMoveClickFrom] = useState<Square | null>(null);
   const [moveClickTo, setMoveClickTo] = useState<Square | null>(null);
   const pieceSet = useAtomValue(pieceSetAtom);
+  const boardSet = useAtomValue(boardSetAtom);
   const boardHue = useAtomValue(boardHueAtom);
 
   const gameFen = game.fen();
@@ -269,11 +270,16 @@ export default function Board({
   );
 
   const customBoardStyle = useMemo(() => {
-    const commonBoardStyle = {
+    const commonBoardStyle: React.CSSProperties = {
       borderRadius: "5px",
       boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
     };
 
+    if (boardSet !== "none") {
+      commonBoardStyle.backgroundImage = `url(/board/${boardSet}.png)`;
+      commonBoardStyle.backgroundSize = "cover";
+    }
+
     if (boardHue) {
       return {
         ...commonBoardStyle,
@@ -282,7 +288,7 @@ export default function Board({
     }
 
     return commonBoardStyle;
-  }, [boardHue]);
+  }, [boardHue, boardSet]);
 
   return (
     <Grid
@@ -341,6 +347,10 @@ export default function Board({
             promotionToSquare={moveClickTo}
             animationDuration={200}
             customPieces={customPieces}
+            {...(boardSet !== "none" && {
+              customDarkSquareStyle: { backgroundColor: "transparent" },
+              customLightSquareStyle: { backgroundColor: "transparent" },
+            })}
           />
         </Grid>
 

src/components/board/states.ts

@@ -1,8 +1,12 @@
-import { PIECE_SETS } from "@/constants";
+import { PIECE_SETS, BOARD_SETS } from "@/constants";
 import { atomWithStorage } from "jotai/utils";
 
 export const pieceSetAtom = atomWithStorage<(typeof PIECE_SETS)[number]>(
   "pieceSet",
   "maestro"
 );
+export const boardSetAtom = atomWithStorage<(typeof BOARD_SETS)[number] | "none">(
+  "boardSet",
+  "none"
+);
 export const boardHueAtom = atomWithStorage("boardHue", 0);

src/constants.ts

@@ -103,3 +103,36 @@ export const PIECE_SETS = [
   "tatiana",
   "xkcd",
 ] as const satisfies string[];
+
+export const BOARD_SETS = [
+  "8_bit",
+  "bases",
+  "blue",
+  "brown",
+  "bubblegum",
+  "burled_wood",
+  "dark_wood",
+  "dash",
+  "glass",
+  "graffiti",
+  "green",
+  "icy_sea",
+  "light",
+  "lolz",
+  "marble",
+  "metal",
+  "neon",
+  "newspaper",
+  "orange",
+  "overlay",
+  "parchment",
+  "purple",
+  "red",
+  "sand",
+  "sky",
+  "stone",
+  "tan",
+  "tournament",
+  "translucent",
+  "walnut",
+] as const satisfies string[];

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -28,12 +28,13 @@ import { useEffect } from "react";
 import { isEngineSupported } from "@/lib/engine/shared";
 import { Stockfish16_1 } from "@/lib/engine/stockfish16_1";
 import { useAtom } from "jotai";
-import { boardHueAtom, pieceSetAtom } from "@/components/board/states";
+import { boardHueAtom, pieceSetAtom, boardSetAtom } from "@/components/board/states";
 import Image from "next/image";
 import {
   DEFAULT_ENGINE,
   ENGINE_LABELS,
   PIECE_SETS,
+  BOARD_SETS,
   STRONGEST_ENGINE,
 } from "@/constants";
 import { getRecommendedWorkersNb } from "@/lib/engine/worker";
@@ -58,6 +59,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
   );
   const [boardHue, setBoardHue] = useAtom(boardHueAtom);
   const [pieceSet, setPieceSet] = useAtom(pieceSetAtom);
+  const [boardSet, setBoardSet] = useAtom(boardSetAtom);
   const [engineWorkersNb, setEngineWorkersNb] = useAtom(engineWorkersNbAtom);
 
   const theme = useTheme();
@@ -156,7 +158,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
           <Grid
             container
             justifyContent="center"
-            size={{ xs: 12, sm: 8, md: 9 }}
+            size={{ xs: 12, sm: 12, md: 4 }}
           >
             <Slider
               label="Board hue"
@@ -171,7 +173,45 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
             container
             justifyContent="center"
             alignItems="center"
-            size={{ xs: 12, sm: 4, md: 3 }}
+            size={{ xs: 12, sm: 6, md: 4 }}
+          >
+            <FormControl variant="outlined">
+              <InputLabel id="dialog-select-board-label">Board set</InputLabel>
+              <Select
+                labelId="dialog-select-board-label"
+                id="dialog-select-board"
+                displayEmpty
+                input={<OutlinedInput label="Board set" />}
+                value={boardSet}
+                onChange={(e) =>
+                  setBoardSet(e.target.value as (typeof BOARD_SETS)[number] | "none")
+                }
+                sx={{ width: 200, maxWidth: "100%" }}
+              >
+                <MenuItem value="none">None</MenuItem>
+                {BOARD_SETS.map((name) => (
+                  <MenuItem key={name} value={name}>
+                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                      <Image
+                        loading="lazy"
+                        src={`/board/${name}.png`}
+                        alt={`${name} board`}
+                        width={24}
+                        height={24}
+                      />
+                      {name}
+                    </Box>
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid
+            container
+            justifyContent="center"
+            alignItems="center"
+            size={{ xs: 12, sm: 6, md: 4 }}
           >
             <FormControl variant="outlined">
               <InputLabel id="dialog-select-label">Piece set</InputLabel>