Ticket #4007: selection_panels_cleanup.2.diff

binaries/data/mods/public/gui/common/color.js

@@ +1 @@
+let g_GuiColors = {
+    "hotkey": "255 251 131",
+    "forbidden": "255 0 0 80",
+    "limited": "0 0 0 127",
+};
+
 /**
  * Concatenate integer color values to a string (for use in GUI objects)
  *
@@ -124 +130 @@
 
     return [r, g, b].map(n => Math.round(n * 255));
 }
+
+/**
+ * Colorize text for usage in the GUI
+ * @param {string} color in the form of a GUI color string 
+ * @param {string} text to colorize
+ * @returns {string}
+ */
+function colorizeText(color, text)
+{
+    return "[color=\"" + color + "\"]" + text + "[/color]";
+};

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

@@ -9 +9 @@
  * the item and some other standard data is added to a data object.
  *
  * The standard data is
- * var data = {
+ * {
  *   "i":              index
  *   "item":           item coming from the getItems function
  *   "selection":      list of currently selected items
@@ -23 +23 @@
  *   "countDisplay":   gui caption space
  * };
  *
- * Then, addData is called, and can be used to abort the processing
- * of the current item by returning false.
- * It should return true if you want the panel to be filled.
- *
- * addData is used to add data to the data object on top
- * (or instead of) the standard data.
- * addData is not obligated, the function will just continue
- * with the content setters if no addData is present.
- *
- * After the addData, all functions starting with "set" are called.
- * These are used to set various parts of content.
+ * Then for every data object, the setupButton function is called which
+ * sets the view and handlers of the button.
  */
 
 /* cache some formation info */
-var g_availableFormations = new Map();   // available formations per player
-var g_formationsInfo = new Map();
+let g_AvailableFormations = new Map();   // available formations per player
+let g_FormationsInfo = new Map();
 
-var g_SelectionPanels = {};
+let g_SelectionPanels = {};
 
 // ALERT
 g_SelectionPanels.Alert = {
@@ -54 +45 @@
             return [];
         return ["increase", "end"];
     },
-    "setAction": function(data)
+    "setupButton": function(data)
     {
         data.button.onPress = function() {
             if (data.item == "increase")
@@ -62 +53 @@
             else if (data.item == "end")
                 endOfAlert();
         };
-    },
-    "setTooltip": function(data)
-    {
+
         if (data.item == "increase")
         {
             if (data.unitEntState.alertRaiser.hasRaisedAlert)
@@ -74 +63 @@
         }
         else if (data.item == "end")
             data.button.tooltip = translate("End of alert.");
-    },
-    "setGraphics": function(data)
-    {
+
         if (data.item == "increase")
         {
             data.button.hidden = !data.unitEntState.alertRaiser.canIncreaseLevel;
@@ -91 +78 @@
             data.icon.sprite = "stretched:session/icons/bell_level0.png";
         }
         data.button.enabled = !data.button.hidden && controlsPlayer(data.unitEntState.player);
+
+        setPanelObjectPosition(data.button, data.i, data.rowLength);
+        return true;
     }
 };
 
@@ -108 +98 @@
         // ["food", "wood", "stone", "metal"]
         return BARTER_RESOURCES;
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
         // data.item is the resource name in this case
-        data.button = {};
-        data.icon = {};
-        data.amount = {};
-        for (var a of BARTER_ACTIONS)
+        let button = {};
+        let icon = {};
+        let amount = {};
+        for (let a of BARTER_ACTIONS)
         {
-            data.button[a] = Engine.GetGUIObjectByName("unitBarter"+a+"Button["+data.i+"]");
-            data.icon[a] = Engine.GetGUIObjectByName("unitBarter"+a+"Icon["+data.i+"]");
-            data.amount[a] = Engine.GetGUIObjectByName("unitBarter"+a+"Amount["+data.i+"]");
+            button[a] = Engine.GetGUIObjectByName("unitBarter" + a + "Button[" + data.i + "]");
+            icon[a] = Engine.GetGUIObjectByName("unitBarter" + a + "Icon[" + data.i + "]");
+            amount[a] = Engine.GetGUIObjectByName("unitBarter" + a + "Amount[" + data.i + "]");
         }
-        data.selectionIcon = Engine.GetGUIObjectByName("unitBarterSellSelection["+data.i+"]");
+        let selectionIcon = Engine.GetGUIObjectByName("unitBarterSellSelection[" + data.i + "]");
 
-        data.amountToSell = BARTER_RESOURCE_AMOUNT_TO_SELL;
+        let amountToSell = BARTER_RESOURCE_AMOUNT_TO_SELL;
         if (Engine.HotkeyIsPressed("session.massbarter"))
-            data.amountToSell *= BARTER_BUNCH_MULTIPLIER;
-        data.isSelected = data.item == g_barterSell;
-        return true;
-    },
-    "setCountDisplay": function(data)
-    {
-        data.amount.Sell.caption = "-" + data.amountToSell;
-        var sellPrice = data.unitEntState.barterMarket.prices.sell[g_barterSell];
-        var buyPrice = data.unitEntState.barterMarket.prices.buy[data.item];
-        data.amount.Buy.caption = "+" + Math.round(sellPrice / buyPrice * data.amountToSell);
-    },
-    "setTooltip": function(data)
-    {
-        var resource = getLocalizedResourceName(data.item, "withinSentence");
-        data.button.Buy.tooltip = sprintf(translate("Buy %(resource)s"), { "resource": resource });
-        data.button.Sell.tooltip = sprintf(translate("Sell %(resource)s"), { "resource": resource });
-    },
-    "setAction": function(data)
-    {
-        data.button.Sell.onPress = function() { g_barterSell = data.item; };
-        var exchangeResourcesParameters = {
+            amountToSell *= BARTER_BUNCH_MULTIPLIER;
+
+        amount.Sell.caption = "-" + amountToSell;
+        let sellPrice = data.unitEntState.barterMarket.prices.sell[g_barterSell];
+        let buyPrice = data.unitEntState.barterMarket.prices.buy[data.item];
+        amount.Buy.caption = "+" + Math.round(sellPrice / buyPrice * amountToSell);
+
+        let resource = getLocalizedResourceName(data.item, "withinSentence");
+        button.Buy.tooltip = sprintf(translate("Buy %(resource)s"), { "resource": resource });
+        button.Sell.tooltip = sprintf(translate("Sell %(resource)s"), { "resource": resource });
+
+        button.Sell.onPress = function() { g_barterSell = data.item; };
+        let exchangeResourcesParameters = {
             "sell": g_barterSell,
             "buy": data.item,
-            "amount": data.amountToSell
+            "amount": amountToSell
         };
-        data.button.Buy.onPress = function() { exchangeResources(exchangeResourcesParameters); };
-    },
-    "setGraphics": function(data)
-    {
-        var grayscale = data.isSelected ? "color: 0 0 0 100:grayscale:" : "";
+        button.Buy.onPress = function() { exchangeResources(exchangeResourcesParameters); };
 
+        let isSelected = data.item == g_barterSell;
+        let grayscale = isSelected ? "color: 0 0 0 100:grayscale:" : "";
+
         // do we have enough of this resource to sell?
-        var neededRes = {};
-        neededRes[data.item] = data.amountToSell;
-        var canSellCurrent = Engine.GuiInterfaceCall("GetNeededResources", {
+        let neededRes = {};
+        neededRes[data.item] = amountToSell;
+        let canSellCurrent = Engine.GuiInterfaceCall("GetNeededResources", {
             "cost": neededRes,
             "player": data.unitEntState.player
-        }) ? "color:255 0 0 80:" : "";
+        }) ? "color:" + g_GuiColors.forbidden + ":" : "";
 
         // Let's see if we have enough resources to barter.
         neededRes = {};
-        neededRes[g_barterSell] = data.amountToSell;
-        var canBuyAny = Engine.GuiInterfaceCall("GetNeededResources", {
+        neededRes[g_barterSell] = amountToSell;
+        let canBuyAny = Engine.GuiInterfaceCall("GetNeededResources", {
             "cost": neededRes,
             "player": data.unitEntState.player
-        }) ? "color:255 0 0 80:" : "";
+        }) ? "color:" + g_GuiColors.forbidden + ":" : "";
 
-        data.icon.Sell.sprite = canSellCurrent + "stretched:"+grayscale+"session/icons/resources/" + data.item + ".png";
-        data.icon.Buy.sprite = canBuyAny + "stretched:"+grayscale+"session/icons/resources/" + data.item + ".png";
+        icon.Sell.sprite = canSellCurrent + "stretched:" + grayscale + "session/icons/resources/" + data.item + ".png";
+        icon.Buy.sprite = canBuyAny + "stretched:" + grayscale + "session/icons/resources/" + data.item + ".png";
 
-        data.button.Buy.hidden = data.isSelected;
-        data.button.Buy.enabled = controlsPlayer(data.unitEntState.player);
-        data.button.Sell.hidden = false;
-        data.selectionIcon.hidden = !data.isSelected;
-    },
-    "setPosition": function(data)
-    {
-        setPanelObjectPosition(data.button.Sell, data.i, data.rowLength);
-        setPanelObjectPosition(data.button.Buy, data.i + data.rowLength, data.rowLength);
+        button.Buy.hidden = isSelected;
+        button.Buy.enabled = controlsPlayer(data.unitEntState.player);
+        button.Sell.hidden = false;
+        selectionIcon.hidden = !isSelected;
+
+        // Position
+        setPanelObjectPosition(button.Sell, data.i, data.rowLength);
+        setPanelObjectPosition(button.Buy, data.i + data.rowLength, data.rowLength);
+        return true;
     }
 };
 
@@ -198 +179 @@
 
         for (let c in g_EntityCommands)
         {
-            var info = g_EntityCommands[c].getInfo(unitEntState);
+            let info = g_EntityCommands[c].getInfo(unitEntState);
             if (!info)
                 continue;
 
@@ -207 +188 @@
         }
         return commands;
     },
-    "setTooltip": function(data)
+    "setupButton": function(data)
     {
         data.button.tooltip = data.item.tooltip;
-    },
-    "setAction": function(data)
-    {
+
         data.button.onPress = function() {
             if (data.item.callback)
                 data.item.callback(data.item);
@@ -219 +198 @@
             else
                 performCommand(data.unitEntState.id, data.item.name);
         };
-    },
-    "setCountDisplay": function(data)
-    {
+
         data.countDisplay.caption = data.item.count || "";
-    },
-    "setGraphics": function(data)
-    {
+
         data.button.enabled = controlsPlayer(data.unitEntState.player);
         let grayscale = data.button.enabled ? "" : "grayscale:";
         data.icon.sprite = "stretched:" + grayscale + "session/icons/" + data.item.icon;
-    },
-    "setPosition": function(data)
-    {
-        var size = data.button.size;
+
+        let size = data.button.size;
         // count on square buttons, so size.bottom is the width too
-        var spacer = size.bottom + 1;
+        let spacer = size.bottom + 1;
         // relative to the center ( = 50%)
         size.rleft = size.rright = 50;
         // offset from the center calculation
@@ -241 +214 @@
         size.left = (data.i - data.numberOfItems/2) * spacer;
         size.right = size.left + size.bottom;
         data.button.size = size;
+        return true;
     }
 };
 
@@ -250 +224 @@
     {
         return 2;
     },
+    "conflictsWith": ["Command"],
     "getItems": function(unitEntState)
     {
-        var commands = [];
-        for (var c in g_AllyEntityCommands)
+        let commands = [];
+        for (let c in g_AllyEntityCommands)
         {
-            var info = g_AllyEntityCommands[c].getInfo(unitEntState);
+            let info = g_AllyEntityCommands[c].getInfo(unitEntState);
             if (!info)
                 continue;
             info.name = c;
@@ -263 +238 @@
         }
         return commands;
     },
-    "setTooltip": function(data)
+    "setupButton": function(data)
     {
         data.button.tooltip = data.item.tooltip;
-    },
-    "setAction": function(data)
-    {
+
         data.button.onPress = function() {
             if (data.item.callback)
                 data.item.callback(data.item);
@@ -275 +248 @@
             else
                 performAllyCommand(data.unitEntState.id, data.item.name);
         };
-    },
-    "conflictsWith": ["Command"],
-    "setCountDisplay": function(data)
-    {
+
         data.countDisplay.caption = data.item.count || "";
-    },
-    "setGraphics": function(data)
-    {
+
         data.button.enabled = data.item.count != undefined && data.item.count > 0;
         let grayscale = data.button.enabled ? "" : "grayscale:";
         data.icon.sprite = "stretched:" + grayscale + "session/icons/" + data.item.icon;
-    },
-    "setPosition": function(data)
-    {
-        var size = data.button.size;
+
+        let size = data.button.size;
         // count on square buttons, so size.bottom is the width too
-        var spacer = size.bottom + 1;
+        let spacer = size.bottom + 1;
         // relative to the center ( = 50%)
         size.rleft = size.rright = 50;
         // offset from the center calculation
@@ -298 +264 @@
         size.left = (data.i - data.numberOfItems/2) * spacer;
         size.right = size.left + size.bottom;
         data.button.size = size;
+
+        // Position
+        setPanelObjectPosition(data.button, data.i, data.rowLength);
+        return true;
     }
 };
 
@@ -311 +281 @@
     {
         return getAllBuildableEntitiesFromSelection();
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
-        data.entType = data.item;
-        data.template = GetTemplateData(data.entType);
-        if (!data.template) // abort if no template
+        let template = GetTemplateData(data.item);
+        if (!template) // abort if no template
             return false;
 
-        data.technologyEnabled = Engine.GuiInterfaceCall("IsTechnologyResearched", {
-            "tech": data.template.requiredTechnology,
+        let technologyEnabled = Engine.GuiInterfaceCall("IsTechnologyResearched", {
+            "tech": template.requiredTechnology,
             "player": data.unitEntState.player
         });
 
-        if (data.template.cost)
-            data.neededResources = Engine.GuiInterfaceCall("GetNeededResources", {
-                "cost": multiplyEntityCosts(data.template, 1),
+        let neededResources;
+        if (template.cost)
+            neededResources = Engine.GuiInterfaceCall("GetNeededResources", {
+                "cost": multiplyEntityCosts(template, 1),
                 "player": data.unitEntState.player
             });
 
-        data.limits = getEntityLimitAndCount(data.playerState, data.entType);
+        let limits = getEntityLimitAndCount(data.playerState, data.item);
 
-        if (data.template.wallSet)
-            data.template.auras = GetTemplateData(data.template.wallSet.templates.long).auras;
+        if (template.wallSet)
+            template.auras = GetTemplateData(template.wallSet.templates.long).auras;
 
-        return true;
-    },
-    "setAction": function(data)
-    {
         data.button.onPress = function () { startBuildingPlacement(data.item, data.playerState); };
-    },
-    "setTooltip": function(data)
-    {
-        var tooltip = getEntityNamesFormatted(data.template);
-        tooltip += getVisibleEntityClassesFormatted(data.template);
-        tooltip += getAurasTooltip(data.template);
 
-        if (data.template.tooltip)
-            tooltip += "\n[font=\"sans-13\"]" + data.template.tooltip + "[/font]";
+        let tooltip = getEntityNamesFormatted(template);
+        tooltip += getVisibleEntityClassesFormatted(template);
+        tooltip += getAurasTooltip(template);
 
-        tooltip += "\n" + getEntityCostTooltip(data.template);
-        tooltip += getPopulationBonusTooltip(data.template);
+        if (template.tooltip)
+            tooltip += "\n[font=\"sans-13\"]" + template.tooltip + "[/font]";
 
-        tooltip += formatLimitString(data.limits.entLimit, data.limits.entCount, data.limits.entLimitChangers);
+        tooltip += "\n" + getEntityCostTooltip(template);
+        tooltip += getPopulationBonusTooltip(template);
 
-        if (!data.technologyEnabled)
+        tooltip += formatLimitString(limits.entLimit, limits.entCount, limits.entLimitChangers);
+
+        if (!technologyEnabled)
             tooltip += "\n" + sprintf(translate("Requires %(technology)s"), {
-                "technology": getEntityNames(GetTechnologyData(data.template.requiredTechnology))
+                "technology": getEntityNames(GetTechnologyData(template.requiredTechnology))
             });
 
-        if (data.neededResources)
-            tooltip += getNeededResourcesTooltip(data.neededResources);
+        if (neededResources)
+            tooltip += getNeededResourcesTooltip(neededResources);
 
         data.button.tooltip = tooltip;
-        return true;
-    },
-    "setGraphics": function(data)
-    {
-        var modifier = "";
-        if (!data.technologyEnabled || data.limits.canBeAddedCount == 0)
+
+        let modifier = "";
+        if (!technologyEnabled || limits.canBeAddedCount == 0)
         {
             data.button.enabled = false;
-            modifier += "color: 0 0 0 127:";
+            modifier += "color: " + g_GuiColors.limited + ":";
             modifier += "grayscale:";
         }
-        else if (data.neededResources)
+        else if (neededResources)
         {
             data.button.enabled = false;
-            modifier += resourcesToAlphaMask(data.neededResources) +":";
+            modifier += resourcesToAlphaMask(neededResources) +":";
         }
         else
             data.button.enabled = controlsPlayer(data.unitEntState.player);
 
-        if (data.template.icon)
-            data.icon.sprite = modifier + "stretched:session/portraits/" + data.template.icon;
-    },
-    "setPosition": function(data)
-    {
-        var index = data.i + getNumberOfRightPanelButtons();
+        if (template.icon)
+            data.icon.sprite = modifier + "stretched:session/portraits/" + template.icon;
+
+        let index = data.i + getNumberOfRightPanelButtons();
         setPanelObjectPosition(data.button, index, data.rowLength);
+        return true;
     }
 };
 
@@ -404 +364 @@
     {
         if (!hasClass(unitEntState, "Unit") || hasClass(unitEntState, "Animal"))
             return [];
-        if (!g_availableFormations.has(unitEntState.player))
-            g_availableFormations.set(unitEntState.player, Engine.GuiInterfaceCall("GetAvailableFormations", unitEntState.player));
-        return g_availableFormations.get(unitEntState.player);
+        if (!g_AvailableFormations.has(unitEntState.player))
+            g_AvailableFormations.set(unitEntState.player, Engine.GuiInterfaceCall("GetAvailableFormations", unitEntState.player));
+        return g_AvailableFormations.get(unitEntState.player);
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
-        if (!g_formationsInfo.has(data.item))
-            g_formationsInfo.set(data.item, Engine.GuiInterfaceCall("GetFormationInfoFromTemplate", { "templateName": data.item }));
-        data.formationInfo = g_formationsInfo.get(data.item);
-        data.formationOk = canMoveSelectionIntoFormation(data.item);
-        data.formationSelected = Engine.GuiInterfaceCall("IsFormationSelected", {
+        if (!g_FormationsInfo.has(data.item))
+            g_FormationsInfo.set(data.item, Engine.GuiInterfaceCall("GetFormationInfoFromTemplate", { "templateName": data.item }));
+
+        let formationInfo = g_FormationsInfo.get(data.item);
+        let formationOk = canMoveSelectionIntoFormation(data.item);
+        let formationSelected = Engine.GuiInterfaceCall("IsFormationSelected", {
             "ents": data.selection,
             "formationTemplate": data.item
         });
-        return true;
-    },
-    "setAction": function(data)
-    {
+
         data.button.onPress = function() { performFormation(data.unitEntState.id, data.item); };
-    },
-    "setTooltip": function(data)
-    {
-        var tooltip = translate(data.formationInfo.name);
-        if (!data.formationOk && data.formationInfo.tooltip)
-            tooltip += "\n" + "[color=\"red\"]" + translate(data.formationInfo.tooltip) + "[/color]";
+
+        let tooltip = translate(formationInfo.name);
+        if (!formationOk && formationInfo.tooltip)
+            tooltip += "\n" + "[color=\"red\"]" + translate(formationInfo.tooltip) + "[/color]";
         data.button.tooltip = tooltip;
-    },
-    "setGraphics": function(data)
-    {
-        data.button.enabled = data.formationOk && controlsPlayer(data.unitEntState.player);
-        var grayscale = data.formationOk ? "" : "grayscale:";
-        data.guiSelection.hidden = !data.formationSelected;
-        data.icon.sprite = "stretched:"+grayscale+"session/icons/"+data.formationInfo.icon;
+
+        data.button.enabled = formationOk && controlsPlayer(data.unitEntState.player);
+        let grayscale = formationOk ? "" : "grayscale:";
+        data.guiSelection.hidden = !formationSelected;
+        data.icon.sprite = "stretched:" + grayscale + "session/icons/" + formationInfo.icon;
+
+        setPanelObjectPosition(data.button, data.i, data.rowLength);
+        return true;
     }
 };
 
@@ -451 +408 @@
     {
         if (!unitEntState.garrisonHolder)
             return [];
-        var groups = new EntityGroups();
-        for (var ent of selection)
+        let groups = new EntityGroups();
+        for (let ent of selection)
         {
-            var state = GetEntityState(ent);
+            let state = GetEntityState(ent);
             if (state.garrisonHolder)
                 groups.add(state.garrisonHolder.entities);
         }
         return groups.getEntsGrouped();
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
-        data.entType = data.item.template;
-        data.template = GetTemplateData(data.entType);
-        if (!data.template)
+        let template = GetTemplateData(data.item.template);
+        if (!template)
             return false;
-        data.name = getEntityNames(data.template);
-        data.count = data.item.ents.length;
-        return true;
-    },
-    "setAction": function(data)
-    {
+
         data.button.onPress = function() { unloadTemplate(data.item.template); };
-    },
-    "setTooltip": function(data)
-    {
-        var tooltip = sprintf(translate("Unload %(name)s"), { "name": data.name }) + "\n";
+
+        let tooltip = sprintf(translate("Unload %(name)s"), { "name": getEntityNames(template) }) + "\n";
         tooltip += translate("Single-click to unload 1. Shift-click to unload all of this type.");
         data.button.tooltip = tooltip;
-    },
-    "setCountDisplay": function(data)
-    {
-        data.countDisplay.caption = data.count || "";
-    },
-    "setGraphics": function(data)
-    {
-        var grayscale = "";
-        var ents = data.item.ents;
-        var entplayer = GetEntityState(ents[0]).player;
+
+        data.countDisplay.caption = data.item.ents.length || "";
+
+        let grayscale = "";
+        let ents = data.item.ents;
+        let entplayer = GetEntityState(ents[0]).player;
         data.button.sprite = "color:" + rgbToGuiColor(g_Players[entplayer].color) +":";
 
         if (!controlsPlayer(data.unitEntState.player) && !controlsPlayer(entplayer))
@@ -497 +442 @@
             grayscale = "grayscale:";
         }
 
-        data.icon.sprite = "stretched:" + grayscale + "session/portraits/" + data.template.icon;
+        data.icon.sprite = "stretched:" + grayscale + "session/portraits/" + template.icon;
+
+        setPanelObjectPosition(data.button, data.i, data.rowLength);
+        return true;
     }
 };
 
@@ -510 +458 @@
     "getItems": function(unitEntState, selection)
     {
         // Allow long wall pieces to be converted to gates
-        var longWallTypes = {};
-        var walls = [];
-        var gates = [];
-        for (var ent of selection)
+        let longWallTypes = {};
+        let walls = [];
+        let gates = [];
+        for (let ent of selection)
         {
-            var state = GetEntityState(ent);
+            let state = GetEntityState(ent);
             if (hasClass(state, "LongWall") && !state.gate && !longWallTypes[state.template])
             {
-                var gateTemplate = getWallGateTemplate(state.id);
+                let gateTemplate = getWallGateTemplate(state.id);
                 if (gateTemplate)
                 {
-                    var tooltipString = GetTemplateDataWithoutLocalization(state.template).gateConversionTooltip;
+                    let tooltipString = GetTemplateDataWithoutLocalization(state.template).gateConversionTooltip;
                     if (!tooltipString)
                     {
                         warn(state.template + " is supposed to be convertable to a gate, but it's missing the GateConversionTooltip in the Identity template");
@@ -554 +502 @@
             }
             // 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)
+                for (let 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);
-        return items;
+        return gates.concat(walls);
     },
-    "setAction": function(data)
+    "setupButton": function(data)
     {
         data.button.onPress = function() {data.item.callback(data.item); };
-    },
-    "setTooltip": function(data)
-    {
-        var tooltip = data.item.tooltip;
+
+        let tooltip = data.item.tooltip;
         if (data.item.template)
         {
             data.template = GetTemplateData(data.item.template);
             data.wallCount = data.selection.reduce(function (count, ent) {
-                    var state = GetEntityState(ent);
+                    let state = GetEntityState(ent);
                     if (hasClass(state, "LongWall") && !state.gate)
                         ++count;
                     return count;
@@ -589 +534 @@
                 tooltip += getNeededResourcesTooltip(data.neededResources);
         }
         data.button.tooltip = tooltip;
-    },
-    "setGraphics": function(data)
-    {
+
         data.button.enabled = controlsPlayer(data.unitEntState.player);
-        var gateIcon;
+        let gateIcon;
         if (data.item.gate)
         {
             // If already a gate, show locking actions
@@ -606 +549 @@
         else
         {
             // otherwise show gate upgrade icon
-            var template = GetTemplateData(data.item.template);
+            let template = GetTemplateData(data.item.template);
             if (!template)
-                return;
+                return false;
             gateIcon = data.template.icon ? "portraits/" + data.template.icon : "icons/gate_closed.png";
             data.guiSelection.hidden = true;
         }
 
         data.icon.sprite = (data.neededResources ? resourcesToAlphaMask(data.neededResources) + ":" : "") + "stretched:session/" + gateIcon;
-    },
-    "setPosition": function(data)
-    {
-        var index = data.i + getNumberOfRightPanelButtons();
+
+        let index = data.i + getNumberOfRightPanelButtons();
         setPanelObjectPosition(data.button, index, data.rowLength);
+        return true;
     }
 };
 
@@ -630 +572 @@
     },
     "getItems": function(unitEntState, selection)
     {
-        var checks = {};
-        for (var ent of selection)
+        let checks = {};
+        for (let ent of selection)
         {
-            var state = GetEntityState(ent);
+            let state = GetEntityState(ent);
             if (!state.pack)
                 continue;
             if (state.pack.progress == 0)
@@ -652 +594 @@
                     checks.unpackCancelButton = true;
             }
         }
-        var items = [];
+        let items = [];
         if (checks.packButton)
             items.push({ "packing": false, "packed": false, "tooltip": translate("Pack"), "callback": function() { packUnit(true); } });
         if (checks.unpackButton)
@@ -663 +605 @@
             items.push({ "packing": true, "packed": true, "tooltip": translate("Cancel Unpacking"), "callback": function() { cancelPackUnit(false); } });
         return items;
     },
-    "setAction": function(data)
+    "setupButton": function(data)
     {
         data.button.onPress = function() {data.item.callback(data.item); };
-    },
-    "setTooltip": function(data)
-    {
+
         data.button.tooltip = data.item.tooltip;
-    },
-    "setGraphics": function(data)
-    {
+
         if (data.item.packing)
             data.icon.sprite = "stretched:session/icons/cancel.png";
         else if (data.item.packed)
@@ -681 +619 @@
             data.icon.sprite = "stretched:session/icons/pack.png";
 
         data.button.enabled = controlsPlayer(data.unitEntState.player);
-    },
-    "setPosition": function(data)
-    {
-        var index = data.i + getNumberOfRightPanelButtons();
+
+        let index = data.i + getNumberOfRightPanelButtons();
         setPanelObjectPosition(data.button, index, data.rowLength);
+        return true;
     }
 };
 
@@ -701 +638 @@
     },
     "resizePanel": function(numberOfItems, rowLength)
     {
-        var numRows = Math.ceil(numberOfItems / rowLength);
-        var panel = Engine.GetGUIObjectByName("unitQueuePanel");
-        var size = panel.size;
-        var buttonSize = Engine.GetGUIObjectByName("unitQueueButton[0]").size.bottom;
-        var margin = 4;
+        let numRows = Math.ceil(numberOfItems / rowLength);
+        let panel = Engine.GetGUIObjectByName("unitQueuePanel");
+        let size = panel.size;
+        let buttonSize = Engine.GetGUIObjectByName("unitQueueButton[0]").size.bottom;
+        let margin = 4;
         size.top = size.bottom - numRows*buttonSize - (numRows+2)*margin;
         panel.size = size;
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
         // differentiate between units and techs
+        let template;
         if (data.item.unitTemplate)
-        {
-            data.entType = data.item.unitTemplate;
-            data.template = GetTemplateData(data.entType);
-        }
+            template = GetTemplateData(data.item.unitTemplate);
         else if (data.item.technologyTemplate)
-        {
-            data.entType = data.item.technologyTemplate;
-            data.template = GetTechnologyData(data.entType);
-        }
-        data.progress = Math.round(data.item.progress*100) + "%";
+            template = GetTechnologyData(data.item.technologyTemplate);
 
-        return data.template;
-    },
-    "setAction": function(data)
-    {
+        if (!template)
+            return false;
+
         data.button.onPress = function() { removeFromProductionQueue(data.item.producingEnt, data.item.id); };
-    },
-    "setTooltip": function(data)
-    {
-        var tooltip = getEntityNames(data.template);
+
+        let tooltip = getEntityNames(template);
         if (data.item.neededSlots)
         {
             tooltip += "\n[color=\"red\"]" + translate("Insufficient population capacity:") + "\n[/color]";
@@ -742 +670 @@
             });
         }
         data.button.tooltip = tooltip;
-    },
-    "setCountDisplay": function(data)
-    {
+
         data.countDisplay.caption = data.item.count > 1 ? data.item.count : "";
-    },
-    "setProgressDisplay": function(data)
-    {
+
         // show the progress number for the first item
         if (data.i == 0)
-            Engine.GetGUIObjectByName("queueProgress").caption = data.progress;
+            Engine.GetGUIObjectByName("queueProgress").caption = Math.round(data.item.progress*100) + "%";
 
-        var guiObject = Engine.GetGUIObjectByName("unitQueueProgressSlider["+data.i+"]");
-        var size = guiObject.size;
+        let guiObject = Engine.GetGUIObjectByName("unitQueueProgressSlider["+data.i+"]");
+        let size = guiObject.size;
 
         // Buttons are assumed to be square, so left/right offsets can be used for top/bottom.
         size.top = size.left + Math.round(data.item.progress * (size.right - size.left));
         guiObject.size = size;
-    },
-    "setGraphics": function(data)
-    {
-        if (data.template.icon)
-            data.icon.sprite = "stretched:session/portraits/" + data.template.icon;
 
+        if (template.icon)
+            data.icon.sprite = "stretched:session/portraits/" + template.icon;
+
         data.button.enabled = controlsPlayer(data.unitEntState.player);
+
+        setPanelObjectPosition(data.button, data.i, data.rowLength);
+        return true;
     }
 };
 
@@ -795 +720 @@
     },
     "hideItem": function(i, rowLength) // called when no item is found
     {
-        Engine.GetGUIObjectByName("unitResearchButton["+i+"]").hidden = true;
+        Engine.GetGUIObjectByName("unitResearchButton[" + i + "]").hidden = true;
         // We also remove the paired tech and the pair symbol
-        Engine.GetGUIObjectByName("unitResearchButton["+(i+rowLength)+"]").hidden = true;
-        Engine.GetGUIObjectByName("unitResearchPair["+i+"]").hidden = true;
+        Engine.GetGUIObjectByName("unitResearchButton[" + (i + rowLength) + "]").hidden = true;
+        Engine.GetGUIObjectByName("unitResearchPair[" + i + "]").hidden = true;
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
         if (!data.item.tech)
         {
@@ -807 +732 @@
             g_SelectionPanels.Research.hideItem(data.i, data.rowLength);
             return false;
         }
-        data.entType = data.item.tech.pair ? [data.item.tech.top, data.item.tech.bottom] : [data.item.tech];
-        data.template = data.entType.map(GetTechnologyData);
-        // abort if no template found for any of the techs
-        if (data.template.some(v => !v))
-            return false;
+        let techs = data.item.tech.pair ? [data.item.tech.bottom, data.item.tech.top] : [data.item.tech];
 
-        for (let template of data.template)
-            for (let res in template.cost)
-                template.cost[res] *= data.item.techCostMultiplier[res];
+        // start position (start at the bottom)
+        let position = data.i + data.rowLength;
 
-        // index one row below
-        var shiftedIndex = data.i + data.rowLength;
-        data.positions = data.item.tech.pair ? [data.i, shiftedIndex] : [shiftedIndex];
-        data.positionsToHide = data.item.tech.pair ? [] : [data.i];
+        // only show the top button for pairs
+        if (!data.item.tech.pair)
+            Engine.GetGUIObjectByName("unitResearchButton[" + data.i + "]").hidden = true;
 
-        // add top buttons to the data
-        data.button = data.positions.map(p => Engine.GetGUIObjectByName("unitResearchButton["+p+"]"));
-        data.buttonsToHide = data.positionsToHide.map(p => Engine.GetGUIObjectByName("unitResearchButton["+p+"]"));
+        // set up the tech connector
+        let pair = Engine.GetGUIObjectByName("unitResearchPair[" + data.i + "]");
+        pair.hidden = data.item.tech.pair == null;
+        setPanelObjectPosition(pair, data.i, data.rowLength);
 
-        data.icon = data.positions.map(p => Engine.GetGUIObjectByName("unitResearchIcon["+p+"]"));
-        data.unchosenIcon = data.positions.map(p => Engine.GetGUIObjectByName("unitResearchUnchosenIcon["+p+"]"));
+        // handle one or two techs
+        for (let i in techs)
+        {
+            let tech = techs[i];
+            let template = GetTechnologyData(tech);
+            if (!template)
+                return false;
 
-        data.neededResources = data.template.map(t => Engine.GuiInterfaceCall("GetNeededResources", {
-            "cost": t.cost,
-            "player": data.unitEntState.player
-        }));
+            for (let res in template.cost)
+                template.cost[res] *= data.item.techCostMultiplier[res];
 
-        data.requirementsPassed = data.entType.map(e => Engine.GuiInterfaceCall("CheckTechnologyRequirements", {
-            "tech": e,
-            "player": data.unitEntState.player
-        }));
+            let neededResources = Engine.GuiInterfaceCall("GetNeededResources", {
+                "cost": template.cost,
+                "player": data.unitEntState.player
+            });
 
-        data.pair = Engine.GetGUIObjectByName("unitResearchPair["+data.i+"]");
+            let requirementsPassed = Engine.GuiInterfaceCall("CheckTechnologyRequirements", {
+                "tech": tech,
+                "player": data.unitEntState.player
+            });
 
-        return true;
-    },
-    "setTooltip": function(data)
-    {
-        for (var i in data.entType)
-        {
-            var tooltip = "";
-            var template = data.template[i];
+            let button = Engine.GetGUIObjectByName("unitResearchButton[" + position + "]");
+            let icon = Engine.GetGUIObjectByName("unitResearchIcon[" + position + "]");
+
+            let tooltip = "";
             tooltip = getEntityNamesFormatted(template);
             if (template.tooltip)
                 tooltip += "\n[font=\"sans-13\"]" + template.tooltip + "[/font]";
 
             tooltip += "\n" + getEntityCostTooltip(template);
-            if (!data.requirementsPassed[i])
+            if (!requirementsPassed)
             {
                 tooltip += "\n" + template.requirementsTooltip;
                 if (template.classRequirements)
                 {
-                    var player = data.unitEntState.player;
-                    var current = GetSimState().players[player].classCounts[template.classRequirements.class] || 0;
-                    var remaining = template.classRequirements.number - current;
+                    let player = data.unitEntState.player;
+                    let current = GetSimState().players[player].classCounts[template.classRequirements.class] || 0;
+                    let remaining = template.classRequirements.number - current;
                     tooltip += " " + sprintf(translatePlural("Remaining: %(number)s to build.", "Remaining: %(number)s to build.", remaining), { "number": remaining });
                 }
             }
-            if (data.neededResources[i])
-                tooltip += getNeededResourcesTooltip(data.neededResources[i]);
-            data.button[i].tooltip = tooltip;
-        }
-    },
-    "setAction": function(data)
-    {
-        for (var i in data.entType)
-        {
-            // array containing the indices other buttons
-            var others = Object.keys(data.template);
-            others.splice(i, 1);
-            var button = data.button[i];
-            // as we're in a loop, we need to limit the scope with a closure
-            // else the last value of the loop will be taken, rather than the current one
-            button.onpress = (function(template) { return function () { addResearchToQueue(data.unitEntState.id, template); }; })(data.entType[i]);
-            // on mouse enter, show a cross over the other icons
-            button.onmouseenter = (function(others, icons) {
-                return function() {
-                    for (var j of others)
-                        icons[j].hidden = false;
+            if (neededResources)
+                tooltip += getNeededResourcesTooltip(neededResources);
+            button.tooltip = tooltip;
+
+            button.onpress = function () {
+                addResearchToQueue(data.unitEntState.id, tech);
+            };
+
+            if (data.item.tech.pair)
+            {
+                // on mouse enter, show a cross over the other icon
+                let otherPosition = (position + data.rowLength) % (2 * data.rowLength);
+                let unchosenIcon = Engine.GetGUIObjectByName("unitResearchUnchosenIcon[" + otherPosition + "]");
+                button.onmouseenter = function() {
+                        unchosenIcon.hidden = false;
                 };
-            })(others, data.unchosenIcon);
-            button.onmouseleave = (function(others, icons) {
-                return function() {
-                    for (var j of others)
-                        icons[j].hidden = true;
+                button.onmouseleave = function() {
+                        unchosenIcon.hidden = true;
                 };
-            })(others, data.unchosenIcon);
-        }
-    },
-    "setGraphics": function(data)
-    {
-        for (var i in data.entType)
-        {
-            let button = data.button[i];
+            }
+
             button.hidden = false;
-            var modifier = "";
-            if (!data.requirementsPassed[i])
+            let modifier = "";
+            if (!requirementsPassed)
             {
                 button.enabled = false;
-                modifier += "color: 0 0 0 127:";
+                modifier += "color: " + g_GuiColors.limited + ":";
                 modifier += "grayscale:";
             }
-            else if (data.neededResources[i])
+            else if (neededResources)
             {
                 button.enabled = false;
-                modifier += resourcesToAlphaMask(data.neededResources[i]) + ":";
+                modifier += resourcesToAlphaMask(neededResources) + ":";
             }
             else
                 button.enabled = controlsPlayer(data.unitEntState.player);
 
-            if (data.template[i].icon)
-                data.icon[i].sprite = modifier + "stretched:session/portraits/" + data.template[i].icon;
+            if (template.icon)
+                icon.sprite = modifier + "stretched:session/portraits/" + template.icon;
+
+            setPanelObjectPosition(button, position, data.rowLength);
+
+            // prepare to handle the top button (if any)
+            position -= data.rowLength;
         }
-        for (let button of data.buttonsToHide)
-            button.hidden = true;
-        // show the tech connector
-        data.pair.hidden = data.item.tech.pair == null;
-    },
-    "setPosition": function(data)
-    {
-        for (var i in data.button)
-            setPanelObjectPosition(data.button[i], data.positions[i], data.rowLength);
-        setPanelObjectPosition(data.pair, data.i, data.rowLength);
+
+
+        return true;
     }
 };
 
@@ -946 +851 @@
             return [];
         return g_Selection.groups.getTemplateNames();
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
-        data.entType = data.item;
-        data.template = GetTemplateData(data.entType);
-        if (!data.template)
+        let template = GetTemplateData(data.item);
+        if (!template)
             return false;
-        data.name = getEntityNames(data.template);
 
-        var ents = g_Selection.groups.getEntsByName(data.item);
-        data.count = ents.length;
-        for (var ent of ents)
+        let ents = g_Selection.groups.getEntsByName(data.item);
+        for (let ent of ents)
         {
-            var state = GetEntityState(ent);
+            let state = GetEntityState(ent);
 
             if (state.resourceCarrying && state.resourceCarrying.length !== 0)
             {
                 if (!data.carried)
                     data.carried = {};
-                var carrying = state.resourceCarrying[0];
+                let carrying = state.resourceCarrying[0];
                 if (data.carried[carrying.type])
                     data.carried[carrying.type] += carrying.amount;
                 else
@@ -975 +877 @@
             {
                 if (!data.carried)
                     data.carried = {};
-                var amount = state.trader.goods.amount;
-                var type = state.trader.goods.type;
-                var totalGain = amount.traderGain;
+                let amount = state.trader.goods.amount;
+                let type = state.trader.goods.type;
+                let totalGain = amount.traderGain;
                 if (amount.market1Gain)
                     totalGain += amount.market1Gain;
                 if (amount.market2Gain)
@@ -988 +890 @@
                     data.carried[type] = totalGain;
             }
         }
-        return true;
-    },
-    "setTooltip": function(data)
-    {
-        let tooltip = data.name;
+
+        let tooltip = getEntityNames(template);
         if (data.carried)
             tooltip += "\n" + Object.keys(data.carried).map(res =>
                 getCostComponentDisplayIcon(res) + data.carried[res]
             ).join(" ");
         data.button.tooltip = tooltip;
-    },
-    "setCountDisplay": function(data)
-    {
-        data.countDisplay.caption = data.count || "";
-    },
-    "setAction": function(data)
-    {
+
+        data.countDisplay.caption = ents.length || "";
+
         data.button.onpressright = function() { changePrimarySelectionGroup(data.item, true); };
         data.button.onpress = function() { changePrimarySelectionGroup(data.item, false); };
-    },
-    "setGraphics": function(data)
-    {
-        if (data.template.icon)
-            data.icon.sprite = "stretched:session/portraits/" + data.template.icon;
+
+        if (template.icon)
+            data.icon.sprite = "stretched:session/portraits/" + template.icon;
+
+        setPanelObjectPosition(data.button, data.i, data.rowLength);
+        return true;
     }
 };
 
@@ -1027 +923 @@
             return [];
         return unitEntState.unitAI.possibleStances;
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
-        data.stanceSelected = Engine.GuiInterfaceCall("IsStanceSelected", {
+        data.button.onPress = function() { performStance(data.unitEntState, data.item); };
+
+        data.button.tooltip = getStanceDisplayName(data.item) + "\n" +
+            "[font=\"sans-13\"]" + getStanceTooltip(data.item) + "[/font]";
+
+        data.guiSelection.hidden = !Engine.GuiInterfaceCall("IsStanceSelected", {
             "ents": data.selection,
             "stance": data.item
         });
+        data.icon.sprite = "stretched:session/icons/stances/" + data.item + ".png";
+        data.button.enabled = controlsPlayer(data.unitEntState.player);
+
+        setPanelObjectPosition(data.button, data.i, data.rowLength);
         return true;
-    },
-    "setAction": function(data)
-    {
-        data.button.onPress = function() { performStance(data.unitEntState, data.item); };
-    },
-    "setTooltip": function(data)
-    {
-        data.button.tooltip = getStanceDisplayName(data.item) + "\n[font=\"sans-13\"]" + getStanceTooltip(data.item) + "[/font]";
-    },
-    "setGraphics": function(data)
-    {
-        data.guiSelection.hidden = !data.stanceSelected;
-        data.icon.sprite = "stretched:session/icons/stances/"+data.item+".png";
-        data.button.enabled = controlsPlayer(data.unitEntState.player);
     }
 };
 
@@ -1061 +952 @@
     {
         return getAllTrainableEntitiesFromSelection();
     },
-    "addData": function(data)
+    "setupButton": function(data)
     {
-        data.entType = data.item;
-        data.template = GetTemplateData(data.entType);
-        if (!data.template)
+        let template = GetTemplateData(data.item);
+        if (!template)
             return false;
 
-        data.technologyEnabled = Engine.GuiInterfaceCall("IsTechnologyResearched", {
-            "tech": data.template.requiredTechnology,
+        let technologyEnabled = Engine.GuiInterfaceCall("IsTechnologyResearched", {
+            "tech": template.requiredTechnology,
             "player": data.unitEntState.player
         });
 
-        var [buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch] =
-            getTrainingBatchStatus(data.playerState, data.unitEntState.id, data.entType, data.selection);
+        let [buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch] =
+            getTrainingBatchStatus(data.playerState, data.unitEntState.id, data.item, data.selection);
 
-        data.buildingsCountToTrainFullBatch = buildingsCountToTrainFullBatch;
-        data.fullBatchSize = fullBatchSize;
-        data.remainderBatch = remainderBatch;
-
-        data.trainNum = buildingsCountToTrainFullBatch || 1; // train at least one unit
+        let trainNum = buildingsCountToTrainFullBatch || 1;
         if (Engine.HotkeyIsPressed("session.batchtrain"))
-            data.trainNum = buildingsCountToTrainFullBatch * fullBatchSize + remainderBatch;
+            trainNum = buildingsCountToTrainFullBatch * fullBatchSize + remainderBatch;
 
-        if (data.template.cost)
-            data.neededResources = Engine.GuiInterfaceCall("GetNeededResources", {
-                "cost": multiplyEntityCosts(data.template, data.trainNum),
+        let neededResources;
+        if (template.cost)
+            neededResources = Engine.GuiInterfaceCall("GetNeededResources", {
+                "cost": multiplyEntityCosts(template, trainNum),
                 "player": data.unitEntState.player
             });
 
-        return true;
-    },
-    "setAction": function(data)
-    {
         data.button.onPress = function() { addTrainingToQueue(data.selection, data.item, data.playerState); };
-    },
-    "setCountDisplay": function(data)
-    {
-        data.countDisplay.caption = data.trainNum > 1 ? data.trainNum : "";
-    },
-    "setTooltip": function(data)
-    {
-        var tooltip = "";
-        var key = Engine.ConfigDB_GetValue("user", "hotkey.session.queueunit." + (data.i + 1));
+
+        data.countDisplay.caption = trainNum > 1 ? trainNum : "";
+
+        let tooltip = "";
+        let key = Engine.ConfigDB_GetValue("user", "hotkey.session.queueunit." + (data.i + 1));
         if (key)
-            tooltip += "[color=\"255 251 131\"][font=\"sans-bold-16\"]\\[" + key + "][/font][/color] ";
+            tooltip += colorizeText(g_GuiColors.hotkey, "[font=\"sans-bold-16\"]\\[" + key + "][/font] ");
 
-        tooltip += getEntityNamesFormatted(data.template);
-        tooltip += getVisibleEntityClassesFormatted(data.template);
-        tooltip += getAurasTooltip(data.template);
+        tooltip += getEntityNamesFormatted(template);
+        tooltip += getVisibleEntityClassesFormatted(template);
+        tooltip += getAurasTooltip(template);
 
-        if (data.template.tooltip)
-            tooltip += "\n[font=\"sans-13\"]" + data.template.tooltip + "[/font]";
+        if (template.tooltip)
+            tooltip += "\n[font=\"sans-13\"]" + template.tooltip + "[/font]";
 
-        tooltip += "\n" + getEntityCostTooltip(data.template, data.trainNum, data.unitEntState.id);
+        tooltip += "\n" + getEntityCostTooltip(template, trainNum, data.unitEntState.id);
 
-        data.limits = getEntityLimitAndCount(data.playerState, data.entType);
+        let limits = getEntityLimitAndCount(data.playerState, data.item);
 
-        tooltip += formatLimitString(data.limits.entLimit, data.limits.entCount, data.limits.entLimitChangers);
-        if (Engine.ConfigDB_GetValue("user", "showdetailedtooltips") === "true")
+        tooltip += formatLimitString(limits.entLimit, limits.entCount, limits.entLimitChangers);
+        if (Engine.ConfigDB_GetValue("user", "showdetailedtooltips") == "true")
         {
-            if (data.template.health)
-                tooltip += "\n[font=\"sans-bold-13\"]" + translate("Health:") + "[/font] " + data.template.health;
-            if (data.template.attack)
-                tooltip += "\n" + getAttackTooltip(data.template);
-            if (data.template.armour)
-                tooltip += "\n" + getArmorTooltip(data.template.armour);
-            if (data.template.speed)
-                tooltip += "\n" + getSpeedTooltip(data.template);
+            if (template.health)
+                tooltip += "\n[font=\"sans-bold-13\"]" + translate("Health:") + "[/font] " + template.health;
+            if (template.attack)
+                tooltip += "\n" + getAttackTooltip(template);
+            if (template.armour)
+                tooltip += "\n" + getArmorTooltip(template.armour);
+            if (template.speed)
+                tooltip += "\n" + getSpeedTooltip(template);
         }
-        tooltip += "[color=\"255 251 131\"]" + formatBatchTrainingString(data.buildingsCountToTrainFullBatch, data.fullBatchSize, data.remainderBatch) + "[/color]";
-        if (!data.technologyEnabled)
+        tooltip += colorizeText(g_GuiColors.hotkey, formatBatchTrainingString(buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch));
+        if (!technologyEnabled)
         {
-            var techName = getEntityNames(GetTechnologyData(data.template.requiredTechnology));
+            let techName = getEntityNames(GetTechnologyData(template.requiredTechnology));
             tooltip += "\n" + sprintf(translate("Requires %(technology)s"), { "technology": techName });
         }
-        if (data.neededResources)
-            tooltip += getNeededResourcesTooltip(data.neededResources);
+        if (neededResources)
+            tooltip += getNeededResourcesTooltip(neededResources);
 
         data.button.tooltip = tooltip;
-    },
-    // disable and enable buttons in the same way as when you do for the construction
-    "setGraphics": g_SelectionPanels.Construction.setGraphics,
-    "setPosition": function(data)
-    {
-        var index = data.i + getNumberOfRightPanelButtons();
+
+        let modifier = "";
+        if (!technologyEnabled || limits.canBeAddedCount == 0)
+        {
+            data.button.enabled = false;
+            modifier += "color: " + g_GuiColors.limited + ":grayscale:";
+        }
+        else if (neededResources)
+        {
+            data.button.enabled = false;
+            modifier += resourcesToAlphaMask(neededResources) +":";
+        }
+        else
+            data.button.enabled = controlsPlayer(data.unitEntState.player);
+
+        if (template.icon)
+            data.icon.sprite = modifier + "stretched:session/portraits/" + template.icon;
+
+        let index = data.i + getNumberOfRightPanelButtons();
         setPanelObjectPosition(data.button, index, data.rowLength);
+        return true;
     }
 };
 
@@ -1158 +1051 @@
  *
  * Note that the panel needs to appear in the list to get rendered.
  */
-var g_PanelsOrder = [
+let g_PanelsOrder = [
     // LEFT PANE
     "Barter", // must always be visible on markets
     "Garrison", // more important than Formation, as you want to see the garrisoned units in ships

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

@@ -40 +40 @@
     }
     let selection = g_Selection.toList();
 
-    var items = g_SelectionPanels[guiName].getItems(unitEntState, selection);
+    let items = g_SelectionPanels[guiName].getItems(unitEntState, selection);
 
     if (!items || !items.length)
         return;
 
-    var numberOfItems = items.length;
-    var garrisonGroups = new EntityGroups();
+    let numberOfItems = items.length;
 
     // Determine how many buttons there should be
-    var maxNumberOfItems = g_SelectionPanels[guiName].getMaxNumberOfItems();
+    let maxNumberOfItems = g_SelectionPanels[guiName].getMaxNumberOfItems();
     if (maxNumberOfItems < numberOfItems)
         numberOfItems = maxNumberOfItems;
 
-    var rowLength = g_SelectionPanels[guiName].rowLength || 8;
+    let rowLength = g_SelectionPanels[guiName].rowLength || 8;
 
     if (g_SelectionPanels[guiName].resizePanel)
         g_SelectionPanels[guiName].resizePanel(numberOfItems, rowLength);
@@ -61 +60 @@
     // Make buttons
     for (let i = 0; i < numberOfItems; ++i)
     {
-        var item = items[i];
-
         // STANDARD DATA
         // add standard data
-        var data = {
+        let data = {
             "i": i,
-            "item": item,
+            "item": items[i],
             "selection": selection,
             "playerState": playerState,
             "unitEntState": unitEntState,
@@ -92 +89 @@
             data.button.caption = "";
         }
 
-        // GENERAL DATA
-        // add general data, and a chance to abort on faulty data
-        if (g_SelectionPanels[guiName].addData)
-        {
-            var success = g_SelectionPanels[guiName].addData(data);
-            if (!success)
-                continue; // ignore faulty data
-        }
-
         // SET CONTENT
-        // run all content setters
-        for (var f in g_SelectionPanels[guiName])
-        {
-            if (f.match(/^set/))
-                g_SelectionPanels[guiName][f](data);
-        }
+        if (g_SelectionPanels[guiName].setupButton)
+            if (!g_SelectionPanels[guiName].setupButton(data))
+                continue;
 
-        // Special case: position
-        if (!g_SelectionPanels[guiName].setPosition)
-            setPanelObjectPosition(data.button, i, rowLength);
-
         // TODO: we should require all entities to have icons, so this case never occurs
         if (data.icon && !data.icon.sprite)
             data.icon.sprite = "bkFillBlack";