feat(web): handle ai game mode

apps/web/src/core/ai/ai.controller.ts

@@ -5,6 +5,7 @@ import type { RegisterLifecycleState } from "@quick-threejs/reactive";
 
 import { AI_WILL_PERFORM_MOVE_TOKEN } from "../../shared/tokens";
 import type { MessageEventPayload } from "../../shared/types";
+import { SupportedAiModel } from "@chess-d/ai";
 
 @singleton()
 export class AiController {
@@ -13,7 +14,7 @@ export class AiController {
 		MessageEventPayload<{ move: Move }>
 	>();
 	public readonly willPerformMove$ = fromEvent<
-		MessageEvent<MessageEventPayload<{ fen: string }>>
+		MessageEvent<MessageEventPayload<{ ai: SupportedAiModel; fen: string }>>
 	>(self, "message").pipe(
 		filter((message) => message.data.token === AI_WILL_PERFORM_MOVE_TOKEN)
 	);

apps/web/src/core/ai/ai.module.ts

@@ -20,6 +20,7 @@ export class AiModule implements Module, WorkerThreadModule {
 		this._subscriptions.push(
 			this.controller.willPerformMove$.subscribe((payload) => {
 				const move = this.service.handleWillPerformMove(
+					payload.data.value?.ai,
 					payload.data.value?.fen
 				);
 

apps/web/src/core/ai/ai.service.ts

@@ -1,20 +1,23 @@
+import { register, SupportedAiModel } from "@chess-d/ai";
 import { inject, singleton } from "tsyringe";
 import { Chess, validateFen } from "chess.js";
-import { AiModel } from "@chess-d/ai";
 
 @singleton()
 export class AiService {
-	constructor(
-		@inject(Chess) private readonly game: Chess,
-		@inject(AiModel) private readonly ai: AiModel
-	) {}
+	constructor(@inject(Chess) private readonly game: Chess) {}
+
+	public handleWillPerformMove = (ai?: SupportedAiModel, fen?: string) => {
+		if (!ai) return console.warn("Received invalid AI model");
 
-	public handleWillPerformMove = (fen?: string) => {
 		if (!fen || !validateFen(fen).ok)
 			return console.warn("AI received invalid FEN string");
 
 		this.game.load(fen);
+		const { container, model } = register(ai, this.game);
+		const move = model?.getMove(this.game.turn());
+
+		container.clearInstances();
 
-		return this.ai?.getMove(this.game.turn());
+		return move;
 	};
 }

apps/web/src/core/ai/ai.worker.ts

@@ -3,7 +3,6 @@ import "reflect-metadata";
 import { container } from "tsyringe";
 import { expose } from "threads/worker";
 import { Chess } from "chess.js";
-import { AiModel, register, SupportedAiModel } from "@chess-d/ai";
 import { ExposedAppModule } from "@quick-threejs/reactive/worker";
 
 import { AiModule } from "./ai.module";
@@ -13,9 +12,6 @@ const game = new Chess(
 );
 
 container.register(Chess, { useValue: game });
-container.register(AiModel, {
-	useValue: register(SupportedAiModel.zeyu, game)
-});
 
 const aiModule = container.resolve(AiModule);
 aiModule.init();

apps/web/src/routes/_components/main-menu/new-section-ai.component.tsx

@@ -3,11 +3,13 @@ import { FC } from "react";
 import { useNavigate } from "react-router";
 
 import { MainMenuSection } from "../../../shared/enum";
-import { useMainMenuStore } from "../../_stores";
+import { useGameStore, useMainMenuStore } from "../../_stores";
 
 export const NewGameAISection: FC = () => {
 	const navigate = useNavigate();
+
 	const { setSection } = useMainMenuStore();
+	const { reset: resetGame } = useGameStore();
 
 	const renderSupportedAiModels = () => {
 		return Object.keys(SupportedAiModel)
@@ -24,12 +26,13 @@ export const NewGameAISection: FC = () => {
 		const formData = new FormData(event.currentTarget);
 
 		const aiOpponent = formData.get("select-ai") as
-			| keyof SupportedAiModel
+			| keyof typeof SupportedAiModel
 			| null;
 
 		if (!aiOpponent || SupportedAiModel[aiOpponent] === undefined) return;
 
 		navigate(`/play?mode=ai&ai=${aiOpponent}`);
+		resetGame();
 	};
 
 	return (

apps/web/src/routes/_hooks/index.ts

@@ -1,3 +1 @@
-export * from "./use-ai.hook";
-export * from "./use-game.hook";
 export * from "./use-socket.hook";