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);

src/components/slider.tsx

@@ -1,4 +1,9 @@
-import { Grid2 as Grid, Slider as MuiSlider, Typography } from "@mui/material";
+import {
+  Grid2 as Grid,
+  Slider as MuiSlider,
+  styled,
+  Typography,
+} from "@mui/material";
 
 export interface Props {
   value: number;
@@ -28,11 +33,16 @@ export default function Slider({
       alignItems="center"
       size={size ?? 11}
     >
-      <Typography id={`input-${label}`} textAlign="left" width="100%">
+      <Typography
+        id={`input-${label}`}
+        textAlign="left"
+        width="100%"
+        variant="body2"
+      >
         {step === 1 && marksFilter ? label : `${label}: ${value}`}
       </Typography>
 
-      <MuiSlider
+      <CustomSlider
         min={min}
         max={max}
         marks={
@@ -52,3 +62,15 @@ export default function Slider({
     </Grid>
   );
 }
+
+const CustomSlider = styled(MuiSlider)(() => ({
+  ".MuiSlider-markLabel": {
+    fontSize: "0.8rem",
+    lineHeight: "0.8rem",
+  },
+  ".MuiSlider-thumb": {
+    width: "18px",
+    height: "18px",
+  },
+  marginBottom: "1rem",
+}));