Endgame correctly moves on

I believe this is a working version where we move to the next game after
a delay in the endgame modal. I still need to write tests for all of
this.

ai_animation/src/components/leaderboard.ts

@@ -7,7 +7,7 @@ let containerElement = document.getElementById("leaderboard")
 
 export function initLeaderBoard() {
   if (!containerElement) {
-    console.error(`Container element with ID "${containerId}" not found`);
+    console.error(`Container element with ID "leaderboard" not found`);
     return;
   }
 }

ai_animation/src/gameState.ts

@@ -1,5 +1,4 @@
 import * as THREE from "three"
-import { updateRotatingDisplay } from "./components/rotatingDisplay";
 import { type CoordinateData, CoordinateDataSchema, PowerENUM } from "./types/map"
 import type { GameSchemaType } from "./types/gameState";
 import { debugMenuInstance } from "./debug/debugMenu.ts"
@@ -154,24 +153,23 @@ class GameState {
 
     return new Promise((resolve, reject) => {
       try {
-        gameData = GameSchema.parse(JSON.parse(gameData));
-        this.gameData = gameData
+        this.gameData = GameSchema.parse(JSON.parse(gameData));
         // Log data structure for debugging
         console.log("Loading game data with structure:",
-          `${gameData.phases?.length || 0} phases, ` +
-          `orders format: ${gameData.phases?.[0]?.orders ? (Array.isArray(gameData.phases[0].orders) ? 'array' : 'object') : 'none'}`
+          `${this.gameData.phases?.length || 0} phases, ` +
+          `orders format: ${this.gameData.phases?.[0]?.orders ? (Array.isArray(this.gameData.phases[0].orders) ? 'array' : 'object') : 'none'}`
         );
 
         // Show a sample of the first phase for diagnostic purposes
-        if (gameData.phases && gameData.phases.length > 0) {
+        if (this.gameData.phases && this.gameData.phases.length > 0) {
           console.log("First phase sample:", {
-            name: gameData.phases[0].name,
-            ordersCount: gameData.phases[0].orders ?
-              (Array.isArray(gameData.phases[0].orders) ?
-                gameData.phases[0].orders.length :
-                Object.keys(gameData.phases[0].orders).length) : 0,
-            ordersType: gameData.phases[0].orders ? typeof gameData.phases[0].orders : 'none',
-            unitsCount: gameData.phases[0].units ? gameData.phases[0].units.length : 0
+            name: this.gameData.phases[0].name,
+            ordersCount: this.gameData.phases[0].orders ?
+              (Array.isArray(this.gameData.phases[0].orders) ?
+                this.gameData.phases[0].orders.length :
+                Object.keys(this.gameData.phases[0].orders).length) : 0,
+            ordersType: this.gameData.phases[0].orders ? typeof this.gameData.phases[0].orders : 'none',
+            unitsCount: this.gameData.phases[0].units ? this.gameData.phases[0].units.length : 0
           });
         }
 
@@ -267,6 +265,7 @@ class GameState {
         })
         .catch(error => {
           console.error(error);
+          reject()
           throw error
         });
     })
@@ -332,7 +331,7 @@ class GameState {
   /*
    * Given a gameId, load that game's state into the GameState Object
    */
-  loadGameFile = (gameId: number): Promise<void> => {
+  loadGameFile = (gameId: number | undefined = undefined): Promise<void> => {
     if (gameId === undefined) {
       gameId = gameState.gameId
     }

ai_animation/src/main.ts

@@ -9,7 +9,7 @@ import { initRotatingDisplay, } from "./components/rotatingDisplay";
 import { debugMenuInstance } from "./debug/debugMenu";
 import { initializeBackgroundAudio, startBackgroundAudio } from "./backgroundAudio";
 import { updateLeaderboard } from "./components/leaderboard";
-import { _setPhase } from "./phase";
+import { _setPhase, advanceToNextPhase, nextPhase } from "./phase";
 import { togglePlayback } from "./phase";
 
 //TODO: Create a function that finds a suitable unit location within a given polygon, for placing units better 
@@ -218,7 +218,7 @@ nextBtn.addEventListener('click', () => {
   nextPhase()
 });
 
-playBtn.addEventListener('click', togglePlayback);
+playBtn.addEventListener('click', () => { togglePlayback() });
 
 speedSelector.addEventListener('change', e => {
   config.playbackSpeed = parseInt(e.target.value);

ai_animation/src/phase.ts

@@ -73,7 +73,7 @@ export function _setPhase(phaseIndex: number) {
 }
 
 // --- PLAYBACK CONTROLS ---
-export function togglePlayback(explicitSet: boolean) {
+export function togglePlayback(explicitSet: boolean | undefined = undefined) {
   // If the game doesn't have any data, or there are no phases, return;
   if (!gameState.gameData || gameState.gameData.phases.length <= 0) {
     alert("This game file appears to be broken. Please reload the page and load a different game.")