feat : add board style options UI

src/components/board/constants.ts

@@ -0,0 +1,56 @@
+import { Piece } from "react-chessboard/dist/chessboard/types";
+
+export const PIECE_CODES = [
+  "wP",
+  "wB",
+  "wN",
+  "wR",
+  "wQ",
+  "wK",
+  "bP",
+  "bB",
+  "bN",
+  "bR",
+  "bQ",
+  "bK",
+] as const satisfies Piece[];
+
+export const PIECE_SETS = [
+  "alpha",
+  "anarcandy",
+  "caliente",
+  "california",
+  "cardinal",
+  "cburnett",
+  "celtic",
+  "chess7",
+  "chessnut",
+  "companion",
+  "cooke",
+  "dubrovny",
+  "fantasy",
+  "firi",
+  "fresca",
+  "gioco",
+  "governor",
+  "horsey",
+  "icpieces",
+  "kiwen-suwi",
+  "kosal",
+  "leipzig",
+  "letter",
+  "maestro",
+  "merida",
+  "monarchy",
+  "mpchess",
+  "pirouetti",
+  "pixel",
+  "reillycraig",
+  "rhosgfx",
+  "riohacha",
+  "shapes",
+  "spatial",
+  "staunty",
+  "tatiana",
+  "xkcd",
+] as const satisfies string[];

src/components/board/index.tsx

@@ -5,7 +5,6 @@ import {
   Arrow,
   CustomPieces,
   CustomSquareRenderer,
-  Piece,
   PromotionPieceOption,
   Square,
 } from "react-chessboard/dist/chessboard/types";
@@ -22,6 +21,7 @@ import PlayerHeader from "./playerHeader";
 import Image from "next/image";
 import { boardHueAtom, pieceSetAtom } from "./states";
 import tinycolor from "tinycolor2";
+import { PIECE_CODES } from "./constants";
 
 export interface Props {
   id: string;
@@ -233,7 +233,7 @@ export default function Board({
 
   const customPieces = useMemo(
     () =>
-      pieceCodes.reduce<CustomPieces>((acc, piece) => {
+      PIECE_CODES.reduce<CustomPieces>((acc, piece) => {
         acc[piece] = ({ squareWidth }) => (
           <Image
             src={`/piece/${pieceSet}/${piece}.svg`}
@@ -325,18 +325,3 @@ export default function Board({
     </Grid>
   );
 }
-
-const pieceCodes = [
-  "wP",
-  "wB",
-  "wN",
-  "wR",
-  "wQ",
-  "wK",
-  "bP",
-  "bB",
-  "bN",
-  "bR",
-  "bQ",
-  "bK",
-] as const satisfies Piece[];

src/components/board/states.ts

@@ -1,4 +1,8 @@
 import { atomWithStorage } from "jotai/utils";
+import { PIECE_SETS } from "./constants";
 
-export const pieceSetAtom = atomWithStorage("pieceSet", "cburnett");
+export const pieceSetAtom = atomWithStorage<(typeof PIECE_SETS)[number]>(
+  "pieceSet",
+  "maestro"
+);
 export const boardHueAtom = atomWithStorage("boardHue", 0);