Refactor game state management to ensure proper initialization and transitions during new game starts. Introduce roster clearing functionality in RosterManager and update GameStateManager to handle state transitions more effectively. Integrate game viewport loading for combat and deployment phases.

src/core/GameStateManager.js

@@ -27,11 +27,13 @@ class GameStateManagerClass {
   }
 
   #gameLoopInitialized = Promise.withResolvers();
+
   get gameLoopInitialized() {
     return this.#gameLoopInitialized.promise;
   }
 
   #rosterLoaded = Promise.withResolvers();
+
   get rosterLoaded() {
     return this.#rosterLoaded.promise;
   }
@@ -103,6 +105,12 @@ class GameStateManagerClass {
   }
 
   startNewGame() {
+    // Clear roster for a fresh start
+    this.rosterManager.clear();
+    // Clear any active run data
+    this.activeRunData = null;
+    // Save the cleared roster
+    this._saveRoster();
     this.transitionTo(GameStateManagerClass.STATES.TEAM_BUILDER);
   }
 
@@ -125,6 +133,8 @@ class GameStateManagerClass {
       });
       this._saveRoster();
     }
+    // We must transition to deployment before initializing the run so that the game loop gets set.
+    this.transitionTo(GameStateManagerClass.STATES.DEPLOYMENT);
     // Will transition to DEPLOYMENT after run is initialized
     await this._initializeRun(e.detail.squad);
   }
@@ -170,8 +180,6 @@ class GameStateManagerClass {
     // Give GameLoop a reference to GameStateManager so it can notify about state changes
     this.gameLoop.gameStateManager = this;
     await this.gameLoop.startLevel(this.activeRunData);
-    // Transition to deployment state after level is initialized
-    this.transitionTo(GameStateManagerClass.STATES.DEPLOYMENT);
   }
 
   async _resumeRun() {

src/index.js

@@ -22,6 +22,7 @@ window.addEventListener("gamestate-changed", async (e) => {
       break;
     case "STATE_DEPLOYMENT":
     case "STATE_COMBAT":
+      import("./ui/game-viewport.js");
       loadingMessage.textContent = "INITIALIZING GAME ENGINE...";
       break;
   }

src/managers/RosterManager.js

@@ -69,4 +69,12 @@ export class RosterManager {
   getDeployableUnits() {
     return this.roster.filter((u) => u.status === "READY");
   }
+
+  /**
+   * Clears the roster and graveyard. Used when starting a new game.
+   */
+  clear() {
+    this.roster = [];
+    this.graveyard = [];
+  }
 }

src/ui/combat-hud.js

@@ -98,4 +98,3 @@ export class CombatHUD extends LitElement {
 }
 
 customElements.define("combat-hud", CombatHUD);
-