FIX: Rotating Display rotates, Diplo relations no longer doubles

The display wasn't rotating, and the diplomatic relations always doubled
when first starting a game. Fixed both bugs.

ai_animation/src/components/rotatingDisplay.ts

@@ -81,9 +81,9 @@ function rotateToNextDisplay(): void {
   switch (currentDisplayType) {
     //FIXME: This should be turned back on. It's not rotating right now for some reason, and we need to fix that.
     //
-    // case DisplayType.SC_HISTORY_CHART:
-    //   currentDisplayType = DisplayType.RELATIONSHIP_HISTORY_CHART;
-    //   break;
+    case DisplayType.SC_HISTORY_CHART:
+      currentDisplayType = DisplayType.RELATIONSHIP_HISTORY_CHART;
+      break;
     case DisplayType.RELATIONSHIP_HISTORY_CHART:
       currentDisplayType = DisplayType.SC_HISTORY_CHART;
       break;
@@ -155,8 +155,7 @@ export function updateRotatingDisplay(
  */
 function renderSCHistoryChartView(
   container: HTMLElement,
-  gameData: GameSchemaType,
-  currentPhaseIndex: number
+  gameData: GameSchemaType
 ): void {
   // Create header
   const header = document.createElement('div');
@@ -167,8 +166,8 @@ function renderSCHistoryChartView(
   const scHistory = [];
   const allPowers = new Set<string>();
 
-  // Iterate through phases up to and including currentPhaseIndex
-  for (let i = 0; i <= currentPhaseIndex; i++) {
+  // Iterate through phases up to and including gameState.phaseIndex
+  for (let i = 0; i <= gameState.phaseIndex; i++) {
     const phase = gameData.phases[i];
     const phaseData: any = {
       phaseName: phase.name,
@@ -303,7 +302,7 @@ function renderSCHistoryChartView(
   }
 
   // Add a vertical line to indicate current phase
-  const currentPhaseX = xScale(currentPhaseIndex);
+  const currentPhaseX = xScale(gameState.phaseIndex);
   const currentPhaseLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
   currentPhaseLine.setAttribute("x1", `${currentPhaseX}`);
   currentPhaseLine.setAttribute("y1", `${margin.top}`);
@@ -352,7 +351,6 @@ function renderSCHistoryChartView(
   const phaseInfo = document.createElement('div');
   phaseInfo.style.fontSize = '12px';
   phaseInfo.style.marginTop = '5px';
-  phaseInfo.innerHTML = `Current phase: ${gameData.phases[currentPhaseIndex].name}`;
   container.appendChild(phaseInfo);
 }
 

ai_animation/src/gameState.ts

@@ -124,6 +124,7 @@ class GameState {
     this.boardName = boardName
     this.currentPower = null;
     this.gameId = 12
+
     this.momentsData = null; // Initialize as null, will be loaded later
     // State locks
     this.isSpeaking = false
@@ -344,7 +345,6 @@ class GameState {
           console.log(`Game file with id ${gameId} loaded and parsed successfully`);
           // Update rotating display and relationship popup with game data
           if (this.gameData) {
-            updateRotatingDisplay(this.gameData, this.phaseIndex, this.currentPower);
             this.gameId = gameId
             updateGameIdDisplay();
             updateLeaderboard();

ai_animation/src/main.ts

@@ -19,7 +19,7 @@ import { updateLeaderboard } from "./components/leaderboard";
 //  Currently the location for label, unit, and SC are all the same manually picked location
 
 const isStreamingMode = import.meta.env.VITE_STREAMING_MODE
-const phaseStartIdx = 45;
+const phaseStartIdx = undefined;
 
 // --- INITIALIZE SCENE ---
 function initScene() {
@@ -49,7 +49,10 @@ function initScene() {
         updateLeaderboard();
 
         if (phaseStartIdx !== undefined) {
-          _setPhase(phaseStartIdx)
+          setTimeout(() => {
+            // FIXME: Race condition waiting to happen. I'm delaying this call as I'm too tired to do this properly right now.
+            _setPhase(phaseStartIdx)
+          }, 500)
         }
       })