FIX: SC History now works and correctly updates on phase move

The SVG paths weren't getting added to the chart. Should be fixed and
does work in later phases.

ai_animation/src/components/rotatingDisplay.ts

@@ -30,7 +30,7 @@ const RELATIONSHIP_VALUES = {
 };
 
 // Module state
-let currentDisplayType: DisplayType = DisplayType.RELATIONSHIP_HISTORY_CHART;
+let currentDisplayType: DisplayType = DisplayType.SC_HISTORY_CHART;
 let lastRenderedDisplayType: DisplayType | null = null;
 let rotationTimer: number | null = null;
 let containerElement: HTMLElement | null = null;
@@ -79,11 +79,9 @@ function rotateToNextDisplay(): void {
 
   // Determine next display type
   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;
@@ -124,7 +122,7 @@ export function updateRotatingDisplay(
 
     // Apply fade transition
     containerElement.style.transition = 'opacity 0.3s ease-out';
-    containerElement.style.opacity = '0';
+    //containerElement.style.opacity = '0';
 
     // Update content after fade-out
     setTimeout(() => {
@@ -274,6 +272,7 @@ function renderSCHistoryChartView(
     tickLabel.textContent = tick.toString();
     chart.appendChild(tickLabel);
   }
+  let paths = []
 
   // Draw lines for each power
   for (const power of powers) {
@@ -298,7 +297,7 @@ function renderSCHistoryChartView(
     path.setAttribute("stroke", POWER_COLORS[power] || "#000000");
     path.setAttribute("stroke-width", "2");
     path.setAttribute("fill", "none");
-    chart.appendChild(path);
+    paths.push(path);
   }
 
   // Add a vertical line to indicate current phase
@@ -341,17 +340,15 @@ function renderSCHistoryChartView(
 
     legendX += legendItemWidth;
   }
-
+  paths.forEach((path) => {
+    svg.appendChild(path)
+  })
   chart.appendChild(legendGroup);
+  svg.appendChild(chart)
 
   // Add the SVG to the container
   container.appendChild(svg);
 
-  // Add phase info
-  const phaseInfo = document.createElement('div');
-  phaseInfo.style.fontSize = '12px';
-  phaseInfo.style.marginTop = '5px';
-  container.appendChild(phaseInfo);
 }
 
 /**

ai_animation/src/debug/phaseJump.ts

@@ -123,13 +123,13 @@ function updatePhaseOptions(): void {
     const option = document.createElement('option');
     option.value = phase.name;
     option.textContent = `${index}: ${phase.name}`;
-    
+
     // Highlight current phase
     if (index === gameState.phaseIndex) {
       option.textContent += ' (current)';
       option.style.fontWeight = 'bold';
     }
-    
+
     select.appendChild(option);
   });
 
@@ -150,7 +150,7 @@ function jumpToPhase(phaseName: string): void {
 
   // Find the phase index by name
   const phaseIndex = gameState.gameData.phases.findIndex(phase => phase.name === phaseName);
-  
+
   if (phaseIndex === -1) {
     showFeedback(`Phase "${phaseName}" not found`, 'error');
     return;
@@ -165,10 +165,10 @@ function jumpToPhase(phaseName: string): void {
     // Use the existing _setPhase function to jump to the phase
     _setPhase(phaseIndex);
     showFeedback(`Jumped to phase "${phaseName}" (index ${phaseIndex})`, 'success');
-    
+
     // Update the dropdown to reflect the new current phase
-    setTimeout(updatePhaseOptions, 100);
-    
+    updatePhaseOptions();
+
   } catch (error) {
     showFeedback(`Error jumping to phase: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
     console.error('Phase jump error:', error);
@@ -184,13 +184,13 @@ function showFeedback(message: string, type: 'success' | 'error' | 'info'): void
 
   const colors = {
     success: '#2e7d32',
-    error: '#d32f2f', 
+    error: '#d32f2f',
     info: '#1976d2'
   };
 
   feedback.textContent = message;
   feedback.style.color = colors[type];
-  
+
   // Clear feedback after 3 seconds
   setTimeout(() => {
     if (feedback.textContent === message) {
@@ -207,4 +207,4 @@ export function updatePhaseJumpOptions(): void {
   if (document.getElementById('phase-jump-select')) {
     updatePhaseOptions();
   }
-}
+}

ai_animation/src/main.ts

@@ -211,11 +211,6 @@ fileInput.addEventListener('change', e => {
   const file = e.target.files[0];
   if (file) {
     loadGameBtnFunction(file);
-    // Explicitly hide standings board after loading game
-    // Update rotating display and relationship popup with game data
-    if (gameState.gameData) {
-      updateRotatingDisplay(gameState.gameData, gameState.phaseIndex, gameState.currentPower);
-    }
   }
 });
 

ai_animation/src/map/state.ts

@@ -45,15 +45,6 @@ export function updateSupplyCenterOwnership(centers) {
   });
 }
 
-export function updateLeaderboard() {
-  // Instead of directly updating the leaderboard HTML,
-  // use the rotating display component if game data exists
-  if (gameState.gameData) {
-    updateRotatingDisplay(gameState.gameData, gameState.phaseIndex, gameState.currentPower);
-  }
-}
-
-
 /**  Updates the ownership of the provinces in the gameState.boardState.provinces array and
  *  changes the color of the province on the map to correspond to the new owner's color. Or 
  *  the default color if province.owner is undefined.

ai_animation/src/phase.ts

@@ -38,8 +38,7 @@ export function _setPhase(phaseIndex: number) {
     gameState.unitAnimations = [];
     initUnits(phaseIndex)
     gameState.phaseIndex = phaseIndex
-    updateMapOwnership()
-    updatePhaseDisplay()
+    displayPhase(true)
   } else {
     // Clear any existing animations to prevent overlap
     if (gameState.playbackTimer) {
@@ -97,11 +96,6 @@ export function togglePlayback(explicitSet: boolean) {
 
     if (gameState.cameraPanAnim) gameState.cameraPanAnim.getAll()[1].start()
 
-    // Update rotating display
-    if (gameState.gameData) {
-      updateRotatingDisplay(gameState.gameData, gameState.phaseIndex, gameState.currentPower);
-    }
-
     // First, show the messages of the current phase if it's the initial playback
     const phase = gameState.gameData.phases[gameState.phaseIndex];
     if (phase.messages && phase.messages.length) {
@@ -200,7 +194,7 @@ export function displayPhase(skipMessages = false) {
 
 
   // Update UI elements with smooth transitions
-  updateRotatingDisplay(gameState.gameData, gameState.phaseIndex, gameState.currentPower);
+  updateRotatingDisplay(gameState.gameData, gameState.phaseIndex, gameState.currentPower, true);
   _updateMapOwnership();
 
   // Add phase info to news banner if not already there