Ticket #3000: heropanel4.patch

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

@@ -8 +8 @@
 const g_PopulationAlertColor = "orange";
 
 /**
+ * Maximum number of heroes to display (must stay in sync with hero_icon.xml).
+ */
+const g_HeroPanelCount = 10;
+
+/**
  * A random file will be played. TODO: more variety
  */
 const g_Ambient = [ "audio/ambient/dayscape/day_temperate_gen_03.ogg" ];
@@ -143 +148 @@
 var g_AdditionalHighlight = [];
 
 /**
- * Blink the hero selection if that entity has lost health since the last turn.
+ * Previous set of heroes to display.
  */
-var g_PreviousHeroHitPoints;
+var g_PreviousHeroes = [];
 
 /**
  * Unit classes to be checked for the idle-worker-hotkey.
@@ -271 +276 @@
     gameSpeed.onSelectionChange = function() { changeGameSpeed(+this.list_data[this.selected]); };
     initMenuPosition();
 
+    // Initialize heroes and buttons.
+    for (let i = 0; i < g_HeroPanelCount; ++i)
+    {
+        // "Save" off the value to deal with the closure.
+        let slot = i;
+        let button = Engine.GetGUIObjectByName("unitHeroButton[" + slot + "]");
+        button.onPress = function()
+        {
+            let hero = g_PreviousHeroes[slot];
+            if (!hero)
+                return;
+
+            if (!Engine.HotkeyIsPressed("selection.add"))
+                g_Selection.reset();
+            g_Selection.addList([hero.ent]);
+        };
+
+        button.onDoublePress = function() {
+            let hero = g_PreviousHeroes[slot];
+            if (hero)
+                selectAndMoveTo(getEntityOrHolder(hero.ent));
+        };
+    }
+
     // Populate player selection dropdown
     let playerNames = [translate("Observer")];
     let playerIDs = [-1];
@@ -712 +741 @@
     if (g_ShowGuarding || g_ShowGuarded)
         updateAdditionalHighlight();
 
-    updateHero();
+    updateHeroes();
     updateGroups();
     updateDebug();
     updatePlayerDisplay();
@@ -788 +817 @@
 }
 
 
-function updateHero()
+function updateHeroes()
 {
-    let unitHeroPanel = Engine.GetGUIObjectByName("unitHeroPanel");
-    let heroButton = Engine.GetGUIObjectByName("unitHeroButton");
-
     let playerState = GetSimState().players[g_ViewedPlayer];
-    if (!playerState || playerState.heroes.length <= 0)
+    if (!playerState || playerState.heroes.length == 0)
     {
-        g_PreviousHeroHitPoints = undefined;
-        unitHeroPanel.hidden = true;
+        if (g_PreviousHeroes.length > 0)
+        {
+            g_PreviousHeroes.forEach((hero, slot) => {
+                if (hero)
+                    Engine.GetGUIObjectByName("unitHeroButton[" + slot + "]").hidden = true;
+            });
+            g_PreviousHeroes = [];
+        }
         return;
     }
 
-    let heroImage = Engine.GetGUIObjectByName("unitHeroImage");
-    let heroState = GetExtendedEntityState(playerState.heroes[0]);
-    let template = GetTemplateData(heroState.template);
-    heroImage.sprite = "stretched:session/portraits/" + template.icon;
-    let hero = playerState.heroes[0];
-
-    heroButton.onpress = function()
+    let mapped = playerState.heroes.map(ent => {
+        // Retain current ordering, if displayed previously.
+        // This does a linear search through the array,
+        // but the multiple-hero case is extremely rare.
+        let previous = g_PreviousHeroes.find(hero => hero && hero.ent == ent);
+        if (previous)
+            return {
+                "ent": ent,
+                "index": previous.index,
+                "previous": previous
+            };
+
+        // Place new heroes at the end of the list.
+        return {
+            "ent": ent,
+            "index": g_HeroPanelCount
+        };
+    }).sort((l, r) => l.index == r.index ? l.ent - r.ent : l.index - r.index);
+
+    let heroes = new Array(g_HeroPanelCount).fill(undefined);
+
+    for (let displayIndex = 0; displayIndex < Math.min(g_HeroPanelCount, mapped.length); ++displayIndex)
     {
-        if (!Engine.HotkeyIsPressed("selection.add"))
-            g_Selection.reset();
-        g_Selection.addList([hero]);
-    };
-    heroButton.ondoublepress = function() { selectAndMoveTo(getEntityOrHolder(hero)); };
-    unitHeroPanel.hidden = false;
+        let hero = mapped[displayIndex];
+
+        // Find the first unused slot if new, otherwise reuse previous.
+        let slot = hero.previous ?
+            hero.previous.slot :
+            heroes.findIndex(slot => !slot);
+
+        let heroButton = Engine.GetGUIObjectByName("unitHeroButton[" + slot + "]");
+        let heroState = GetExtendedEntityState(hero.ent);
+        let template = GetTemplateData(heroState.template);
+
+        if (!hero.previous)
+        {
+            // Ensure no pre-existing animations.
+            stopColorFade("heroHitOverlay[" + slot + "]");
+            let heroImage = Engine.GetGUIObjectByName("unitHeroImage[" + slot + "]");
+            heroImage.sprite = "stretched:session/portraits/" + template.icon;
 
+            heroButton.hidden = false;
+        }
+
+        heroButton.tooltip = createHeroTooltip(heroState, template);
+        updateGUIStatusBar("heroHealthBar[" + slot + "]",
+                heroState.hitpoints, heroState.maxHitpoints);
+
+        // The "slot" is which button, but it's the identity (name) of the button, not its position.
+        // Heroes stay in the same slot, but the position of the button may change.
+        // TODO: Instead of instant position changes, animate button movement.
+        setPanelObjectPosition(heroButton, displayIndex, g_HeroPanelCount);
+
+        // If the health of the hero changed since the last update, trigger the animation.
+        if (hero.previous && hero.previous.hitpoints > heroState.hitpoints)
+            startColorFade("heroHitOverlay[" + slot + "]", 100, 0,
+                    colorFade_attackUnit, true, smoothColorFadeRestart_attackUnit);
+
+        heroes[slot] = {
+            "ent": hero.ent,
+            "slot": slot,
+            "index": displayIndex,
+            "hitpoints": heroState.hitpoints
+        };
+    }
+
+    // In case heroes were removed and their slot/button was freed, hide it.
+    g_PreviousHeroes.forEach((hero, slot) => {
+        if (!heroes[slot])
+            Engine.GetGUIObjectByName("unitHeroButton[" + slot + "]").hidden = true;
+    });
+
+    g_PreviousHeroes = heroes;
+}
+
+function createHeroTooltip(heroState, template)
+{
     // Setup tooltip
     let tooltip = "[font=\"sans-bold-16\"]" + template.name.specific + "[/font]";
-    let healthLabel = "[font=\"sans-bold-13\"]" + translate("Health:") + "[/font]";
-    tooltip += "\n" + sprintf(translate("%(label)s %(current)s / %(max)s"), { 
-        "label": healthLabel,
+    tooltip += "\n" + sprintf(translate("%(label)s %(current)s / %(max)s"), {
+        "label": "[font=\"sans-bold-13\"]" + translate("Health:") + "[/font]",
         "current": Math.ceil(heroState.hitpoints),
         "max": Math.ceil(heroState.maxHitpoints)
     });
@@ -830 +923 @@
     tooltip += "\n" + getArmorTooltip(heroState.armour);
     if (template.tooltip)
         tooltip += "\n" + template.tooltip;
-
-    heroButton.tooltip = tooltip;
-
-    // update heros health bar
-    updateGUIStatusBar("heroHealthBar", heroState.hitpoints, heroState.maxHitpoints);
-
-    let heroHP = {
-        "hitpoints": heroState.hitpoints,
-        "player": g_ViewedPlayer
-    };
-
-    if (!g_PreviousHeroHitPoints)
-        g_PreviousHeroHitPoints = heroHP;
-
-    // if the health of the hero changed since the last update, trigger the animation
-    if (g_PreviousHeroHitPoints.player == heroHP.player && g_PreviousHeroHitPoints.hitpoints > heroHP.hitpoints)
-        startColorFade("heroHitOverlay", 100, 0, colorFade_attackUnit, true, smoothColorFadeRestart_attackUnit);
-
-    g_PreviousHeroHitPoints = heroHP;
+    return tooltip;
 }
 
 function updateGroups()

binaries/data/mods/public/gui/session/session_objects/hero_icon.xml

@@ -2 +2 @@
 <object
     name="unitHeroPanel"
     size="0 36 50 93"
-    hidden="true"
+    hidden="false"
 >
-    <object name="unitHeroButton" size="0 0 50 50" type="button" style="iconButton" 
-        tooltip_style="sessionToolTip">
-        <object name="unitHeroImage" size="5 5 100%-5 100%-5" type="image" ghost="true"/>
-        <object name="heroHitOverlay" hidden="true" type="image" ghost="true" size="5 5 100%-5 100%-5"/> 
-    </object>
-    <!-- Hero Health bar -->
-    <object size="3 100%-7 100%-3 100%-2" name="heroHealthSection" ghost="true">
-        <object size="0 0 100% 5" name="heroHealth" type="image" ghost="true">
-            <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="heroHealthBar"/> 
-            <object type="image" sprite="statsBarShaderHorizontal" ghost="true"/>
+    <repeat count="10" var="n">
+        <object name="unitHeroButton[n]" size="0 0 50 50" type="button" hidden="true" style="iconButton" tooltip_style="sessionToolTip">
+            <object name="unitHeroImage[n]" size="5 5 100%-5 100%-5" type="image" ghost="true"/>
+            <object name="heroHitOverlay[n]" hidden="true" type="image" ghost="true" size="5 5 100%-5 100%-5"/>
+            <!-- Hero Health bar -->
+            <object size="3 100%-7 100%-3 100%-2" name="heroHealthSection[n]" ghost="true">
+                <object size="0 0 100% 5" name="heroHealth[n]" type="image" ghost="true">
+                    <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="heroHealthBar[n]"/>
+                    <object type="image" sprite="statsBarShaderHorizontal" ghost="true"/>
+                </object>
+            </object>
         </object>
-    </object>
+    </repeat>
 </object>