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 = {