Bot opponents and matchmaking

.gitignore

@@ -43,6 +43,7 @@ Thumbs.db
 .next
 .nx/cache
 .nx/workspace-data
+.nyc_output
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
 

.nycrc.json

@@ -0,0 +1,5 @@
+{
+  "report-dir": "coverage",
+  "temp-dir": ".nyc_output",
+  "reporter": ["html", "json-summary", "text"]
+}

apps/node-chess/.env.example

@@ -23,6 +23,9 @@ EMAIL_PASS=testpass
 GOOGLE_OAUTH_CLIENT_SECRET=foo
 GOOGLE_OAUTH_CLIENT_ID=bar
 
+# LLM Configuration
+GEMINI_API_KEY=your_gemini_api_key_here
+
 WEB_APP_URL=http://localhost:4200
 
 APP_PORT=5000

apps/node-chess/src/Server.ts

@@ -21,7 +21,7 @@ const start = (app: App, appConfig: AppConfig): ServerType => {
   });
 
   app.init().catch((err) => {
-    logger.error('Failed to initialize app:', err);
+    logger.error(err, 'Failed to initialize app');
     process.exit(1);
   });
 

apps/node-chess/src/config/model/AppConfig.ts

@@ -1,3 +1,4 @@
+import { LlmConfig } from '@michess/api-service';
 import { EmailConfig } from '@michess/infra-email';
 
 export type AppConfig = {
@@ -22,4 +23,5 @@ export type AppConfig = {
       clientSecret: string;
     };
   };
+  llm: LlmConfig;
 };

apps/node-chess/src/config/service/AppConfigService.ts

@@ -56,6 +56,9 @@ const getConfig = (): AppConfig => {
         clientSecret: readEnvStrict('GOOGLE_OAUTH_CLIENT_SECRET'),
       },
     },
+    llm: {
+      geminiApiKey: readEnvStrict('GEMINI_API_KEY'),
+    },
   };
 };
 

apps/node-chess/src/main.ts

@@ -22,7 +22,13 @@ const main = async () => {
   );
 
   const repos = Repositories.from(pgClient, redis);
-  const api = Api.from(repos, pgClient, emailClient, appConfig.auth);
+  const api = Api.from(
+    repos,
+    pgClient,
+    emailClient,
+    appConfig.auth,
+    appConfig.llm,
+  );
   const app = App.from(api, redis, { cors: appConfig.cors });
 
   Server.start(app, appConfig);

apps/web-chess/project.json

@@ -58,7 +58,7 @@
       }
     },
     "test": {
-      "executor": "@nx/vite:test",
+      "executor": "@nx/vitest:test",
       "outputs": ["{options.reportsDirectory}"],
       "options": {
         "reportsDirectory": "../../coverage/apps/web-chess"

apps/web-chess/src/app/api/Api.ts

@@ -2,13 +2,15 @@ import { AuthClient } from './infra/AuthClient';
 import { RestClient } from './infra/RestClient';
 import { SocketClient } from './infra/SocketClient';
 import { AuthService } from './service/AuthService';
+import { BotService } from './service/BotService';
 import { GameService } from './service/GameService';
 import { MetricsService } from './service/MetricsService';
 
 export type Api = {
   games: GameService;
   auth: AuthService;
   metrics: MetricsService;
+  bots: BotService;
 };
 
 export const Api = {
@@ -20,10 +22,12 @@ export const Api = {
     const auth = new AuthService(authClient, socketClient);
     const games = new GameService(restClient, socketClient, auth);
     const metrics = new MetricsService(restClient, socketClient);
+    const bots = new BotService(restClient);
     return {
       games,
       auth,
       metrics,
+      bots,
     };
   },
 };

apps/web-chess/src/app/api/service/BotService.ts

@@ -0,0 +1,10 @@
+import { BotInfoV1 } from '@michess/api-schema';
+import { RestClient } from '../infra/RestClient';
+
+export class BotService {
+  constructor(private restClient: RestClient) {}
+
+  async listBots(): Promise<BotInfoV1[]> {
+    return this.restClient.get('bots').json();
+  }
+}

apps/web-chess/src/app/api/service/GameService.ts

@@ -139,6 +139,61 @@ export class GameService {
     return response;
   }
 
+  async challengeBot(params: {
+    botId: string;
+    timeControl: { initialSec: number; incrementSec: number };
+  }): Promise<GameDetailsV1> {
+    const response = await this.restClient
+      .post<GameDetailsV1>('games/challenge', {
+        json: {
+          opponentId: params.botId,
+          variant: 'standard',
+          timeControl: {
+            type: 'realtime',
+            initialSec: params.timeControl.initialSec,
+            incrementSec: params.timeControl.incrementSec,
+          },
+        },
+      })
+      .json();
+    return response;
+  }
+
+  async joinMatchmakingQueue(params: {
+    timeControl: { initialSec: number; incrementSec: number };
+  }): Promise<void> {
+    await this.restClient
+      .post('matchmaking/join', {
+        json: {
+          variant: 'standard',
+          timeControl: {
+            type: 'realtime',
+            initialSec: params.timeControl.initialSec,
+            incrementSec: params.timeControl.incrementSec,
+          },
+        },
+      })
+      .json();
+  }
+
+  async leaveMatchmakingQueue(): Promise<void> {
+    await this.restClient.delete('matchmaking/leave').json();
+  }
+
+  observeMatchFound(): Observable<string> {
+    return {
+      subscribe: (callback) => {
+        const handler = (data: { gameId: string }) => {
+          callback(data.gameId);
+        };
+        this.socketClient.on('match-found', handler);
+        return () => {
+          this.socketClient.off('match-found', handler);
+        };
+      },
+    };
+  }
+
   async getLobbyGames(page: number) {
     const queryParams = new URLSearchParams({
       page: page.toString(),
@@ -166,6 +221,10 @@ export class GameService {
     gameId: string,
     side?: 'white' | 'black' | 'spectator',
   ): Promise<PlayerGameViewModel> {
+    this.leaveMatchmakingQueue().catch(() => {
+      // Ignore errors if not in queue
+    });
+
     const authState = await this.auth.getSession();
     const response = await this.socketClient.emitWithAck('join-game', {
       gameId,

apps/web-chess/src/app/features/game/RemoteGameContainer.tsx

@@ -38,6 +38,8 @@ export const RemoteGameContainer = ({
     gameState;
   orientation = playerSide !== 'spectator' ? playerSide : orientation;
 
+  const isGameInProgress =
+    gameState.status === 'IN_PROGRESS' || gameState.status === 'READY';
   const blackPlayer = { ...players.black, color: Color.Black };
   const whitePlayer = { ...players.white, color: Color.White };
   const currentOrientation = orientation || Color.White;
@@ -67,6 +69,7 @@ export const RemoteGameContainer = ({
               color={topPlayer.color}
               rating={topPlayer?.rating}
               ratingDiff={topPlayer?.ratingDiff}
+              isGameInProgress={isGameInProgress}
               isPlayerTurn={chessboard.position.turn === topPlayer.color}
               isLoading={isLoadingInitial}
             />
@@ -95,6 +98,7 @@ export const RemoteGameContainer = ({
               color={bottomPlayer.color}
               rating={bottomPlayer?.rating}
               ratingDiff={bottomPlayer?.ratingDiff}
+              isGameInProgress={isGameInProgress}
               isPlayerTurn={chessboard.position.turn === bottomPlayer.color}
               isLoading={isLoadingInitial}
             />

apps/web-chess/src/app/features/game/components/PlayerInfo.tsx

@@ -15,6 +15,7 @@ type PlayerInfoProps = {
   isLoading?: boolean;
   clock?: CountdownClock;
   rating?: string;
+  isGameInProgress?: boolean;
   ratingDiff?: string;
 };
 
@@ -27,6 +28,7 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
   isPlayerTurn = false,
   clock,
   rating,
+  isGameInProgress,
   ratingDiff,
   isLoading,
 }) => {
@@ -102,13 +104,15 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
               </Badge>
             </Skeleton>
             <Skeleton loading={isLoading}>
-              <Text
-                size="2"
-                weight={isPlayerTurn ? 'bold' : 'medium'}
-                color={isPlayerTurn ? 'amber' : 'gray'}
-              >
-                {isPlayerTurn ? 'Turn to play' : 'Waiting'}
-              </Text>
+              {isGameInProgress && (
+                <Text
+                  size="2"
+                  weight={isPlayerTurn ? 'bold' : 'medium'}
+                  color={isPlayerTurn ? 'amber' : 'gray'}
+                >
+                  {isPlayerTurn ? 'Turn to play' : 'Waiting'}
+                </Text>
+              )}
             </Skeleton>
           </Flex>
         </Flex>

apps/web-chess/src/app/features/game/hooks/usePeekBoardState.ts

@@ -1,4 +1,4 @@
-import { Chessboard } from '@michess/core-game';
+import { Chessboard } from '@michess/core-board';
 import { useState } from 'react';
 import { PeekActions } from '../model/PeekHandlers';
 

apps/web-chess/src/app/features/game/hooks/useRemoteGame.ts

@@ -1,7 +1,6 @@
 import { GameActionOptionV1 } from '@michess/api-schema';
 import { Maybe } from '@michess/common-utils';
-import { ChessPosition, Move } from '@michess/core-board';
-import { Chessboard } from '@michess/core-game';
+import { Chessboard, ChessPosition, Move } from '@michess/core-board';
 import { MovePayload } from '@michess/react-chessboard';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useMemo } from 'react';

apps/web-chess/src/app/features/lobby/__tests__/GameLobby.spec.tsx

@@ -62,7 +62,7 @@ describe('GameLobby', () => {
           items: [
             {
               id: 'game-1',
-              opponent: { name: 'Alice', id: 'alice-id' },
+              opponent: { name: 'Alice', id: 'alice-id', isBot: false },
               availableColor: 'white',
               variant: 'standard',
               createdAt: new Date().toISOString(),

apps/web-chess/src/app/features/lobby/components/CreateGameForm.tsx

@@ -3,7 +3,7 @@ import { Button, Flex, SegmentedControl, Switch, Text } from '@radix-ui/themes';
 import { FC, useState } from 'react';
 import { CreateGameInput } from '../../../api/model/CreateGameInput';
 import { Alert } from '../../../components/Alert';
-import { TimeControlRadioCards } from './TimeControlRadioGroup';
+import { TimeControlRadioCards } from '../../play/components/TimeControlRadioCards';
 
 type Props = {
   onSubmit: (formInput: CreateGameInput) => void;

apps/web-chess/src/app/features/play/PlayCard.tsx

@@ -0,0 +1,88 @@
+import { Maybe } from '@michess/common-utils';
+import { Button, Card, Flex, Heading } from '@radix-ui/themes';
+import { useState } from 'react';
+import { Alert } from '../../components/Alert';
+import { BotSelector } from './components/BotSelector';
+import { OpponentTypeSelector } from './components/OpponentTypeSelector';
+import { TimeControlSelector } from './components/TimeControlSelector';
+
+type TimeControlStr = `${number}|${number}`;
+type OpponentType = 'random' | 'bot';
+
+type Props = {
+  onPlay?: (params: {
+    timeControl: TimeControlStr;
+    opponentType: OpponentType;
+    botId?: string;
+  }) => void;
+  onCancel?: () => void;
+  error?: Maybe<string>;
+  loading?: boolean;
+  isInQueue?: boolean;
+};
+
+export const PlayCard = ({
+  onPlay,
+  onCancel,
+  error,
+  loading,
+  isInQueue,
+}: Props) => {
+  const [timeControl, setTimeControl] = useState<TimeControlStr>('3|2');
+  const [opponentType, setOpponentType] = useState<OpponentType>('random');
+  const [botId, setBotId] = useState<string | undefined>(undefined);
+
+  const handlePlay = () => {
+    onPlay?.({
+      timeControl,
+      opponentType,
+      botId: opponentType === 'bot' ? botId : undefined,
+    });
+  };
+
+  return (
+    <Card size="3" style={{ padding: '24px' }}>
+      <Flex direction="column" gap="4">
+        <Heading size="4" weight="medium">
+          Play
+        </Heading>
+
+        <Alert text={error} />
+
+        <Flex align="center">
+          <TimeControlSelector value={timeControl} onChange={setTimeControl} />
+        </Flex>
+
+        <OpponentTypeSelector value={opponentType} onChange={setOpponentType} />
+
+        {opponentType === 'bot' && (
+          <BotSelector value={botId} onChange={setBotId} />
+        )}
+
+        <Flex align="center">
+          {isInQueue ? (
+            <Button
+              size="2"
+              onClick={onCancel}
+              variant="soft"
+              color="red"
+              style={{ minWidth: '120px' }}
+            >
+              Cancel
+            </Button>
+          ) : (
+            <Button
+              size="2"
+              onClick={handlePlay}
+              disabled={opponentType === 'bot' && !botId}
+              loading={loading}
+              style={{ minWidth: '120px' }}
+            >
+              {loading ? 'Finding opponent...' : 'Play'}
+            </Button>
+          )}
+        </Flex>
+      </Flex>
+    </Card>
+  );
+};