diff --git a/public/board/8_bit.png b/public/board/8_bit.png new file mode 100644 index 00000000..f8fa08c5 Binary files /dev/null and b/public/board/8_bit.png differ diff --git a/public/board/bases.png b/public/board/bases.png new file mode 100644 index 00000000..52cfc381 Binary files /dev/null and b/public/board/bases.png differ diff --git a/public/board/blue.png b/public/board/blue.png new file mode 100644 index 00000000..d8983587 Binary files /dev/null and b/public/board/blue.png differ diff --git a/public/board/brown.png b/public/board/brown.png new file mode 100644 index 00000000..24cc7d19 Binary files /dev/null and b/public/board/brown.png differ diff --git a/public/board/bubblegum.png b/public/board/bubblegum.png new file mode 100644 index 00000000..9845f5ec Binary files /dev/null and b/public/board/bubblegum.png differ diff --git a/public/board/burled_wood.png b/public/board/burled_wood.png new file mode 100644 index 00000000..32f1172d Binary files /dev/null and b/public/board/burled_wood.png differ diff --git a/public/board/dark_wood.png b/public/board/dark_wood.png new file mode 100644 index 00000000..7af0d131 Binary files /dev/null and b/public/board/dark_wood.png differ diff --git a/public/board/dash.png b/public/board/dash.png new file mode 100644 index 00000000..1f5867ac Binary files /dev/null and b/public/board/dash.png differ diff --git a/public/board/glass.png b/public/board/glass.png new file mode 100644 index 00000000..e77c6065 Binary files /dev/null and b/public/board/glass.png differ diff --git a/public/board/graffiti.png b/public/board/graffiti.png new file mode 100644 index 00000000..811f8a4c Binary files /dev/null and b/public/board/graffiti.png differ diff --git a/public/board/green.png b/public/board/green.png new file mode 100644 index 00000000..5ba33e68 Binary files /dev/null and b/public/board/green.png differ diff --git a/public/board/icy_sea.png b/public/board/icy_sea.png new file mode 100644 index 00000000..69c877a0 Binary files /dev/null and b/public/board/icy_sea.png differ diff --git a/public/board/light.png b/public/board/light.png new file mode 100644 index 00000000..7d121ead Binary files /dev/null and b/public/board/light.png differ diff --git a/public/board/lolz.png b/public/board/lolz.png new file mode 100644 index 00000000..357da45f Binary files /dev/null and b/public/board/lolz.png differ diff --git a/public/board/marble.png b/public/board/marble.png new file mode 100644 index 00000000..236c7a3f Binary files /dev/null and b/public/board/marble.png differ diff --git a/public/board/metal.png b/public/board/metal.png new file mode 100644 index 00000000..71457aab Binary files /dev/null and b/public/board/metal.png differ diff --git a/public/board/neon.png b/public/board/neon.png new file mode 100644 index 00000000..92c3b818 Binary files /dev/null and b/public/board/neon.png differ diff --git a/public/board/newspaper.png b/public/board/newspaper.png new file mode 100644 index 00000000..22f6ed27 Binary files /dev/null and b/public/board/newspaper.png differ diff --git a/public/board/orange.png b/public/board/orange.png new file mode 100644 index 00000000..4194e555 Binary files /dev/null and b/public/board/orange.png differ diff --git a/public/board/overlay.png b/public/board/overlay.png new file mode 100644 index 00000000..52c79a62 Binary files /dev/null and b/public/board/overlay.png differ diff --git a/public/board/parchment.png b/public/board/parchment.png new file mode 100644 index 00000000..89c6ab95 Binary files /dev/null and b/public/board/parchment.png differ diff --git a/public/board/purple.png b/public/board/purple.png new file mode 100644 index 00000000..1c433e48 Binary files /dev/null and b/public/board/purple.png differ diff --git a/public/board/red.png b/public/board/red.png new file mode 100644 index 00000000..d60555e4 Binary files /dev/null and b/public/board/red.png differ diff --git a/public/board/sand.png b/public/board/sand.png new file mode 100644 index 00000000..208c0777 Binary files /dev/null and b/public/board/sand.png differ diff --git a/public/board/sky.png b/public/board/sky.png new file mode 100644 index 00000000..6bc2f629 Binary files /dev/null and b/public/board/sky.png differ diff --git a/public/board/stone.png b/public/board/stone.png new file mode 100644 index 00000000..5d8646b4 Binary files /dev/null and b/public/board/stone.png differ diff --git a/public/board/tan.png b/public/board/tan.png new file mode 100644 index 00000000..4658539b Binary files /dev/null and b/public/board/tan.png differ diff --git a/public/board/tournament.png b/public/board/tournament.png new file mode 100644 index 00000000..03dbd00f Binary files /dev/null and b/public/board/tournament.png differ diff --git a/public/board/translucent.png b/public/board/translucent.png new file mode 100644 index 00000000..c7cf7e15 Binary files /dev/null and b/public/board/translucent.png differ diff --git a/public/board/walnut.png b/public/board/walnut.png new file mode 100644 index 00000000..9b8eb02c Binary files /dev/null and b/public/board/walnut.png differ diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx index 40cf5ca5..0a8bf5da 100644 --- a/src/components/board/index.tsx +++ b/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(null); const [moveClickTo, setMoveClickTo] = useState(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 ( diff --git a/src/components/board/states.ts b/src/components/board/states.ts index a2065f9b..e27a9e52 100644 --- a/src/components/board/states.ts +++ b/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); diff --git a/src/constants.ts b/src/constants.ts index b1cb0701..72144f95 100644 --- a/src/constants.ts +++ b/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[]; diff --git a/src/sections/engineSettings/engineSettingsDialog.tsx b/src/sections/engineSettings/engineSettingsDialog.tsx index 6b76f532..0d59d9c4 100644 --- a/src/sections/engineSettings/engineSettingsDialog.tsx +++ b/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) { + + Board set + + + + + Piece set