user can choose a difficulty level when playing stockfish

apps/client/src/components/chessSidebar.tsx

@@ -1,12 +1,15 @@
 import type { GameStateEvent } from "@chesslab/shared/types";
+import type { DifficultyKey } from "@constants/stockfish";
+import { difficulties } from "@constants/stockfish";
 
-export default function SideBar({
-	opponent,
-	gameState,
-}: {
+interface SideBarProps {
 	opponent: string | undefined;
 	gameState: GameStateEvent | undefined;
-}) {
+	setDifficulty?: React.Dispatch<React.SetStateAction<DifficultyKey>>;
+	difficulty?: DifficultyKey;
+}
+
+export default function SideBar({ opponent, gameState, setDifficulty, difficulty }: SideBarProps) {
 	return (
 		<div className="fixed top-0 right-0 h-full w-120 border-l border-[#424A35] bg-[#1C1C1A] p-4">
 			<div>
@@ -27,6 +30,20 @@ export default function SideBar({
 					</div>
 				)}
 			</div>
+			{setDifficulty && (
+				<div>
+					<select
+						value={difficulty}
+						onChange={(e) => setDifficulty(e.target.value as DifficultyKey)}
+					>
+						{Object.entries(difficulties).map(([key]) => (
+							<option key={key} value={key}>
+								{key}
+							</option>
+						))}
+					</select>
+				</div>
+			)}
 		</div>
 	);
 }

apps/client/src/constants/stockfish.ts

@@ -0,0 +1,8 @@
+export const difficulties = {
+	easy: { elo: 1320 },
+	medium: { elo: 1500 },
+	hard: { elo: 1900 },
+	expert: { elo: 2400 },
+} as const;
+
+export type DifficultyKey = keyof typeof difficulties;

apps/client/src/hooks/game/useComputerGame.ts

@@ -5,8 +5,9 @@ import { useState } from "react";
 import { getGameOverInfo } from "@chesslab/shared/utils";
 import { useCompTimer } from "./useCompTimer";
 import { playMoveSound } from "@services/sfx/index";
+import type { DifficultyKey } from "@constants/stockfish";
 
-export function useComputerGame() {
+export function useComputerGame({ difficulty }: { difficulty: DifficultyKey }) {
 	const [chessGame] = useState(() => new Chess());
 	const [chessPosition, setChessPosition] = useState(() => new Chess().fen());
 	const [turn, setTurn] = useState<"w" | "b">("w");
@@ -35,6 +36,7 @@ export function useComputerGame() {
 		turn,
 		stockfishSide: side === "w" ? "b" : "w",
 		isGameOver: !!gameOverInfo,
+		difficulty,
 		onMove: () => {
 			setChessPosition(chessGame.fen());
 			setTurn(chessGame.turn());

apps/client/src/hooks/game/useStockfish.ts

@@ -1,24 +1,31 @@
 import { useEffect } from "react";
 import stockfish from "@stockfish/stockfish";
 import type { Chess } from "chess.js";
+import { difficulties, type DifficultyKey } from "@constants/stockfish";
 
 export default function useStockfish({
 	chessGame,
 	turn,
 	stockfishSide,
 	isGameOver,
 	onMove,
+	difficulty,
 }: {
 	chessGame: Chess;
 	turn: "w" | "b";
 	stockfishSide: "w" | "b";
 	isGameOver: boolean;
 	onMove: () => void;
+	difficulty: DifficultyKey;
 }) {
 	useEffect(() => {
+		if (turn !== stockfishSide || isGameOver) return;
+
 		stockfish.postMessage("uci");
 		stockfish.postMessage("isready");
 		stockfish.postMessage("ucinewgame");
+		stockfish.postMessage("setoption name UCI_LimitStrength value true");
+		stockfish.postMessage(`setoption name UCI_Elo value ${difficulties[difficulty].elo}`);
 
 		stockfish.onmessage = (e) => {
 			const message = e.data;
@@ -45,12 +52,12 @@ export default function useStockfish({
 			stockfish.postMessage("stop");
 			stockfish.onmessage = null;
 		};
-	}, [chessGame, onMove, isGameOver]);
+	}, [chessGame, onMove, isGameOver, difficulty, stockfishSide, turn]);
 
 	useEffect(() => {
 		if (turn === stockfishSide && !isGameOver) {
 			stockfish.postMessage(`position fen ${chessGame.fen()}`);
-			stockfish.postMessage("go depth 15");
+			stockfish.postMessage("go depth 15 movetime 1000");
 		}
-	}, [turn, chessGame, stockfishSide, isGameOver]);
+	}, [turn, chessGame, stockfishSide, isGameOver, difficulty]);
 }

apps/client/src/pages/computerGame.tsx

@@ -2,16 +2,24 @@ import ChessBoard from "@components/chessBoard";
 import { Timer } from "@components/Timer";
 import SideBar from "@components/chessSidebar";
 import { useComputerGame } from "@hooks/game/useComputerGame";
+import { useState } from "react";
+import type { DifficultyKey } from "@constants/stockfish";
 
 export default function ComputerChessBoard() {
-	const { turn, side, timeMs, gameOverInfo, chessboardOptions } = useComputerGame();
+	const [difficulty, setDifficulty] = useState<DifficultyKey>("easy");
+	const { turn, side, timeMs, gameOverInfo, chessboardOptions } = useComputerGame({ difficulty });
 
 	return (
 		<div className="grid h-full grid-rows-[auto_minmax(0,1fr)_auto] bg-[#131312] sm:mr-120">
 			<Timer side={side === "w" ? "b" : "w"} currentTurn={turn} playerName="Stockfish" />
 			<ChessBoard chessboardOptions={chessboardOptions} />
 			<Timer currentTurn={turn} side={side} displayTime={timeMs} playerName="Player" />
-			<SideBar opponent={"Stockfish"} gameState={gameOverInfo} />
+			<SideBar
+				opponent={"Stockfish"}
+				gameState={gameOverInfo}
+				setDifficulty={setDifficulty}
+				difficulty={difficulty}
+			/>
 		</div>
 	);
 }

apps/client/tsconfig.json

@@ -22,7 +22,8 @@
 			"@stockfish/*": ["./src/stockfish/*"],
 			"@app-types/*": ["./src/types/*"],
 			"@utils/*": ["./src/utils/*"],
-			"@services/*": ["./src/services/*"]
+			"@services/*": ["./src/services/*"],
+			"@constants/*": ["./src/constants/*"]
 		}
 	},
 	"include": ["vite.config.ts", "src"]

apps/client/vite.config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
 			"@app-types": path.resolve(__dirname, "./src/types"),
 			"@utils": path.resolve(__dirname, "./src/utils"),
 			"@services": path.resolve(__dirname, "./src/services"),
+			"@constants": path.resolve(__dirname, "./src/constants"),
 		},
 	},
 	server: {