Changeset 25023

Timestamp:

Mar 6, 2021, 7:11:41 PM (3 years ago)

Author:

wraitii

Message:

Customize hotkey categories & ordering, prepare for translation.

• adds JSON files to specify the human-readable categorization, name and description of hotkeys.
• clean up code

Translation support via messages.json not yet added - the strings need another pass and that avoids translators doing redundant work. See D3641

Refs #5867, Refs #5996

Differential Revision: ​https://code.wildfiregames.com/D3596

Location:

ps/trunk/binaries/data/mods/public/gui/hotkeys

Files:

• HotkeyMetadata.js (added)
• HotkeyPicker.js (modified) (3 diffs)
• HotkeysPage.js (modified) (7 diffs)
• hotkeys.xml (modified) (2 diffs)
• spec (added)
• spec/camera.json (added)
• spec/engine.json (added)
• spec/gamesetup.json (added)
• spec/ingame.json (added)
• spec/ingamegui.json (added)
• spec/selection.json (added)

ps/trunk/binaries/data/mods/public/gui/hotkeys/HotkeyPicker.js

@@ -5 +5 @@
 class HotkeyPicker
 {
-    constructor(onClose, name, combinations)
+    constructor(onClose, name, combinations)
     {
+
         this.name = name;
         this.combinations = combinations;
@@ -14 +15 @@
         this.enteringInput = -1;
 
-        Engine.GetGUIObjectByName("hotkeyPickerTitle").caption = translate(this.name);
+        if (this.metadata.hotkeys[name])
+        {
+            Engine.GetGUIObjectByName("hotkeyPickerTitle").caption = translate(this.metadata.hotkeys[name].name);
+            Engine.GetGUIObjectByName("hotkeyPickerDescHotkey").caption = translate(this.metadata.hotkeys[name].desc);
+        }
+        else
+        {
+            Engine.GetGUIObjectByName("hotkeyPickerTitle").caption = this.name;
+            Engine.GetGUIObjectByName("hotkeyPickerDescHotkey").hidden = true;
+        }
 
         this.setupCombinations();
@@ -42 +52 @@
         {
             let s = Engine.GetGUIObjectByName("combination[" + i + "]").size;
-            s.top = +i * 60 + 90;
-            s.bottom = +i * 60 + 120;
+            s.top = +i * 60 + 0;
+            s.bottom = +i * 60 + 10;
             Engine.GetGUIObjectByName("combination[" + i + "]").size = s;
             Engine.GetGUIObjectByName("combNb[" + i + "]").caption = sprintf(translate("#%i"), i);

ps/trunk/binaries/data/mods/public/gui/hotkeys/HotkeysPage.js

@@ -1 +1 @@
 class HotkeysPage
 {
-    constructor()
+    constructor()
     {
+
+
         Engine.GetGUIObjectByName("hotkeyList").onMouseLeftDoubleClickItem = () => {
             let idx = Engine.GetGUIObjectByName("hotkeyList").selected;
             let picker = new HotkeyPicker(
+
                 this.onHotkeyPicked.bind(this),
                 Engine.GetGUIObjectByName("hotkeyList").list_data[idx],
@@ -11 +14 @@
             );
         };
+
+
         Engine.GetGUIObjectByName("hotkeyFilter").onSelectionChange = () => this.setupHotkeyList();
+
+
+
+
+
+
+
+
+
+
+
+
 
         Engine.GetGUIObjectByName("hotkeyTextFilter").onTextEdit = () => this.setupHotkeyList();
@@ -30 +47 @@
     }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     setupFilters()
     {
@@ -35 +79 @@
         let names = [];
         for (let cat in this.categories)
-            names.push(this.categories[cat].label);
+            names.push(t);
         dropdown.list = [translate("All Hotkeys")].concat(names);
         dropdown.list_data = [-1].concat(Object.keys(this.categories));
@@ -46 +90 @@
         hotkeyList.selected = -1;
         let textFilter = Engine.GetGUIObjectByName("hotkeyTextFilter").caption;
+
+
         let dropdown = Engine.GetGUIObjectByName("hotkeyFilter");
         if (dropdown.selected && dropdown.selected !== 0)
-        {
-            let category = this.categories[dropdown.list_data[dropdown.selected]];
-            // This is inefficient but it seems fast enough.
-            let hotkeys = category.hotkeys.filter(x => translate(x[0]).indexOf(textFilter) !== -1);
-            hotkeyList.list_name = hotkeys.map(x => translate(x[0]));
-            hotkeyList.list_mapping = hotkeys.map(x => formatHotkeyCombinations(x[1]));
-            hotkeyList.list = hotkeys.map(() => 0);
-            hotkeyList.list_data = hotkeys.map(x => x[0]);
-        }
+            hotkeys = this.categories[dropdown.list_data[dropdown.selected]].hotkeys;
+        else
+            hotkeys = Object.values(this.categories).map(x => x.hotkeys).flat();
+        hotkeys = hotkeys.filter(x => {
+            return x.indexOf(textFilter) !== -1 ||
+                translate(this.metadata.hotkeys[x]?.name || x).indexOf(textFilter) !== -1;
+        });
+
+        hotkeyList.list_name = hotkeys.map(x => translate(this.metadata.hotkeys[x]?.name || x));
+        hotkeyList.list_mapping = hotkeys.map(x => formatHotkeyCombinations(this.hotkeys[x]));
+        hotkeyList.list = hotkeys.map(() => 0);
+        hotkeyList.list_data = hotkeys.map(x => x);
+    }
+
+    onHoverChange()
+    {
+        let hotkeyList = Engine.GetGUIObjectByName("hotkeyList");
+        if (hotkeyList.hovered === -1)
+            hotkeyList.tooltip = "";
         else
         {
-            // TODO SM62+ : refactor using flat()
-            let flattened = [];
-            for (let cat in this.categories)
-                flattened = flattened.concat(this.categories[cat].hotkeys);
-            flattened = flattened.filter(x => translate(x[0]).indexOf(textFilter) !== -1);
-            hotkeyList.list_name = flattened.map(x => translate(x[0]));
-            hotkeyList.list_mapping = flattened.map(x => formatHotkeyCombinations(x[1]));
-            hotkeyList.list = flattened.map(() => 0);
-            hotkeyList.list_data = flattened.map(x => x[0]);
+            let hotkey = hotkeyList.list_data[hotkeyList.hovered];
+            let tooltip = this.metadata.hotkeys[hotkey]?.desc || markForTranslation("No tooltip available");
+            hotkeyList.tooltip = translate(tooltip);
         }
     }
@@ -93 +143 @@
         this.saveButton.enabled = true;
         this.setupHotkeyList();
-    }
-
-    setupHotkeyData()
-    {
-        let hotkeydata = Engine.GetHotkeyMap();
-        this.hotkeys = hotkeydata;
-
-        let categories = {
-            "other": {
-                "label": translate("Other hotkeys"),
-                "hotkeys": []
-            }
-        };
-        let n_categories = 1;
-        for (let hotkeyName in this.hotkeys)
-        {
-            let category = "other";
-            let firstdot = hotkeyName.indexOf('.');
-            if (firstdot !== -1)
-                category = hotkeyName.substr(0, firstdot);
-            if (!(category in categories))
-            {
-                if (n_categories > 18)
-                    category = "other";
-                categories[category] = {
-                    "label": category,
-                    "hotkeys": []
-                };
-            }
-            categories[category].hotkeys.push([hotkeyName, this.hotkeys[hotkeyName]]);
-        }
-        // Remove categories that are too small to deserve a tab.
-        for (let cat of Object.keys(categories))
-            if (categories[cat].hotkeys.length < 3)
-            {
-                categories.other.hotkeys = categories.other.hotkeys.concat(categories[cat].hotkeys);
-                delete categories[cat];
-            }
-        for (let cat in categories)
-            categories[cat].hotkeys = categories[cat].hotkeys.sort();
-
-        this.categories = categories;
     }
 
@@ -178 +186 @@
 
 
-function init(data)
+function init()
 {
-    let hotkeyPage = new HotkeysPage(data);
+    let hotkeyPage = new HotkeysPage();
 }

ps/trunk/binaries/data/mods/public/gui/hotkeys/hotkeys.xml

@@ -67 +67 @@
         <object type="image"
             style="ModernDialog"
-            size="50%-300 50%-190 50%+300 50%+190"
+            size="50%-300 50%-"
         >
             <object name="hotkeyPickerTitle" style="ModernLabelText" type="text" size="50%-128 -16 50%+128 16">
@@ -73 +73 @@
             </object>
 
-            <object name="hotkeyPickerDesc"  style="ModernLabelText" type="text" size="8 20 100%-8 66">
+            <object name="hotkeyPickerDescHotkey" style="ModernLabelText" type="text" size="8 30 100%-8 60">
+                <translatableAttribute id="caption">Hotkey Description</translatableAttribute>
+            </object>
+
+            <object name="hotkeyPickerDesc"  style="ModernLabelText" type="text" size="8 60 100%-8 120">
                 <translatableAttribute id="caption">Click on any mapping to modify it.\n You may have up to 4 different hotkeys.</translatableAttribute>
             </object>