Integrated Stockfish wasm

apps/client/src/components/Timer.tsx

@@ -0,0 +1,46 @@
+import { cn } from "../utils/cn";
+
+interface TimerType {
+	side: "w" | "b";
+	whiteDisplayTime: number;
+	blackDisplayTime: number;
+	currentTurn: "w" | "b";
+	playerName: string | undefined;
+}
+
+export function Timer({
+	side,
+	blackDisplayTime,
+	whiteDisplayTime,
+	currentTurn,
+	playerName = "Random Player",
+}: TimerType) {
+	const isActive = side === currentTurn;
+	const displayTime = side === "w" ? whiteDisplayTime : blackDisplayTime;
+	return (
+		<div className="m-2 flex items-center justify-between rounded-lg border border-[#424A35]/30 bg-[#20201E] p-3">
+			<div className="flex items-center gap-2">
+				<span className="material-symbols-outlined">person</span>
+				<span className="text-lg text-[#E5E2DE]">{playerName}</span>
+			</div>
+
+			<div
+				className={cn(
+					"rounded border border-[#424A35] bg-[#2A2A28] px-4 py-2 text-[#E5E2DE]",
+					{ "bg-[#8cdd12] text-[#203600]": isActive },
+				)}
+			>
+				<span className={cn("font-mono text-lg font-semibold")}>
+					{formatTime(displayTime)}
+				</span>
+			</div>
+		</div>
+	);
+}
+
+function formatTime(ms: number) {
+	const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+	const minutes = Math.floor(totalSeconds / 60);
+	const seconds = totalSeconds % 60;
+	return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}

apps/client/src/components/chessSidebar.tsx

@@ -0,0 +1,59 @@
+import type { GameOverInfo } from "@chesslab/shared/types";
+
+export default function SideBar({
+	gameHistory,
+	gameOverInfo,
+}: {
+	gameHistory: string[] | undefined;
+	gameOverInfo: GameOverInfo | undefined;
+}) {
+	return (
+		<div className="fixed top-0 right-0 hidden h-full w-120 border-l border-[#424A35] bg-[#1C1C1A] p-4 sm:block">
+			{gameOverInfo && (
+				<div className="mb-4 rounded-lg border border-[#424A35] bg-[#20201E] p-4">
+					<h2 className="mb-2 text-lg font-semibold text-[#E5E2DE]">
+						Game Over
+					</h2>
+					<p className="text-[#E5E2DE]">
+						Reason: {gameOverInfo.reason}
+					</p>
+					<p className="text-[#E5E2DE]">
+						Winner:{" "}
+						{gameOverInfo.winner === "d"
+							? "Draw"
+							: gameOverInfo.winner === "w"
+								? "White"
+								: "Black"}
+					</p>
+				</div>
+			)}
+
+			{gameHistory && (
+				<table className="w-full table-fixed text-sm">
+					<tbody>
+						{Array(Math.ceil(gameHistory.length / 2))
+							.fill(undefined)
+							.map((_, row) => (
+								<tr
+									key={row}
+									className="border-b border-zinc-800 hover:bg-zinc-800/50"
+								>
+									<td className="w-10 py-1 text-center text-zinc-500">
+										{row + 1}.
+									</td>
+
+									<td className="px-3 py-1 font-medium">
+										{gameHistory[row * 2]}
+									</td>
+
+									<td className="px-3 py-1 font-medium">
+										{gameHistory[row * 2 + 1] ?? ""}
+									</td>
+								</tr>
+							))}
+					</tbody>
+				</table>
+			)}
+		</div>
+	);
+}

apps/client/src/hooks/useStockfish.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import stockfish from "../stockfish/stockfish";
+import type { Chess } from "chess.js";
+
+export default function useStockfish({
+	chessGame,
+	turn,
+	stockfishSide,
+	onMove,
+}: {
+	chessGame: Chess;
+	turn: "w" | "b";
+	stockfishSide: "w" | "b";
+	onMove: () => void;
+}) {
+	useEffect(() => {
+		stockfish.postMessage("uci");
+		stockfish.postMessage("isready");
+		stockfish.postMessage("ucinewgame");
+
+		stockfish.onmessage = (e) => {
+			const message = e.data;
+			if (message.startsWith("bestmove")) {
+				const parts = message.split(" ");
+				const bestMove = parts[1];
+				if (bestMove && bestMove !== "(none)") {
+					try {
+						if (chessGame.isGameOver()) return;
+						chessGame.move({
+							from: bestMove.substring(0, 2),
+							to: bestMove.substring(2, 4),
+							promotion: bestMove.charAt(4) || "q",
+						});
+						onMove();
+					} catch (err) {
+						console.error("Error applying Stockfish move:", err);
+					}
+				}
+			}
+		};
+
+		return () => {
+			stockfish.postMessage("stop");
+			stockfish.onmessage = null;
+		};
+	}, [chessGame, onMove]);
+
+	useEffect(() => {
+		if (turn === stockfishSide && !chessGame.isGameOver()) {
+			stockfish.postMessage(`position fen ${chessGame.fen()}`);
+			stockfish.postMessage("go depth 15");
+		}
+	}, [turn, chessGame, stockfishSide]);
+}

apps/client/src/hooks/useTimer.tsx

@@ -0,0 +1,34 @@
+import type { GameOverInfo } from "@chesslab/shared/types";
+import { useEffect, useState } from "react";
+
+export default function useTimer({
+	turn,
+	gameOverInfo,
+}: {
+	turn: "w" | "b";
+	gameOverInfo: GameOverInfo | undefined;
+}) {
+	const [whiteDisplayTime, setWhiteDisplayTime] = useState(600_000);
+	const [blackDisplayTime, setBlackDisplayTime] = useState(600_000);
+
+	useEffect(() => {
+		if (gameOverInfo) return;
+		let interval: NodeJS.Timeout | null = null;
+
+		if (turn === "w") {
+			interval = setInterval(() => {
+				setWhiteDisplayTime((prev) => Math.max(0, prev - 1000));
+			}, 1000);
+		} else {
+			interval = setInterval(() => {
+				setBlackDisplayTime((prev) => Math.max(0, prev - 1000));
+			}, 1000);
+		}
+
+		return () => {
+			if (interval) clearInterval(interval);
+		};
+	}, [turn, gameOverInfo]);
+
+	return { whiteDisplayTime, blackDisplayTime };
+}

apps/client/src/pages/computerGame.tsx

@@ -2,74 +2,110 @@ import {
 	type ChessboardOptions,
 	type PieceDropHandlerArgs,
 } from "react-chessboard";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { Chess } from "chess.js";
 import ChessBoard from "../components/chessBoard";
+import useStockfish from "../hooks/useStockfish";
+import useTimer from "../hooks/useTimer";
+import { Timer } from "../components/Timer";
+import SideBar from "../components/chessSidebar";
+import type { GameOverInfo } from "@chesslab/shared/types";
 
 export default function ComputerChessBoard() {
-	// create a chess game using a ref to always have access to the latest game state within closures and maintain the game state across renders
-	const chessGameRef = useRef(new Chess());
-
-	// track the current position of the chess game in state to trigger a re-render of the chessboard
+	const [chessGame] = useState(() => new Chess());
 	const [chessPosition, setChessPosition] = useState(() => new Chess().fen());
-	// make a random "CPU" move
-	function makeRandomMove() {
-		// get all possible moves`
-		const possibleMoves = chessGameRef.current.moves();
-
-		// exit if the game is over
-		if (
-			chessGameRef.current.isGameOver() ||
-			chessGameRef.current.turn() !== "b"
-		) {
-			return;
-		}
+	const [turn, setTurn] = useState<"w" | "b">("w");
+	const [gameHistory, setGameHistory] = useState<string[]>([]);
+	const gameOverInfo = getGameOverInfo(chessGame);
+	const [side] = useState<"w" | "b">(() => (Math.random() < 0.5 ? "w" : "b"));
 
-		// pick a random move
-		const randomMove =
-			possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
+	const { whiteDisplayTime, blackDisplayTime } = useTimer({
+		turn,
+		gameOverInfo,
+	});
 
-		// make the move
-		chessGameRef.current.move(randomMove!);
+	useStockfish({
+		chessGame,
+		turn,
+		stockfishSide: side === "w" ? "b" : "w",
+		onMove: () => {
+			setChessPosition(chessGame.fen());
+			setTurn(chessGame.turn());
+			setGameHistory(chessGame.history());
+		},
+	});
 
-		// update the position state
-		setChessPosition(chessGameRef.current.fen());
-	}
-
-	// handle piece drop
 	function onPieceDrop({ sourceSquare, targetSquare }: PieceDropHandlerArgs) {
-		// type narrow targetSquare potentially being null (e.g. if dropped off board)
-		if (!targetSquare || chessGameRef.current.turn() !== "w") {
+		if (chessGame.isGameOver()) return false;
+
+		if (!targetSquare) {
 			return false;
 		}
+
 		try {
-			chessGameRef.current.move({
+			const move = chessGame.move({
 				from: sourceSquare,
 				to: targetSquare,
-				promotion: "q", // always promote to a queen for example simplicity
+				promotion: "q",
 			});
 
-			setChessPosition(chessGameRef.current.fen());
+			if (!move) return false;
 
-			setTimeout(makeRandomMove, 500);
+			setChessPosition(chessGame.fen());
+			setTurn(chessGame.turn());
+			setGameHistory(chessGame.history());
 
 			return true;
 		} catch {
-			// return false as the move was not successful
 			return false;
 		}
 	}
 
 	const chessboardOptions: ChessboardOptions = {
-		position: chessPosition,
+		position: chessPosition!,
 		onPieceDrop,
-		id: "play-vs-random",
-		//boardOrientation: color,
+		boardOrientation: side === "w" ? "white" : "black",
 	};
 
 	return (
-		<>
+		<div className="grid h-full grid-rows-[auto_minmax(0,1fr)_auto] bg-[#131312] sm:mr-120">
+			<Timer
+				side={side === "w" ? "b" : "w"}
+				blackDisplayTime={blackDisplayTime}
+				whiteDisplayTime={whiteDisplayTime}
+				currentTurn={turn}
+				playerName="Stockfish"
+			/>
 			<ChessBoard chessboardOptions={chessboardOptions} />
-		</>
+			<Timer
+				currentTurn={turn}
+				side={side}
+				blackDisplayTime={blackDisplayTime}
+				whiteDisplayTime={whiteDisplayTime}
+				playerName="Player"
+			/>
+			<SideBar gameHistory={gameHistory} gameOverInfo={gameOverInfo} />
+		</div>
 	);
 }
+
+function getGameOverInfo(chess: Chess): GameOverInfo | undefined {
+	if (!chess.isGameOver()) return undefined;
+
+	if (chess.isCheckmate()) {
+		return {
+			reason: "Checkmate",
+			winner: chess.turn() === "w" ? "b" : "w",
+		};
+	} else if (chess.isStalemate()) {
+		return { reason: "Stalemate", winner: "d" };
+	} else if (chess.isInsufficientMaterial()) {
+		return { reason: "Insufficient Material", winner: "d" };
+	} else if (chess.isThreefoldRepetition()) {
+		return { reason: "Threefold Repetition", winner: "d" };
+	} else if (chess.isDrawByFiftyMoves()) {
+		return { reason: "Fifty-Move Rule", winner: "d" };
+	} else {
+		return { reason: "Draw", winner: "d" };
+	}
+}