From ae2db39729f522842d63dd4e1dd0f8682e02a0b8 Mon Sep 17 00:00:00 2001
From: Tyler Marques <me@tylermarques.com>
Date: Thu, 13 Mar 2025 11:33:30 -0400
Subject: [PATCH] WIP: Moving most globals into gamestate

The gamestate object is now where most of the "state" of both the map
and the board live. The units load, just working on loading the colors
of the map ownership again.
---
 ai_animation/src/domElements.ts             |   45 +
 ai_animation/src/domElements/chatWindows.ts |  615 ++++++++++
 ai_animation/src/gameState.ts               |  153 ++-
 ai_animation/src/logger.ts                  |   27 +-
 ai_animation/src/main.ts                    | 1222 +------------------
 ai_animation/src/map/create.ts              |  180 +--
 ai_animation/src/map/state.ts               |  122 ++
 ai_animation/src/phase.ts                   |   58 +
 ai_animation/src/speech.ts                  |   73 ++
 ai_animation/src/types/gameState.ts         |   29 +-
 ai_animation/src/types/map.ts               |   93 +-
 ai_animation/src/units/animate.ts           |   10 +-
 ai_animation/src/units/create.ts            |   58 +
 13 files changed, 1363 insertions(+), 1322 deletions(-)
 create mode 100644 ai_animation/src/domElements.ts
 create mode 100644 ai_animation/src/domElements/chatWindows.ts
 create mode 100644 ai_animation/src/map/state.ts
 create mode 100644 ai_animation/src/phase.ts
 create mode 100644 ai_animation/src/speech.ts

diff --git a/ai_animation/src/domElements.ts b/ai_animation/src/domElements.ts
new file mode 100644
index 0000000..3952f0c
--- /dev/null
+++ b/ai_animation/src/domElements.ts
@@ -0,0 +1,45 @@
+import { gameState } from "./gameState";
+import { logger } from "./logger";
+// --- LOADING & DISPLAYING GAME PHASES ---
+export function loadGameBtnFunction(file) {
+  const reader = new FileReader();
+  reader.onload = e => {
+    gameState.loadGameData(e.target?.result)
+  };
+  reader.onerror = () => {
+    logger.log("Error reading file.")
+  };
+  reader.readAsText(file);
+}
+export const loadBtn = document.getElementById('load-btn');
+export const fileInput = document.getElementById('file-input');
+export const prevBtn = document.getElementById('prev-btn');
+export const nextBtn = document.getElementById('next-btn');
+export const playBtn = document.getElementById('play-btn');
+export const speedSelector = document.getElementById('speed-selector');
+export const phaseDisplay = document.getElementById('phase-display');
+export const mapView = document.getElementById('map-view');
+export const leaderboard = document.getElementById('leaderboard');
+
+// Add roundRect polyfill for browsers that don't support it
+if (!CanvasRenderingContext2D.prototype.roundRect) {
+  CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
+    if (typeof radius === 'undefined') {
+      radius = 5;
+    }
+    this.beginPath();
+    this.moveTo(x + radius, y);
+    this.lineTo(x + width - radius, y);
+    this.arcTo(x + width, y, x + width, y + radius, radius);
+    this.lineTo(x + width, y + height - radius);
+    this.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+    this.lineTo(x + radius, y + height);
+    this.arcTo(x, y + height, x, y + height - radius, radius);
+    this.lineTo(x, y + radius);
+    this.arcTo(x, y, x + radius, y, radius);
+    this.closePath();
+    return this;
+  };
+}
+
+
diff --git a/ai_animation/src/domElements/chatWindows.ts b/ai_animation/src/domElements/chatWindows.ts
new file mode 100644
index 0000000..fe9d331
--- /dev/null
+++ b/ai_animation/src/domElements/chatWindows.ts
@@ -0,0 +1,615 @@
+import * as THREE from "three";
+import { currentPower } from "../gameState";
+
+let faceIconCache = {}; // Cache for generated face icons
+
+// Add a message counter to track sound effect frequency
+let messageCounter = 0;
+let chatWindows = {}; // Store chat window elements by power
+// --- CHAT WINDOW FUNCTIONS ---
+export function createChatWindows() {
+  // Clear existing chat windows
+  const chatContainer = document.getElementById('chat-container');
+  chatContainer.innerHTML = '';
+  chatWindows = {};
+
+  // Create a chat window for each power (except the current power)
+  const powers = ['AUSTRIA', 'ENGLAND', 'FRANCE', 'GERMANY', 'ITALY', 'RUSSIA', 'TURKEY'];
+
+  // Filter out the current power for chat windows
+  const otherPowers = powers.filter(power => power !== currentPower);
+
+  // Add a GLOBAL chat window first
+  createChatWindow('GLOBAL', true);
+
+  // Create chat windows for each power except the current one
+  otherPowers.forEach(power => {
+    createChatWindow(power);
+  });
+}
+// Modified to use 3D face icons properly
+function createChatWindow(power, isGlobal = false) {
+  const chatContainer = document.getElementById('chat-container');
+  const chatWindow = document.createElement('div');
+  chatWindow.className = 'chat-window';
+  chatWindow.id = `chat - ${power} `;
+  chatWindow.style.position = 'relative'; // Add relative positioning for absolute child positioning
+
+  // Create a slimmer header with appropriate styling
+  const header = document.createElement('div');
+  header.className = 'chat-header';
+
+  // Adjust header to accommodate larger face icons
+  header.style.display = 'flex';
+  header.style.alignItems = 'center';
+  header.style.padding = '4px 8px'; // Reduced vertical padding
+  header.style.height = '24px'; // Explicit smaller height
+  header.style.backgroundColor = 'rgba(78, 62, 41, 0.7)'; // Semi-transparent background
+  header.style.borderBottom = '1px solid rgba(78, 62, 41, 1)'; // Solid bottom border
+
+  // Create the title element
+  const titleElement = document.createElement('span');
+  if (isGlobal) {
+    titleElement.style.color = '#ffffff';
+    titleElement.textContent = 'GLOBAL';
+  } else {
+    titleElement.className = `power - ${power.toLowerCase()} `;
+    titleElement.textContent = power;
+  }
+  titleElement.style.fontWeight = 'bold'; // Make text more prominent
+  titleElement.style.textShadow = '1px 1px 2px rgba(0,0,0,0.7)'; // Add text shadow for better readability
+  header.appendChild(titleElement);
+
+  // Create container for 3D face icon that floats over the header
+  const faceHolder = document.createElement('div');
+  faceHolder.style.width = '64px';
+  faceHolder.style.height = '64px';
+  faceHolder.style.position = 'absolute'; // Position absolutely
+  faceHolder.style.right = '10px'; // From right edge
+  faceHolder.style.top = '0px'; // ADJUSTED: Moved lower to align with the header
+  faceHolder.style.cursor = 'pointer';
+  faceHolder.style.borderRadius = '50%';
+  faceHolder.style.overflow = 'hidden';
+  faceHolder.style.boxShadow = '0 2px 5px rgba(0,0,0,0.5)';
+  faceHolder.style.border = '2px solid #fff';
+  faceHolder.style.zIndex = '10'; // Ensure it's above other elements
+  faceHolder.id = `face - ${power} `;
+
+  // Generate the face icon and add it to the chat window (not header)
+  generateFaceIcon(power).then(dataURL => {
+    const img = document.createElement('img');
+    img.src = dataURL;
+    img.style.width = '100%';
+    img.style.height = '100%';
+    img.id = `face - img - ${power} `; // Add ID for animation targeting
+
+    img.id = `face - img - ${power} `; // Add ID for animation targeting
+
+    // Add subtle idle animation
+    setInterval(() => {
+      if (!img.dataset.animating && Math.random() < 0.1) {
+        idleAnimation(img);
+      }
+    }, 3000);
+
+    faceHolder.appendChild(img);
+  });
+
+  // Create messages container with extra top padding to avoid overlap with floating head
+
+  header.appendChild(faceHolder);
+
+  // Create messages container
+  const messagesContainer = document.createElement('div');
+  messagesContainer.className = 'chat-messages';
+  messagesContainer.id = `messages - ${power} `;
+  messagesContainer.style.paddingTop = '8px'; // Add padding to prevent content being hidden under face
+
+  // Add toggle functionality
+  header.addEventListener('click', () => {
+    chatWindow.classList.toggle('chat-collapsed');
+  });
+
+  // Assemble chat window - add faceHolder directly to chatWindow, not header
+  chatWindow.appendChild(header);
+  chatWindow.appendChild(faceHolder);
+  chatWindow.appendChild(messagesContainer);
+
+  // Add to container
+  chatContainer.appendChild(chatWindow);
+
+  // Store reference
+  chatWindows[power] = {
+    element: chatWindow,
+    messagesContainer: messagesContainer,
+    isGlobal: isGlobal,
+    seenMessages: new Set()
+  };
+}
+
+// Modified to accumulate messages instead of resetting and only animate for new messages
+function updateChatWindows(phase, stepMessages = false) {
+  if (!phase.messages || !phase.messages.length) {
+    messagesPlaying = false;
+    return;
+  }
+
+  const relevantMessages = phase.messages.filter(msg => {
+    return (
+      msg.sender === currentPower ||
+      msg.recipient === currentPower ||
+      msg.recipient === 'GLOBAL'
+    );
+  });
+  relevantMessages.sort((a, b) => a.time_sent - b.time_sent);
+
+  if (!stepMessages) {
+    // Normal: show all at once
+    relevantMessages.forEach(msg => {
+      const isNew = addMessageToChat(msg, phase.name);
+      if (isNew) {
+        // Increment message counter and play sound on every third message
+        messageCounter++;
+        animateHeadNod(msg, (messageCounter % 3 === 0));
+      }
+    });
+    messagesPlaying = false;
+  } else {
+    // Stepwise
+    messagesPlaying = true;
+    let index = 0;
+
+    // Define the showNext function that will be called after each message animation completes
+    const showNext = () => {
+      if (index >= relevantMessages.length) {
+        messagesPlaying = false;
+        if (unitAnimations.length === 0 && isPlaying && !isSpeaking) {
+          // Call the async function without awaiting it here
+          playbackTimer = setTimeout(() => advanceToNextPhase(), playbackSpeed);
+        }
+        return;
+      }
+
+      const msg = relevantMessages[index];
+      index++; // Increment index before adding message so word animation knows the correct next message
+
+      const isNew = addMessageToChat(msg, phase.name, true, showNext); // Pass showNext as callback
+
+      if (isNew && !isDebugMode) {
+        // Increment message counter
+        messageCounter++;
+
+        // Only animate head and play sound for every third message
+        animateHeadNod(msg, (messageCounter % 3 === 0));
+      } else if (isDebugMode) {
+        // In debug mode, immediately call showNext to skip waiting for animation
+        showNext();
+      } else {
+        setTimeout(showNext, playbackSpeed * 3);
+      }
+    };
+
+    // Start the message sequence
+    showNext();
+  }
+}
+
+// Modified to support word-by-word animation and callback
+function addMessageToChat(msg, phaseName, animateWords = false, onComplete = null) {
+  // Determine which chat window to use
+  let targetPower;
+  if (msg.recipient === 'GLOBAL') {
+    targetPower = 'GLOBAL';
+  } else {
+    targetPower = msg.sender === currentPower ? msg.recipient : msg.sender;
+  }
+  if (!chatWindows[targetPower]) return false;
+
+  // Create a unique ID for this message to avoid duplication
+  const msgId = `${msg.sender} -${msg.recipient} -${msg.time_sent} -${msg.message} `;
+
+  // Skip if we've already shown this message
+  if (chatWindows[targetPower].seenMessages.has(msgId)) {
+    return false; // Not a new message
+  }
+
+  // Mark as seen
+  chatWindows[targetPower].seenMessages.add(msgId);
+
+  const messagesContainer = chatWindows[targetPower].messagesContainer;
+  const messageElement = document.createElement('div');
+
+  // Style based on sender/recipient
+  if (targetPower === 'GLOBAL') {
+    // Global chat shows sender info
+    const senderColor = msg.sender.toLowerCase();
+    messageElement.className = 'chat-message message-incoming';
+
+    // Add the header with the sender name immediately
+    const headerSpan = document.createElement('span');
+    headerSpan.style.fontWeight = 'bold';
+    headerSpan.className = `power-${senderColor}`;
+    headerSpan.textContent = `${msg.sender}: `;
+    messageElement.appendChild(headerSpan);
+
+    // Create a span for the message content that will be filled word by word
+    const contentSpan = document.createElement('span');
+    contentSpan.id = `msg-content-${msgId.replace(/[^a-zA-Z0-9]/g, '-')}`;
+    messageElement.appendChild(contentSpan);
+
+    // Add timestamp
+    const timeDiv = document.createElement('div');
+    timeDiv.className = 'message-time';
+    timeDiv.textContent = phaseName;
+    messageElement.appendChild(timeDiv);
+  } else {
+    // Private chat - outgoing or incoming style
+    const isOutgoing = msg.sender === currentPower;
+    messageElement.className = `chat-message ${isOutgoing ? 'message-outgoing' : 'message-incoming'}`;
+
+    // Create content span
+    const contentSpan = document.createElement('span');
+    contentSpan.id = `msg-content-${msgId.replace(/[^a-zA-Z0-9]/g, '-')}`;
+    messageElement.appendChild(contentSpan);
+
+    // Add timestamp
+    const timeDiv = document.createElement('div');
+    timeDiv.className = 'message-time';
+    timeDiv.textContent = phaseName;
+    messageElement.appendChild(timeDiv);
+  }
+
+  // Add to container
+  messagesContainer.appendChild(messageElement);
+
+  // Scroll to bottom
+  messagesContainer.scrollTop = messagesContainer.scrollHeight;
+
+  if (animateWords) {
+    // Start word-by-word animation
+    const contentSpanId = `msg-content-${msgId.replace(/[^a-zA-Z0-9]/g, '-')}`;
+    animateMessageWords(msg.message, contentSpanId, targetPower, messagesContainer, onComplete);
+  } else {
+    // Show entire message at once
+    const contentSpan = messageElement.querySelector(`#msg-content-${msgId.replace(/[^a-zA-Z0-9]/g, '-')}`);
+    if (contentSpan) {
+      contentSpan.textContent = msg.message;
+    }
+
+    // If there's a completion callback, call it immediately for non-animated messages
+    if (onComplete) {
+      onComplete();
+    }
+  }
+
+  return true; // This was a new message
+}
+
+// New function to animate message words one at a time
+function animateMessageWords(message, contentSpanId, targetPower, messagesContainer, onComplete) {
+  const words = message.split(/\s+/);
+  const contentSpan = document.getElementById(contentSpanId);
+  if (!contentSpan) {
+    // If span not found, still call onComplete to avoid breaking the game flow
+    if (onComplete) onComplete();
+    return;
+  }
+
+  // Clear any existing content
+  contentSpan.textContent = '';
+  let wordIndex = 0;
+
+  // Function to add the next word
+  const addNextWord = () => {
+    if (wordIndex >= words.length) {
+      // All words added - keep messagesPlaying true until next message starts
+
+      // Add a slight delay after the last word for readability
+      setTimeout(() => {
+        if (onComplete) {
+          onComplete(); // Call the completion callback
+        }
+      }, Math.min(playbackSpeed / 3, 150));
+
+      return;
+    }
+
+    // Add space if not the first word
+    if (wordIndex > 0) {
+      contentSpan.textContent += ' ';
+    }
+
+    // Add the next word
+    contentSpan.textContent += words[wordIndex];
+    wordIndex++;
+
+    // Schedule the next word with a delay based on word length and playback speed
+    const delay = Math.max(30, Math.min(120, playbackSpeed / 10 * (words[wordIndex - 1].length / 4)));
+    setTimeout(addNextWord, delay);
+
+    // Scroll to ensure newest content is visible
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  };
+
+  // Start animation
+  addNextWord();
+}
+
+// Modified to support conditional sound effects
+function animateHeadNod(msg, playSoundEffect = true) {
+  // Determine which chat window's head to animate
+  let targetPower;
+  if (msg.recipient === 'GLOBAL') {
+    targetPower = 'GLOBAL';
+  } else {
+    targetPower = msg.sender === currentPower ? msg.recipient : msg.sender;
+  }
+
+  const chatWindow = chatWindows[targetPower]?.element;
+  if (!chatWindow) return;
+
+  // Find the face image and animate it
+  const img = chatWindow.querySelector(`#face - img - ${targetPower} `);
+  if (!img) return;
+
+  img.dataset.animating = 'true';
+
+  // Choose a random animation type for variety
+  const animationType = Math.floor(Math.random() * 4);
+
+  let animation;
+
+  switch (animationType) {
+    case 0: // Nod animation
+      animation = img.animate([
+        { transform: 'rotate(0deg) scale(1)' },
+        { transform: 'rotate(15deg) scale(1.1)' },
+        { transform: 'rotate(-10deg) scale(1.05)' },
+        { transform: 'rotate(5deg) scale(1.02)' },
+        { transform: 'rotate(0deg) scale(1)' }
+      ], {
+        duration: 600,
+        easing: 'ease-in-out'
+      });
+      break;
+
+    case 1: // Bounce animation
+      animation = img.animate([
+        { transform: 'translateY(0) scale(1)' },
+        { transform: 'translateY(-8px) scale(1.15)' },
+        { transform: 'translateY(3px) scale(0.95)' },
+        { transform: 'translateY(-2px) scale(1.05)' },
+        { transform: 'translateY(0) scale(1)' }
+      ], {
+        duration: 700,
+        easing: 'ease-in-out'
+      });
+      break;
+
+    case 2: // Shake animation
+      animation = img.animate([
+        { transform: 'translate(0, 0) rotate(0deg)' },
+        { transform: 'translate(-5px, -3px) rotate(-5deg)' },
+        { transform: 'translate(5px, 2px) rotate(5deg)' },
+        { transform: 'translate(-5px, 1px) rotate(-3deg)' },
+        { transform: 'translate(0, 0) rotate(0deg)' }
+      ], {
+        duration: 500,
+        easing: 'ease-in-out'
+      });
+      break;
+
+    case 3: // Pulse animation
+      animation = img.animate([
+        { transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(255,255,255,0.7)' },
+        { transform: 'scale(1.2)', boxShadow: '0 0 0 10px rgba(255,255,255,0)' },
+        { transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(255,255,255,0)' }
+      ], {
+        duration: 800,
+        easing: 'ease-out'
+      });
+      break;
+  }
+
+  animation.onfinish = () => {
+    img.dataset.animating = 'false';
+  };
+
+  // Trigger random snippet only if playSoundEffect is true
+  if (playSoundEffect) {
+    playRandomSoundEffect();
+  }
+}
+
+// Generate a 3D face icon for chat windows with higher contrast
+async function generateFaceIcon(power) {
+  if (faceIconCache[power]) {
+    return faceIconCache[power];
+  }
+
+  // Even larger renderer size for better quality
+  const offWidth = 192, offHeight = 192; // Increased from 128x128 to 192x192
+  const offRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  offRenderer.setSize(offWidth, offHeight);
+  offRenderer.setPixelRatio(1);
+
+  // Scene
+  const offScene = new THREE.Scene();
+  offScene.background = null;
+
+  // Camera
+  const offCamera = new THREE.PerspectiveCamera(45, offWidth / offHeight, 0.1, 1000);
+  offCamera.position.set(0, 0, 50);
+
+  // Power-specific colors with higher contrast/saturation
+  const colorMap = {
+    'GLOBAL': 0xf5f5f5, // Brighter white
+    'AUSTRIA': 0xff0000, // Brighter red
+    'ENGLAND': 0x0000ff, // Brighter blue
+    'FRANCE': 0x00bfff, // Brighter cyan
+    'GERMANY': 0x1a1a1a, // Darker gray for better contrast
+    'ITALY': 0x00cc00, // Brighter green
+    'RUSSIA': 0xe0e0e0, // Brighter gray
+    'TURKEY': 0xffcc00  // Brighter yellow
+  };
+  const headColor = colorMap[power] || 0x808080;
+
+  // Larger head geometry
+  const headGeom = new THREE.BoxGeometry(20, 20, 20); // Increased from 16x16x16
+  const headMat = new THREE.MeshStandardMaterial({ color: headColor });
+  const headMesh = new THREE.Mesh(headGeom, headMat);
+  offScene.add(headMesh);
+
+  // Create outline for better visibility (a slightly larger black box behind)
+  const outlineGeom = new THREE.BoxGeometry(22, 22, 19);
+  const outlineMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
+  const outlineMesh = new THREE.Mesh(outlineGeom, outlineMat);
+  outlineMesh.position.z = -2; // Place it behind the head
+  offScene.add(outlineMesh);
+
+  // Larger eyes with better contrast
+  const eyeGeom = new THREE.BoxGeometry(3.5, 3.5, 3.5); // Increased from 2.5x2.5x2.5
+  const eyeMat = new THREE.MeshStandardMaterial({ color: 0x000000 });
+  const leftEye = new THREE.Mesh(eyeGeom, eyeMat);
+  leftEye.position.set(-4.5, 2, 10); // Adjusted position
+  offScene.add(leftEye);
+  const rightEye = new THREE.Mesh(eyeGeom, eyeMat);
+  rightEye.position.set(4.5, 2, 10); // Adjusted position
+  offScene.add(rightEye);
+
+  // Add a simple mouth
+  const mouthGeom = new THREE.BoxGeometry(8, 1.5, 1);
+  const mouthMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
+  const mouth = new THREE.Mesh(mouthGeom, mouthMat);
+  mouth.position.set(0, -3, 10);
+  offScene.add(mouth);
+
+  // Brighter lighting for better contrast
+  const light = new THREE.DirectionalLight(0xffffff, 1.2); // Increased intensity
+  light.position.set(0, 20, 30);
+  offScene.add(light);
+
+  // Add more lights for better definition
+  const fillLight = new THREE.DirectionalLight(0xffffff, 0.5);
+  fillLight.position.set(-20, 0, 20);
+  offScene.add(fillLight);
+
+  offScene.add(new THREE.AmbientLight(0xffffff, 0.4)); // Slightly brighter ambient
+
+  // Slight head rotation
+  headMesh.rotation.y = Math.PI / 6; // More pronounced angle
+
+  // Render to a texture
+  const renderTarget = new THREE.WebGLRenderTarget(offWidth, offHeight);
+  offRenderer.setRenderTarget(renderTarget);
+  offRenderer.render(offScene, offCamera);
+
+  // Get pixels
+  const pixels = new Uint8Array(offWidth * offHeight * 4);
+  offRenderer.readRenderTargetPixels(renderTarget, 0, 0, offWidth, offHeight, pixels);
+
+  // Convert to canvas
+  const canvas = document.createElement('canvas');
+  canvas.width = offWidth;
+  canvas.height = offHeight;
+  const ctx = canvas.getContext('2d');
+  const imageData = ctx.createImageData(offWidth, offHeight);
+  imageData.data.set(pixels);
+
+  // Flip image (WebGL coordinate system is inverted)
+  flipImageDataVertically(imageData, offWidth, offHeight);
+  ctx.putImageData(imageData, 0, 0);
+
+  // Get data URL
+  const dataURL = canvas.toDataURL('image/png');
+  faceIconCache[power] = dataURL;
+
+  // Cleanup
+  offRenderer.dispose();
+  renderTarget.dispose();
+
+  return dataURL;
+}
+
+// Add a subtle idle animation for faces
+function idleAnimation(img) {
+  if (img.dataset.animating === 'true') return;
+
+  img.dataset.animating = 'true';
+
+  const animation = img.animate([
+    { transform: 'rotate(0deg) scale(1)' },
+    { transform: 'rotate(-2deg) scale(0.98)' },
+    { transform: 'rotate(0deg) scale(1)' }
+  ], {
+    duration: 1500,
+    easing: 'ease-in-out'
+  });
+
+  animation.onfinish = () => {
+    img.dataset.animating = 'false';
+  };
+}
+
+// Helper to flip image data vertically
+function flipImageDataVertically(imageData, width, height) {
+  const bytesPerRow = width * 4;
+  const temp = new Uint8ClampedArray(bytesPerRow);
+  for (let y = 0; y < height / 2; y++) {
+    const topOffset = y * bytesPerRow;
+    const bottomOffset = (height - y - 1) * bytesPerRow;
+    temp.set(imageData.data.slice(topOffset, topOffset + bytesPerRow));
+    imageData.data.set(imageData.data.slice(bottomOffset, bottomOffset + bytesPerRow), topOffset);
+    imageData.data.set(temp, bottomOffset);
+  }
+}
+
+// --- NEW: Function to play a random sound effect ---
+function playRandomSoundEffect() {
+  // List all the sound snippet filenames in assets/sounds
+  const soundEffects = [
+    'snippet_2.mp3',
+    'snippet_3.mp3',
+    'snippet_4.mp3',
+    'snippet_9.mp3',
+    'snippet_10.mp3',
+    'snippet_11.mp3',
+    'snippet_12.mp3',
+    'snippet_13.mp3',
+    'snippet_14.mp3',
+    'snippet_15.mp3',
+    'snippet_16.mp3',
+    'snippet_17.mp3',
+  ];
+  // Pick one at random
+  const chosen = soundEffects[Math.floor(Math.random() * soundEffects.length)];
+
+  // Create an <audio> and play
+  const audio = new Audio(`assets / sounds / ${chosen} `);
+  audio.play().catch(err => {
+    // In case of browser auto-play restrictions, you may see warnings in console
+    console.warn("Audio play was interrupted:", err);
+  });
+}
+
+/**
+ * Appends text to the scrolling news banner.
+ * If the banner is at its default text or empty, replace it entirely.
+ * Otherwise, just append " | " + newText.
+ */
+function addToNewsBanner(newText) {
+  const bannerEl = document.getElementById('news-banner-content');
+  if (!bannerEl) return;
+
+  // If the banner only has the default text or is empty, replace it
+  if (
+    bannerEl.textContent.trim() === 'Diplomatic actions unfolding...' ||
+    bannerEl.textContent.trim() === ''
+  ) {
+    bannerEl.textContent = newText;
+  } else {
+    // Otherwise append with a separator
+    bannerEl.textContent += '  |  ' + newText;
+  }
+}
+
diff --git a/ai_animation/src/gameState.ts b/ai_animation/src/gameState.ts
index 6195007..565a0c7 100644
--- a/ai_animation/src/gameState.ts
+++ b/ai_animation/src/gameState.ts
@@ -1,60 +1,129 @@
-import { type Province, type CoordinateData, CoordinateDataSchema } from "./types/map"
-import Logger from "./logger";
+import * as THREE from "three"
+import { type Province, type CoordinateData, CoordinateDataSchema, PowerENUM } from "./types/map"
+import type { GameSchemaType } from "./types/gameState";
+import { GameSchema } from "./types/gameState";
+import { prevBtn, nextBtn, playBtn, speedSelector, mapView } from "./domElements";
+import { createChatWindows } from "./domElements/chatWindows";
+import { logger } from "./logger";
+import { OrbitControls } from "three/examples/jsm/Addons.js";
+import { displayInitialPhase } from "./phase";
 
-const logger = new Logger();
+//FIXME: This whole file is a mess. Need to organize and format
+//
+// NEW: Add a lock for text-to-speech
+export let isSpeaking = false;   // Lock to pause game flow while TTS is active
+export let currentPhaseIndex = 0;
 enum AvailableMaps {
   STANDARD = "standard"
 }
+// Move these definitions BEFORE they're used
+function getRandomPower(): PowerENUM {
+  const values = Object.values(PowerENUM)
 
-export let coordinateData: CoordinateData
-// --- LOAD COORDINATE DATA ---
-export function loadCoordinateData() {
-  return new Promise((resolve, reject) => {
-    fetch('./assets/maps/standard/coords.json')
-      .then(response => {
-        if (!response.ok) {
-          // Try an alternate path if desired
-          throw new Error("Something went wrong when fetching the coords.json")
-        }
-        return response.json()
-      })
-      .then(data => {
-        coordinateData = CoordinateDataSchema.parse(data)
-        //coordinateData = data;
-        logger.log('Coordinate data loaded!')
-        resolve(coordinateData);
-      })
-      .catch(error => {
-        console.error(error);
-        reject(error);
-      });
-  });
+  const idx = Math.floor(Math.random() * values.length);
+  return values[idx];
 }
+export const currentPower = getRandomPower();
 
 
-export default class {
+class GameState {
   boardState: CoordinateData | null
+  gameData: GameSchemaType | null
+  phaseIndex: number
+  boardName: string
+  isSpeaking: boolean
+  messagesPlaying: boolean
+  isPlaying: boolean
+
+  //Scene for three.js
+  scene: THREE.Scene
+
+  // camera and controls
+  camControls: OrbitControls
+  camera: THREE.PerspectiveCamera
+  renderer: THREE.WebGLRenderer
+
+  //Unit Meshes 
+  unitMeshes: THREE.Group[]
 
   constructor(boardName: AvailableMaps) {
+    this.phaseIndex = 0
     this.boardState = null
-    this._loadMapData(boardName)
+    this.gameData = null
+    this.boardName = boardName
+    this.isSpeaking = false
+    this.isPlaying = false
+    this.messagesPlaying = false
+    this.scene = new THREE.Scene()
+    this.unitMeshes = []
   }
 
+  loadGameData = (gameDataString: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      this.gameData = GameSchema.parse(JSON.parse(gameDataString));
+      logger.log(`Game data loaded: ${this.gameData.phases?.length || 0} phases found.`)
+      this.phaseIndex = 0;
+      if (this.gameData.phases?.length) {
+        prevBtn.disabled = false;
+        nextBtn.disabled = false;
+        playBtn.disabled = false;
+        speedSelector.disabled = false;
 
-  _loadMapData = (boardName: AvailableMaps) => {
-
-    fetch(`./assets/maps/${boardName}/coords.json`)
-      .then(response => {
-        if (!response.ok) {
-          throw new Error(`Failed to load coordinates: ${response.status}`);
-        }
-        this.boardState = CoordinateDataSchema.parse(response.json())
-      })
-      .catch(error => {
-        console.error(error);
-        throw error
-      });
-
+        // Initialize chat windows
+        createChatWindows();
+        displayInitialPhase()
+        resolve()
+      } else {
+        reject()
+      }
+    })
   }
 
+  loadBoardState = (): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      fetch(`./assets/maps/${this.boardName}/coords.json`)
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`Failed to load coordinates: ${response.status}`);
+          }
+          return response.json()
+        })
+        .then((data) => {
+          this.boardState = CoordinateDataSchema.parse(data)
+          resolve()
+        })
+        .catch(error => {
+          console.error(error);
+          throw error
+        });
+    })
+  }
+  initScene = () => {
+    this.scene.background = new THREE.Color(0x87CEEB);
+
+    // Camera
+    this.camera = new THREE.PerspectiveCamera(
+      60,
+      mapView.clientWidth / mapView.clientHeight,
+      1,
+      3000
+    );
+    this.camera.position.set(0, 800, 900); // MODIFIED: Increased z-value to account for map shift
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+    this.renderer.setSize(mapView.clientWidth, mapView.clientHeight);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    mapView.appendChild(this.renderer.domElement);
+
+    // Controls
+    this.camControls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.camControls.enableDamping = true;
+    this.camControls.dampingFactor = 0.05;
+    this.camControls.screenSpacePanning = true;
+    this.camControls.minDistance = 100;
+    this.camControls.maxDistance = 2000;
+    this.camControls.maxPolarAngle = Math.PI / 2; // Limit so you don't flip under the map
+    this.camControls.target.set(0, 0, 100); // ADDED: Set control target to new map center
+  }
 }
+
+export let gameState = new GameState(AvailableMaps.STANDARD);
diff --git a/ai_animation/src/logger.ts b/ai_animation/src/logger.ts
index 4006bf4..2b6fce2 100644
--- a/ai_animation/src/logger.ts
+++ b/ai_animation/src/logger.ts
@@ -1,5 +1,7 @@
+import { gameState, currentPower } from "./gameState";
+import { currentPhaseIndex } from "./gameState";
 
-export default class Logger {
+class Logger {
   get infoPanel() {
     let _panel = document.getElementById('info-panel');
     if (_panel === null) {
@@ -15,4 +17,27 @@ export default class Logger {
 
     console.log(msg)
   }
+  // New function to update info panel with useful information
+  updateInfoPanel = () => {
+    const totalPhases = gameState.gameData?.phases?.length || 0;
+    const currentPhaseNumber = currentPhaseIndex + 1;
+    const phaseName = gameState.gameData?.phases?.[currentPhaseIndex]?.name || 'Unknown';
+
+    this.infoPanel.innerHTML = `
+    <div><strong>Power:</strong> <span class="power-${currentPower.toLowerCase()}">${currentPower}</span></div>
+    <div><strong>Current Phase:</strong> ${phaseName} (${currentPhaseNumber}/${totalPhases})</div>
+    <hr/>
+    <h4>All-Time Leaderboard</h4>
+    <ul style="list-style:none;padding-left:0;margin:0;">
+      <li>Austria: 0</li>
+      <li>England: 0</li>
+      <li>France: 0</li>
+      <li>Germany: 0</li>
+      <li>Italy: 0</li>
+      <li>Russia: 0</li>
+      <li>Turkey: 0</li>
+    </ul>
+  `;
+  }
 }
+export const logger = new Logger()
diff --git a/ai_animation/src/main.ts b/ai_animation/src/main.ts
index 9437bab..195ba77 100644
--- a/ai_animation/src/main.ts
+++ b/ai_animation/src/main.ts
@@ -1,215 +1,55 @@
 import * as THREE from "three";
-import { Tween } from '@tweenjs/tween.js'
-import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import "./style.css"
 import { UnitMesh } from "./types/units";
-import { CoordinateData, PowerENUM } from "./types/map";
-import { createUnitMesh, getPowerHexColor } from "./units/create";
 import { initMap } from "./map/create";
-import { getProvincePosition } from "./map/utils";
-import { createAnimationsForPhaseTransition, createTweenAnimations, proccessUnitAnimationWithTween, processUnitAnimation } from "./units/animate";
+import { createTweenAnimations, proccessUnitAnimationWithTween } from "./units/animate";
 import type { UnitAnimation } from "./units/animate";
-import { loadCoordinateData, coordinateData } from "./gameState";
-import Logger from "./logger";
-import { GamePhase, GameSchema } from "./types/gameState";
+import { gameState } from "./gameState";
+import { logger } from "./logger";
+import { loadBtn, prevBtn, nextBtn, speedSelector, fileInput, playBtn, mapView, loadGameBtnFunction, phaseDisplay } from "./domElements";
+import { updateLeaderboard, updateMapOwnership, updateSupplyCenterOwnership } from "./map/state";
 
-// --- NEW: ElevenLabs TTS helper function ---
-const ELEVENLABS_API_KEY = import.meta.env.VITE_ELEVENLABS_API_KEY || "";
-const VOICE_ID = "onwK4e9ZLuTAKqWW03F9";
-const MODEL_ID = "eleven_multilingual_v2";
-
-/**
- * Call ElevenLabs TTS to speak out loud. Returns a promise that
- * resolves only after the audio finishes playing (or fails).
- * Now accepts only the first 100 characters for brevity.
- */
-async function speakSummary(summaryText) {
-  if (!ELEVENLABS_API_KEY) {
-    console.warn("No ElevenLabs API key found. Skipping TTS.");
-    return;
-  }
-
-  // Set the speaking flag to block other animations/transitions
-  isSpeaking = true;
-
-  try {
-    // Truncate text to first 100 characters for ElevenLabs
-    const truncatedText = summaryText.substring(0, 100);
-    if (truncatedText.length < summaryText.length) {
-      console.log(`TTS text truncated from ${summaryText.length} to 100 characters`);
-    }
-
-    // Hit ElevenLabs TTS endpoint with the truncated text
-    const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${VOICE_ID}`, {
-      method: "POST",
-      headers: {
-        "xi-api-key": ELEVENLABS_API_KEY,
-        "Content-Type": "application/json",
-        "Accept": "audio/mpeg"
-      },
-      body: JSON.stringify({
-        text: truncatedText,
-        model_id: MODEL_ID,
-        // Optional fine-tuning parameters
-        // voice_settings: { stability: 0.3, similarity_boost: 0.8 },
-      })
-    });
-
-    if (!response.ok) {
-      throw new Error(`ElevenLabs TTS error: ${response.statusText}`);
-    }
-
-    // Convert response into a playable blob
-    const audioBlob = await response.blob();
-    const audioUrl = URL.createObjectURL(audioBlob);
-
-    // Play the audio, pause until finished
-    return new Promise((resolve, reject) => {
-      const audio = new Audio(audioUrl);
-      audio.play().then(() => {
-        audio.onended = () => {
-          // Clear the speaking flag when audio finishes
-          isSpeaking = false;
-          resolve();
-        };
-      }).catch(err => {
-        console.error("Audio playback error", err);
-        // Make sure to clear the flag even if there's an error
-        isSpeaking = false;
-        reject(err);
-      });
-    });
-
-  } catch (err) {
-    console.error("Failed to generate TTS from ElevenLabs:", err);
-    // Make sure to clear the flag if there's any exception
-    isSpeaking = false;
-  }
-}
+//TODO: Create a function that finds a suitable unit location within a given polygon, for placing units better 
+//  Currently the location for label, unit, and SC are all the same manually picked location
 
 //const isDebugMode = process.env.NODE_ENV === 'development' || localStorage.getItem('debug') === 'true';
-const isDebugMode = false;
-
-// Move these definitions BEFORE they're used
-const ALL_POWERS = ['AUSTRIA', 'ENGLAND', 'FRANCE', 'GERMANY', 'ITALY', 'RUSSIA', 'TURKEY'];
-function getRandomPower() {
-  const idx = Math.floor(Math.random() * ALL_POWERS.length);
-  return ALL_POWERS[idx];
-}
+const isDebugMode = true;
 
 // --- CORE VARIABLES ---
-let scene, camera, renderer, controls;
-let gameData = null;
-let currentPhaseIndex = 0;
 let unitMeshes: UnitMesh[] = []; // To store references for units + supply center 3D objects
-let isPlaying = false; // Track playback state
 let playbackSpeed = 500; // Default speed in ms
 let playbackTimer = null; // Timer reference for playback
 let unitAnimations: UnitAnimation[] = []; // Track ongoing unit animations
-let chatWindows = {}; // Store chat window elements by power
-let currentPower = getRandomPower(); // Now randomly selected
-let logger = new Logger()
 
-// >>> ADDED: Camera pan and message playback variables
 let cameraPanTime = 0;   // Timer that drives the camera panning
 const cameraPanSpeed = 0.0005; // Smaller = slower
-let messagesPlaying = false;    // Lock to let messages animate before next phase
-let faceIconCache = {}; // Cache for generated face icons
-// NEW: Add a lock for text-to-speech
-let isSpeaking = false;   // Lock to pause game flow while TTS is active
-
-// Add a message counter to track sound effect frequency
-let messageCounter = 0;
-
-// --- DOM ELEMENTS ---
-const loadBtn = document.getElementById('load-btn');
-const fileInput = document.getElementById('file-input');
-const prevBtn = document.getElementById('prev-btn');
-const nextBtn = document.getElementById('next-btn');
-const playBtn = document.getElementById('play-btn');
-const speedSelector = document.getElementById('speed-selector');
-const phaseDisplay = document.getElementById('phase-display');
-const mapView = document.getElementById('map-view');
-const leaderboard = document.getElementById('leaderboard');
-
-// Add roundRect polyfill for browsers that don't support it
-if (!CanvasRenderingContext2D.prototype.roundRect) {
-  CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
-    if (typeof radius === 'undefined') {
-      radius = 5;
-    }
-    this.beginPath();
-    this.moveTo(x + radius, y);
-    this.lineTo(x + width - radius, y);
-    this.arcTo(x + width, y, x + width, y + radius, radius);
-    this.lineTo(x + width, y + height - radius);
-    this.arcTo(x + width, y + height, x + width - radius, y + height, radius);
-    this.lineTo(x + radius, y + height);
-    this.arcTo(x, y + height, x, y + height - radius, radius);
-    this.lineTo(x, y + radius);
-    this.arcTo(x, y, x + radius, y, radius);
-    this.closePath();
-    return this;
-  };
-}
 
 // --- INITIALIZE SCENE ---
 function initScene() {
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color(0x87CEEB);
-
-  // Camera
-  camera = new THREE.PerspectiveCamera(
-    60,
-    mapView.clientWidth / mapView.clientHeight,
-    1,
-    3000
-  );
-  camera.position.set(0, 800, 900); // MODIFIED: Increased z-value to account for map shift
-
-  // Renderer
-  renderer = new THREE.WebGLRenderer({ antialias: true });
-  renderer.setSize(mapView.clientWidth, mapView.clientHeight);
-  renderer.setPixelRatio(window.devicePixelRatio);
-  mapView.appendChild(renderer.domElement);
-
-  // Controls
-  controls = new OrbitControls(camera, renderer.domElement);
-  controls.enableDamping = true;
-  controls.dampingFactor = 0.05;
-  controls.screenSpacePanning = true;
-  controls.minDistance = 100;
-  controls.maxDistance = 2000;
-  controls.maxPolarAngle = Math.PI / 2; // Limit so you don't flip under the map
-  controls.target.set(0, 0, 100); // ADDED: Set control target to new map center
+  gameState.initScene()
 
   // Lighting (keep it simple)
   const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-  scene.add(ambientLight);
+  gameState.scene.add(ambientLight);
 
   const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
   dirLight.position.set(300, 400, 300);
-  scene.add(dirLight);
+  gameState.scene.add(dirLight);
 
 
 
   // Load coordinate data, then build the fallback map
-  loadCoordinateData()
-    .then((coordinateData) => {
-      initMap(scene, coordinateData)
-      // Create the map plane from the start
-      // target the center of the map
-      // Set the camera's target to the center of the map
+  gameState.loadBoardState().then(() => {
+    initMap(gameState.scene).then(() => {
       // Load default game file if in debug mode
       if (isDebugMode) {
         loadDefaultGameFile();
       }
-
     })
-    .catch(err => {
-      console.error("Error loading coordinates:", err);
-      logger.log(`Error loading coords: ${err.message}`)
-    });
+  }).catch(err => {
+    console.error("Error loading coordinates:", err);
+    logger.log(`Error loading coords: ${err.message}`)
+  });
 
   // Handle resizing
   window.addEventListener('resize', onWindowResize);
@@ -217,7 +57,7 @@ function initScene() {
   animate();
 
   // Initialize info panel
-  updateInfoPanel();
+  logger.updateInfoPanel();
 
 }
 
@@ -226,30 +66,30 @@ function animate() {
   requestAnimationFrame(animate);
 
 
-  if (isPlaying) {
+  if (gameState.isPlaying) {
     // Pan camera slowly in playback mode
     cameraPanTime += cameraPanSpeed;
     const angle = 0.9 * Math.sin(cameraPanTime) + 1.2;
     const radius = 1300;
-    camera.position.set(
+    gameState.camera.position.set(
       radius * Math.cos(angle),
       650 + 80 * Math.sin(cameraPanTime * 0.5),
       100 + radius * Math.sin(angle)
     );
 
     // If messages are done playing but we haven't started unit animations yet
-    if (!messagesPlaying && !isSpeaking && unitAnimations.length === 0 && isPlaying) {
-      if (gameData && gameData.phases) {
-        const prevIndex = currentPhaseIndex > 0 ? currentPhaseIndex - 1 : gameData.phases.length - 1;
+    if (!gameState.messagesPlaying && !gameState.isSpeaking && unitAnimations.length === 0 && gameState.isPlaying) {
+      if (gameState.gameData && gameState.gameData.phases) {
+        const prevIndex = gameState.phaseIndex > 0 ? gameState.phaseIndex - 1 : gameState.gameData.phases.length - 1;
         unitAnimations = createTweenAnimations(
           unitMeshes,
-          gameData.phases[currentPhaseIndex],
-          gameData.phases[prevIndex]
+          gameState.gameData.phases[gameState.phaseIndex],
+          gameState.gameData.phases[prevIndex]
         );
       }
     }
   } else {
-    controls.update();
+    gameState.camControls.update();
   }
 
   // Process unit movement animations
@@ -264,15 +104,15 @@ function animate() {
 
     });
     // >>> MODIFIED: Check if messages are still playing before advancing
-    if (unitAnimations.length === 0 && isPlaying && !messagesPlaying) {
+    if (unitAnimations.length === 0 && gameState.isPlaying && !gameState.messagesPlaying) {
       // Schedule next phase after a pause delay
       playbackTimer = setTimeout(() => advanceToNextPhase(), playbackSpeed);
     }
   }
 
   // Update any pulsing or wave animations on supply centers or units
-  if (scene.userData.animatedObjects) {
-    scene.userData.animatedObjects.forEach(obj => {
+  if (gameState.scene.userData.animatedObjects) {
+    gameState.scene.userData.animatedObjects.forEach(obj => {
       if (obj.userData.pulseAnimation) {
         const anim = obj.userData.pulseAnimation;
         anim.time += anim.speed;
@@ -291,16 +131,16 @@ function animate() {
     });
   }
 
-  controls.update();
-  renderer.render(scene, camera);
+  gameState.camControls.update();
+  gameState.renderer.render(gameState.scene, gameState.camera);
 }
 
 
 // --- RESIZE HANDLER ---
 function onWindowResize() {
-  camera.aspect = mapView.clientWidth / mapView.clientHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(mapView.clientWidth, mapView.clientHeight);
+  gameState.camera.aspect = mapView.clientWidth / mapView.clientHeight;
+  gameState.camera.updateProjectionMatrix();
+  gameState.renderer.setSize(mapView.clientWidth, mapView.clientHeight);
 }
 
 // Load a default game if we're running debug
@@ -318,9 +158,7 @@ function loadDefaultGameFile() {
       return response.text();
     })
     .then(data => {
-      // Create a mock file object to pass to loadGame
-      const file = new File([data], "default_game.json", { type: "application/json" });
-      loadGame(file);
+      gameState.loadGameData(data);
       console.log("Default game file loaded successfully");
     })
     .catch(error => {
@@ -329,299 +167,10 @@ function loadDefaultGameFile() {
     });
 }
 
-// --- 3D SUPPLY CENTERS ---
-function displaySupplyCenters() {
-  if (!coordinateData || !coordinateData.provinces) return;
-  for (const [province, data] of Object.entries(coordinateData.provinces)) {
-    if (data.isSupplyCenter && coordinateData.provinces[province]) {
-      const pos = getProvincePosition(coordinateData, province);
-
-      // Build a small pillar + star in 3D
-      const scGroup = new THREE.Group();
-
-      const baseGeom = new THREE.CylinderGeometry(12, 12, 3, 16);
-      const baseMat = new THREE.MeshStandardMaterial({ color: 0x333333 });
-      const base = new THREE.Mesh(baseGeom, baseMat);
-      base.position.y = 1.5;
-      scGroup.add(base);
-
-      const pillarGeom = new THREE.CylinderGeometry(2.5, 2.5, 12, 8);
-      const pillarMat = new THREE.MeshStandardMaterial({ color: 0xcccccc });
-      const pillar = new THREE.Mesh(pillarGeom, pillarMat);
-      pillar.position.y = 7.5;
-      scGroup.add(pillar);
-
-      // We'll just do a cone star for simplicity
-      const starGeom = new THREE.ConeGeometry(6, 10, 5);
-      const starMat = new THREE.MeshStandardMaterial({ color: 0xFFD700 });
-      const starMesh = new THREE.Mesh(starGeom, starMat);
-      starMesh.rotation.x = Math.PI; // point upwards
-      starMesh.position.y = 14;
-      scGroup.add(starMesh);
-
-      // Optionally add a glow disc
-      const glowGeom = new THREE.CircleGeometry(15, 32);
-      const glowMat = new THREE.MeshBasicMaterial({ color: 0xFFFFAA, transparent: true, opacity: 0.3, side: THREE.DoubleSide });
-      const glowMesh = new THREE.Mesh(glowGeom, glowMat);
-      glowMesh.rotation.x = -Math.PI / 2;
-      glowMesh.position.y = 2;
-      scGroup.add(glowMesh);
-
-      // Store userData for ownership changes
-      scGroup.userData = {
-        province,
-        isSupplyCenter: true,
-        owner: null,
-        starMesh,
-        glowMesh
-      };
-
-      scGroup.position.set(pos.x, 2, pos.z);
-      scene.add(scGroup);
-      unitMeshes.push(scGroup);
-    }
-  }
-}
-
-function updateSupplyCenterOwnership(centers) {
-  if (!centers) return;
-  const ownershipMap = {};
-  // centers is typically { "AUSTRIA":["VIE","BUD"], "FRANCE":["PAR","MAR"], ... }
-  for (const [power, provinces] of Object.entries(centers)) {
-    provinces.forEach(p => {
-      // No messages, animate units immediately
-      ownershipMap[p.toUpperCase()] = power.toUpperCase();
-    });
-  }
-
-  unitMeshes.forEach(obj => {
-    if (obj.userData && obj.userData.isSupplyCenter) {
-      const prov = obj.userData.province;
-      const owner = ownershipMap[prov];
-      if (owner) {
-        const c = getPowerHexColor(owner);
-        obj.userData.starMesh.material.color.setHex(c);
-
-        // Add a pulsing animation
-        if (!obj.userData.pulseAnimation) {
-          obj.userData.pulseAnimation = {
-            speed: 0.003 + Math.random() * 0.002,
-            intensity: 0.3,
-            time: Math.random() * Math.PI * 2
-          };
-          if (!scene.userData.animatedObjects) scene.userData.animatedObjects = [];
-          scene.userData.animatedObjects.push(obj);
-        }
-      } else {
-        // Neutral
-        obj.userData.starMesh.material.color.setHex(0xFFD700);
-        // remove pulse
-        obj.userData.pulseAnimation = null;
-      }
-    }
-  });
-}
-
-// --- UNITS ---
-function displayUnit(unitData) {
-  const color = getPowerHexColor(unitData.power);
-
-  let group = new THREE.Group();
-  // Minimal shape difference for armies vs fleets
-  if (unitData.type === 'A') {
-    // Army: a block + small head for soldier-like appearance
-    const body = new THREE.Mesh(
-      new THREE.BoxGeometry(15, 20, 10),
-      new THREE.MeshStandardMaterial({ color })
-    );
-    body.position.y = 10;
-    group.add(body);
-
-    // Head
-    const head = new THREE.Mesh(
-      new THREE.SphereGeometry(4, 12, 12),
-      new THREE.MeshStandardMaterial({ color })
-    );
-    head.position.set(0, 24, 0);
-    group.add(head);
-  } else {
-    // Fleet: a rectangle + a mast and sail
-    const hull = new THREE.Mesh(
-      new THREE.BoxGeometry(30, 8, 15),
-      new THREE.MeshStandardMaterial({ color: 0x8B4513 })
-    );
-    hull.position.y = 4;
-    group.add(hull);
-
-    // Mast
-    const mast = new THREE.Mesh(
-      new THREE.CylinderGeometry(1, 1, 30, 8),
-      new THREE.MeshStandardMaterial({ color: 0x000000 })
-    );
-    mast.position.y = 15;
-    group.add(mast);
-
-    // Sail
-    const sail = new THREE.Mesh(
-      new THREE.PlaneGeometry(20, 15),
-      new THREE.MeshStandardMaterial({ color, side: THREE.DoubleSide })
-    );
-    sail.rotation.y = Math.PI / 2;
-    sail.position.set(0, 15, 0);
-    group.add(sail);
-  }
-
-  // Position
-  const pos = getProvincePosition(coordinateData, unitData.location);
-  group.position.set(pos.x, 10, pos.z);
-
-  // Store meta
-  group.userData = {
-    power: unitData.power,
-    type: unitData.type,
-    location: unitData.location
-  };
-
-  scene.add(group);
-  unitMeshes.push(group);
-}
-
-
-
-// --- LOADING & DISPLAYING GAME PHASES ---
-function loadGame(file) {
-  const reader = new FileReader();
-  reader.onload = e => {
-    gameData = GameSchema.parse(JSON.parse(e.target.result));
-    logger.log(`Game data loaded: ${gameData.phases?.length || 0} phases found.`)
-    currentPhaseIndex = 0;
-    if (gameData.phases?.length) {
-      prevBtn.disabled = false;
-      nextBtn.disabled = false;
-      playBtn.disabled = false;
-      speedSelector.disabled = false;
-
-      // Initialize chat windows
-      createChatWindows();
-
-      // Display initial phase but WITHOUT messages
-      displayInitialPhase(currentPhaseIndex);
-    }
-  };
-  reader.onerror = () => {
-    logger.log("Error reading file.")
-  };
-  reader.readAsText(file);
-}
-
-// New function to display initial state without messages
-function displayInitialPhase(index) {
-  if (!gameData || !gameData.phases || index < 0 || index >= gameData.phases.length) {
-    logger.log("Invalid phase index.")
-    return;
-  }
-
-  // Clear any existing units
-  const supplyCenters = unitMeshes.filter(m => m.userData && m.userData.isSupplyCenter);
-  const oldUnits = unitMeshes.filter(m => m.userData && !m.userData.isSupplyCenter);
-  oldUnits.forEach(m => scene.remove(m));
-  unitMeshes = supplyCenters;
-
-  const phase = gameData.phases[index];
-  phaseDisplay.textContent = `Era: ${phase.name || 'Unknown Era'} (${index + 1}/${gameData.phases.length})`;
-
-  // Show supply centers
-  displaySupplyCenters();
-  if (phase.state?.centers) {
-    updateSupplyCenterOwnership(phase.state.centers);
-  }
-
-  // Show units
-  if (phase.state?.units) {
-    for (const [power, unitArr] of Object.entries(phase.state.units)) {
-      unitArr.forEach(unitStr => {
-        const match = unitStr.match(/^([AF])\s+(.+)$/);
-        if (match) {
-          displayUnit({
-            power: power.toUpperCase(),
-            type: match[1],
-            location: match[2],
-          });
-        }
-      });
-    }
-  }
-
-  updateLeaderboard(phase);
-  updateMapOwnership(phase)
-
-  // DON'T show messages yet - skip updateChatWindows call
-  if (isDebugMode) {
-    logger.log(JSON.stringify(phase.state.units))
-  } else {
-    logger.log(`Phase: ${phase.name}\nSCs: ${phase.state?.centers ? JSON.stringify(phase.state.centers) : 'None'}\nUnits: ${phase.state?.units ? JSON.stringify(phase.state.units) : 'None'}`)
-  }
-
-  // Add: Update info panel
-  updateInfoPanel();
-
-}
-
-// --- LEADERBOARD FUNCTION ---
-function updateLeaderboard(phase) {
-  // Get supply center counts
-  const centerCounts = {};
-  const unitCounts = {};
-
-  // Count supply centers by power
-  if (phase.state?.centers) {
-    for (const [power, provinces] of Object.entries(phase.state.centers)) {
-      centerCounts[power] = provinces.length;
-    }
-  }
-
-  // Count units by power
-  if (phase.state?.units) {
-    for (const [power, units] of Object.entries(phase.state.units)) {
-      unitCounts[power] = units.length;
-    }
-  }
-
-  // Combine all powers from both centers and units
-  const allPowers = new Set([
-    ...Object.keys(centerCounts),
-    ...Object.keys(unitCounts)
-  ]);
-
-  // Sort powers by supply center count (descending)
-  const sortedPowers = Array.from(allPowers).sort((a, b) => {
-    return (centerCounts[b] || 0) - (centerCounts[a] || 0);
-  });
-
-  // Build HTML for leaderboard
-  let html = `<strong>Council Standings</strong><br/>`;
-
-  sortedPowers.forEach(power => {
-    const centers = centerCounts[power] || 0;
-    const units = unitCounts[power] || 0;
-
-    // Use CSS classes instead of inline styles for better contrast
-    html += `<div style="margin: 5px 0; display: flex; justify-content: space-between;">
-          <span class="power-${power.toLowerCase()}">${power}</span>
-          <span>${centers} SCs, ${units} units</span>
-        </div>`;
-  });
-
-  // Add victory condition reminder
-  html += `<hr style="border-color: #555; margin: 8px 0;"/>
-        <small>Victory: 18 supply centers</small>`;
-
-  leaderboard.innerHTML = html;
-}
 
 // --- PLAYBACK CONTROLS ---
 function togglePlayback() {
-  if (!gameData || gameData.phases.length <= 1) return;
+  if (!gameState.gameData || gameState.gameData.phases.length <= 1) return;
 
   // NEW: If we're speaking, don't allow toggling playback
   if (isSpeaking) return;
@@ -634,13 +183,13 @@ function togglePlayback() {
     nextBtn.disabled = true;
 
     // First, show the messages of the current phase if it's the initial playback
-    const phase = gameData.phases[currentPhaseIndex];
+    const phase = gameState.gameData.phases[gameState.phaseIndex];
     if (phase.messages && phase.messages.length) {
       // Show messages with stepwise animation
       updateChatWindows(phase, true);
     } else {
       // No messages, go straight to unit animations
-      displayPhaseWithAnimation(currentPhaseIndex);
+      displayPhaseWithAnimation(gameState.phaseIndex);
     }
   } else {
     playBtn.textContent = "▶ Play";
@@ -659,8 +208,8 @@ function togglePlayback() {
 async function advanceToNextPhase() {
   // Only show a summary if we have at least started the first phase
   // and only if the just-ended phase has a "summary" property.
-  if (gameData && gameData.phases && currentPhaseIndex >= 0) {
-    const justEndedPhase = gameData.phases[currentPhaseIndex];
+  if (gameState.gameData && gameState.gameData.phases && gameState.phaseIndex >= 0) {
+    const justEndedPhase = gameState.gameData.phases[gameState.phaseIndex];
     if (justEndedPhase.summary && justEndedPhase.summary.trim() !== '') {
       // UPDATED: First update the news banner with full summary
       addToNewsBanner(`(${justEndedPhase.name}) ${justEndedPhase.summary}`);
@@ -671,27 +220,27 @@ async function advanceToNextPhase() {
   }
 
   // If we've reached the end, loop back to the beginning
-  if (currentPhaseIndex >= gameData.phases.length - 1) {
-    currentPhaseIndex = 0;
+  if (gameState.phaseIndex >= gameState.gameData.phases.length - 1) {
+    gameState.phaseIndex = 0;
   } else {
-    currentPhaseIndex++;
+    gameState.phaseIndex++;
   }
 
   // Display the new phase with animation
-  displayPhaseWithAnimation(currentPhaseIndex);
+  displayPhaseWithAnimation(gameState.phaseIndex);
 }
 
 function displayPhaseWithAnimation(index) {
-  if (!gameData || !gameData.phases || index < 0 || index >= gameData.phases.length) {
+  if (!gameState.gameData || !gameState.gameData.phases || index < 0 || index >= gameState.gameData.phases.length) {
     logger.log("Invalid phase index.")
     return;
   }
 
-  const prevIndex = index > 0 ? index - 1 : gameData.phases.length - 1;
-  const currentPhase = gameData.phases[index];
-  const previousPhase = gameData.phases[prevIndex];
+  const prevIndex = index > 0 ? index - 1 : gameState.gameData.phases.length - 1;
+  const currentPhase = gameState.gameData.phases[index];
+  const previousPhase = gameState.gameData.phases[prevIndex];
 
-  phaseDisplay.textContent = `Era: ${currentPhase.name || 'Unknown Era'} (${index + 1}/${gameData.phases.length})`;
+  phaseDisplay.textContent = `Era: ${currentPhase.name || 'Unknown Era'} (${index + 1}/${gameState.gameData.phases.length})`;
 
   // Rebuild supply centers, remove old units
 
@@ -714,56 +263,29 @@ function displayPhaseWithAnimation(index) {
   // Panel
 
   // Add: Update info panel
-  updateInfoPanel();
+  logger.updateInfoPanel();
 
 }
 
-function updateMapOwnership(currentPhase: GamePhase) {
-  //FIXME: This only works in the forward direction, we currently don't update ownership correctly when going to previous phase
-
-  for (const [power, unitArr] of Object.entries(currentPhase.state.units)) {
-    unitArr.forEach(unitStr => {
-      const match = unitStr.match(/^([AF])\s+(.+)$/);
-      if (!match) return;
-      const unitType = match[1];
-      const location = match[2];
-      const normalized = location.toUpperCase().replace('/', '_');
-      const base = normalized.split('_')[0];
-      if (coordinateData.provinces[base] === undefined) {
-        console.log(base)
-      }
-      coordinateData.provinces[base].owner = power
-    })
-  }
-  for (const [key, value] of Object.entries(coordinateData.provinces)) {
-    // Update the color of the provinces if needed
-    if (coordinateData.provinces[key].owner) {
-      let powerColor = getPowerHexColor(coordinateData.provinces[key].owner)
-      let powerColorHex = parseInt(powerColor.substring(1), 16);
-      coordinateData.provinces[key].mesh?.material.color.setHex(powerColorHex)
-    }
-  }
-}
-
 // --- EVENT HANDLERS ---
 loadBtn.addEventListener('click', () => fileInput.click());
 fileInput.addEventListener('change', e => {
   const file = e.target.files[0];
   if (file) {
-    loadGame(file);
+    loadGameBtnFunction(file);
   }
 });
 
 prevBtn.addEventListener('click', () => {
-  if (currentPhaseIndex > 0) {
-    currentPhaseIndex--;
-    displayPhaseWithAnimation(currentPhaseIndex);
+  if (gameState.phaseIndex > 0) {
+    gameState.phaseIndex--;
+    displayPhaseWithAnimation(gameState.phaseIndex);
   }
 });
 nextBtn.addEventListener('click', () => {
-  if (gameData && currentPhaseIndex < gameData.phases.length - 1) {
-    currentPhaseIndex++;
-    displayPhaseWithAnimation(currentPhaseIndex);
+  if (gameState.gameData && gameState.phaseIndex < gameState.gameData.phases.length - 1) {
+    gameState.phaseIndex++;
+    displayPhaseWithAnimation(gameState.phaseIndex);
   }
 });
 
@@ -772,7 +294,7 @@ playBtn.addEventListener('click', togglePlayback);
 speedSelector.addEventListener('change', e => {
   playbackSpeed = parseInt(e.target.value);
   // If we're currently playing, restart the timer with the new speed
-  if (isPlaying && playbackTimer) {
+  if (gameState.isPlaying && playbackTimer) {
     clearTimeout(playbackTimer);
     playbackTimer = setTimeout(() => advanceToNextPhase(), playbackSpeed);
   }
@@ -805,633 +327,5 @@ function colorShift(hex, percent) {
   return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')} `;
 }
 
-// --- CHAT WINDOW FUNCTIONS ---
-function createChatWindows() {
-  // Clear existing chat windows
-  const chatContainer = document.getElementById('chat-container');
-  chatContainer.innerHTML = '';
-  chatWindows = {};
 
-  // Create a chat window for each power (except the current power)
-  const powers = ['AUSTRIA', 'ENGLAND', 'FRANCE', 'GERMANY', 'ITALY', 'RUSSIA', 'TURKEY'];
 
-  // Filter out the current power for chat windows
-  const otherPowers = powers.filter(power => power !== currentPower);
-
-  // Add a GLOBAL chat window first
-  createChatWindow('GLOBAL', true);
-
-  // Create chat windows for each power except the current one
-  otherPowers.forEach(power => {
-    createChatWindow(power);
-  });
-}
-
-// Modified to use 3D face icons properly
-function createChatWindow(power, isGlobal = false) {
-  const chatContainer = document.getElementById('chat-container');
-  const chatWindow = document.createElement('div');
-  chatWindow.className = 'chat-window';
-  chatWindow.id = `chat - ${power} `;
-  chatWindow.style.position = 'relative'; // Add relative positioning for absolute child positioning
-
-  // Create a slimmer header with appropriate styling
-  const header = document.createElement('div');
-  header.className = 'chat-header';
-
-  // Adjust header to accommodate larger face icons
-  header.style.display = 'flex';
-  header.style.alignItems = 'center';
-  header.style.padding = '4px 8px'; // Reduced vertical padding
-  header.style.height = '24px'; // Explicit smaller height
-  header.style.backgroundColor = 'rgba(78, 62, 41, 0.7)'; // Semi-transparent background
-  header.style.borderBottom = '1px solid rgba(78, 62, 41, 1)'; // Solid bottom border
-
-  // Create the title element
-  const titleElement = document.createElement('span');
-  if (isGlobal) {
-    titleElement.style.color = '#ffffff';
-    titleElement.textContent = 'GLOBAL';
-  } else {
-    titleElement.className = `power - ${power.toLowerCase()} `;
-    titleElement.textContent = power;
-  }
-  titleElement.style.fontWeight = 'bold'; // Make text more prominent
-  titleElement.style.textShadow = '1px 1px 2px rgba(0,0,0,0.7)'; // Add text shadow for better readability
-  header.appendChild(titleElement);
-
-  // Create container for 3D face icon that floats over the header
-  const faceHolder = document.createElement('div');
-  faceHolder.style.width = '64px';
-  faceHolder.style.height = '64px';
-  faceHolder.style.position = 'absolute'; // Position absolutely
-  faceHolder.style.right = '10px'; // From right edge
-  faceHolder.style.top = '0px'; // ADJUSTED: Moved lower to align with the header
-  faceHolder.style.cursor = 'pointer';
-  faceHolder.style.borderRadius = '50%';
-  faceHolder.style.overflow = 'hidden';
-  faceHolder.style.boxShadow = '0 2px 5px rgba(0,0,0,0.5)';
-  faceHolder.style.border = '2px solid #fff';
-  faceHolder.style.zIndex = '10'; // Ensure it's above other elements
-  faceHolder.id = `face - ${power} `;
-
-  // Generate the face icon and add it to the chat window (not header)
-  generateFaceIcon(power).then(dataURL => {
-    const img = document.createElement('img');
-    img.src = dataURL;
-    img.style.width = '100%';
-    img.style.height = '100%';
-    img.id = `face - img - ${power} `; // Add ID for animation targeting
-
-    img.id = `face - img - ${power} `; // Add ID for animation targeting
-
-    // Add subtle idle animation
-    setInterval(() => {
-      if (!img.dataset.animating && Math.random() < 0.1) {
-        idleAnimation(img);
-      }
-    }, 3000);
-
-    faceHolder.appendChild(img);
-  });
-
-  // Create messages container with extra top padding to avoid overlap with floating head
-
-  header.appendChild(faceHolder);
-
-  // Create messages container
-  const messagesContainer = document.createElement('div');
-  messagesContainer.className = 'chat-messages';
-  messagesContainer.id = `messages - ${power} `;
-  messagesContainer.style.paddingTop = '8px'; // Add padding to prevent content being hidden under face
-
-  // Add toggle functionality
-  header.addEventListener('click', () => {
-    chatWindow.classList.toggle('chat-collapsed');
-  });
-
-  // Assemble chat window - add faceHolder directly to chatWindow, not header
-  chatWindow.appendChild(header);
-  chatWindow.appendChild(faceHolder);
-  chatWindow.appendChild(messagesContainer);
-
-  // Add to container
-  chatContainer.appendChild(chatWindow);
-
-  // Store reference
-  chatWindows[power] = {
-    element: chatWindow,
-    messagesContainer: messagesContainer,
-    isGlobal: isGlobal,
-    seenMessages: new Set()
-  };
-}
-
-// Modified to accumulate messages instead of resetting and only animate for new messages
-function updateChatWindows(phase, stepMessages = false) {
-  if (!phase.messages || !phase.messages.length) {
-    messagesPlaying = false;
-    return;
-  }
-
-  const relevantMessages = phase.messages.filter(msg => {
-    return (
-      msg.sender === currentPower ||
-      msg.recipient === currentPower ||
-      msg.recipient === 'GLOBAL'
-    );
-  });
-  relevantMessages.sort((a, b) => a.time_sent - b.time_sent);
-
-  if (!stepMessages) {
-    // Normal: show all at once
-    relevantMessages.forEach(msg => {
-      const isNew = addMessageToChat(msg, phase.name);
-      if (isNew) {
-        // Increment message counter and play sound on every third message
-        messageCounter++;
-        animateHeadNod(msg, (messageCounter % 3 === 0));
-      }
-    });
-    messagesPlaying = false;
-  } else {
-    // Stepwise
-    messagesPlaying = true;
-    let index = 0;
-
-    // Define the showNext function that will be called after each message animation completes
-    const showNext = () => {
-      if (index >= relevantMessages.length) {
-        messagesPlaying = false;
-        if (unitAnimations.length === 0 && isPlaying && !isSpeaking) {
-          // Call the async function without awaiting it here
-          playbackTimer = setTimeout(() => advanceToNextPhase(), playbackSpeed);
-        }
-        return;
-      }
-
-      const msg = relevantMessages[index];
-      index++; // Increment index before adding message so word animation knows the correct next message
-
-      const isNew = addMessageToChat(msg, phase.name, true, showNext); // Pass showNext as callback
-
-      if (isNew && !isDebugMode) {
-        // Increment message counter
-        messageCounter++;
-
-        // Only animate head and play sound for every third message
-        animateHeadNod(msg, (messageCounter % 3 === 0));
-      } else if (isDebugMode) {
-        // In debug mode, immediately call showNext to skip waiting for animation
-        showNext();
-      } else {
-        setTimeout(showNext, playbackSpeed * 3);
-      }
-    };
-
-    // Start the message sequence
-    showNext();
-  }
-}
-
-// Modified to support word-by-word animation and callback
-function addMessageToChat(msg, phaseName, animateWords = false, onComplete = null) {
-  // Determine which chat window to use
-  let targetPower;
-  if (msg.recipient === 'GLOBAL') {
-    targetPower = 'GLOBAL';
-  } else {
-    targetPower = msg.sender === currentPower ? msg.recipient : msg.sender;
-  }
-  if (!chatWindows[targetPower]) return false;
-
-  // Create a unique ID for this message to avoid duplication
-  const msgId = `${msg.sender} -${msg.recipient} -${msg.time_sent} -${msg.message} `;
-
-  // Skip if we've already shown this message
-  if (chatWindows[targetPower].seenMessages.has(msgId)) {
-    return false; // Not a new message
-  }
-
-  // Mark as seen
-  chatWindows[targetPower].seenMessages.add(msgId);
-
-  const messagesContainer = chatWindows[targetPower].messagesContainer;
-  const messageElement = document.createElement('div');
-
-  // Style based on sender/recipient
-  if (targetPower === 'GLOBAL') {
-    // Global chat shows sender info
-    const senderColor = msg.sender.toLowerCase();
-    messageElement.className = 'chat-message message-incoming';
-
-    // Add the header with the sender name immediately
-    const headerSpan = document.createElement('span');
-    headerSpan.style.fontWeight = 'bold';
-    headerSpan.className = `power-${senderColor}`;
-    headerSpan.textContent = `${msg.sender}: `;
-    messageElement.appendChild(headerSpan);
-
-    // Create a span for the message content that will be filled word by word
-    const contentSpan = document.createElement('span');
-    contentSpan.id = `msg-content-${msgId.replace(/[^a-zA-Z0-9]/g, '-')}`;
-    messageElement.appendChild(contentSpan);
-
-    // Add timestamp
-    const timeDiv = document.createElement('div');
-    timeDiv.className = 'message-time';
-    timeDiv.textContent = phaseName;
-    messageElement.appendChild(timeDiv);
-  } else {
-    // Private chat - outgoing or incoming style
-    const isOutgoing = msg.sender === currentPower;
-    messageElement.className = `chat-message ${isOutgoing ? 'message-outgoing' : 'message-incoming'}`;
-
-    // Create content span
-    const contentSpan = document.createElement('span');
-    contentSpan.id = `msg-content-${msgId.replace(/[^a-zA-Z0-9]/g, '-')}`;
-    messageElement.appendChild(contentSpan);
-
-    // Add timestamp
-    const timeDiv = document.createElement('div');
-    timeDiv.className = 'message-time';
-    timeDiv.textContent = phaseName;
-    messageElement.appendChild(timeDiv);
-  }
-
-  // Add to container
-  messagesContainer.appendChild(messageElement);
-
-  // Scroll to bottom
-  messagesContainer.scrollTop = messagesContainer.scrollHeight;
-
-  if (animateWords) {
-    // Start word-by-word animation
-    const contentSpanId = `msg-content-${msgId.replace(/[^a-zA-Z0-9]/g, '-')}`;
-    animateMessageWords(msg.message, contentSpanId, targetPower, messagesContainer, onComplete);
-  } else {
-    // Show entire message at once
-    const contentSpan = messageElement.querySelector(`#msg-content-${msgId.replace(/[^a-zA-Z0-9]/g, '-')}`);
-    if (contentSpan) {
-      contentSpan.textContent = msg.message;
-    }
-
-    // If there's a completion callback, call it immediately for non-animated messages
-    if (onComplete) {
-      onComplete();
-    }
-  }
-
-  return true; // This was a new message
-}
-
-// New function to animate message words one at a time
-function animateMessageWords(message, contentSpanId, targetPower, messagesContainer, onComplete) {
-  const words = message.split(/\s+/);
-  const contentSpan = document.getElementById(contentSpanId);
-  if (!contentSpan) {
-    // If span not found, still call onComplete to avoid breaking the game flow
-    if (onComplete) onComplete();
-    return;
-  }
-
-  // Clear any existing content
-  contentSpan.textContent = '';
-  let wordIndex = 0;
-
-  // Function to add the next word
-  const addNextWord = () => {
-    if (wordIndex >= words.length) {
-      // All words added - keep messagesPlaying true until next message starts
-
-      // Add a slight delay after the last word for readability
-      setTimeout(() => {
-        if (onComplete) {
-          onComplete(); // Call the completion callback
-        }
-      }, Math.min(playbackSpeed / 3, 150));
-
-      return;
-    }
-
-    // Add space if not the first word
-    if (wordIndex > 0) {
-      contentSpan.textContent += ' ';
-    }
-
-    // Add the next word
-    contentSpan.textContent += words[wordIndex];
-    wordIndex++;
-
-    // Schedule the next word with a delay based on word length and playback speed
-    const delay = Math.max(30, Math.min(120, playbackSpeed / 10 * (words[wordIndex - 1].length / 4)));
-    setTimeout(addNextWord, delay);
-
-    // Scroll to ensure newest content is visible
-    messagesContainer.scrollTop = messagesContainer.scrollHeight;
-  };
-
-  // Start animation
-  addNextWord();
-}
-
-// Modified to support conditional sound effects
-function animateHeadNod(msg, playSoundEffect = true) {
-  // Determine which chat window's head to animate
-  let targetPower;
-  if (msg.recipient === 'GLOBAL') {
-    targetPower = 'GLOBAL';
-  } else {
-    targetPower = msg.sender === currentPower ? msg.recipient : msg.sender;
-  }
-
-  const chatWindow = chatWindows[targetPower]?.element;
-  if (!chatWindow) return;
-
-  // Find the face image and animate it
-  const img = chatWindow.querySelector(`#face - img - ${targetPower} `);
-  if (!img) return;
-
-  img.dataset.animating = 'true';
-
-  // Choose a random animation type for variety
-  const animationType = Math.floor(Math.random() * 4);
-
-  let animation;
-
-  switch (animationType) {
-    case 0: // Nod animation
-      animation = img.animate([
-        { transform: 'rotate(0deg) scale(1)' },
-        { transform: 'rotate(15deg) scale(1.1)' },
-        { transform: 'rotate(-10deg) scale(1.05)' },
-        { transform: 'rotate(5deg) scale(1.02)' },
-        { transform: 'rotate(0deg) scale(1)' }
-      ], {
-        duration: 600,
-        easing: 'ease-in-out'
-      });
-      break;
-
-    case 1: // Bounce animation
-      animation = img.animate([
-        { transform: 'translateY(0) scale(1)' },
-        { transform: 'translateY(-8px) scale(1.15)' },
-        { transform: 'translateY(3px) scale(0.95)' },
-        { transform: 'translateY(-2px) scale(1.05)' },
-        { transform: 'translateY(0) scale(1)' }
-      ], {
-        duration: 700,
-        easing: 'ease-in-out'
-      });
-      break;
-
-    case 2: // Shake animation
-      animation = img.animate([
-        { transform: 'translate(0, 0) rotate(0deg)' },
-        { transform: 'translate(-5px, -3px) rotate(-5deg)' },
-        { transform: 'translate(5px, 2px) rotate(5deg)' },
-        { transform: 'translate(-5px, 1px) rotate(-3deg)' },
-        { transform: 'translate(0, 0) rotate(0deg)' }
-      ], {
-        duration: 500,
-        easing: 'ease-in-out'
-      });
-      break;
-
-    case 3: // Pulse animation
-      animation = img.animate([
-        { transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(255,255,255,0.7)' },
-        { transform: 'scale(1.2)', boxShadow: '0 0 0 10px rgba(255,255,255,0)' },
-        { transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(255,255,255,0)' }
-      ], {
-        duration: 800,
-        easing: 'ease-out'
-      });
-      break;
-  }
-
-  animation.onfinish = () => {
-    img.dataset.animating = 'false';
-  };
-
-  // Trigger random snippet only if playSoundEffect is true
-  if (playSoundEffect) {
-    playRandomSoundEffect();
-  }
-}
-
-// Generate a 3D face icon for chat windows with higher contrast
-async function generateFaceIcon(power) {
-  if (faceIconCache[power]) {
-    return faceIconCache[power];
-  }
-
-  // Even larger renderer size for better quality
-  const offWidth = 192, offHeight = 192; // Increased from 128x128 to 192x192
-  const offRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-  offRenderer.setSize(offWidth, offHeight);
-  offRenderer.setPixelRatio(1);
-
-  // Scene
-  const offScene = new THREE.Scene();
-  offScene.background = null;
-
-  // Camera
-  const offCamera = new THREE.PerspectiveCamera(45, offWidth / offHeight, 0.1, 1000);
-  offCamera.position.set(0, 0, 50);
-
-  // Power-specific colors with higher contrast/saturation
-  const colorMap = {
-    'GLOBAL': 0xf5f5f5, // Brighter white
-    'AUSTRIA': 0xff0000, // Brighter red
-    'ENGLAND': 0x0000ff, // Brighter blue
-    'FRANCE': 0x00bfff, // Brighter cyan
-    'GERMANY': 0x1a1a1a, // Darker gray for better contrast
-    'ITALY': 0x00cc00, // Brighter green
-    'RUSSIA': 0xe0e0e0, // Brighter gray
-    'TURKEY': 0xffcc00  // Brighter yellow
-  };
-  const headColor = colorMap[power] || 0x808080;
-
-  // Larger head geometry
-  const headGeom = new THREE.BoxGeometry(20, 20, 20); // Increased from 16x16x16
-  const headMat = new THREE.MeshStandardMaterial({ color: headColor });
-  const headMesh = new THREE.Mesh(headGeom, headMat);
-  offScene.add(headMesh);
-
-  // Create outline for better visibility (a slightly larger black box behind)
-  const outlineGeom = new THREE.BoxGeometry(22, 22, 19);
-  const outlineMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
-  const outlineMesh = new THREE.Mesh(outlineGeom, outlineMat);
-  outlineMesh.position.z = -2; // Place it behind the head
-  offScene.add(outlineMesh);
-
-  // Larger eyes with better contrast
-  const eyeGeom = new THREE.BoxGeometry(3.5, 3.5, 3.5); // Increased from 2.5x2.5x2.5
-  const eyeMat = new THREE.MeshStandardMaterial({ color: 0x000000 });
-  const leftEye = new THREE.Mesh(eyeGeom, eyeMat);
-  leftEye.position.set(-4.5, 2, 10); // Adjusted position
-  offScene.add(leftEye);
-  const rightEye = new THREE.Mesh(eyeGeom, eyeMat);
-  rightEye.position.set(4.5, 2, 10); // Adjusted position
-  offScene.add(rightEye);
-
-  // Add a simple mouth
-  const mouthGeom = new THREE.BoxGeometry(8, 1.5, 1);
-  const mouthMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
-  const mouth = new THREE.Mesh(mouthGeom, mouthMat);
-  mouth.position.set(0, -3, 10);
-  offScene.add(mouth);
-
-  // Brighter lighting for better contrast
-  const light = new THREE.DirectionalLight(0xffffff, 1.2); // Increased intensity
-  light.position.set(0, 20, 30);
-  offScene.add(light);
-
-  // Add more lights for better definition
-  const fillLight = new THREE.DirectionalLight(0xffffff, 0.5);
-  fillLight.position.set(-20, 0, 20);
-  offScene.add(fillLight);
-
-  offScene.add(new THREE.AmbientLight(0xffffff, 0.4)); // Slightly brighter ambient
-
-  // Slight head rotation
-  headMesh.rotation.y = Math.PI / 6; // More pronounced angle
-
-  // Render to a texture
-  const renderTarget = new THREE.WebGLRenderTarget(offWidth, offHeight);
-  offRenderer.setRenderTarget(renderTarget);
-  offRenderer.render(offScene, offCamera);
-
-  // Get pixels
-  const pixels = new Uint8Array(offWidth * offHeight * 4);
-  offRenderer.readRenderTargetPixels(renderTarget, 0, 0, offWidth, offHeight, pixels);
-
-  // Convert to canvas
-  const canvas = document.createElement('canvas');
-  canvas.width = offWidth;
-  canvas.height = offHeight;
-  const ctx = canvas.getContext('2d');
-  const imageData = ctx.createImageData(offWidth, offHeight);
-  imageData.data.set(pixels);
-
-  // Flip image (WebGL coordinate system is inverted)
-  flipImageDataVertically(imageData, offWidth, offHeight);
-  ctx.putImageData(imageData, 0, 0);
-
-  // Get data URL
-  const dataURL = canvas.toDataURL('image/png');
-  faceIconCache[power] = dataURL;
-
-  // Cleanup
-  offRenderer.dispose();
-  renderTarget.dispose();
-
-  return dataURL;
-}
-
-// Add a subtle idle animation for faces
-function idleAnimation(img) {
-  if (img.dataset.animating === 'true') return;
-
-  img.dataset.animating = 'true';
-
-  const animation = img.animate([
-    { transform: 'rotate(0deg) scale(1)' },
-    { transform: 'rotate(-2deg) scale(0.98)' },
-    { transform: 'rotate(0deg) scale(1)' }
-  ], {
-    duration: 1500,
-    easing: 'ease-in-out'
-  });
-
-  animation.onfinish = () => {
-    img.dataset.animating = 'false';
-  };
-}
-
-// Helper to flip image data vertically
-function flipImageDataVertically(imageData, width, height) {
-  const bytesPerRow = width * 4;
-  const temp = new Uint8ClampedArray(bytesPerRow);
-  for (let y = 0; y < height / 2; y++) {
-    const topOffset = y * bytesPerRow;
-    const bottomOffset = (height - y - 1) * bytesPerRow;
-    temp.set(imageData.data.slice(topOffset, topOffset + bytesPerRow));
-    imageData.data.set(imageData.data.slice(bottomOffset, bottomOffset + bytesPerRow), topOffset);
-    imageData.data.set(temp, bottomOffset);
-  }
-}
-
-// --- NEW: Function to play a random sound effect ---
-function playRandomSoundEffect() {
-  // List all the sound snippet filenames in assets/sounds
-  const soundEffects = [
-    'snippet_2.mp3',
-    'snippet_3.mp3',
-    'snippet_4.mp3',
-    'snippet_9.mp3',
-    'snippet_10.mp3',
-    'snippet_11.mp3',
-    'snippet_12.mp3',
-    'snippet_13.mp3',
-    'snippet_14.mp3',
-    'snippet_15.mp3',
-    'snippet_16.mp3',
-    'snippet_17.mp3',
-  ];
-  // Pick one at random
-  const chosen = soundEffects[Math.floor(Math.random() * soundEffects.length)];
-
-  // Create an <audio> and play
-  const audio = new Audio(`assets / sounds / ${chosen} `);
-  audio.play().catch(err => {
-    // In case of browser auto-play restrictions, you may see warnings in console
-    console.warn("Audio play was interrupted:", err);
-  });
-}
-
-/**
- * Appends text to the scrolling news banner.
- * If the banner is at its default text or empty, replace it entirely.
- * Otherwise, just append " | " + newText.
- */
-function addToNewsBanner(newText) {
-  const bannerEl = document.getElementById('news-banner-content');
-  if (!bannerEl) return;
-
-  // If the banner only has the default text or is empty, replace it
-  if (
-    bannerEl.textContent.trim() === 'Diplomatic actions unfolding...' ||
-    bannerEl.textContent.trim() === ''
-  ) {
-    bannerEl.textContent = newText;
-  } else {
-    // Otherwise append with a separator
-    bannerEl.textContent += '  |  ' + newText;
-  }
-}
-
-// New function to update info panel with useful information
-function updateInfoPanel() {
-  const totalPhases = gameData?.phases?.length || 0;
-  const currentPhaseNumber = currentPhaseIndex + 1;
-  const phaseName = gameData?.phases?.[currentPhaseIndex]?.name || 'Unknown';
-
-  infoPanel.innerHTML = `
-    <div><strong>Power:</strong> <span class="power-${currentPower.toLowerCase()}">${currentPower}</span></div>
-    <div><strong>Current Phase:</strong> ${phaseName} (${currentPhaseNumber}/${totalPhases})</div>
-    <hr/>
-    <h4>All-Time Leaderboard</h4>
-    <ul style="list-style:none;padding-left:0;margin:0;">
-      <li>Austria: 0</li>
-      <li>England: 0</li>
-      <li>France: 0</li>
-      <li>Germany: 0</li>
-      <li>Italy: 0</li>
-      <li>Russia: 0</li>
-      <li>Turkey: 0</li>
-    </ul>
-  `;
-}
diff --git a/ai_animation/src/map/create.ts b/ai_animation/src/map/create.ts
index da4760e..abc3a07 100644
--- a/ai_animation/src/map/create.ts
+++ b/ai_animation/src/map/create.ts
@@ -2,104 +2,106 @@ import * as THREE from "three";
 import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
 import { createLabel } from "./labels"
-import { coordinateData } from "../gameState";
+import { gameState } from "../gameState";
 import { getPowerHexColor } from "../units/create";
 
-export function initMap(scene,) {
-  const loader = new SVGLoader();
-  loader.load('assets/maps/standard/map.svg',
-    function (data) {
-      fetch('assets/maps/standard/styles.json')
-        .then(resp => resp.json())
-        .then(map_styles => {
-          const paths = data.paths;
-          const group = new THREE.Group();
-          const textGroup = new THREE.Group();
-          let fillColor;
+export function initMap(scene): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const loader = new SVGLoader();
+    loader.load('assets/maps/standard/map.svg',
+      function (data) {
+        fetch('assets/maps/standard/styles.json')
+          .then(resp => resp.json())
+          .then(map_styles => {
+            const paths = data.paths;
+            const group = new THREE.Group();
+            const textGroup = new THREE.Group();
+            let fillColor;
 
-          for (let i = 0; i < paths.length; i++) {
-            fillColor = "";
-            const path = paths[i];
-            // The "standard" map has keys like _mos, so remove that then send them to caps
-            let provinceKey = path.userData.node.id.substring(1).toUpperCase();
-            let nodeClass = path.userData.node.classList[0]
+            for (let i = 0; i < paths.length; i++) {
+              fillColor = "";
+              const path = paths[i];
+              // The "standard" map has keys like _mos, so remove that then send them to caps
+              let provinceKey = path.userData.node.id.substring(1).toUpperCase();
+              let nodeClass = path.userData.node.classList[0]
 
-            switch (nodeClass) {
-              case undefined:
-                continue
-              case "water":
-                fillColor = "#c5dfea"
-                break
-              case "nopower":
-                fillColor = getPowerHexColor(undefined)
-            }
-
-
-            const material = new THREE.MeshBasicMaterial({
-              color: fillColor,
-              side: THREE.DoubleSide,
-              depthWrite: false
-            });
-
-            const shapes = SVGLoader.createShapes(path);
-
-            for (let j = 0; j < shapes.length; j++) {
-
-              const shape = shapes[j];
-              const geometry = new THREE.ShapeGeometry(shape);
-              const mesh = new THREE.Mesh(geometry, material);
-
-              mesh.rotation.x = Math.PI / 2;
-              if (provinceKey && coordinateData.provinces[provinceKey]) {
-                coordinateData.provinces[provinceKey].mesh = mesh
+              switch (nodeClass) {
+                case undefined:
+                  continue
+                case "water":
+                  fillColor = "#c5dfea"
+                  break
+                case "nopower":
+                  fillColor = getPowerHexColor(undefined)
               }
 
 
-              // Create an edges geometry from the shape geometry.
-              const edges = new THREE.EdgesGeometry(geometry);
-              // Create a line material with black color for the border.
-              const lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 2 });
-              // Create the line segments object to display the border.
-              const line = new THREE.LineSegments(edges, lineMaterial);
-              // Add the border as a child of the mesh.
-              mesh.add(line);
-              group.add(mesh);
-            }
-          }
+              const material = new THREE.MeshBasicMaterial({
+                color: fillColor,
+                side: THREE.DoubleSide,
+                depthWrite: false
+              });
 
-          // Load all the labels for each map position
-          const fontLoader = new FontLoader();
-          fontLoader.load('assets/fonts/helvetiker_regular.typeface.json', function (font) {
-            for (const [key, value] of Object.entries(coordinateData.provinces)) {
+              const shapes = SVGLoader.createShapes(path);
 
-              textGroup.add(createLabel(font, key, value))
+              for (let j = 0; j < shapes.length; j++) {
+
+                const shape = shapes[j];
+                const geometry = new THREE.ShapeGeometry(shape);
+                const mesh = new THREE.Mesh(geometry, material);
+
+                mesh.rotation.x = Math.PI / 2;
+                if (provinceKey && gameState.boardState.provinces[provinceKey]) {
+                  gameState.boardState.provinces[provinceKey].mesh = mesh
+                }
+
+
+                // Create an edges geometry from the shape geometry.
+                const edges = new THREE.EdgesGeometry(geometry);
+                // Create a line material with black color for the border.
+                const lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 2 });
+                // Create the line segments object to display the border.
+                const line = new THREE.LineSegments(edges, lineMaterial);
+                // Add the border as a child of the mesh.
+                mesh.add(line);
+                group.add(mesh);
+              }
             }
+
+            // Load all the labels for each map position
+            const fontLoader = new FontLoader();
+            fontLoader.load('assets/fonts/helvetiker_regular.typeface.json', function (font) {
+              for (const [key, value] of Object.entries(gameState.boardState.provinces)) {
+
+                textGroup.add(createLabel(font, key, value))
+              }
+            })
+            // This rotates the SVG the "correct" way round, and scales it down
+            group.scale.set(1, -1, 1)
+            textGroup.rotation.x = Math.PI / 2;
+            textGroup.scale.set(1, -1, 1)
+
+            // After adding all meshes to the group, update its matrix:
+            group.updateMatrixWorld(true);
+            textGroup.updateMatrixWorld(true);
+
+            // Compute the bounding box of the group:
+            const box = new THREE.Box3().setFromObject(group);
+            const center = new THREE.Vector3();
+            box.getCenter(center);
+
+
+            scene.add(group);
+            scene.add(textGroup);
+            resolve()
+
           })
-          // This rotates the SVG the "correct" way round, and scales it down
-          group.scale.set(1, -1, 1)
-          textGroup.rotation.x = Math.PI / 2;
-          textGroup.scale.set(1, -1, 1)
-
-          // After adding all meshes to the group, update its matrix:
-          group.updateMatrixWorld(true);
-          textGroup.updateMatrixWorld(true);
-
-          // Compute the bounding box of the group:
-          const box = new THREE.Box3().setFromObject(group);
-          const center = new THREE.Vector3();
-          box.getCenter(center);
-
-
-          scene.add(group);
-          scene.add(textGroup);
-
-        })
-        .catch(error => {
-          console.error('Error loading map styles:', error);
-        });
-    },
-    // Progress function
-    undefined,
-    function (error) { console.log(error) })
-
+          .catch(error => {
+            console.error('Error loading map styles:', error);
+          });
+      },
+      // Progress function
+      undefined,
+      function (error) { console.log(error) })
+  })
 }
diff --git a/ai_animation/src/map/state.ts b/ai_animation/src/map/state.ts
new file mode 100644
index 0000000..c5fffb2
--- /dev/null
+++ b/ai_animation/src/map/state.ts
@@ -0,0 +1,122 @@
+import { getPowerHexColor } from "../units/create";
+import { gameState } from "../gameState";
+import { leaderboard } from "../domElements";
+import type { GamePhase } from "../types/gameState";
+
+
+export function updateSupplyCenterOwnership(centers) {
+  if (!centers) return;
+  const ownershipMap = {};
+  // centers is typically { "AUSTRIA":["VIE","BUD"], "FRANCE":["PAR","MAR"], ... }
+  for (const [power, provinces] of Object.entries(centers)) {
+    provinces.forEach(p => {
+      // No messages, animate units immediately
+      ownershipMap[p.toUpperCase()] = power.toUpperCase();
+    });
+  }
+
+  gameState.unitMeshes.forEach(obj => {
+    if (obj.userData && obj.userData.isSupplyCenter) {
+      const prov = obj.userData.province;
+      const owner = ownershipMap[prov];
+      if (owner) {
+        const c = getPowerHexColor(owner);
+        obj.userData.starMesh.material.color.setHex(c);
+
+        // Add a pulsing animation
+        if (!obj.userData.pulseAnimation) {
+          obj.userData.pulseAnimation = {
+            speed: 0.003 + Math.random() * 0.002,
+            intensity: 0.3,
+            time: Math.random() * Math.PI * 2
+          };
+          if (!gameState.scene.userData.animatedObjects) gameState.scene.userData.animatedObjects = [];
+          gameState.scene.userData.animatedObjects.push(obj);
+        }
+      } else {
+        // Neutral
+        obj.userData.starMesh.material.color.setHex(0xFFD700);
+        // remove pulse
+        obj.userData.pulseAnimation = null;
+      }
+    }
+  });
+}
+
+export function updateLeaderboard(phase) {
+  // Get supply center counts
+  const centerCounts = {};
+  const unitCounts = {};
+
+  // Count supply centers by power
+  if (phase.state?.centers) {
+    for (const [power, provinces] of Object.entries(phase.state.centers)) {
+      centerCounts[power] = provinces.length;
+    }
+  }
+
+  // Count units by power
+  if (phase.state?.units) {
+    for (const [power, units] of Object.entries(phase.state.units)) {
+      unitCounts[power] = units.length;
+    }
+  }
+
+  // Combine all powers from both centers and units
+  const allPowers = new Set([
+    ...Object.keys(centerCounts),
+    ...Object.keys(unitCounts)
+  ]);
+
+  // Sort powers by supply center count (descending)
+  const sortedPowers = Array.from(allPowers).sort((a, b) => {
+    return (centerCounts[b] || 0) - (centerCounts[a] || 0);
+  });
+
+  // Build HTML for leaderboard
+  let html = `<strong>Council Standings</strong><br/>`;
+
+  sortedPowers.forEach(power => {
+    const centers = centerCounts[power] || 0;
+    const units = unitCounts[power] || 0;
+
+    // Use CSS classes instead of inline styles for better contrast
+    html += `<div style="margin: 5px 0; display: flex; justify-content: space-between;">
+          <span class="power-${power.toLowerCase()}">${power}</span>
+          <span>${centers} SCs, ${units} units</span>
+        </div>`;
+  });
+
+  // Add victory condition reminder
+  html += `<hr style="border-color: #555; margin: 8px 0;"/>
+        <small>Victory: 18 supply centers</small>`;
+
+  leaderboard.innerHTML = html;
+}
+
+export function updateMapOwnership(currentPhase: GamePhase) {
+  //FIXME: This only works in the forward direction, we currently don't update ownership correctly when going to previous phase
+
+  for (const [power, unitArr] of Object.entries(currentPhase.state.units)) {
+    unitArr.forEach(unitStr => {
+      const match = unitStr.match(/^([AF])\s+(.+)$/);
+      if (!match) return;
+      const unitType = match[1];
+      const location = match[2];
+      const normalized = location.toUpperCase().replace('/', '_');
+      const base = normalized.split('_')[0];
+      if (gameState.boardState.provinces[base] === undefined) {
+        console.log(base)
+      }
+      gameState.boardState.provinces[base].owner = power
+    })
+  }
+  for (const [key, value] of Object.entries(gameState.boardState.provinces)) {
+    // Update the color of the provinces if needed
+    if (gameState.boardState.provinces[key].owner) {
+      let powerColor = getPowerHexColor(gameState.boardState.provinces[key].owner)
+      let powerColorHex = parseInt(powerColor.substring(1), 16);
+      gameState.boardState.provinces[key].mesh?.material.color.setHex(powerColorHex)
+    }
+  }
+}
diff --git a/ai_animation/src/phase.ts b/ai_animation/src/phase.ts
new file mode 100644
index 0000000..a7c0bce
--- /dev/null
+++ b/ai_animation/src/phase.ts
@@ -0,0 +1,58 @@
+import { gameState } from "./gameState";
+import { logger } from "./logger";
+import { phaseDisplay } from "./domElements";
+import { createSupplyCenters } from "./units/create";
+import { createUnitMesh } from "./units/create";
+import { updateSupplyCenterOwnership, updateLeaderboard, updateMapOwnership } from "./map/state";
+
+// New function to display initial state without messages
+export function displayInitialPhase() {
+  let index = 0
+  if (!gameState.gameData || !gameState.gameData.phases || index < 0 || index >= gameState.gameData.phases.length) {
+    logger.log("Invalid phase index.")
+    return;
+  }
+
+  // Clear any existing units
+  const supplyCenters = gameState.unitMeshes.filter(m => m.userData && m.userData.isSupplyCenter);
+  const oldUnits = gameState.unitMeshes.filter(m => m.userData && !m.userData.isSupplyCenter);
+  oldUnits.forEach(m => gameState.scene.remove(m));
+  gameState.unitMeshes = supplyCenters;
+
+  const phase = gameState.gameData.phases[index];
+  phaseDisplay.textContent = `Era: ${phase.name || 'Unknown Era'} (${index + 1}/${gameState.gameData.phases.length})`;
+
+  // Show supply centers
+  let newSCs = createSupplyCenters();
+  newSCs.forEach((sc) => gameState.scene.add(sc))
+  if (phase.state?.centers) {
+    updateSupplyCenterOwnership(phase.state.centers);
+  }
+
+  // Show units
+  if (phase.state?.units) {
+    for (const [power, unitArr] of Object.entries(phase.state.units)) {
+      unitArr.forEach(unitStr => {
+        const match = unitStr.match(/^([AF])\s+(.+)$/);
+        if (match) {
+          let newUnit = createUnitMesh({
+            power: power.toUpperCase(),
+            type: match[1],
+            province: match[2],
+          });
+          gameState.scene.add(newUnit)
+          gameState.unitMeshes.push(newUnit)
+        }
+      });
+    }
+  }
+
+  updateLeaderboard(phase);
+  updateMapOwnership(phase)
+
+  logger.log(`Phase: ${phase.name}\nSCs: ${phase.state?.centers ? JSON.stringify(phase.state.centers) : 'None'}\nUnits: ${phase.state?.units ? JSON.stringify(phase.state.units) : 'None'}`)
+
+  // Add: Update info panel
+  logger.updateInfoPanel();
+
+}
diff --git a/ai_animation/src/speech.ts b/ai_animation/src/speech.ts
new file mode 100644
index 0000000..6017a9e
--- /dev/null
+++ b/ai_animation/src/speech.ts
@@ -0,0 +1,73 @@
+
+// --- NEW: ElevenLabs TTS helper function ---
+const ELEVENLABS_API_KEY = import.meta.env.VITE_ELEVENLABS_API_KEY || "";
+const VOICE_ID = "onwK4e9ZLuTAKqWW03F9";
+const MODEL_ID = "eleven_multilingual_v2";
+/**
+ * Call ElevenLabs TTS to speak out loud. Returns a promise that
+ * resolves only after the audio finishes playing (or fails).
+ * Now accepts only the first 100 characters for brevity.
+ */
+async function speakSummary(summaryText) {
+  if (!ELEVENLABS_API_KEY) {
+    console.warn("No ElevenLabs API key found. Skipping TTS.");
+    return;
+  }
+
+  // Set the speaking flag to block other animations/transitions
+  isSpeaking = true;
+
+  try {
+    // Truncate text to first 100 characters for ElevenLabs
+    const truncatedText = summaryText.substring(0, 100);
+    if (truncatedText.length < summaryText.length) {
+      console.log(`TTS text truncated from ${summaryText.length} to 100 characters`);
+    }
+
+    // Hit ElevenLabs TTS endpoint with the truncated text
+    const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${VOICE_ID}`, {
+      method: "POST",
+      headers: {
+        "xi-api-key": ELEVENLABS_API_KEY,
+        "Content-Type": "application/json",
+        "Accept": "audio/mpeg"
+      },
+      body: JSON.stringify({
+        text: truncatedText,
+        model_id: MODEL_ID,
+        // Optional fine-tuning parameters
+        // voice_settings: { stability: 0.3, similarity_boost: 0.8 },
+      })
+    });
+
+    if (!response.ok) {
+      throw new Error(`ElevenLabs TTS error: ${response.statusText}`);
+    }
+
+    // Convert response into a playable blob
+    const audioBlob = await response.blob();
+    const audioUrl = URL.createObjectURL(audioBlob);
+
+    // Play the audio, pause until finished
+    return new Promise((resolve, reject) => {
+      const audio = new Audio(audioUrl);
+      audio.play().then(() => {
+        audio.onended = () => {
+          // Clear the speaking flag when audio finishes
+          isSpeaking = false;
+          resolve();
+        };
+      }).catch(err => {
+        console.error("Audio playback error", err);
+        // Make sure to clear the flag even if there's an error
+        isSpeaking = false;
+        reject(err);
+      });
+    });
+
+  } catch (err) {
+    console.error("Failed to generate TTS from ElevenLabs:", err);
+    // Make sure to clear the flag if there's any exception
+    isSpeaking = false;
+  }
+}
diff --git a/ai_animation/src/types/gameState.ts b/ai_animation/src/types/gameState.ts
index 6b44afa..0398faf 100644
--- a/ai_animation/src/types/gameState.ts
+++ b/ai_animation/src/types/gameState.ts
@@ -1,35 +1,26 @@
 import { z } from 'zod';
-import { PowerENUM, PowerSchema } from './map';
+import { PowerENUMSchema } from './map';
 import { OrderFromString } from './unitOrders';
+import { ProvinceENUMSchema } from './map';
 
-const UnitSchema = z.object({
-  type: z.enum(["A", "F"]),
-  power: z.string(),
-  location: z.string(),
-});
-
-const OrderSchema = z.object({
-  text: z.string(),
-  power: z.string(),
-  region: z.string(),
-});
 
 const PhaseSchema = z.object({
   messages: z.array(z.any()),
   name: z.string(),
-  orders: z.record(PowerSchema, z.array(OrderFromString)),
-  results: z.record(PowerSchema, OrderSchema),
+  orders: z.record(PowerENUMSchema, z.array(OrderFromString).nullable()),
+  results: z.record(z.string(), z.array(z.any())),
   state: z.object({
-    units: z.record(z.nativeEnum(PowerENUM), z.array(z.string()))
+    units: z.record(PowerENUMSchema, z.array(z.string())),
+    centers: z.record(PowerENUMSchema, z.array(ProvinceENUMSchema))
   }),
-  year: z.number(),
-  units: z.array(UnitSchema),
+  year: z.number().optional(),
 });
 
 export const GameSchema = z.object({
-  map_name: z.string(),
-  game_id: z.string(),
+  map: z.string(),
+  id: z.string(),
   phases: z.array(PhaseSchema),
 });
 
 export type GamePhase = z.infer<typeof PhaseSchema>;
+export type GameSchemaType = z.infer<typeof GameSchema>;
diff --git a/ai_animation/src/types/map.ts b/ai_animation/src/types/map.ts
index ad9e87a..2dab4f0 100644
--- a/ai_animation/src/types/map.ts
+++ b/ai_animation/src/types/map.ts
@@ -8,6 +8,7 @@ export enum ProvTypeENUM {
 }
 
 export enum PowerENUM {
+  ENGLAND = "England",
   FRANCE = "France",
   TURKEY = "Turkey",
   AUSTRIA = "Austria",
@@ -16,8 +17,16 @@ export enum PowerENUM {
   RUSSIA = "Russia",
 }
 
+
+
 export const ProvTypeSchema = z.nativeEnum(ProvTypeENUM);
-export const PowerSchema = z.nativeEnum(PowerENUM).transform((val) => (val.charAt(0).toUpperCase() + val.slice(1).toLowerCase()));
+export const PowerENUMSchema = z.preprocess((arg) => {
+  if (typeof arg === "string") {
+    // Normalize the string: "austria" or "AUSTRIA" becomes "Austria"
+    return arg.charAt(0).toUpperCase() + arg.slice(1).toLowerCase();
+  }
+  return arg;
+}, z.nativeEnum(PowerENUM));
 
 export const LabelSchema = z.object({
   x: z.number(),
@@ -33,7 +42,8 @@ export const ProvinceSchema = z.object({
   label: LabelSchema,
   type: ProvTypeSchema,
   unit: UnitSchema.optional(),
-  owner: PowerSchema.optional(),
+  owner: PowerENUMSchema.optional(),
+  isSupplyCenter: z.boolean().optional()
 });
 
 export const CoordinateDataSchema = z.object({
@@ -42,4 +52,83 @@ export const CoordinateDataSchema = z.object({
 
 export type Province = z.infer<typeof ProvinceSchema>;
 export type CoordinateData = z.infer<typeof CoordinateDataSchema>;
+enum ProvinceENUM {
+  ANK = "ANK",
+  ARM = "ARM",
+  CON = "CON",
+  MOS = "MOS",
+  SEV = "SEV",
+  STP = "STP",
+  SYR = "SYR",
+  UKR = "UKR",
+  LVN = "LVN",
+  WAR = "WAR",
+  PRU = "PRU",
+  SIL = "SIL",
+  BER = "BER",
+  KIE = "KIE",
+  RUH = "RUH",
+  MUN = "MUN",
+  RUM = "RUM",
+  BUL = "BUL",
+  GRE = "GRE",
+  SMY = "SMY",
+  ALB = "ALB",
+  SER = "SER",
+  BUD = "BUD",
+  GAL = "GAL",
+  VIE = "VIE",
+  BOH = "BOH",
+  TYR = "TYR",
+  TRI = "TRI",
+  FIN = "FIN",
+  SWE = "SWE",
+  NWY = "NWY",
+  DEN = "DEN",
+  HOL = "HOL",
+  BEL = "BEL",
+  SWI = "SWI",
+  VEN = "VEN",
+  PIE = "PIE",
+  TUS = "TUS",
+  ROM = "ROM",
+  APU = "APU",
+  NAP = "NAP",
+  BUR = "BUR",
+  MAR = "MAR",
+  GAS = "GAS",
+  PIC = "PIC",
+  PAR = "PAR",
+  BRE = "BRE",
+  SPA = "SPA",
+  POR = "POR",
+  NAF = "NAF",
+  TUN = "TUN",
+  LON = "LON",
+  WAL = "WAL",
+  LVP = "LVP",
+  YOR = "YOR",
+  EDI = "EDI",
+  CLY = "CLY",
+  NAT = "NAT",
+  NRG = "NRG",
+  BAR = "BAR",
+  BOT = "BOT",
+  BAL = "BAL",
+  SKA = "SKA",
+  HEL = "HEL",
+  NTH = "NTH",
+  ENG = "ENG",
+  IRI = "IRI",
+  MID = "MID",
+  WES = "WES",
+  GOL = "GOL",
+  TYN = "TYN",
+  ADR = "ADR",
+  ION = "ION",
+  AEG = "AEG",
+  EAS = "EAS",
+  BLA = "BLA",
+}
 
+export const ProvinceENUMSchema = z.nativeEnum(ProvinceENUM)
diff --git a/ai_animation/src/units/animate.ts b/ai_animation/src/units/animate.ts
index 06c9b00..ad65031 100644
--- a/ai_animation/src/units/animate.ts
+++ b/ai_animation/src/units/animate.ts
@@ -3,8 +3,8 @@ import type { GamePhase } from "../types/gameState";
 import { createUnitMesh } from "./create";
 import { UnitMesh } from "../types/units";
 import { getProvincePosition } from "../map/utils";
-import { coordinateData } from "../gameState";
 import { Tween } from "@tweenjs/tween.js";
+import { gameState } from "../gameState";
 
 //FIXME: Move this to a file with all the constants
 let animationDuration = 1500; // Duration of unit movement animation in ms
@@ -45,7 +45,7 @@ export function createTweenAnimations(unitMeshes: UnitMesh[], currentPhase: Game
         const match = unitStr.match(/^([AF])\s+(.+)$/);
         if (match) {
           const key = `${power}-${match[1]}-${match[2]}`;
-          previousUnitPositions[key] = getProvincePosition(coordinateData, match[2]);
+          previousUnitPositions[key] = getProvincePosition(gameState.boardState, match[2]);
         }
       });
     }
@@ -62,7 +62,7 @@ export function createTweenAnimations(unitMeshes: UnitMesh[], currentPhase: Game
         const location = armyOrFleetOrder[2];
 
         // Current final
-        const currentPos = getProvincePosition(coordinateData, location);
+        const currentPos = getProvincePosition(gameState.boardState, location);
 
         let startPos;
         let matchFound = false;
@@ -106,7 +106,7 @@ export function createAnimationsForPhaseTransition(unitMeshes: UnitMesh[], curre
         const match = unitStr.match(/^([AF])\s+(.+)$/);
         if (match) {
           const key = `${power} -${match[1]} -${match[2]} `;
-          previousUnitPositions[key] = getProvincePosition(coordinateData, match[2]);
+          previousUnitPositions[key] = getProvincePosition(gameState.boardState, match[2]);
         }
       });
     }
@@ -124,7 +124,7 @@ export function createAnimationsForPhaseTransition(unitMeshes: UnitMesh[], curre
 
 
         // Current final
-        const currentPos = getProvincePosition(coordinateData, location);
+        const currentPos = getProvincePosition(gameState.boardState, location);
 
         let startPos;
         let matchFound = false;
diff --git a/ai_animation/src/units/create.ts b/ai_animation/src/units/create.ts
index e3e4bd0..a02571b 100644
--- a/ai_animation/src/units/create.ts
+++ b/ai_animation/src/units/create.ts
@@ -1,6 +1,8 @@
 import * as THREE from "three";
 import { UnitData, UnitMesh } from "../types/units";
 import { PowerENUM } from "../types/map";
+import { gameState } from "../gameState";
+import { getProvincePosition } from "../map/utils";
 
 // Get color for a power
 export function getPowerHexColor(power: PowerENUM) {
@@ -67,6 +69,60 @@ function createFleet(color: string): THREE.Group {
   group.add(sail);
   return group
 }
+
+export function createSupplyCenters(): THREE.Group[] {
+  let supplyCenterMeshes: THREE.Group[] = [];
+  if (!gameState.boardState || !gameState.boardState.provinces) throw new Error("Game not initialized, cannot create SCs");
+  for (const [province, data] of Object.entries(gameState.boardState.provinces)) {
+    if (data.isSupplyCenter && gameState.boardState.provinces[province]) {
+
+      // Build a small pillar + star in 3D
+      const scGroup = new THREE.Group();
+
+      const baseGeom = new THREE.CylinderGeometry(12, 12, 3, 16);
+      const baseMat = new THREE.MeshStandardMaterial({ color: 0x333333 });
+      const base = new THREE.Mesh(baseGeom, baseMat);
+      base.position.y = 1.5;
+      scGroup.add(base);
+
+      const pillarGeom = new THREE.CylinderGeometry(2.5, 2.5, 12, 8);
+      const pillarMat = new THREE.MeshStandardMaterial({ color: 0xcccccc });
+      const pillar = new THREE.Mesh(pillarGeom, pillarMat);
+      pillar.position.y = 7.5;
+      scGroup.add(pillar);
+
+      // We'll just do a cone star for simplicity
+      const starGeom = new THREE.ConeGeometry(6, 10, 5);
+      const starMat = new THREE.MeshStandardMaterial({ color: 0xFFD700 });
+      const starMesh = new THREE.Mesh(starGeom, starMat);
+      starMesh.rotation.x = Math.PI; // point upwards
+      starMesh.position.y = 14;
+      scGroup.add(starMesh);
+
+      // Optionally add a glow disc
+      const glowGeom = new THREE.CircleGeometry(15, 32);
+      const glowMat = new THREE.MeshBasicMaterial({ color: 0xFFFFAA, transparent: true, opacity: 0.3, side: THREE.DoubleSide });
+      const glowMesh = new THREE.Mesh(glowGeom, glowMat);
+      glowMesh.rotation.x = -Math.PI / 2;
+      glowMesh.position.y = 2;
+      scGroup.add(glowMesh);
+
+      // Store userData for ownership changes
+      scGroup.userData = {
+        province,
+        isSupplyCenter: true,
+        owner: null,
+        starMesh,
+        glowMesh
+      };
+
+      const pos = getProvincePosition(gameState.boardState, province);
+      scGroup.position.set(pos.x, 2, pos.z);
+      supplyCenterMeshes.push(scGroup)
+    }
+  }
+  return supplyCenterMeshes
+}
 export function createUnitMesh(unitData: UnitData): UnitMesh {
   const color = getPowerHexColor(unitData.power);
   let group: THREE.Group | null;
@@ -77,6 +133,8 @@ export function createUnitMesh(unitData: UnitData): UnitMesh {
   } else {
     group = createFleet(color)
   }
+  let pos = getProvincePosition(gameState.boardState, unitData.province)
+  group.position.set(pos.x, pos.y, pos.z)
 
   // Store metadata
   group.userData = {