Fix RPS game complete bug, and add number of rounds support

Author: chrisreddington

mcp-server/tsconfig.json

@@ -15,5 +15,5 @@
     "allowSyntheticDefaultImports": true
   },
   "include": ["src/**/*"],
-  "exclude": ["dist", "node_modules"]
+  "exclude": ["dist", "node_modules", "**/*.test.ts", "**/*.test.tsx"]
 }

shared/src/games/rock-paper-scissors.ts

@@ -211,18 +211,19 @@ export class RockPaperScissorsGame implements Game<RPSGameState, RPSMove> {
    * Creates the initial game state for a new rock-paper-scissors game
    * 
    * @param players - Array of exactly 2 players
-   * @returns Initial RPSGameState set up for a best-of-3 match
+   * @param options - Optional configuration including maxRounds
+   * @returns Initial RPSGameState set up for a configurable number of rounds
    * 
    * @description
    * Sets up a new game with:
-   * - 3 empty rounds (best-of-3 format)
+   * - Configurable number of rounds (default: 3 for best-of-3 format)
    * - All scores initialized to 0
    * - First player goes first
    * - Game status set to 'playing'
    * - Current round set to 0
    */
-  getInitialState(players: Player[], options?: any): RPSGameState {
-    const maxRounds = 3; // Best of 3
+  getInitialState(players: Player[], options?: { maxRounds?: number }): RPSGameState {
+    const maxRounds = options?.maxRounds || 3; // Default to best of 3
     const rounds = Array.from({ length: maxRounds }, () => ({}));
 
     const scores: Record<string, number> = {};

web/src/app/api/games/rock-paper-scissors/route.ts

@@ -8,14 +8,14 @@ const rpsGame = new RockPaperScissorsGame()
 
 export async function POST(request: NextRequest) {
   try {
-    const { playerName, gameId, aiDifficulty } = await request.json()
+    const { playerName, gameId, aiDifficulty, maxRounds } = await request.json()
 
     const players: Player[] = [
       { id: 'player1', name: playerName || 'Player', isAI: false },
       { id: 'ai', name: 'AI', isAI: true }
     ]
 
-    const gameState = rpsGame.getInitialState(players)
+    const gameState = rpsGame.getInitialState(players, { maxRounds })
 
     // Use custom gameId if provided
     if (gameId) {

web/src/app/games/rock-paper-scissors/page.tsx

@@ -6,7 +6,7 @@ import { GameInfoPanel } from '../../../components/games/GameInfoPanel'
 import { GameContainer, GameControls, ConfirmationModal } from '../../../components/ui'
 import { MCPAssistantPanel } from '../../../components/shared'
 import type { RPSGameState, RPSMove } from '@turn-based-mcp/shared'
-import type { GameSession } from '@turn-based-mcp/shared'
+import type { GameSession, Difficulty } from '@turn-based-mcp/shared'
 
 export default function RockPaperScissorsPage() {
   const [gameSession, setGameSession] = useState<GameSession<RPSGameState> | null>(null)
@@ -16,7 +16,8 @@ export default function RockPaperScissorsPage() {
   const [availableGames, setAvailableGames] = useState<GameSession<RPSGameState>[]>([])
   const [showCreateForm, setShowCreateForm] = useState(false)
   const [showJoinForm, setShowJoinForm] = useState(false)
-  const [aiDifficulty, setAiDifficulty] = useState<'easy' | 'medium' | 'hard'>('medium')
+  const [aiDifficulty, setAiDifficulty] = useState<Difficulty>('medium')
+  const [maxRounds, setMaxRounds] = useState<number>(3)
   const [gamesToShow, setGamesToShow] = useState(5)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [gameToDelete, setGameToDelete] = useState<string | null>(null)
@@ -79,9 +80,10 @@ export default function RockPaperScissorsPage() {
     setError(null)
 
     try {
-      const body: { playerName: string; gameId?: string; aiDifficulty: string } = { 
+      const body: { playerName: string; gameId?: string; aiDifficulty: string; maxRounds: number } = { 
         playerName: 'Player',
-        aiDifficulty 
+        aiDifficulty,
+        maxRounds 
       }
       if (customGameId) {
         body.gameId = customGameId
@@ -280,7 +282,7 @@ export default function RockPaperScissorsPage() {
       <>
         <GameContainer
           title="Rock Paper Scissors"
-          description="Best of 3 rounds! Rock beats Scissors, Scissors beats Paper, Paper beats Rock."
+          description={`Play ${gameSession.gameState.maxRounds} round${gameSession.gameState.maxRounds !== 1 ? 's' : ''}! Rock beats Scissors, Scissors beats Paper, Paper beats Rock.`}
           gameBoard={gameBoard}
           sidebar={sidebar}
           error={error}
@@ -439,6 +441,22 @@ export default function RockPaperScissorsPage() {
                   <option value="hard">🔴 Hard - Advanced pattern recognition</option>
                 </select>
               </div>
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
+                  Number of Rounds
+                </label>
+                <select
+                  value={maxRounds}
+                  onChange={(e) => setMaxRounds(parseInt(e.target.value))}
+                  className="w-full px-4 py-3 bg-white/60 dark:bg-slate-700/60 border border-slate-200 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-200"
+                >
+                  <option value={1}>1 Round</option>
+                  <option value={3}>3 Rounds (Best of 3)</option>
+                  <option value={5}>5 Rounds (Best of 5)</option>
+                  <option value={7}>7 Rounds (Best of 7)</option>
+                  <option value={10}>10 Rounds</option>
+                </select>
+              </div>
               <div>
                 <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                   Custom Game ID (optional)
@@ -534,7 +552,7 @@ export default function RockPaperScissorsPage() {
       <>
         <GameContainer
           title="Rock Paper Scissors"
-          description="Best of 3 rounds! Rock beats Scissors, Scissors beats Paper, Paper beats Rock."
+          description={`Play ${maxRounds} round${maxRounds !== 1 ? 's' : ''}! Rock beats Scissors, Scissors beats Paper, Paper beats Rock.`}
           gameBoard={gameSetupContent}
           sidebar={<div></div>} // Empty sidebar for setup
           error={error}

web/src/components/games/RPSGameBoard.tsx

@@ -108,7 +108,10 @@ export function RPSGameBoard({ gameState, onMove, disabled }: RPSGameBoardProps)
 
       <div className="text-center mb-6">
         <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">
-          Round {gameState.currentRound + 1} of {gameState.maxRounds}
+          {gameState.status === 'finished' ? 
+            `Game Complete (${gameState.currentRound} of ${gameState.maxRounds} rounds played)` :
+            `Round ${gameState.currentRound + 1} of ${gameState.maxRounds}`
+          }
         </h2>
 
         {gameState.status === 'playing' && (