feat: adapt gameplay to api changes

Author: SidonieBouthors

app/src/api/api.ts

@@ -4,7 +4,7 @@ import {
   GetServerSidePropsResult,
 } from "next";
 import { API_URL, SESSION_COOKIE_NAME } from "./config";
-import { GameState, MoveSequence, SubmissionLanguage } from "./models";
+import { GameState, MoveSequence, SubmissionLanguage, TurnStatus } from "./models";
 
 export function requireSession<T extends { [key: string]: any }>(
   onSuccess: (
@@ -68,14 +68,14 @@ export async function createGame(
 
 export async function getGameState(
   session: string
-): Promise<GameState | Error> {
+): Promise<TurnStatus | Error> {
   return await (await apiCall("game", { session, method: "GET" })).json();
 }
 
 export async function makeMove(
   moves: MoveSequence,
   session: string
-): Promise<GameState | Error> {
+): Promise<TurnStatus | Error> {
   return await (
     await apiCall("game", { session, body: moves, method: "POST" })
   ).json();

app/src/api/models.ts

@@ -3,6 +3,11 @@ export interface GameState {
   current_player: Player;
 }
 
+export interface TurnStatus {
+  game: GameState;
+  ai_output: string; // Everything printed by the AI on stderr since the start/last move.
+}
+
 export type Board = (Piece | null)[][];
 
 export interface Piece {

app/src/components/Board.tsx

@@ -25,6 +25,8 @@ type BoardProps = {
   gameOngoing: boolean;
   currentTurn: Player | null;
   setCurrentTurn: (player: Player) => void;
+  board: BoardState;
+  setBoard: (board: BoardState) => void;
 };
 
 export default function Board({
@@ -33,8 +35,10 @@ export default function Board({
   gameOngoing,
   currentTurn,
   setCurrentTurn,
+  board, 
+  setBoard,
 }: BoardProps) {
-  const [board, setBoard] = useState(initialBoards[player]);
+  
   const [currentMoveSequence, setCurrentMoveSequence] = useState<MoveSequence>(
     []
   );
@@ -98,13 +102,13 @@ export default function Board({
               player == Player.White ? Player.Black : Player.White
             ); // switch turn
             makeMove(currentMoveSequence, username).then(
-              (game) => {
-                if (game instanceof Error) {
-                  alert(game.message);
+              (turnStatus) => {
+                if (turnStatus instanceof Error) {
+                  alert(turnStatus.message);
                 } else {
                   // TODO: add buffer time before updating board ?
-                  setBoard(game.board); // update board with server response
-                  setCurrentTurn(game.current_player);
+                  setBoard(turnStatus.game.board); // update board with server response
+                  setCurrentTurn(turnStatus.game.current_player);
                 }
               },
               (error) => {

app/src/pages/index.tsx

@@ -6,6 +6,7 @@ import Board from '@/components/Board';
 import {
   Board as BoardState,
   emptyBoard,
+  initialBoards,
   Player,
   SubmissionLanguage,
 } from '../api/models';
@@ -27,6 +28,7 @@ export default function Home({ username }: { username: string }) {
   const [gameOngoing, setGameOngoing] = useState(false);
   const [player, setPlayer] = useState(Player.White);
   const [currentTurn, setCurrentTurn] = useState<Player | null>(null);
+  const [board, setBoard] = useState(initialBoards[player]);
 
   useEffect(() => {
     getInitialCode(SubmissionLanguage.Java).then((code) => setFile(code));
@@ -87,6 +89,8 @@ export default function Home({ username }: { username: string }) {
                         alert(game.message);
                       } else {
                         setGameOngoing(true);
+                        setBoard(game.board);
+                        setCurrentTurn(game.current_player);
                       }
                     },
                     (err) => alert(err.message)
@@ -156,11 +160,14 @@ export default function Home({ username }: { username: string }) {
                   gameOngoing={gameOngoing}
                   currentTurn={currentTurn}
                   setCurrentTurn={setCurrentTurn}
+                  board={board}
+                  setBoard={setBoard}
                 />
               </div>
               <div className="game-info">
                 <p>Game State: {gameOngoing ? 'Ongoing' : 'Stopped'}</p>
                 <p>Current Turn: {currentTurn ?? 'None'}</p>
+                <p>Player: {player}</p>
               </div>
             </div>
           </div>