first commit

components/draughts/game/computer/use-draughts-computer.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import { useDraughtsSettings } from '../../settings/DraughtsSettingsContext';
+import { useDraughtsBoard } from '../../board/DraughtsBoardContext';
+import { GameStates } from '@draughts/core';
+
+export function useDraughtsComputer() {
+  const { board, doMove } = useDraughtsBoard();
+  const { userPlayer, computerDifficulty } = useDraughtsSettings();
+
+  const workerRef = useRef();
+  useEffect(() => {
+    if (board.state !== GameStates.PLAYING) return;
+    if (board.playerToMove === userPlayer) return;
+
+    workerRef.current = new Worker(new URL('worker.js', import.meta.url));
+
+    const handleWorkerMessage = (event) => {
+      doMove(event.data);
+    };
+
+    workerRef.current.addEventListener('message', handleWorkerMessage);
+    workerRef.current.postMessage({ board, computerDifficulty });
+
+    return () => {
+      workerRef.current.removeEventListener('message', handleWorkerMessage);
+      workerRef.current.terminate();
+    };
+  }, [board, userPlayer, computerDifficulty, doMove]);
+
+  return null;
+}

components/draughts/game/computer/worker.js

@@ -0,0 +1,40 @@
+import { ComputerDifficulty } from '../../settings/constants/computer-difficulty';
+import { alphaBetaMove } from '@draughts/computer';
+import { Board } from '@draughts/core';
+
+const getRandomMove = (board) => {
+  return board.moves.at(Math.floor(Math.random() * board.moves.length));
+};
+
+const getComputerMove = (board, difficulty) => {
+  if (difficulty === ComputerDifficulty.MEDIUM) {
+    return alphaBetaMove(board, 3);
+  }
+  if (difficulty === ComputerDifficulty.HARD) {
+    return alphaBetaMove(board, 6);
+  }
+  return getRandomMove(board);
+};
+
+const getComputerTimeout = (board) => {
+  return 200 + board.moves.length * Math.floor(Math.random() * 200);
+};
+
+addEventListener('message', (event) => {
+  const startTime = Date.now();
+
+  const board = new Board(
+    event.data.board.position,
+    event.data.board.playerToMove,
+    event.data.board.firstMove
+  );
+  const move = getComputerMove(board, event.data.computerDifficulty);
+
+  const endTime = Date.now();
+  const elapsedTime = startTime - endTime;
+  const waitTime = Math.max(0, getComputerTimeout(board) - elapsedTime);
+
+  setTimeout(() => {
+    postMessage(move);
+  }, waitTime);
+});