fix: reset board and console on start

Author: SidonieBouthors

app/src/components/Board.tsx

@@ -22,6 +22,7 @@ import {
   rotateMove,
 } from "@/util/checkersCalculator";
 import { makeMove } from "@/api/api";
+import { ConsoleMessage } from "@/pages";
 
 type BoardProps = {
   username: string;
@@ -31,7 +32,10 @@ type BoardProps = {
   setCurrentTurn: (player: Player) => void;
   board: BoardState;
   setBoard: (board: BoardState) => void;
-  updateGame: (turnStatus: TurnStatus | AIError) => void;
+  updateGame: (
+    turnStatus: TurnStatus | AIError,
+    initialConsoleOutput?: ConsoleMessage[]
+  ) => void;
 };
 
 export default function Board({
@@ -40,19 +44,14 @@ export default function Board({
   gameOngoing,
   currentTurn,
   setCurrentTurn,
-  board, 
+  board,
   setBoard,
   updateGame,
 }: BoardProps) {
-  
   const [currentMoveSequence, setCurrentMoveSequence] = useState<MoveSequence>(
     []
   );
 
-  useEffect(() => {
-    setBoard(initialBoards[player]);
-  }, [player]); // player can only change when the game is not ongoing
-
   const [selectedPiece, setSelectedPiece] = useState<{
     x: number;
     y: number;

app/src/pages/index.tsx

@@ -26,6 +26,14 @@ import { rotateBoard } from "@/util/checkersCalculator";
 
 const inter = Inter({ subsets: ["latin"] });
 
+export enum ConsoleMessageType {
+  Error = "error",
+  Info = "info",
+  Warning = "warning",
+  Success = "success",
+}
+export type ConsoleMessage = { msg: string; msgType: ConsoleMessageType };
+
 export default function Home({ username }: { username: string }) {
   const [selectedLang, setLang] = useState(SubmissionLanguage.Java);
   const [file, setFile] = useState("");
@@ -34,19 +42,16 @@ export default function Home({ username }: { username: string }) {
   const [currentTurn, setCurrentTurn] = useState<Player | null>(null);
   const [board, setBoard] = useState(initialBoards[player]);
 
-  enum ConsoleMessageType {
-    Error = "error",
-    Info = "info",
-    Warning = "warning",
-    Success = "success",
-  }
-  type ConsoleMessage = { msg: string; msgType: ConsoleMessageType };
   const [consoleOutput, setConsoleOutput] = useState<ConsoleMessage[]>([]);
 
   useEffect(() => {
     getInitialCode(SubmissionLanguage.Java).then((code) => setFile(code));
   }, []);
 
+  useEffect(() => {
+    setBoard(initialBoards[player]);
+  }, [player]); // player can only change when the game is not ongoing
+
   async function changeLang(lang: SubmissionLanguage) {
     const currentInitialCode = await getInitialCode(selectedLang);
     const wantedInitialCode = await getInitialCode(lang);
@@ -68,58 +73,57 @@ export default function Home({ username }: { username: string }) {
     }
   }
 
-  function updateGame(turnStatus: TurnStatus | AIError) {
+  function updateGame(
+    turnStatus: TurnStatus | AIError,
+    initialConsoleOutput?: ConsoleMessage[]
+  ) {
+    let newConsoleOutput = initialConsoleOutput ?? consoleOutput;
+
     if ("error" in turnStatus) {
       switch (turnStatus.error) {
         case AIErrorType.NoSubmission:
-          setConsoleOutput(
-            consoleOutput.concat({
-              msg: "No submission found",
-              msgType: ConsoleMessageType.Error,
-            })
-          );
+          newConsoleOutput = newConsoleOutput.concat({
+            msg: "No submission found",
+            msgType: ConsoleMessageType.Error,
+          });
           break;
         case AIErrorType.InvalidMove:
-          setConsoleOutput(
-            consoleOutput
-              .concat({
-                msg: "AI played invalid move",
-                msgType: ConsoleMessageType.Error,
-              })
-              .concat({
-                msg: turnStatus.move
-                  ? turnStatus.move.length == 1
-                    ? `Move from ${turnStatus.move[0].from} to ${turnStatus.move[0].to} is invalid`
-                    : "Sequence of moves is invalid : \n" +
-                      turnStatus.move
-                        .map((m) => `-> Move from ${m.from} to ${m.to}`)
-                        .join("\n")
-                  : "No move provided",
-                msgType: ConsoleMessageType.Warning,
-              })
-          );
-          break;
-        case AIErrorType.InvalidOutput:
-          setConsoleOutput(
-            consoleOutput.concat({
-              msg: "AI sent invalid output",
+          newConsoleOutput = newConsoleOutput
+            .concat({
+              msg: "AI played invalid move",
               msgType: ConsoleMessageType.Error,
             })
-          );
+            .concat({
+              msg: turnStatus.move
+                ? turnStatus.move.length == 1
+                  ? `Move from ${turnStatus.move[0].from} to ${turnStatus.move[0].to} is invalid`
+                  : "Sequence of moves is invalid : \n" +
+                    turnStatus.move
+                      .map((m) => `-> Move from ${m.from} to ${m.to}`)
+                      .join("\n")
+                : "No move provided",
+              msgType: ConsoleMessageType.Warning,
+            });
+          break;
+        case AIErrorType.InvalidOutput:
+          newConsoleOutput = newConsoleOutput.concat({
+            msg: "AI sent invalid output",
+            msgType: ConsoleMessageType.Error,
+          });
           break;
       }
 
       if (turnStatus.ai_output && turnStatus.ai_output.length > 0) {
-        setConsoleOutput(
-          consoleOutput
-            .concat({ msg: "AI error", msgType: ConsoleMessageType.Error })
-            .concat({
-              msg: turnStatus.ai_output,
-              msgType: ConsoleMessageType.Warning,
-            })
-        );
+        newConsoleOutput = newConsoleOutput
+          .concat({ msg: "AI error", msgType: ConsoleMessageType.Error })
+          .concat({
+            msg: turnStatus.ai_output,
+            msgType: ConsoleMessageType.Warning,
+          });
       }
 
+      setConsoleOutput(newConsoleOutput);
+
       setGameOngoing(false);
     } else {
       setBoard(rotateBoard(turnStatus.game.board, player)); // update board with server response
@@ -155,12 +159,12 @@ export default function Home({ username }: { username: string }) {
                   stopGame(username);
                   setGameOngoing(false);
                 } else {
+                  setBoard(initialBoards[player]);
+                  setConsoleOutput([]);
                   createGame(username, player == Player.White).then(
                     (turnStatus) => {
-                      setConsoleOutput([]);
                       setGameOngoing(true);
-                      setPlayer(player) // trigger re-render
-                      updateGame(turnStatus);
+                      updateGame(turnStatus, []);
                     },
                     (err) => alert(err.message)
                   );
@@ -251,7 +255,10 @@ export default function Home({ username }: { username: string }) {
                 calculer tout les coups (voire séquences de coups si il y a des
                 raffles) pour déterminer lesquels sont valides.
               </p>
-              <p>Note : les coups a retourner sont au format row, column à chaque fois.</p>
+              <p>
+                Note : les coups a retourner sont au format row, column à chaque
+                fois.
+              </p>
             </div>
             <div className="game">
               <div className="simulation">