Ticket #9: visualreplay-WIP-r12723.patch

binaries/data/mods/public/gui/page_replay.xml

@@ +1 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page>
+    <include>common/setup.xml</include>
+    <include>common/styles.xml</include>
+    <include>common/sprite1.xml</include>
+    <include>common/icon_sprites.xml</include>
+
+    <include>common/common_sprites.xml</include>
+    <include>common/common_styles.xml</include>
+
+    <include>session/sprites.xml</include>
+    <include>session/styles.xml</include>
+    <include>replay/replay.xml</include>
+    <include>common/global.xml</include>
+</page>

binaries/data/mods/public/gui/replay/input.js

@@ +1 @@
+const SDL_BUTTON_LEFT = 1;
+const SDL_BUTTON_MIDDLE = 2;
+const SDL_BUTTON_RIGHT = 3;
+const SDLK_LEFTBRACKET = 91;
+const SDLK_RIGHTBRACKET = 93;
+const SDLK_RSHIFT = 303;
+const SDLK_LSHIFT = 304;
+const SDLK_RCTRL = 305;
+const SDLK_LCTRL = 306;
+const SDLK_RALT = 307;
+const SDLK_LALT = 308;
+// TODO: these constants should be defined somewhere else instead, in
+// case any other code wants to use them too
+
+const ACTION_NONE = 0;
+const ACTION_GARRISON = 1;
+const ACTION_REPAIR = 2;
+var preSelectedAction = ACTION_NONE;
+
+const INPUT_NORMAL = 0;
+const INPUT_SELECTING = 1;
+const INPUT_BANDBOXING = 2;
+
+var inputState = INPUT_NORMAL;
+
+var mouseX = 0;
+var mouseY = 0;
+var mouseIsOverObject = false;
+
+// Number of pixels the mouse can move before the action is considered a drag
+var maxDragDelta = 4;
+
+// Time in milliseconds in which a double click is recognized
+const doubleClickTime = 500;
+var doubleClickTimer = 0;
+var doubleClicked = false;
+// Store the previously clicked entity - ensure a double/triple click happens on the same entity
+var prevClickedEntity = 0;
+
+// Same double-click behaviour for hotkey presses
+const doublePressTime = 500;
+var doublePressTimer = 0;
+var prevHotkey = 0;
+
+
+var dragStart; // used for remembering mouse coordinates at start of drag operations
+
+// Limits bandboxed selections to certain types of entities based on priority
+function getPreferredEntities(ents)
+{
+    var entStateList = [];
+    var preferredEnts = [];
+
+    // Check if there are units in the selection and get a list of entity states
+    for each (var ent in ents)
+    {
+        var entState = GetEntityState(ent);
+        if (!entState)
+            continue;
+        if (hasClass(entState, "Unit"))
+            preferredEnts.push(ent);
+
+        entStateList.push(entState);
+    }
+
+    // If there are no units, check if there are defensive entities in the selection
+    if (!preferredEnts.length)
+        for (var i = 0; i < ents.length; i++)
+            if (hasClass(entStateList[i], "Defensive"))
+                preferredEnts.push(ents[i]);
+
+    return preferredEnts;
+}
+
+// Removes any support units from the passed list of entities
+function getMilitaryEntities(ents)
+{
+    var militaryEnts = [];
+    for each (var ent in ents)
+    {
+        var entState = GetEntityState(ent);
+        if (!hasClass(entState, "Support"))
+            militaryEnts.push(ent);
+    }
+    return militaryEnts;
+}
+
+function handleInputBeforeGui(ev, hoveredObject)
+{
+    // Capture mouse position so we can use it for displaying cursors,
+    // and key states
+    switch (ev.type)
+    {
+    case "mousebuttonup":
+    case "mousebuttondown":
+    case "mousemotion":
+        mouseX = ev.x;
+        mouseY = ev.y;
+        break;
+    }
+
+    // Remember whether the mouse is over a GUI object or not
+    mouseIsOverObject = (hoveredObject != null);
+
+    // Close the menu when interacting with the game world
+    if (!mouseIsOverObject && (ev.type =="mousebuttonup" || ev.type == "mousebuttondown")
+        && (ev.button == SDL_BUTTON_LEFT || ev.button == SDL_BUTTON_RIGHT))
+        closeMenu();
+
+    // State-machine processing:
+    //
+    // (This is for states which should override the normal GUI processing - events will
+    // be processed here before being passed on, and propagation will stop if this function
+    // returns true)
+    //
+    // TODO: it'd probably be nice to have a better state-machine system, with guaranteed
+    // entry/exit functions, since this is a bit broken now
+
+    switch (inputState)
+    {
+    case INPUT_BANDBOXING:
+        switch (ev.type)
+        {
+        case "mousemotion":
+            var x0 = dragStart[0];
+            var y0 = dragStart[1];
+            var x1 = ev.x;
+            var y1 = ev.y;
+            if (x0 > x1) { var t = x0; x0 = x1; x1 = t; }
+            if (y0 > y1) { var t = y0; y0 = y1; y1 = t; }
+
+            var bandbox = getGUIObjectByName("bandbox");
+            bandbox.size = [x0, y0, x1, y1].join(" ");
+            bandbox.hidden = false;
+
+            // TODO: Should we handle "control all units" here as well?
+            var ents = Engine.PickFriendlyEntitiesInRect(x0, y0, x1, y1, Engine.GetPlayerID());
+            g_Selection.setHighlightList(ents);
+
+            return false;
+
+        case "mousebuttonup":
+            if (ev.button == SDL_BUTTON_LEFT)
+            {
+                var x0 = dragStart[0];
+                var y0 = dragStart[1];
+                var x1 = ev.x;
+                var y1 = ev.y;
+                if (x0 > x1) { var t = x0; x0 = x1; x1 = t; }
+                if (y0 > y1) { var t = y0; y0 = y1; y1 = t; }
+
+                var bandbox = getGUIObjectByName("bandbox");
+                bandbox.hidden = true;
+
+                // Get list of entities limited to preferred entities
+                // TODO: Should we handle "control all units" here as well?
+                var ents = Engine.PickFriendlyEntitiesInRect(x0, y0, x1, y1, Engine.GetPlayerID());
+                var preferredEntities = getPreferredEntities(ents)
+
+                if (preferredEntities.length)
+                {
+                    ents = preferredEntities;
+
+                    if (Engine.HotkeyIsPressed("selection.milonly"))
+                    {
+                        var militaryEntities = getMilitaryEntities(ents);
+                        if (militaryEntities.length)
+                            ents = militaryEntities;
+                    }
+                }
+
+                // Remove the bandbox hover highlighting
+                g_Selection.setHighlightList([]);
+
+                // Update the list of selected units
+                if (Engine.HotkeyIsPressed("selection.add"))
+                {
+                    g_Selection.addList(ents);
+                }
+                else if (Engine.HotkeyIsPressed("selection.remove"))
+                {
+                    g_Selection.removeList(ents);
+                }
+                else
+                {
+                    g_Selection.reset();
+                    g_Selection.addList(ents);
+                }
+
+                inputState = INPUT_NORMAL;
+                return true;
+            }
+            else if (ev.button == SDL_BUTTON_RIGHT)
+            {
+                // Cancel selection
+                var bandbox = getGUIObjectByName("bandbox");
+                bandbox.hidden = true;
+
+                g_Selection.setHighlightList([]);
+
+                inputState = INPUT_NORMAL;
+                return true;
+            }
+            break;
+        }
+        break;
+    }
+
+    return false;
+}
+
+function handleInputAfterGui(ev)
+{
+    if (ev.hotkey == "session.showstatusbars")
+    {
+        g_ShowAllStatusBars = (ev.type == "hotkeydown");
+        recalculateStatusBarDisplay();
+    }
+
+    // State-machine processing:
+
+    switch (inputState)
+    {
+    case INPUT_NORMAL:
+        switch (ev.type)
+        {
+        case "mousemotion":
+            // Highlight the first hovered entity (if any)
+            var ents = Engine.PickEntitiesAtPoint(ev.x, ev.y);
+            if (ents.length)
+                g_Selection.setHighlightList([ents[0]]);
+            else
+                g_Selection.setHighlightList([]);
+
+            return false;
+
+        case "mousebuttondown":
+            if (ev.button == SDL_BUTTON_LEFT)
+            {
+                dragStart = [ ev.x, ev.y ];
+                inputState = INPUT_SELECTING;
+                return true;
+            }
+            break;
+        }
+        break;
+        
+    case INPUT_SELECTING:
+        switch (ev.type)
+        {
+        case "mousemotion":
+            // If the mouse moved further than a limit, switch to bandbox mode
+            var dragDeltaX = ev.x - dragStart[0];
+            var dragDeltaY = ev.y - dragStart[1];
+
+            if (Math.abs(dragDeltaX) >= maxDragDelta || Math.abs(dragDeltaY) >= maxDragDelta)
+            {
+                inputState = INPUT_BANDBOXING;
+                return false;
+            }
+
+            var ents = Engine.PickEntitiesAtPoint(ev.x, ev.y);
+            g_Selection.setHighlightList(ents);
+            return false;
+
+        case "mousebuttonup":
+            if (ev.button == SDL_BUTTON_LEFT)
+            {
+                var ents = Engine.PickEntitiesAtPoint(ev.x, ev.y);
+                if (!ents.length)
+                {
+                    if (!Engine.HotkeyIsPressed("selection.add") && !Engine.HotkeyIsPressed("selection.remove"))
+                    {
+                        g_Selection.reset();
+                        resetIdleUnit();
+                    }
+                    inputState = INPUT_NORMAL;
+                    return true;
+                }
+
+                var selectedEntity = ents[0];
+                var now = new Date();
+
+                // If camera following and we select different unit, stop
+                if (Engine.GetFollowedEntity() != selectedEntity)
+                {
+                    Engine.CameraFollow(0);
+                }
+
+                if ((now.getTime() - doubleClickTimer < doubleClickTime) && (selectedEntity == prevClickedEntity))
+                {
+                    // Double click or triple click has occurred
+                    var showOffscreen = Engine.HotkeyIsPressed("selection.offscreen");
+                    var matchRank = true;
+                    var templateToMatch;
+
+                    // Check for double click or triple click
+                    if (!doubleClicked)
+                    {
+                        // If double click hasn't already occurred, this is a double click.
+                        // Select similar units regardless of rank
+                        templateToMatch = Engine.GuiInterfaceCall("GetEntityState", selectedEntity).identity.selectionGroupName;
+                        if (templateToMatch)
+                        {
+                            matchRank = false;
+                        }
+                        else
+                        {   // No selection group name defined, so fall back to exact match
+                            templateToMatch = Engine.GuiInterfaceCall("GetEntityState", selectedEntity).template;
+                        }
+
+                        doubleClicked = true;
+                        // Reset the timer so the user has an extra period 'doubleClickTimer' to do a triple-click
+                        doubleClickTimer = now.getTime();
+                    }
+                    else
+                    {
+                        // Double click has already occurred, so this is a triple click.
+                        // Select units matching exact template name (same rank)
+                        templateToMatch = Engine.GuiInterfaceCall("GetEntityState", selectedEntity).template;
+                    }
+
+                    // TODO: Should we handle "control all units" here as well?
+                    ents = Engine.PickSimilarFriendlyEntities(templateToMatch, showOffscreen, matchRank, false);
+                }
+                else
+                {
+                    // It's single click right now but it may become double or triple click
+                    doubleClicked = false;
+                    doubleClickTimer = now.getTime();
+                    prevClickedEntity = selectedEntity;
+
+                    // We only want to include the first picked unit in the selection
+                    ents = [ents[0]];
+                }
+
+                // Update the list of selected units
+                if (Engine.HotkeyIsPressed("selection.add"))
+                {
+                    g_Selection.addList(ents);
+                }
+                else if (Engine.HotkeyIsPressed("selection.remove"))
+                {
+                    g_Selection.removeList(ents);
+                }
+                else
+                {
+                    g_Selection.reset();
+                    g_Selection.addList(ents);
+                }
+
+                inputState = INPUT_NORMAL;
+                return true;
+            }
+            break;
+        }
+        break;
+    }
+    return false;
+}
+
+// Called by unit selection buttons
+function changePrimarySelectionGroup(templateName)
+{
+    if (Engine.HotkeyIsPressed("session.deselectgroup"))
+        g_Selection.makePrimarySelection(templateName, true);
+    else
+        g_Selection.makePrimarySelection(templateName, false);
+}
+
+
+// Set the camera to follow the given unit
+function setCameraFollow(entity)
+{
+    // Follow the given entity if it's a unit
+    if (entity)
+    {
+        var entState = GetEntityState(entity);
+        if (entState && hasClass(entState, "Unit"))
+        {
+            Engine.CameraFollow(entity);
+            return;
+        }
+    }
+
+    // Otherwise stop following
+    Engine.CameraFollow(0);
+}
+
+var lastIdleUnit = 0;
+var currIdleClass = 0;
+var lastIdleType = undefined;
+
+function resetIdleUnit()
+{
+    lastIdleUnit = 0;
+    currIdleClass = 0;
+    lastIdleType = undefined;
+}
+
+function findIdleUnit(classes)
+{
+    var append = Engine.HotkeyIsPressed("selection.add");
+    var selectall = Engine.HotkeyIsPressed("selection.offscreen");
+
+    // Reset the last idle unit, etc., if the selection type has changed.
+    var type = classes.join();
+    if (selectall || type != lastIdleType)
+        resetIdleUnit();
+    lastIdleType = type;
+
+    // If selectall is true, there is no limit and it's necessary to iterate
+    // over all of the classes, resetting only when the first match is found.
+    var matched = false;
+
+    for (var i = 0; i < classes.length; ++i)
+    {
+        var data = { idleClass: classes[currIdleClass], prevUnit: lastIdleUnit, limit: 1 };
+        if (append)
+            data.excludeUnits = g_Selection.toList();
+
+        if (selectall)
+            data = { idleClass: classes[currIdleClass] };
+
+        // Check if we have new valid entity
+        var idleUnits = Engine.GuiInterfaceCall("FindIdleUnits", data);
+        if (idleUnits.length && idleUnits[0] != lastIdleUnit)
+        {
+            lastIdleUnit = idleUnits[0];
+            if (!append && (!selectall || selectall && !matched))
+                g_Selection.reset()
+
+            if (selectall)
+                g_Selection.addList(idleUnits);
+            else
+            {
+                g_Selection.addList([lastIdleUnit]);
+                Engine.CameraFollow(lastIdleUnit);
+                return;
+            }
+
+            matched = true;
+        }
+
+        lastIdleUnit = 0;
+        currIdleClass = (currIdleClass + 1) % classes.length;
+    }
+
+    // TODO: display a message or play a sound to indicate no more idle units, or something
+    // Reset for next cycle
+    resetIdleUnit();
+}
+
+// Ignored: we ignore these callbacks in replay mode
+function removeFromProductionQueue() {};
+function unloadTemplate() {};
+function unloadAll() {};

binaries/data/mods/public/gui/replay/menu.js

@@ +1 @@
+const PAUSE = "Pause";
+const RESUME = "Resume";
+
+/*
+ * MENU POSITION CONSTANTS
+*/
+
+// Menu / panel border size
+const MARGIN = 4;
+
+// Includes the main menu button
+const NUM_BUTTONS = 4;
+
+// Regular menu buttons
+const BUTTON_HEIGHT = 32;
+
+// The position where the bottom of the menu will end up (currently 228)
+const END_MENU_POSITION = (BUTTON_HEIGHT * NUM_BUTTONS) + MARGIN;
+
+// Menu starting position: bottom
+const MENU_BOTTOM = 0;
+
+// Menu starting position: top
+const MENU_TOP = MENU_BOTTOM - END_MENU_POSITION;
+
+// Menu starting position: overall
+const INITIAL_MENU_POSITION = "100%-164 " + MENU_TOP + " 100% " + MENU_BOTTOM;
+
+// Number of pixels per millisecond to move
+const MENU_SPEED = 1.2;
+
+var isMenuOpen = false;
+var menu;
+
+// Ignore size defined in XML and set the actual menu size here
+function initMenuPosition()
+{
+    menu = getGUIObjectByName("menu");
+    menu.size = INITIAL_MENU_POSITION;
+}
+
+
+// =============================================================================
+// Overall Menu
+// =============================================================================
+//
+// Slide menu
+function updateMenuPosition(dt)
+{
+    if (isMenuOpen)
+    {
+        var maxOffset = END_MENU_POSITION - menu.size.bottom;
+        if (maxOffset > 0)
+        {
+            var offset = Math.min(MENU_SPEED * dt, maxOffset);
+            var size = menu.size;
+            size.top += offset;
+            size.bottom += offset;
+            menu.size = size;
+        }
+    }
+    else
+    {
+        var maxOffset = menu.size.top - MENU_TOP;
+        if (maxOffset > 0)
+        {
+            var offset = Math.min(MENU_SPEED * dt, maxOffset);
+            var size = menu.size;
+            size.top -= offset;
+            size.bottom -= offset;
+            menu.size = size;
+        }
+    }
+}
+
+// Opens the menu by revealing the screen which contains the menu
+function openMenu()
+{
+//  playButtonSound();
+    isMenuOpen = true;
+}
+
+// Closes the menu and resets position
+function closeMenu()
+{
+//  playButtonSound();
+    isMenuOpen = false;
+}
+
+function toggleMenu()
+{
+    if (isMenuOpen == true)
+        closeMenu();
+    else
+        openMenu();
+}
+
+// Menu buttons
+// =============================================================================
+function settingsMenuButton()
+{
+    closeMenu();
+    closeOpenDialogs();
+    openSettings(true);
+}
+
+function pauseMenuButton()
+{
+    togglePause();
+}
+
+function resignMenuButton()
+{
+    closeMenu();
+    closeOpenDialogs();
+    pauseGame();
+    var btCaptions = ["Yes", "No"];
+    var btCode = [resignGame, resumeGame];
+    messageBox(400, 200, "Are you sure you want to resign?", "Confirmation", 0, btCaptions, btCode);
+}
+
+function exitMenuButton()
+{
+    closeMenu();
+    closeOpenDialogs();
+    pauseGame();
+    var btCaptions = ["Yes", "No"];
+    var btCode = [leaveGame, resumeGame];
+    messageBox(400, 200, "Are you sure you want to quit?", "Confirmation", 0, btCaptions, btCode);
+}
+
+function openDeleteDialog(selection)
+{
+    closeMenu();
+    closeOpenDialogs();
+
+    var deleteSelectedEntities = function ()
+    {
+        Engine.PostNetworkCommand({"type": "delete-entities", "entities": selection});
+    };
+
+    var btCaptions = ["Yes", "No"];
+    var btCode = [deleteSelectedEntities, resumeGame];
+
+    messageBox(400, 200, "Destroy everything currently selected?", "Delete", 0, btCaptions, btCode);
+}
+
+// Menu functions
+// =============================================================================
+
+function openSettings(pause)
+{
+    getGUIObjectByName("settingsDialogPanel").hidden = false;
+    if (pause)
+        pauseGame();
+}
+
+function closeSettings(resume)
+{
+        getGUIObjectByName("settingsDialogPanel").hidden = true;
+    if (resume)
+        resumeGame();
+}
+
+function pauseGame()
+{
+    getGUIObjectByName("pauseButtonText").caption = RESUME;
+    getGUIObjectByName("pauseOverlay").hidden = false;
+    setPaused(true);
+}
+
+function resumeGame()
+{
+    getGUIObjectByName("pauseButtonText").caption = PAUSE;
+    getGUIObjectByName("pauseOverlay").hidden = true;
+    setPaused(false);
+}
+
+function togglePause()
+{
+    closeMenu();
+    closeOpenDialogs();
+
+    var pauseOverlay = getGUIObjectByName("pauseOverlay");
+
+    if (pauseOverlay.hidden)
+    {
+        getGUIObjectByName("pauseButtonText").caption = RESUME;
+        setPaused(true);
+
+    }
+    else
+    {
+        setPaused(false);
+        getGUIObjectByName("pauseButtonText").caption = PAUSE;
+    }
+
+    pauseOverlay.hidden = !pauseOverlay.hidden;
+}
+
+function toggleDeveloperOverlay()
+{
+    var devCommands = getGUIObjectByName("devCommands");
+    devCommands.hidden = !devCommands.hidden;
+}
+
+function closeOpenDialogs()
+{
+    closeMenu();
+    closeSettings(false);
+}

binaries/data/mods/public/gui/replay/replay.js

@@ +1 @@
+// Network Mode
+var g_IsNetworked = false;
+
+// Cache the basic player data (name, civ, color)
+var g_Players = [];
+// Cache the useful civ data
+var g_CivData = {};
+
+var g_PlayerAssignments = { "local": { "name": "You", "player": 1 } };
+
+// Cache dev-mode settings that are frequently or widely used
+var g_DevSettings = {
+    controlAll: false
+};
+
+// Whether status bars should be shown for all of the player's units.
+var g_ShowAllStatusBars = false;
+
+// Indicate when one of the current player's training queues is blocked
+// (this is used to support population counter blinking)
+var g_IsTrainingBlocked = false;
+
+// Cache EntityStates
+var g_EntityStates = {}; // {id:entState}
+
+// Whether the player has lost/won and reached the end of their game
+var g_GameEnded = false;
+
+// Colors to flash when pop limit reached
+const DEFAULT_POPULATION_COLOR = "white";
+const POPULATION_ALERT_COLOR = "orange";
+
+function GetEntityState(entId)
+{
+    if (!(entId in g_EntityStates))
+    {
+        var entState = Engine.GuiInterfaceCall("GetEntityState", entId);
+        g_EntityStates[entId] = entState;
+    }
+
+    return g_EntityStates[entId];
+}
+
+// Cache TemplateData
+var g_TemplateData = {}; // {id:template}
+
+
+function GetTemplateData(templateName)
+{
+    if (!(templateName in g_TemplateData))
+    {
+        var template = Engine.GuiInterfaceCall("GetTemplateData", templateName);
+        g_TemplateData[templateName] = template;
+    }
+
+    return g_TemplateData[templateName];
+}
+
+// Cache TechnologyData
+var g_TechnologyData = {}; // {id:template}
+
+function GetTechnologyData(technologyName)
+{
+    if (!(technologyName in g_TechnologyData))
+    {
+        var template = Engine.GuiInterfaceCall("GetTechnologyData", technologyName);
+        g_TechnologyData[technologyName] = template;
+    }
+
+    return g_TechnologyData[technologyName];
+}
+
+// Init
+function init(initData, hotloadData)
+{
+    if (initData)
+    {
+        g_IsNetworked = initData.isNetworked; // Set network mode
+        g_PlayerAssignments = initData.playerAssignments;
+
+        // Cache the player data
+        // (This may be updated at runtime by handleNetMessage)
+        g_Players = getPlayerData(g_PlayerAssignments);
+    }
+    else // Needed for autostart loading option
+    {
+        g_Players = getPlayerData(null);
+    }
+
+    // Cache civ data
+    g_CivData = loadCivData();
+    g_CivData["gaia"] = { "Code": "gaia", "Name": "Gaia", "Emblem": "session/icons/groups.png" };
+
+    initMenuPosition(); // set initial position
+
+    // Populate player selection dropdown
+    var playerNames = [];
+    var playerIDs = [];
+    for (var player in g_Players)
+    {
+        playerNames.push(g_Players[player].name);
+        playerIDs.push(player);
+    }
+
+    var viewPlayerDropdown = getGUIObjectByName("viewPlayer");
+    viewPlayerDropdown.list = playerNames;
+    viewPlayerDropdown.list_data = playerIDs;
+    viewPlayerDropdown.selected = 1;
+    
+    // If in Atlas editor, disable the exit button
+    if (Engine.IsAtlasRunning())
+        getGUIObjectByName("menuExitButton").enabled = false;
+
+    if (hotloadData)
+    {
+        g_Selection.selected = hotloadData.selection;
+    }
+
+    onSimulationUpdate();
+
+    // Report the performance after 5 seconds (when we're still near
+    // the initial camera view) and a minute (when the profiler will
+    // have settled down if framerates as very low), to give some
+    // extremely rough indications of performance
+    setTimeout(function() { reportPerformance(5); }, 5000);
+    setTimeout(function() { reportPerformance(60); }, 60000);
+}
+
+function selectViewPlayer(playerID)
+{
+    Engine.SetPlayerID(playerID);
+    getGUIObjectByName("civIcon").sprite = "stretched:" + g_CivData[g_Players[playerID].civ].Emblem;
+    getGUIObjectByName("civIcon").tooltip = g_CivData[g_Players[playerID].civ].Name;
+}
+
+function reportPerformance(time)
+{
+    var settings = Engine.GetMapSettings();
+    var data = {
+        time: time,
+        map: settings.Name,
+        seed: settings.Seed, // only defined for random maps
+        size: settings.Size, // only defined for random maps
+        profiler: Engine.GetProfilerState()
+    };
+
+    Engine.SubmitUserReport("profile", 3, JSON.stringify(data));
+}
+
+function leaveGame()
+{
+    var extendedSimState = Engine.GuiInterfaceCall("GetExtendedSimulationState");
+
+    var mapSettings = Engine.GetMapSettings();
+
+    endGame();
+
+    Engine.SwitchGuiPage("page_summary.xml", {
+                            "gameResult"  : "Replay mode ended",
+                            "timeElapsed" : extendedSimState.timeElapsed,
+                            "playerStates": extendedSimState.players,
+                            "players": g_Players,
+                            "mapSettings": mapSettings
+                         });
+}
+
+// Return some data that we'll use when hotloading this file after changes
+function getHotloadData()
+{
+    return { selection: g_Selection.selected };
+}
+
+var lastTickTime = new Date;
+
+/**
+ * Called every frame.
+ */
+function onTick()
+{
+    var now = new Date;
+    var tickLength = new Date - lastTickTime;
+    lastTickTime = now;
+
+    while (true)
+    {
+        var message = Engine.PollNetworkClient();
+        if (!message)
+            break;
+        handleNetMessage(message);
+    }
+
+    // If the selection changed, we need to regenerate the sim display (the display depends on both the
+    // simulation state and the current selection).
+    if (g_Selection.dirty)
+    {
+        onSimulationUpdate();
+
+        // Display rally points for selected buildings
+        Engine.GuiInterfaceCall("DisplayRallyPoint", { "entities": g_Selection.toList() });
+    }
+
+    // Run timers
+    updateTimers();
+
+    // Animate menu
+    updateMenuPosition(tickLength);
+
+    // When training is blocked, flash population (alternates colour every 500msec)
+    if (g_IsTrainingBlocked && (Date.now() % 1000) < 500)
+        getGUIObjectByName("resourcePop").textcolor = POPULATION_ALERT_COLOR;
+    else
+        getGUIObjectByName("resourcePop").textcolor = DEFAULT_POPULATION_COLOR;
+
+    // Clear renamed entities list
+    Engine.GuiInterfaceCall("ClearRenamedEntities");
+}
+
+function onReplayFinished()
+{
+    closeMenu();
+    closeOpenDialogs();
+    pauseGame();
+    var btCaptions = ["Yes", "No"];
+    var btCode = [leaveGame, resumeGame];
+    messageBox(400, 200, "The replay has finished. Do you want to quit?", "Confirmation", 0, btCaptions, btCode);
+}
+
+/**
+ * Recomputes GUI state that depends on simulation state or selection state. Called directly every simulation
+ * update (see session.xml), or from onTick when the selection has changed.
+ */
+function onSimulationUpdate()
+{
+    g_Selection.dirty = false;
+    g_EntityStates = {};
+    g_TemplateData = {};
+    g_TechnologyData = {};
+
+    var simState = Engine.GuiInterfaceCall("GetSimulationState");
+
+    // If we're called during init when the game is first loading, there will be no simulation yet, so do nothing
+    if (!simState)
+        return;
+
+    handleNotifications();
+
+    if (g_ShowAllStatusBars)
+        recalculateStatusBarDisplay();
+
+    updateDebug(simState);
+    updatePlayerDisplay(simState);
+    updateSelectionDetails(true);
+    updateResearchDisplay();
+    updateTimeElapsedCounter(simState);
+}
+
+function updateDebug(simState)
+{
+    var debug = getGUIObjectByName("debug");
+
+    if (getGUIObjectByName("devDisplayState").checked)
+    {
+        debug.hidden = false;
+    }
+    else
+    {
+        debug.hidden = true;
+        return;
+    }
+
+    var conciseSimState = deepcopy(simState);
+    conciseSimState.players = "<<<omitted>>>";
+    var text = "simulation: " + uneval(conciseSimState);
+
+    var selection = g_Selection.toList();
+    if (selection.length)
+    {
+        var entState = GetEntityState(selection[0]);
+        if (entState)
+        {
+            var template = GetTemplateData(entState.template);
+            text += "\n\nentity: {\n";
+            for (var k in entState)
+                text += "  "+k+":"+uneval(entState[k])+"\n";
+            text += "}\n\ntemplate: " + uneval(template);
+        }
+    }
+
+    debug.caption = text;
+}
+
+function updatePlayerDisplay(simState)
+{
+    var playerState = simState.players[Engine.GetPlayerID()];
+    if (!playerState)
+        return;
+
+    getGUIObjectByName("resourceFood").caption = playerState.resourceCounts.food;
+    getGUIObjectByName("resourceWood").caption = playerState.resourceCounts.wood;
+    getGUIObjectByName("resourceStone").caption = playerState.resourceCounts.stone;
+    getGUIObjectByName("resourceMetal").caption = playerState.resourceCounts.metal;
+    getGUIObjectByName("resourcePop").caption = playerState.popCount + "/" + playerState.popLimit;
+
+    g_IsTrainingBlocked = playerState.trainingBlocked;
+}
+
+function selectAndMoveTo(ent)
+{
+    var entState = GetEntityState(ent);
+    if (!entState)
+        return;
+
+    g_Selection.reset();
+    g_Selection.addList([ent]);
+
+    var position = entState.position;
+    Engine.CameraMoveTo(position.x, position.z);
+}
+
+function updateResearchDisplay()
+{
+    var researchStarted = Engine.GuiInterfaceCall("GetStartedResearch", Engine.GetPlayerID());
+    if (!researchStarted)
+        return;
+
+    // Set up initial positioning.
+    var buttonSideLength = getGUIObjectByName("researchStartedButton[0]").size.right;
+    for (var i = 0; i < 10; ++i)
+    {
+        var button = getGUIObjectByName("researchStartedButton[" + i + "]");
+        var size = button.size;
+        size.top = (4 + buttonSideLength) * i;
+        size.bottom = size.top + buttonSideLength;
+        button.size = size;
+    }
+
+    var numButtons = 0;
+    for (var tech in researchStarted)
+    {
+        // Show at most 10 in-progress techs.
+        if (numButtons >= 10)
+            break;
+
+        var template = GetTechnologyData(tech);
+        var button = getGUIObjectByName("researchStartedButton[" + numButtons + "]");
+        button.hidden = false;
+        button.tooltip = getEntityNames(template);
+        button.onpress = (function(e) { return function() { selectAndMoveTo(e) } })(researchStarted[tech].researcher);
+
+        var icon = "stretched:session/portraits/" + template.icon;
+        getGUIObjectByName("researchStartedIcon[" + numButtons + "]").sprite = icon;
+
+        // Scale the progress indicator.
+        var size = getGUIObjectByName("researchStartedProgressSlider[" + numButtons + "]").size;
+
+        // Buttons are assumed to be square, so left/right offsets can be used for top/bottom.
+        size.top = size.left + Math.round(researchStarted[tech].progress * (size.right - size.left));
+        getGUIObjectByName("researchStartedProgressSlider[" + numButtons + "]").size = size;
+
+        ++numButtons;
+    }
+
+    // Hide unused buttons.
+    for (var i = numButtons; i < 10; ++i)
+        getGUIObjectByName("researchStartedButton[" + i + "]").hidden = true;
+}
+
+function updateTimeElapsedCounter(simState)
+{
+    var timeElapsedCounter = getGUIObjectByName("timeElapsedCounter");
+    timeElapsedCounter.caption = timeToString(simState.timeElapsed);
+}
+
+// Toggles the display of status bars for all of the player's entities.
+function recalculateStatusBarDisplay()
+{
+    if (g_ShowAllStatusBars)
+        var entities = Engine.PickFriendlyEntitiesOnScreen(Engine.GetPlayerID());
+    else
+    {
+        var selected = g_Selection.toList();
+        for each (var ent in g_Selection.highlighted)
+            selected.push(ent);
+
+        // Remove selected entities from the 'all entities' array, to avoid disabling their status bars.
+        var entities = Engine.GuiInterfaceCall("GetPlayerEntities").filter(
+                function(idx) { return (selected.indexOf(idx) == -1); }
+        );
+    }
+
+    Engine.GuiInterfaceCall("SetStatusBars", { "entities": entities, "enabled": g_ShowAllStatusBars });
+}
+
+// Temporarily adding this here
+const AMBIENT_TEMPERATE = "temperate";
+var currentAmbient;
+function playRandomAmbient(type)
+{
+    switch (type)
+    {
+        case AMBIENT_TEMPERATE:
+            // Seem to need the underscore at the end of "temperate" to avoid crash
+            // (Might be caused by trying to randomly load day_temperate.xml)
+//          currentAmbient = newRandomSound("ambient", "temperate_", "dayscape");
+
+            const AMBIENT = "audio/ambient/dayscape/day_temperate_gen_03.ogg";
+            currentAmbient = new AmbientSound(AMBIENT);
+
+            if (currentAmbient)
+            {
+                currentAmbient.loop();
+            }
+            break;
+
+        default:
+            console.write("Unrecognized ambient type: " + type);
+            break;
+    }
+}
+
+// Temporarily adding this here
+function stopAmbient()
+{
+    if (currentAmbient)
+    {
+        currentAmbient.free();
+        currentAmbient = null;
+    }
+}

binaries/data/mods/public/gui/replay/replay.xml

@@ +1 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<objects>
+
+  <script file="gui/common/functions_civinfo.js"/>
+  <script file="gui/common/functions_utility.js" />
+  <script file="gui/common/functions_global_object.js" />
+  <script file="gui/common/timer.js"/>
+  <script file="gui/replay/input.js"/>
+  <script file="gui/replay/menu.js"/>
+  <script file="gui/replay/replay.js"/>
+  <script file="gui/session/messages.js"/>
+  <script file="gui/session/selection.js"/>
+  <script file="gui/session/selection_details.js"/>
+  <script file="gui/session/unit_commands.js"/>
+  <script file="gui/session/utility_functions.js"/>
+
+  <object name="sn" hotkey="session.gui.toggle">
+    <action on="Tick">
+        onTick();
+    </action>
+
+    <action on="SimulationUpdate">
+        onSimulationUpdate();
+    </action>
+    
+    <action on="ReplayFinished">
+        onReplayFinished();
+    </action>
+
+    <action on="Press">
+        this.hidden = !this.hidden;
+    </action>
+
+    <!-- ================================  ================================ -->
+    <!-- HOTKEYS (For some reason, they won't work properly unless outside menu) -->
+    <!-- ================================  ================================ -->
+
+    <!-- Exit button Hotkey  -->
+    <!--
+      <action on="Press"><![CDATA[
+        messageBox(400, 200, "Do you really want to quit?", "Confirmation", 0,
+          ["Yes", "No!"], [leaveGame, null]);
+      ]]></action>
+    -->
+
+    <object hotkey="leave">
+        <action on="Press">closeOpenDialogs();</action>
+    </object>
+
+    <!-- Menu -->
+    <object hotkey="menu.toggle">
+        <action on="Press">openMenu();</action>
+    </object>
+      
+    <!-- Unit silhouettes -->
+    <object hotkey="silhouettes">
+        <action on="Press">renderer.silhouettes = !renderer.silhouettes;</action>
+    </object>
+
+    <!-- Sky -->
+    <object hotkey="showsky">
+        <action on="Press">renderer.showsky = !renderer.showsky;</action>
+    </object>
+
+    <!-- Pause -->
+    <object hotkey="pause">
+        <action on="Press">togglePause();</action>
+    </object>
+
+    <!-- camera.follow mode - follow the first unit in the selection -->
+    <object hotkey="camera.follow">
+        <action on="Press">setCameraFollow(g_Selection.toList()[0]);</action>
+    </object>
+
+      <!-- Find idle warrior - TODO: Potentially move this to own UI button? -->
+    <object hotkey="selection.idlewarrior">
+        <action on="Press">findIdleUnit(["Hero", "Champion", "CitizenSoldier", "Siege", "Warship"]);</action>
+    </object>
+
+    <!-- ================================  ================================ -->
+    <!-- Developer / Debug items -->
+    <!-- ================================  ================================ -->
+
+    <!-- Debug text -->
+    <object name="debug"
+      type="text"
+      size="0 70 80% 100%"
+      ghost="true"
+      textcolor="yellow"
+      font="mono-stroke-10"
+      />
+
+    <!-- Dev/cheat commands -->
+    <object name="devCommands" size="100%-156 50%-88 100%-8 50%+88" type="image" sprite="devCommandsBackground" z="40"
+      hidden="true" hotkey="session.devcommands.toggle">
+        <action on="Press">
+      toggleDeveloperOverlay();
+        </action>
+
+        <object size="0 16 100%-18 32" type="text" style="devCommandsText">Display selection state</object>
+        <object size="100%-16 16 100% 32" type="checkbox" name="devDisplayState" style="StoneCrossBox"/>
+
+        <object size="0 32 100%-18 48" type="text" style="devCommandsText">Pathfinder overlay</object>
+        <object size="100%-16 32 100% 48" type="checkbox" style="StoneCrossBox">
+      <action on="Press">Engine.GuiInterfaceCall("SetPathfinderDebugOverlay", this.checked);</action>
+        </object>
+
+        <object size="0 48 100%-18 64" type="text" style="devCommandsText">Obstruction overlay</object>
+        <object size="100%-16 48 100% 64" type="checkbox" style="StoneCrossBox">
+      <action on="Press">Engine.GuiInterfaceCall("SetObstructionDebugOverlay", this.checked);</action>
+        </object>
+
+        <object size="0 64 100%-18 80" type="text" style="devCommandsText">Unit motion overlay</object>
+        <object size="100%-16 64 100% 80" type="checkbox" style="StoneCrossBox">
+      <action on="Press">g_Selection.SetMotionDebugOverlay(this.checked);</action>
+        </object>
+
+        <object size="0 80 100%-18 96" type="text" style="devCommandsText">Range overlay</object>
+        <object size="100%-16 80 100% 96" type="checkbox" style="StoneCrossBox">
+      <action on="Press">Engine.GuiInterfaceCall("SetRangeDebugOverlay", this.checked);</action>
+        </object>
+
+        <object size="0 96 100%-18 112" type="text" style="devCommandsText">Bounding box overlay</object>
+        <object size="100%-16 96 100% 112" type="checkbox" style="StoneCrossBox">
+      <action on="Press">Engine.SetBoundingBoxDebugOverlay(this.checked);</action>
+        </object>
+
+        <object size="0 112 100%-18 128" type="text" style="devCommandsText">Restrict camera</object>
+        <object size="100%-16 112 100% 128" type="checkbox" style="StoneCrossBox" checked="true">
+      <action on="Press">gameView.constrainCamera = this.checked;</action>
+        </object>
+
+        <object size="0 128 100%-18 144" type="text" style="devCommandsText">Reveal map</object>
+        <object size="100%-16 128 100% 144" type="checkbox" name="devCommandsRevealMap" style="StoneCrossBox">
+      <action on="Press">Engine.PostNetworkCommand({"type": "reveal-map", "enable": this.checked});</action>
+        </object>
+
+    </object>
+
+    <!-- ================================  ================================ -->
+    <!-- Time elapsed counter -->
+    <!-- ================================  ================================ -->
+    <object size="100%-100 50 100%-10 70" type="text" name="timeElapsedCounter" style="SettingsText" hotkey="timeelapsedcounter.toggle" ghost="true">
+        <action on="Press"><![CDATA[
+          this.hidden = !this.hidden;
+        ]]>
+        </action>
+    </object>
+
+    <object size="50%-400 50 50%-50 100" type="text" font="serif-bold-24" textcolor="white" ghost="true">Non-interactive Replay Mode</object>
+    
+    <!-- ================================  ================================ -->
+    <!-- Pause Overlay -->
+    <!-- ================================  ================================ -->
+    <object type="button"
+      name="pauseOverlay"
+      size="0 0 100% 100%"
+      tooltip_style="sessionToolTip"
+      hidden="true"
+      z="0"
+    >
+        <object size="0 0 100% 100%" type="image" sprite="devCommandsBackground" ghost="true" z="0"/>
+        <object size="50%-128 50%-20 50%+128 50%+20" type="text" style="PauseText" ghost="true" z="0">Replay Paused</object>
+        <object size="50%-128 50%+20 50%+128 50%+30" type="text" style="PauseMessageText" ghost="true" z="0">Click to Resume Replay</object>
+        <action on="Press">togglePause();</action>
+    </object>
+
+    <!-- ================================  ================================ -->
+    <!-- Notification Area -->
+    <!-- ================================  ================================ -->
+    <object name="notificationPanel" type="image" size="50%-300 60 50%+300 120" ghost="true">
+        <object name="notificationText" size="0 0 100% 100%" type="text" style="notificationPanel" ghost="true"/>
+    </object>
+    
+    <!-- ================================  ================================ -->
+    <!-- Chat -->
+    <!-- ================================  ================================ -->
+
+    <!-- Chat panel -->
+    <object name="chatPanel" size="0 130 100% 100%-240" type="image" ghost="true">
+        <object name="chatText" size="3 1 100%-1 100%-1" type="text" style="chatPanel" ghost="true"/>
+    </object>
+
+    <!-- ================================  ================================ -->
+    <!-- Settings Window -->
+    <!-- ================================  ================================ -->
+    <object name="settingsDialogPanel"
+      style="StoneDialog"
+      type="image"
+      size="50%-180 50%-200 50%+180 50%+100"
+      hidden="true"
+    >
+        <object type="text" style="TitleText" size="50%-96 -16 50%+96 16">Settings</object>
+
+        <object style="TranslucentPanelThinBorder"
+          type="image"
+          size="32 32 100%-32 100%-70"
+        >
+      <!-- Settings / shadows -->
+      <object size="0 10 100%-80 35" type="text" style="RightLabelText" ghost="true">Enable Shadows</object>
+      <object name="shadowsCheckbox" size="100%-56 15 100%-30 40" type="checkbox" style="StoneCrossBox" checked="true">
+          <action on="Load">if (renderer.shadows) this.checked = true; else this.checked = false;</action>
+          <action on="Press">renderer.shadows = this.checked;</action>
+      </object>
+
+      <!-- Settings / Shadow PCF -->
+      <object size="0 35 100%-80 60" type="text" style="RightLabelText" ghost="true">Enable Shadow Filtering</object>
+      <object name="shadowPCFCheckbox" size="100%-56 40 100%-30 65" type="checkbox" style="StoneCrossBox" checked="true">
+          <action on="Load">if (renderer.shadowPCF) this.checked = true; else this.checked = false;</action>
+          <action on="Press">renderer.shadowPCF = this.checked;</action>
+      </object>
+
+      <!-- Settings / Water -->
+      <object size="0 60 100%-80 85" type="text" style="RightLabelText" ghost="true">Enable Water Reflections</object>
+      <object name="fancyWaterCheckbox" size="100%-56 65 100%-30 90"  type="checkbox" style="StoneCrossBox" checked="true">
+          <action on="Load">if (renderer.fancyWater) this.checked = true; else this.checked = false;</action>
+          <action on="Press">renderer.fancyWater = this.checked;</action>
+      </object>
+
+      <!-- Settings / Particles -->
+      <object size="0 85 100%-80 110" type="text" style="RightLabelText" ghost="true">Enable Particles</object>
+      <object name="particlesCheckbox" size="100%-56 90 100%-30 115" type="checkbox" style="StoneCrossBox" checked="true">
+          <action on="Load">if (renderer.particles) this.checked = true; else this.checked = false;</action>
+          <action on="Press">renderer.particles = this.checked;</action>
+      </object>
+
+      <!-- Settings / Unit Silhouettes -->
+      <object size="0 110 100%-80 135" type="text" style="RightLabelText" ghost="true">Enable Unit Silhouettes</object>
+      <object name="silhouettesCheckbox" size="100%-56 115 100%-30 140" type="checkbox" style="StoneCrossBox" checked="true">
+          <action on="Load">if (renderer.silhouettes) this.checked = true; else this.checked = false;</action>
+          <action on="Press">renderer.silhouettes = this.checked;</action>
+      </object>
+
+      <!-- Settings / Dev Overlay -->
+      <object size="0 160 100%-80 185" type="text" style="RightLabelText" ghost="true">Developer Overlay</object>
+      <object size="100%-56 165 100%-30 190" type="checkbox" style="StoneCrossBox" checked="false">
+          <action on="Press">toggleDeveloperOverlay();</action>
+      </object>
+        </object>
+
+        <!-- Close button -->
+        <object type="button"
+          style="StoneButton"
+          size="50%-64 100%-52 50%+64 100%-24"
+          tooltip_style="sessionToolTip"
+        >
+      Close
+      <action on="Press">closeSettings(true);</action>
+        </object>
+    </object>
+
+    <!-- ================================  ================================ -->
+    <!-- Top Panel  -->
+    <!-- ================================  ================================ -->
+    <object name="topPanel"
+      type="image"
+      sprite="topPanel"
+      size="-3 0 100%+3 36"
+    >
+        <!-- ================================  ================================ -->
+        <!-- Player resource bar -->
+        <!-- ================================  ================================ -->
+        <object
+      size="10 0 45% 100%"
+        >
+      <!-- Food -->
+      <object size="0 0 90 100%" type="image" style="resourceCounter" tooltip="Food" tooltip_style="sessionToolTipBold">
+          <object size="0 -4 40 36" type="image" sprite="stretched:session/icons/resources/food.png" ghost="true"/>
+          <object size="32 0 100% 100%-2" type="text" style="resourceText" name="resourceFood"/>
+      </object>
+
+      <!-- Wood -->
+      <object size="90 0 180 100%" type="image" style="resourceCounter" tooltip="Wood" tooltip_style="sessionToolTipBold">
+          <object size="0 -4 40 36" type="image" sprite="stretched:session/icons/resources/wood.png" ghost="true"/>
+          <object size="32 0 100% 100%-2" type="text" style="resourceText" name="resourceWood"/>
+      </object>
+
+      <!-- Stone -->
+      <object size="180 0 270 100%" type="image" style="resourceCounter" tooltip="Stone" tooltip_style="sessionToolTipBold">
+          <object size="0 -4 40 36" type="image" sprite="stretched:session/icons/resources/stone.png" ghost="true"/>
+          <object size="32 0 100% 100%-2" type="text" style="resourceText" name="resourceStone"/>
+      </object>
+
+      <!-- Metal -->
+      <object size="270 0 360 100%"  type="image" style="resourceCounter" tooltip="Metal" tooltip_style="sessionToolTipBold">
+          <object size="0 -4 40 36" type="image" sprite="stretched:session/icons/resources/metal.png" ghost="true"/>
+          <object size="32 0 100% 100%-2" type="text" style="resourceText" name="resourceMetal"/>
+      </object>
+
+      <!-- Population -->
+      <object size="360 0 450 100%" type="image" style="resourceCounter" tooltip="Population (current / limit)" tooltip_style="sessionToolTipBold">
+          <object size="0 -4 40 34" type="image" sprite="stretched:session/icons/resources/population.png" ghost="true"/>
+          <object size="32 0 100% 100%-2" type="text" style="resourceText" name="resourcePop"/>
+      </object>
+        </object>
+
+        <!-- ================================  ================================ -->
+        <!-- Civ Icon -->
+        <!-- ================================  ================================ -->
+        <object size="50%-48 -26 50%+48 70" name="civIcon" type="image" tooltip_style="sessionToolTipBold"/>
+
+        <object size="50%+50 5 50%+150 100%-5" name="viewPlayer" type="dropdown" style="StoneDropDown" tooltip_style="sessionToolTipBold" tooltip="Choose player to view">
+          <action on="SelectionChange">selectViewPlayer(this.selected);</action>
+        </object>
+        
+        <!-- ================================  ================================ -->
+        <!-- Phase -->
+        <!-- ================================  ================================ -->
+        <!--<object size="50%+50 4 50%+300 100%-2" name="PhaseTitleBar" type="text" font="serif-bold-stroke-14" textcolor="white"> Death Match :: Village Phase</object>-->
+
+
+        <!-- ================================  ================================ -->
+        <!-- ALPHA LABELS (alpha, build time, revision) -->
+        <!-- ================================  ================================ -->
+
+        <!-- Displays Alpha name and number -->
+        <object size="70%-50 0 70%+128 100%" name="alphaLabel" type="text" style="CenteredLabelText" text_valign="top" ghost="true">
+      ALPHA XI : Kronos<!-- IMPORTANT: remember to update pregame/mainmenu.xml in sync with this -->
+
+      <!-- Displays build date and revision number-->
+      <object size="50%-128 0 50%+128 100%-2" name="buildTimeLabel" type="text" style="BuildNameText" ghost="true">
+          <action on="Load"><![CDATA[this.caption = buildTime(0) + " (" + buildTime(2) + ")";]]>
+          </action>
+      </object>
+        </object>
+
+        <!-- ================================  ================================ -->
+        <!-- Menu Button -->
+        <!-- ================================  ================================ -->
+        <object type="button"
+          name="menuButton"
+          size="100%-164 4 100%-8 32"
+          style="StoneButtonFancy"
+          tooltip_style="sessionToolTip"
+          z="70"
+        >
+      <!-- This object covers up the text on the menu
+      buttons as they slide by so that you don't see
+      them on top of the main menu button -->
+      <object size="0 -4 100% 0" type="image" sprite="horizontalThinBorder" ghost="true"/>
+
+      <object size="50%-32 50%-16 50%+32 50%+16" type="image" sprite="menuButton" ghost="true">MENU</object>
+      <action on="Press">
+          toggleMenu();
+      </action>
+        </object> <!-- END OF MENU BUTTON -->
+    </object> <!-- END OF TOP PANEL -->
+
+    <!-- ================================  ================================ -->
+    <!-- Menu -->
+    <!-- ================================  ================================ -->
+    <object name="menu"
+      style="StonePanelThinBorder"
+      type="image"
+      hidden="false"
+      z="40"
+    >
+        <object size="4 36 100%-4 50%+20">
+
+      <!-- Settings button -->
+      <object type="button"
+        name="settingsButton"
+        style="StoneButtonFancy"
+        size="0 0 100% 28"
+        tooltip_style="sessionToolTip"
+      >
+          Settings
+          <action on="Press">settingsMenuButton();</action>
+      </object>
+
+      <!-- Exit button -->
+      <object type="button"
+        name="menuExitButton"
+        style="StoneButtonFancy"
+        size="0 32 100% 60"
+        tooltip_style="sessionToolTip"
+      >
+          Exit
+          <action on="Press">exitMenuButton();</action>
+      </object>
+
+      <!-- Pause / Resume Button -->
+      <object type="button"
+        name="pauseButton"
+        style="StoneButtonFancy"
+        size="0 64 100% 92"
+        tooltip_style="sessionToolTip"
+      >
+          <object name="pauseButtonText" type="text" style="CenteredButtonText" ghost="true">Pause</object>
+          <action on="Press">togglePause();</action>
+      </object>
+        </object>
+    </object>
+
+    <!-- In-progress research -->
+    <object size="100%-50 85 100%-10 100%-200">
+      <repeat count="10">
+        <object name="researchStartedButton[n]" hidden="true" style="iconButton" type="button" size="0 0 40 40" tooltip_style="sessionToolTipBottom">
+          <object name="researchStartedIcon[n]" ghost="true" type="image" size="3 3 37 37"/>
+          <object name="researchStartedProgressSlider[n]" type="image" sprite="queueProgressSlider" ghost="true" size="3 3 37 37"/>
+        </object>
+      </repeat>
+    </object>
+
+    <!-- ================================  ================================ -->
+    <!-- Unit Selection Groups -->
+    <!-- ================================  ================================ -->
+    <!--<object
+        name="unitGroupPanel"
+        size="0% 50%-216 0%+36 50%+144"
+    >
+        <repeat count="10">
+      <object name="unitGroupButton[n]" size="0 0 36 36" type="button" hidden="false" style="iconButton" tooltip_style="sessionToolTipBottomBold"
+        tooltip="Click to select grouped units.">
+          <object name="unitGroupIcon[n]" size="3 3 33 33" type="image" sprite="groupsIcon" ghost="true"/>
+          <object name="unitGroupLabel[n]" type="text" style="largeCenteredOutlinedText" ghost="true"/>
+      </object>
+        </repeat>
+    </object>-->
+
+    <!-- ================================  ================================ -->
+    <!-- Information tooltip
+      Follows the mouse around if 'independent' is set to 'true'. -->
+    <!-- ================================  ================================ -->
+    <object name="informationTooltip" type="tooltip" independent="true" style="informationTooltip"/>
+
+    <!-- ================================  ================================ -->
+    <!-- Wall-dragging tooltip. Shows the total cost of building a wall while the player is dragging it. -->
+    <!-- ================================  ================================ -->
+    <object name="wallDragTooltip" type="tooltip" independent="true" style="informationTooltip"/>
+
+    <!-- ================================  ================================ -->
+    <!-- START of BOTTOM PANEL -->
+    <!-- ================================  ================================ -->
+
+    <object size="50%-512 100%-180 50%+512 100%">
+
+        <!-- ================================  ================================ -->
+        <!-- Minimap -->
+        <!-- ================================  ================================ -->
+        <object
+      name="minimapPanel"
+      size="0 100%-212 212 100%"
+      type="image"
+      sprite="mapPanel"
+      z="20"
+        >
+      <object name="minimap"
+        type="minimap"
+        size="14 14 100%-14 100%-14"
+      >
+          <action on="WorldClick">handleMinimapEvent(arguments[0]);</action>
+      </object>
+
+      <object name="minimapOverlay" size="10 10 100%-10 100%-10" type="image" sprite="stretched:session/minimap_circle.png" ghost="true"/>
+
+      <!-- Idle Worker Button -->
+      <object type="image"
+        size="100%-36 4 100%-4 36"
+      >
+          <object type="button"
+            style="iconButton"
+            tooltip_style="sessionToolTip"
+            tooltip="Find idle worker"
+            hotkey="selection.idleworker"
+          >
+        <!-- TODO: should highlight the button if there's non-zero idle workers -->
+        <object size="0 0 100% 100%" type="image" sprite="idleWorker" ghost="true" />
+        <action on="Press">findIdleUnit(["Female", "Trade", "FishingBoat", "CitizenSoldier", "Healer"]);</action>
+          </object>
+      </object>
+        </object>
+
+        <!-- ================================  ================================ -->
+        <!-- Supplemental Details Panel (Left of Selection Details) -->
+        <!-- ================================  ================================ -->
+        <object size="50%-304 100%-170 50%-110 100%" name="supplementalSelectionDetails" type="image" sprite="supplementalDetailsPanel" z="20">
+
+      <object name="unitFormationPanel"
+        size="24 12 100% 100%"
+      >
+          <object size="0 0 100% 100%">
+        <repeat count="16">
+            <object name="unitFormationButton[n]" hidden="true" style="iconButton" type="button" size="0 0 36 36" tooltip_style="sessionToolTipBottomBold" z="100">
+          <object name="unitFormationIcon[n]" type="image" ghost="true" size="3 3 33 33"/>
+          <object name="unitFormationSelection[n]" hidden="true" type="image" ghost="true" size="3 3 33 33" sprite="stretched:session/icons/corners.png"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <object name="unitGarrisonPanel"
+        size="24 12 100% 100%"
+      >
+          <object size="0 0 100% 100%">
+        <repeat count="12">
+            <object name="unitGarrisonButton[n]" hidden="true" style="iconButton" type="button" size="0 0 36 36" tooltip_style="sessionToolTipBottomBold" z="100">
+          <object name="unitGarrisonIcon[n]" type="image" ghost="true" size="3 3 33 33"/>
+          <object name="unitGarrisonCount[n]" ghost="true" style="groupIconsText" type="text" size="0 0 100% 100%"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <object name="unitBarterPanel" 
+        size="6 36 100% 100%"
+        hidden="true"
+      >
+          <object ghost="true" style="resourceText" type="text" size="0 0 100% 20">Exchange resources:</object>
+          <object size="0 32 100% 78">
+        <repeat count="4">
+            <object name="unitBarterSellButton[n]" style="iconButton" type="button" size="0 0 46 46" tooltip_style="sessionToolTipBottomBold">
+          <object name="unitBarterSellIcon[n]" type="image" ghost="true" size="3 3 43 43"/>
+          <object name="unitBarterSellUnaffordable[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="colour: 255 0 0 60"/>
+          <object name="unitBarterSellAmount[n]" ghost="true" style="resourceText" type="text" size="0 0 100% 50%"/>
+          <object name="unitBarterSellSelection[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="stretched:session/icons/corners.png"/>
+            </object>
+        </repeat>
+          </object>
+          <object size="0 78 100% 124">
+        <repeat count="4">
+            <object name="unitBarterBuyButton[n]" style="iconButton" type="button" size="0 0 46 46" tooltip_style="sessionToolTipBottomBold">
+          <object name="unitBarterBuyIcon[n]" type="image" ghost="true" size="3 3 43 43"/>
+          <object name="unitBarterBuyUnaffordable[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="colour: 255 0 0 60"/>
+          <object name="unitBarterBuyAmount[n]" ghost="true" style="resourceText" type="text" size="0 0 100% 50%"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <!-- Stance Selection -->
+      <object name="unitStancePanel"
+        style="TranslucentPanel"
+        size="4 100%-43 100%-4 100%-4"
+        type="text"
+      >
+          <object size="1 2 100% 100%">
+        <repeat count="5">
+            <object name="unitStanceButton[n]" hidden="true" style="iconButton" type="button" size="0 0 36 36" tooltip_style="sessionToolTipBottomBold" z="100">
+          <object name="unitStanceIcon[n]" type="image" ghost="true" size="3 3 33 33"/>
+          <object name="unitStanceSelection[n]" hidden="true" type="image" ghost="true" size="3 3 33 33" sprite="stretched:session/icons/corners.png"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+        </object>
+
+        <!-- ================================  ================================ -->
+        <!-- Selection Details Panel (Middle) -->
+        <!-- ================================  ================================ -->
+        <object name="selectionDetails"
+          type="image"
+          sprite="selectionDetailsPanel"
+          size="50%-114 100%-205 50%+114 100%"
+          hidden="false"
+        >
+      <!-- Unit details for Single Unit -->
+      <object size="50%-112 0 50%+112 100%" name="detailsAreaSingle">
+          
+          <!-- Stats Bars -->
+          <object size= "2 0 100%-2 98" type="image" tooltip_style="sessionToolTip">
+        
+        <object size="0 8 100% 60" type="image" sprite="edgedPanelShader">
+            <!-- Health bar -->
+            <object size="88 0 100% 24" name="healthSection">
+          <object size="0 0 100% 16" name="healthLabel" type="text" style="StatsTextLeft" ghost="true">Health:</object>
+          <object size="0 0 100% 16" name="healthStats" type="text" style="StatsTextRight" ghost="true"/>
+          <object size="1 16 100% 23" name="health" type="image">
+              <object type="image" sprite="barBorder" ghost="true" size="-1 -1 100%+1 100%+1"/>
+              <object type="image" sprite="healthBackground" ghost="true"/>
+              <object type="image" sprite="healthForeground" ghost="true" name="healthBar"/>
+              <object type="image" sprite="statsBarShaderHorizontal" ghost="true"/>
+          </object>
+            </object>
+
+            <!-- Stamina bar -->
+            <object size="88 28 100% 52" name="staminaSection">
+          <object size="0 0 100% 16" name="staminaLabel" type="text" style="StatsTextLeft" ghost="true">Stamina:</object>
+          <object size="0 0 100% 16" name="staminaStats" type="text" style="StatsTextRight" ghost="true"/>
+          <object size="1 16 100% 23" name="stamina" type="image">
+              <object type="image" sprite="barBorder" ghost="true" size="-1 -1 100%+1 100%+1"/>
+              <object type="image" sprite="staminaBackground" ghost="true"/>
+              <object type="image" sprite="staminaForeground" ghost="true" name="staminaBar"/>
+              <object type="image" sprite="statsBarShaderHorizontal" ghost="true"/>
+          </object>
+            </object>
+
+            <!-- Resource bar -->
+            <object size="88 28 100% 52" name="resourceSection">
+          <object size="0 0 100% 16" name="resourceLabel" type="text" style="StatsTextLeft" ghost="true"/>
+          <object size="0 0 100% 16" name="resourceStats" type="text" style="StatsTextRight" ghost="true"/>
+          <object size="1 16 100% 23" name="resources" type="image">
+              <object type="image" sprite="barBorder" ghost="true" size="-1 -1 100%+1 100%+1"/>
+              <object type="image" sprite="resourceBackground" ghost="true"/>
+              <object type="image" sprite="resourceForeground" ghost="true" name="resourceBar"/>
+              <object type="image" sprite="statsBarShaderHorizontal" ghost="true"/>
+          </object>
+            </object>
+        </object>
+        
+        <object size="0 60 100% 96" type="image" sprite="edgedPanelShader">
+            <!-- Attack and Armor -->
+            <object size="90 -2 126 34" name="attackAndArmorStats" type="image" sprite="stretched:session/icons/stances/defensive.png" tooltip="Attack and Armor" tooltip_style="sessionToolTip"/>
+
+            <!-- Resource carrying icon/counter -->
+            <object size="100%-78 -2 100%-28 34" type="text" name="resourceCarryingText" style="CarryingTextRight"/>
+            <object size="100%-36 -2 100% 34" type="image" name="resourceCarryingIcon"/>
+        </object>
+        
+        <!-- Big unit icon -->
+        <object size="-8 -8 88 88" type="image" name="iconBorder" sprite="iconBorder" tooltip_style="sessionToolTip">
+            <object size="1 1 100%-1 100%-1" type="image" name="icon" ghost="true"/>
+        
+            <!-- Experience bar -->
+            <object size="2 2 6 100%-2" type="image" name="experience" tooltip="Experience" tooltip_style="sessionToolTip">
+          <object type="image" sprite="barBorder" ghost="true" size="-1 -1 100%+1 100%+1"/>
+          <object type="image" sprite="experienceBackground" ghost="true"/>
+          <object type="image" sprite="experienceForeground" ghost="true" name="experienceBar"/>
+          <object type="image" sprite="statsBarShaderVertical" ghost="true"/>
+            </object>
+        
+            <object z="20" size="4 4 20 20" name="rankIcon" type="image" tooltip="Rank" tooltip_style="sessionToolTip"/>
+        </object>
+          </object>
+          
+          <!-- Names (this must come before the attack and armor icon to avoid clipping issues) -->
+          <object size="2 96 100%-2 100%-36" name="statsArea" type="image" sprite="edgedPanelShader">
+        
+        <!-- These images are used to clip off the top and bottom of the civ icon -->
+        <object z="30" size="0 -5 100% 40" ghost="true" type="image" sprite="remove"/>
+        <object z="30" size="0 100%-5 100% 100%+40" ghost="true" type="image" sprite="remove"/>
+        
+        <object z="30" size="0 2 100% 45" ghost="true">
+            <!-- Specific Name -->
+            <object size="0 0 100% 20" name="specific" ghost="true" type="text" style="SpecificNameCentered"/>
+
+            <!-- Generic Name -->
+            <object size="0 15 100% 36" name="generic" ghost="true" type="text" style="GenericNameCentered"/>
+        </object>
+        
+        <!-- Player Name and Civ -->
+        <object size="0 40 100% 100%">
+            <object size="50%-64 50%-64 50%+64 50%+64" name="playerCivIcon" type="image" ghost="true"/>
+            <object size="0 0 100% 100%" name="playerColorBackground" type="image" sprite="playerColorBackground" ghost="true"/>
+            <object size="0 0 100% 100%" type="image" sprite="bottomEdgedPanelShader" ghost="true"/>
+            
+            <!-- Why is this being automatically ghosted? In the mean time, set ghost to false -->
+            <object ghost="false" size="0 0 100% 100%-5" name="player" type="text" style="largeCenteredOutlinedText" tooltip_style="sessionToolTip"/>
+        </object>
+          </object>
+
+      </object>
+
+      <!-- Unit details for Multiple Units -->
+      <object size="50%-112 0 50%+112 100%" name="detailsAreaMultiple">
+
+          <object name="unitSelectionPanel"
+            size="20 12 100%-20 100%"
+          >
+        <object size="0 0 100% 100%">
+            <repeat count="16">
+          <object name="unitSelectionButton[n]" hidden="true" style="iconButton" type="button" size="0 0 36 36" tooltip_style="sessionToolTipBold" z="100">
+              <object name="unitSelectionIcon[n]" type="image" ghost="true" size="3 3 33 33"/>
+              <object name="unitSelectionCount[n]" ghost="true" style="groupIconsText" type="text" size="0 0 100% 100%"/>
+              <object size="0 100%-3 100% 100%" name="unitSelectionHealth[n]" ghost="true">
+              </object>
+          </object>
+            </repeat>
+        </object>
+          </object>
+
+          <!-- Total -->
+          <object size="100%-42 12 100%-8 46" type="image" sprite="groupsIcon">
+        <object size="0 0 100% 100%" type="text" style="largeCenteredOutlinedText" name="numberOfUnits"/>
+          </object>
+
+          <!-- Stats Bars -->
+          <object size= "100%-38 50 100%-18 100%-44" type="image" tooltip_style="sessionToolTip">
+        <!-- Health bar -->
+        <object size="4 0 11 100%" type="image" name="healthMultiple" tooltip="Hitpoints" tooltip_style="sessionToolTip">
+            <object type="image" sprite="barBorder" ghost="true" size="-1 -1 100%+1 100%+1"/>
+            <object type="image" sprite="healthBackground" ghost="true"/>
+            <object type="image" sprite="healthForeground" ghost="true" name="healthBarMultiple"/>
+            <object type="image" sprite="statsBarShaderVertical" ghost="true"/>
+        </object>
+
+        <!-- Stamina bar -->
+        <object size="15 0 22 100%" type="image" name="staminaMultiple" tooltip="Stamina" tooltip_style="sessionToolTipBold">
+            <object type="image" sprite="barBorder" ghost="true" size="-1 -1 100%+1 100%+1"/>
+            <object type="image" sprite="staminaBackground" ghost="true"/>
+            <object type="image" sprite="staminaForeground" ghost="true" name="staminaBarMultiple"/>
+            <object type="image" sprite="statsBarShaderVertical" ghost="true"/>
+        </object>
+          </object>
+      </object>
+
+      <!-- Unit Commands -->
+      <object name="unitCommandPanel"
+        size="0 100%-36 100% 100%-4"
+        type="image"
+        z="30"
+      >
+          <object size="0 1 100% 100%">
+        <repeat count="6">
+            <object name="unitCommandButton[n]" hidden="true" style="iconButton" type="button" size="0 0 32 32" tooltip_style="sessionToolTipBottomBold">
+          <object name="unitCommandIcon[n]" ghost="true" type="image" size="0 0 100% 100%" style="commandIcon"/>
+          <object name="unitCommandCount[n]" ghost="true" style="groupIconsText" type="text" size="0 0 100% 100%"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <!-- shading for unit commands area -->
+      <object z="50" size="4 100%-36 100%-4 100%-4" ghost="true" type="image" sprite="bottomEdgedPanelShader"/>
+
+        </object> <!-- END OF SELECTION DETAILS -->
+
+        <!-- ================================  ================================ -->
+        <!-- Commands Panel (Right of Selection Details) -->
+        <!-- ================================  ================================ -->
+       <object name="unitCommands"
+          type="image"
+          sprite="unitCommandsPanel"
+          size="50%+110 100%-170 50%+512 100%"
+          hidden="false"
+          z="20"
+        >
+      <object name="unitConstructionPanel"
+        size="10 12 100% 100%"
+      >
+          <object size="0 0 100% 100%">
+        <repeat count="24">
+            <object name="unitConstructionButton[n]" hidden="true" style="iconButton" type="button" size="0 0 46 46" tooltip_style="sessionToolTipBottom">
+          <object name="unitConstructionIcon[n]" type="image" ghost="true" size="3 3 43 43"/>
+          <object name="unitConstructionUnaffordable[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="colour: 255 0 0 127"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <object name="unitResearchPanel"
+        size="10 100%-102 100% 100%"
+      >
+          <object size="0 0 100% 100%">
+        <repeat count="16">
+            <object name="unitResearchButton[n]" hidden="true" style="iconButton" type="button" size="0 0 46 46" tooltip_style="sessionToolTipBottom">
+          <object name="unitResearchIcon[n]" type="image" ghost="true" size="3 3 43 43"/>
+          <object name="unitResearchSelection[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="colour: 255 0 0 127"/>
+          <object name="unitResearchUnaffordable[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="colour: 255 0 0 60"/>
+            </object>
+        </repeat>
+        <repeat count="8">
+            <object name="unitResearchPair[n]" hidden="true" size="0 0 46 92">
+          <object name="unitResearchPairIcon[n]" type="image" ghost="true" size="8 38 38 54" sprite="stretched:session/icons/vertical_pair.png"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <object name="unitTrainingPanel"
+        size="10 12 100% 100%"
+      >
+          <object size="0 0 100% 100%">
+        <repeat count="24">
+            <object name="unitTrainingButton[n]" hidden="true" style="iconButton" type="button" size="0 0 46 46" tooltip_style="sessionToolTipBottom">
+          <object name="unitTrainingIcon[n]" type="image" ghost="true" size="3 3 43 43"/>
+          <object name="unitTrainingUnaffordable[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="colour: 255 0 0 127"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <object name="unitTradingPanel"
+        size="10 12 100% 100%"
+      >
+          <object size="0 0 100% 100%">
+        <repeat count="4">
+            <object name="unitTradingButton[n]" style="iconButton" type="button" size="0 0 46 46" tooltip_style="sessionToolTipBottom">
+          <object name="unitTradingIcon[n]" type="image" ghost="true" size="3 3 43 43"/>
+          <object name="unitTradingSelection[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="stretched:session/icons/corners.png"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <object name="unitQueuePanel"
+        size="4 -56 100% 0"
+        type="image"
+        sprite="queuePanelShader"
+      >
+          <object size="-4 -2 52 54" type="image" sprite="stretched:session/icons/production.png" tooltip_style="sessionToolTipBottom" tooltip="Production queue">
+        <object name="queueProgress" ghost="true" style="iconButtonProgress" type="text"/>
+          </object>
+
+          <object size="48 6 100% 100%">
+        <repeat count="16">
+            <object name="unitQueueButton[n]" hidden="true" style="iconButton" type="button" size="0 0 40 40" tooltip_style="sessionToolTipBottom">
+          <object name="unitQueueIcon[n]" ghost="true" type="image" size="3 3 37 37"/>
+          <object name="unitQueueProgressSlider[n]" type="image" sprite="queueProgressSlider" ghost="true" size="3 3 37 37" z="20"/>
+          <object name="unitQueueCount[n]" ghost="true" style="groupIconsText" type="text" z="20"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+      <object name="unitGatePanel"
+        size="10 12 100% 100%"
+      >
+          <object size="0 0 100% 100%">
+        <repeat count="8">
+            <object name="unitGateButton[n]" hidden="true" style="iconButton" type="button" size="0 0 46 46" tooltip_style="sessionToolTipBottom">
+          <object name="unitGateIcon[n]" type="image" ghost="true" size="3 3 43 43"/>
+          <object name="unitGateSelection[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="stretched:session/icons/corners.png"/>
+          <object name="unitGateUnaffordable[n]" hidden="true" type="image" ghost="true" size="3 3 43 43" sprite="colour: 255 0 0 127"/>
+            </object>
+        </repeat>
+          </object>
+      </object>
+
+        </object> <!-- END OF UNIT COMMANDS -->
+
+    </object><!-- END OF BOTTOM PANEL -->
+
+  </object> <!-- END OF SN OBJECT -->
+
+  <!-- ================================  ================================ -->
+  <!-- Selection bandbox -->
+  <!-- ================================  ================================ -->
+  <object name="bandbox" type="image" sprite="bandbox" ghost="true" hidden="true" z="200"/>
+
+  <!-- ================================  ================================ -->
+  <!-- Network status -->
+  <!-- ================================  ================================ -->
+  <object name="netStatus" type="text" style="netStatus" z="100" hidden="true">
+    <object type="button"
+      name="disconnectedExitButton"
+      style="StoneButton"
+      size="50%-84 50%+128 50%+84 50%+160"
+      tooltip_style="sessionToolTip"
+      hidden="true"
+    >
+        <object size="0 0 100% 100%" type="text" style="CenteredButtonText" name="disconnectedExitButtonText" ghost="true">Return to Main Menu</object>
+        <action on="Press">leaveGame()</action>
+    </object>
+
+  </object>
+
+</objects>

binaries/data/mods/public/gui/session/selection_details.js

@@ -254 +254 @@
 }
 
 // Updates middle entity Selection Details Panel
-function updateSelectionDetails()
+function updateSelectionDetails(replay)
 {
     var supplementalDetailsPanel = getGUIObjectByName("supplementalSelectionDetails");
     var detailsPanel = getGUIObjectByName("selectionDetails");
@@ -296 +296 @@
     commandsPanel.hidden = false;
 
     // Fill out commands panel for specific unit selected (or first unit of primary group)
-    updateUnitCommands(entState, supplementalDetailsPanel, commandsPanel, selection);
+    updateUnitCommands(entState, supplementalDetailsPanel, commandsPanel, selection, replay);
 }

binaries/data/mods/public/gui/session/unit_commands.js

@@ -852 +852 @@
  * @param supplementalDetailsPanel Reference to the "supplementalSelectionDetails" GUI Object
  * @param commandsPanel Reference to the "commandsPanel" GUI Object
  * @param selection Array of currently selected entity IDs.
+ * @param replay True if we're in visual replay mode
  */
-function updateUnitCommands(entState, supplementalDetailsPanel, commandsPanel, selection)
+function updateUnitCommands(entState, supplementalDetailsPanel, commandsPanel, selection, replay)
 {
     // Panels that are active
     var usedPanels = {};
 
     // If the selection is friendly units, add the command panels
     var player = Engine.GetPlayerID();
-    if (entState.player == player || g_DevSettings.controlAll)
+    if (replay || entState.player == player || g_DevSettings.controlAll)
     {
         if (selection.length > 1)
             setupUnitPanel(SELECTION, usedPanels, entState, g_Selection.groups.getTemplateNames(),
                 function (entType) { changePrimarySelectionGroup(entType); } );
 
-        var commands = getEntityCommandsList(entState);
-        if (commands.length)
-            setupUnitPanel(COMMAND, usedPanels, entState, commands,
-                function (item) { performCommand(entState.id, item.name); } );
+        if (!replay)
+        {
+            var commands = getEntityCommandsList(entState);
+            if (commands.length)
+                setupUnitPanel(COMMAND, usedPanels, entState, commands,
+                    function (item) { performCommand(entState.id, item.name); } );
+        }
 
         if (entState.garrisonHolder)
         {
@@ -885 +889 @@
                 function (item) { unloadTemplate(item); } );
         }
 
-        var formations = Engine.GuiInterfaceCall("GetAvailableFormations");
-        if (hasClass(entState, "Unit") && !hasClass(entState, "Animal") && !entState.garrisonHolder && formations.length)
+        if (!replay)
         {
-            setupUnitPanel(FORMATION, usedPanels, entState, formations,
-                function (item) { performFormation(entState.id, item); } );
-        }
+            var formations = Engine.GuiInterfaceCall("GetAvailableFormations");
+            if (hasClass(entState, "Unit") && !hasClass(entState, "Animal") && !entState.garrisonHolder && formations.length)
+            {
+                setupUnitPanel(FORMATION, usedPanels, entState, formations,
+                    function (item) { performFormation(entState.id, item); } );
+            }
 
-        // TODO: probably should load the stance list from a data file,
-        // and/or vary depending on what units are selected
-        var stances = ["violent", "aggressive", "passive", "defensive", "standground"];
-        if (hasClass(entState, "Unit") && !hasClass(entState, "Animal") && stances.length)
-        {
-            setupUnitPanel(STANCE, usedPanels, entState, stances,
-                function (item) { performStance(entState.id, item); } );
-        }
+            // TODO: probably should load the stance list from a data file,
+            // and/or vary depending on what units are selected
+            var stances = ["violent", "aggressive", "passive", "defensive", "standground"];
+            if (hasClass(entState, "Unit") && !hasClass(entState, "Animal") && stances.length)
+            {
+                setupUnitPanel(STANCE, usedPanels, entState, stances,
+                    function (item) { performStance(entState.id, item); } );
+            }
 
-        getGUIObjectByName("unitBarterPanel").hidden = !entState.barterMarket;
-        if (entState.barterMarket)
-        {
-            usedPanels["Barter"] = 1;
-            setupUnitBarterPanel(entState);
-        }
+            getGUIObjectByName("unitBarterPanel").hidden = !entState.barterMarket;
+            if (entState.barterMarket)
+            {
+                usedPanels["Barter"] = 1;
+                setupUnitBarterPanel(entState);
+            }
 
-        var buildableEnts = [];
-        var trainableEnts = [];
-        var state;
-        // Get all buildable and trainable entities
-        for (var i in selection)
-        {
-            if ((state = GetEntityState(selection[i])) && state.buildEntities && state.buildEntities.length)
-                buildableEnts = buildableEnts.concat(state.buildEntities);
-            if ((state = GetEntityState(selection[i])) && state.production && state.production.entities.length)
-                trainableEnts = trainableEnts.concat(state.production.entities);
-        }
-        
-        // Remove duplicates
-        removeDupes(buildableEnts);
-        removeDupes(trainableEnts);
+            var buildableEnts = [];
+            var trainableEnts = [];
+            var state;
+            // Get all buildable and trainable entities
+            for (var i in selection)
+            {
+                if ((state = GetEntityState(selection[i])) && state.buildEntities && state.buildEntities.length)
+                    buildableEnts = buildableEnts.concat(state.buildEntities);
+                if ((state = GetEntityState(selection[i])) && state.production && state.production.entities.length)
+                    trainableEnts = trainableEnts.concat(state.production.entities);
+            }
+            
+            // Remove duplicates
+            removeDupes(buildableEnts);
+            removeDupes(trainableEnts);
 
-        // Whether the GUI's right panel has been filled.
-        var rightUsed = true;
+            // Whether the GUI's right panel has been filled.
+            var rightUsed = true;
 
-        // The first selected entity's type has priority.
-        if (entState.buildEntities)
-            setupUnitPanel(CONSTRUCTION, usedPanels, entState, buildableEnts, startBuildingPlacement);
-        else if (entState.production && entState.production.entities)
-            setupUnitPanel(TRAINING, usedPanels, entState, trainableEnts,
-                function (trainEntType) { addTrainingToQueue(selection, trainEntType); } );
-        else if (entState.trader)
-            setupUnitTradingPanel(usedPanels, entState, selection);
-        else if (!entState.foundation && entState.gate || hasClass(entState, "LongWall"))
-        {
-            // Allow long wall pieces to be converted to gates
-            var longWallTypes = {};
-            var walls = [];
-            var gates = [];
-            for (var i in selection)
+            // The first selected entity's type has priority.
+            if (entState.buildEntities)
+                setupUnitPanel(CONSTRUCTION, usedPanels, entState, buildableEnts, startBuildingPlacement);
+            else if (entState.production && entState.production.entities)
+                setupUnitPanel(TRAINING, usedPanels, entState, trainableEnts,
+                    function (trainEntType) { addTrainingToQueue(selection, trainEntType); } );
+            else if (entState.trader)
+                setupUnitTradingPanel(usedPanels, entState, selection);
+            else if (!entState.foundation && entState.gate || hasClass(entState, "LongWall"))
             {
-                state = GetEntityState(selection[i]);
-                if (hasClass(state, "LongWall") && !state.gate && !longWallTypes[state.template])
+                // Allow long wall pieces to be converted to gates
+                var longWallTypes = {};
+                var walls = [];
+                var gates = [];
+                for (var i in selection)
                 {
-                    var gateTemplate = getWallGateTemplate(state.id);
-                    if (gateTemplate)
+                    state = GetEntityState(selection[i]);
+                    if (hasClass(state, "LongWall") && !state.gate && !longWallTypes[state.template])
                     {
-                        var wallName = GetTemplateData(state.template).name.generic;
-                        var gateName = GetTemplateData(gateTemplate).name.generic;
+                        var gateTemplate = getWallGateTemplate(state.id);
+                        if (gateTemplate)
+                        {
+                            var wallName = GetTemplateData(state.template).name.generic;
+                            var gateName = GetTemplateData(gateTemplate).name.generic;
 
-                        walls.push({
-                            "tooltip": "Convert " + wallName + " to " + gateName,
-                            "template": gateTemplate,
-                            "callback": function (item) { transformWallToGate(item.template); }
-                        });
+                            walls.push({
+                                "tooltip": "Convert " + wallName + " to " + gateName,
+                                "template": gateTemplate,
+                                "callback": function (item) { transformWallToGate(item.template); }
+                            });
+                        }
+
+                        // We only need one entity per type.
+                        longWallTypes[state.template] = true;
                     }
+                    else if (state.gate && !gates.length)
+                        for (var j = 0; j < GATE_ACTIONS.length; ++j)
+                            gates.push({
+                                "gate": state.gate,
+                                "tooltip": GATE_ACTIONS[j] + " gate",
+                                "locked": j == 0,
+                                "callback": function (item) { lockGate(item.locked); }
+                            });
+                    // Show both 'locked' and 'unlocked' as active if the selected gates have both lock states.
+                    else if (state.gate && state.gate.locked != gates[0].gate.locked)
+                        for (var j = 0; j < gates.length; ++j)
+                            delete gates[j].gate.locked;
+                }
 
-                    // We only need one entity per type.
-                    longWallTypes[state.template] = true;
-                }
-                else if (state.gate && !gates.length)
-                    for (var j = 0; j < GATE_ACTIONS.length; ++j)
-                        gates.push({
-                            "gate": state.gate,
-                            "tooltip": GATE_ACTIONS[j] + " gate",
-                            "locked": j == 0,
-                            "callback": function (item) { lockGate(item.locked); }
-                        });
-                // Show both 'locked' and 'unlocked' as active if the selected gates have both lock states.
-                else if (state.gate && state.gate.locked != gates[0].gate.locked)
-                    for (var j = 0; j < gates.length; ++j)
-                        delete gates[j].gate.locked;
+                // Place wall conversion options after gate lock/unlock icons.
+                var items = gates.concat(walls);
+                if (items.length)
+                    setupUnitPanel(GATE, usedPanels, entState, items);
+                else
+                    rightUsed = false;
             }
-
-            // Place wall conversion options after gate lock/unlock icons.
-            var items = gates.concat(walls);
-            if (items.length)
-                setupUnitPanel(GATE, usedPanels, entState, items);
             else
                 rightUsed = false;
-        }
-        else
-            rightUsed = false;
 
-        if (!rightUsed)
-        {
-            // The right pane is empty. Fill the pane with a sane type.
-            // Prefer buildables for units and trainables for structures.
-            if (buildableEnts.length && (hasClass(entState, "Unit") || !trainableEnts.length))
-                setupUnitPanel(CONSTRUCTION, usedPanels, entState, buildableEnts, startBuildingPlacement);
-            else if (trainableEnts.length)
-                setupUnitPanel(TRAINING, usedPanels, entState, trainableEnts,
-                    function (trainEntType) { addTrainingToQueue(selection, trainEntType); } );
-        }
+            if (!rightUsed)
+            {
+                // The right pane is empty. Fill the pane with a sane type.
+                // Prefer buildables for units and trainables for structures.
+                if (buildableEnts.length && (hasClass(entState, "Unit") || !trainableEnts.length))
+                    setupUnitPanel(CONSTRUCTION, usedPanels, entState, buildableEnts, startBuildingPlacement);
+                else if (trainableEnts.length)
+                    setupUnitPanel(TRAINING, usedPanels, entState, trainableEnts,
+                        function (trainEntType) { addTrainingToQueue(selection, trainEntType); } );
+            }
 
-        // Show technologies if the active panel has at most one row of icons.
-        if (entState.production && entState.production.technologies.length)
-        {
-            var activepane = usedPanels[CONSTRUCTION] ? buildableEnts.length : trainableEnts.length;
-            if (selection.length == 1 || activepane <= 8)
-                setupUnitPanel(RESEARCH, usedPanels, entState, entState.production.technologies,
-                    function (researchType) { addResearchToQueue(entState.id, researchType); } );
+            // Show technologies if the active panel has at most one row of icons.
+            if (entState.production && entState.production.technologies.length)
+            {
+                var activepane = usedPanels[CONSTRUCTION] ? buildableEnts.length : trainableEnts.length;
+                if (selection.length == 1 || activepane <= 8)
+                    setupUnitPanel(RESEARCH, usedPanels, entState, entState.production.technologies,
+                        function (researchType) { addResearchToQueue(entState.id, researchType); } );
+            }
         }
 
         if (entState.production && entState.production.queue.length)

binaries/data/mods/public/gui/summary/summary.js

@@ -276 +276 @@
 function onTick()
 {
     // Update music state
-    global.music.updateTimer();
+    if (global.music)
+        global.music.updateTimer();
 }

source/gui/scripting/ScriptFunctions.cpp

@@ -167 +167 @@
     return -1;
 }
 
+void SetPlayerID(void* UNUSED(cbdata), int id)
+{
+    if (g_Game)
+        g_Game->SetPlayerID(id);
+}
+
 std::wstring GetDefaultPlayerName(void* UNUSED(cbdata))
 {
     std::wstring name = g_PlayerName.FromUTF8();
@@ -617 +623 @@
     // Misc functions
     scriptInterface.RegisterFunction<std::wstring, std::wstring, &SetCursor>("SetCursor");
     scriptInterface.RegisterFunction<int, &GetPlayerID>("GetPlayerID");
+    scriptInterface.RegisterFunction<void, int, &SetPlayerID>("SetPlayerID");
     scriptInterface.RegisterFunction<std::wstring, &GetDefaultPlayerName>("GetDefaultPlayerName");
     scriptInterface.RegisterFunction<void, std::string, &OpenURL>("OpenURL");
     scriptInterface.RegisterFunction<void, &RestartInAtlas>("RestartInAtlas");

source/network/NetTurnManager.cpp

@@ -465 +465 @@
 
 
 
+CNetReplayTurnManager::CNetReplayTurnManager(CSimulation2& simulation, IReplayLogger& replay) :
+    CNetLocalTurnManager(simulation, replay)
+{
+}
+
+void CNetReplayTurnManager::StoreReplayCommand(u32 turn, int player, const std::string& command)
+{
+    m_ReplayCommands[turn][player].push_back(command);
+}
+
+void CNetReplayTurnManager::NotifyFinishedUpdate(u32 turn)
+{
+    DoTurn(turn);
+}
+
+void CNetReplayTurnManager::DoTurn(u32 turn)
+{
+    std::map<int, std::vector<std::string> > playerCommands = m_ReplayCommands[turn];
+    std::map<int, std::vector<std::string> >::iterator it;
+    for (it = playerCommands.begin(); it != playerCommands.end(); ++it)
+    {
+        int player = it->first;
+        for (size_t i = 0; i < it->second.size(); ++i)
+        {
+            CScriptValRooted data = m_Simulation2.GetScriptInterface().ParseJSON(it->second[i]);
+            AddCommand(m_ClientId, player, data, m_CurrentTurn + 1);
+        }
+    }
+}
+
+
+
+
 CNetServerTurnManager::CNetServerTurnManager(CNetServerWorker& server) :
     m_NetServer(server), m_ReadyTurn(1), m_TurnLength(DEFAULT_TURN_LENGTH_MP)
 {

source/network/NetTurnManager.h

@@ -22 +22 @@
 
 #include <list>
 #include <map>
+#include <vector>
 
 class CNetServerWorker;
 class CNetClient;
@@ -227 +228 @@
     virtual void NotifyFinishedUpdate(u32 turn);
 };
 
+/**
+ * Implementation of CNetTurnManager for replay games.
+ */
+class CNetReplayTurnManager : public CNetLocalTurnManager
+{
+public:
+    CNetReplayTurnManager(CSimulation2& simulation, IReplayLogger& replay);
 
+    void StoreReplayCommand(u32 turn, int player, const std::string& command);
+
+protected:
+    virtual void NotifyFinishedUpdate(u32 turn);
+
+    void DoTurn(u32 turn);
+
+    std::map<u32, std::map<int, std::vector<std::string> > > m_ReplayCommands;
+};
+
+
 /**
  * The server-side counterpart to CNetClientTurnManager.
  * Records the turn state of each client, and sends turn advancement messages

source/ps/Game.cpp

@@ -59 +59 @@
  * Constructor
  *
  **/
-CGame::CGame(bool disableGraphics):
+CGame::CGame(bool disableGraphics, bool replayLog):
     m_World(new CWorld(this)),
     m_Simulation2(new CSimulation2(&m_World->GetUnitManager(), m_World->GetTerrain())),
     m_GameView(disableGraphics ? NULL : new CGameView(this)),
@@ -67 +67 @@
     m_Paused(false),
     m_SimRate(1.0f),
     m_PlayerID(-1),
-    m_IsSavedGame(false)
+    m_IsSavedGame(false),
+    m_IsReplay(false),
+    m_ReplayStream(NULL)
 {
-    m_ReplayLogger = new CReplayLogger(m_Simulation2->GetScriptInterface());
     // TODO: should use CDummyReplayLogger unless activated by cmd-line arg, perhaps?
+    if (replayLog)
+        m_ReplayLogger = new CReplayLogger(m_Simulation2->GetScriptInterface());
+    else
+        m_ReplayLogger = new CDummyReplayLogger();
 
     // Need to set the CObjectManager references after various objects have
     // been initialised, so do it here rather than via the initialisers above.
@@ -97 +102 @@
     delete m_Simulation2;
     delete m_World;
     delete m_ReplayLogger;
+    delete m_ReplayStream;
 }
 
 void CGame::SetTurnManager(CNetTurnManager* turnManager)
@@ -161 +167 @@
     if (m_IsSavedGame)
         RegMemFun(this, &CGame::LoadInitialState, L"Loading game", 1000);
 
+    if (m_IsReplay)
+        RegMemFun(this, &CGame::LoadReplayData, L"Loading replay data", 1000);
+
     LDR_EndRegistering();
 }
 
@@ -184 +193 @@
     return 0;
 }
 
+int CGame::LoadReplayData()
+{
+    ENSURE(m_IsReplay);
+    ENSURE(!m_ReplayPath.empty());
+
+    CNetReplayTurnManager* replayTurnMgr = static_cast<CNetReplayTurnManager*>(GetTurnManager());
+
+    u32 currentTurn = 0;
+    std::string type;
+    while ((*m_ReplayStream >> type).good())
+    {
+        if (type == "turn")
+        {
+            u32 turn = 0;
+            u32 turnLength = 0;
+            *m_ReplayStream >> turn >> turnLength;
+            ENSURE(turn == currentTurn);
+        }
+        else if (type == "cmd")
+        {
+            int player;
+            *m_ReplayStream >> player;
+
+            std::string line;
+            std::getline(*m_ReplayStream, line);
+            replayTurnMgr->StoreReplayCommand(currentTurn, player, line);
+        }
+        else if (type == "hash" || type == "hash-quick")
+        {
+            // Ignored for now
+            std::string replayHash;
+            *m_ReplayStream >> replayHash;
+        }
+        else if (type == "end")
+        {
+            currentTurn++;
+        }
+        else
+        {
+            CancelLoad(L"Failed to load replay data (unrecognized content)");
+        }
+    }
+    m_FinalReplayTurn = currentTurn + 1;
+
+    return 0;
+}
+
+void CGame::StartReplay(const std::string& replayPath)
+{
+    m_IsReplay = true;
+
+    SetTurnManager(new CNetReplayTurnManager(*m_Simulation2, GetReplayLogger()));
+
+    m_ReplayPath = replayPath;
+    m_ReplayStream = new std::ifstream(m_ReplayPath.c_str());
+    ENSURE(m_ReplayStream->good());
+
+    std::string type;
+    ENSURE((*m_ReplayStream >> type).good() && type == "start");
+
+    std::string line;
+    std::getline(*m_ReplayStream, line);
+    CScriptValRooted attribs = m_Simulation2->GetScriptInterface().ParseJSON(line);
+    StartGame(attribs, "");
+}
+
 /**
  * Game initialization has been completed. Set game started flag and start the session.
  *
@@ -285 +360 @@
                 g_GUI->SendEventToAll("SimulationUpdate");
             }
 
+            if (m_IsReplay && m_TurnManager->GetCurrentTurn() == m_FinalReplayTurn)
+                g_GUI->SendEventToAll("ReplayFinished");
+
             GetView()->GetLOSTexture().MakeDirty();
         }
         

source/ps/Game.h

@@ -19 +19 @@
 #define INCLUDED_GAME
 
 #include "ps/Errors.h"
+#include <map>
 #include <vector>
 
 #include "scriptinterface/ScriptVal.h"
@@ -65 +66 @@
     CNetTurnManager* m_TurnManager;
 
 public:
-    CGame(bool disableGraphics = false);
+    CGame(bool disableGraphics = false, bool replayLog = true);
     ~CGame();
 
     /**
@@ -76 +77 @@
     void StartGame(const CScriptValRooted& attribs, const std::string& savedState);
     PSRETURN ReallyStartGame();
 
+    void StartReplay(const std::string& replayPath);
+
     /**
      * Periodic heartbeat that controls the process. performs all per-frame updates.
      * Simulation update is called and game status update is called.
@@ -168 +171 @@
     int LoadInitialState();
     std::string m_InitialSavedState; // valid between RegisterInit and LoadInitialState
     bool m_IsSavedGame; // true if loading a saved game; false for a new game
+
+    int LoadReplayData();
+    std::string m_ReplayPath;
+    bool m_IsReplay;
+    std::istream* m_ReplayStream;
+    u32 m_FinalReplayTurn;
 };
 
 extern CGame *g_Game;

source/ps/GameSetup/GameSetup.cpp

@@ -825 +825 @@
 }
 
 bool Autostart(const CmdLineArgs& args);
+bool VisualReplay(const CmdLineArgs& args);
 
 void Init(const CmdLineArgs& args, int UNUSED(flags))
 {
@@ -983 +984 @@
 
     try
     {
-        if (!Autostart(args))
+        if (!VisualReplay(args) && !Autostart(args))
         {
             const bool setup_gui = ((flags & INIT_NO_GUI) == 0);
             InitPs(setup_gui, L"page_pregame.xml", JSVAL_VOID);
@@ -1017 +1018 @@
     g_DoRenderCursor = RenderingState;
 }
 
+bool VisualReplay(const CmdLineArgs& args)
+{
+    CStr replayPath = args.Get("replay-visual");
+    if (!replayPath.empty())
+    {
+        g_Game = new CGame(false, false);
+        
+        g_Game->SetPlayerID(1);
+        g_Game->StartReplay(replayPath);
+
+        // TODO: Non progressive load can fail - need a decent way to handle this
+        LDR_NonprogressiveLoad();
+
+        PSRETURN ret = g_Game->ReallyStartGame();
+        ENSURE(ret == PSRETURN_OK);
+
+        InitPs(true, L"page_replay.xml", JSVAL_VOID);
+        return true;
+    }
+
+    return false;
+}
+
 bool Autostart(const CmdLineArgs& args)
 {
     /*

source/ps/Replay.cpp

@@ -128 +128 @@
     g_ScriptStatsTable = new CScriptStatsTable;
     g_ProfileViewer.AddRootTable(g_ScriptStatsTable);
 
-    CGame game(true);
+    CGame game(true, false);
     g_Game = &game;
 
     // Need some stuff for terrain movement costs: