\n \n Loading game...\n

\n );\n }\n\n if (error && !game) {\n return (\n

\n {error}\n

\n \n

\n \n ← Back to Home\n \n

\n );\n }\n\n return (\n

\n {game?.name}\n

\n Game: {gameId}\n Player: {username}\n

\n \n \n ← Home\n \n

\n\n {game?.rules && (\n

Game Rules:

{game.rules}

\n )}\n

\n\n {(error || success) && (\n

\n {error &&

{error}

}\n {success &&

{success}

}\n

\n )}\n\n

\n {/* Left Column: Pieces and Turn Controls */}\n

\n {/* My Pieces */}\n

\n My Pieces ({playerPieces.length})\n

\n \n setShowPieceForm(!showPieceForm)}\n disabled={turnInProgress}\n className=\"bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold py-2 px-4 rounded-lg transition-colors\"\n >\n {showPieceForm ? 'Cancel' : '+ New Piece'}\n \n

\n\n {showPieceForm && (\n

\n \n Piece Type\n \n setSelectedPieceTypeId(Number(e.target.value))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n >\n \n {pieceTypes.map(pieceType => (\n \n ))}\n \n

\n\n

\n \n Instructions for this Piece\n \n setNewPieceInstructions(e.target.value)}\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Give specific instructions to guide this piece's behavior...\"\n />\n

\n\n \n Create Piece\n \n \n )}\n\n {playerPieces.length === 0 ? (\n

\n No pieces created yet. Create your first piece to start playing!\n

\n ) : (\n

\n {playerPieces.map((piece) => {\n const pieceType = pieceTypes.find(pt => pt.id === piece.piece_type_id);\n const isEditing = editingPieceId === piece.id;\n \n return (\n

\n {pieceType?.name || 'Unknown Piece'}\n

\n \n {!turnInProgress && (\n {\n if (isEditing) {\n setEditingPieceId(null);\n setEditInstructions('');\n } else {\n setEditingPieceId(piece.id);\n setEditInstructions(piece.instructions);\n }\n }}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n >\n {isEditing ? 'Cancel' : 'Edit'}\n \n )}\n

\n \n {pieceType && (\n

\n {pieceType.description}\n

\n )}\n \n

\n \n Your Instructions:\n \n \n {isEditing ? (\n

\n setEditInstructions(e.target.value)}\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm\"\n />\n

\n handleUpdateInstructions(piece.id)}\n className=\"bg-green-600 hover:bg-green-700 text-white text-sm font-bold py-1 px-3 rounded\"\n >\n Save\n \n {\n setEditingPieceId(null);\n setEditInstructions('');\n }}\n className=\"bg-gray-500 hover:bg-gray-600 text-white text-sm font-bold py-1 px-3 rounded\"\n >\n Cancel\n \n

\n ) : (\n

\n {piece.instructions || 'No specific instructions'}\n

\n )}\n

\n \n {piece.last_move && (\n

\n \n Last Move:\n \n

\n {piece.last_move}\n

\n )}\n

\n );\n })}\n

\n )}\n

\n\n {/* Turn Controls */}\n

\n Take Photo & Play Turn\n

\n \n

\n \n Upload Board Photo\n \n \n

\n \n {imagePreview && (\n

\n \n

\n )}\n \n \n {turnInProgress ? (\n <>\n \n Processing Turn...\n \n ) : (\n '📸 Take Photo & Play Turn'\n )}\n \n \n {playerPieces.length === 0 && (\n

\n Create at least one piece to play a turn\n

\n )}\n

\n\n {/* Right Column: Turn Results */}\n

\n Moves to Make\n

\n \n {turnInProgress && (\n

\n Turn in Progress\n \n {completedMoves} / {totalMoves} pieces completed\n \n

0 ? (completedMoves / totalMoves) * 100 : 0}%` }}\n >

\n )}\n \n {moveResults.length === 0 ? (\n

\n Take a photo and play a turn to see AI piece moves here\n

\n ) : (\n

\n {moveResults.map((result) => (\n

\n {result.piece_name} ({result.player_username})\n

\n \n {result.status === 'pending' ? 'Thinking...' : \n result.status === 'complete' ? 'Complete' : 'Error'}\n \n

\n \n {result.status === 'error' && result.error_message && (\n

\n Error: {result.error_message}\n

\n )}\n \n {result.thinking_process && (\n

\n Thinking:
\n {result.thinking_process}\n

\n )}\n \n {result.move_description && (\n

\n MOVE: {result.move_description}\n

\n )}\n \n {result.status === 'pending' && (\n

\n \n Waiting for AI response...\n

\n )}\n

\n ))}\n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/malcolmocean/cogs-v-clippies-2/code/frontend/components/PlayPage.tsx","extension","actionData","errors"]