From e78f04e07695c5becdb49ecb1365994a73147c15 Mon Sep 17 00:00:00 2001
From: VariableVince <24507472+VariableVince@users.noreply.github.com>
Date: Mon, 18 May 2026 20:56:47 +0200
Subject: [PATCH] Fix bad merge conflict resolution by copilot (lesson learned)

---
 src/client/HelpModal.ts        |  51 ++-----
 src/client/UserSettingModal.ts | 266 ++++++++++++++++++---------------
 src/client/Utils.ts            |   4 +-
 3 files changed, 156 insertions(+), 165 deletions(-)

diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index acba57635..d60547658 100644
--- a/src/client/HelpModal.ts
+++ b/src/client/HelpModal.ts
@@ -1,8 +1,12 @@
 import { html } from "lit";
 import { customElement, query, state } from "lit/decorators.js";
-import { translateText, TUTORIAL_VIDEO_URL } from "../client/Utils";
+import {
+  formatKeyForDisplay,
+  translateText,
+  TUTORIAL_VIDEO_URL,
+} from "../client/Utils";
 import { assetUrl } from "../core/AssetUrls";
-import { UserSettings } from "../core/game/UserSettings";
+import { KeybindAction, UserSettings } from "../core/game/UserSettings";
 import { BaseModal } from "./components/BaseModal";
 import "./components/Difficulties";
 import { modalHeader } from "./components/ui/ModalHeader";
@@ -13,46 +17,15 @@ import { TroubleshootingModal } from "./TroubleshootingModal";
 export class HelpModal extends BaseModal {
   protected routerName = "help";
 
-  @state() private keybinds: Record<string, string> = this.getKeybinds();
+  @state() private keybinds = this.getKeybinds();
   @query("#tutorial-video-iframe") private videoIframe?: HTMLIFrameElement;
 
-  private getKeybinds(): Record<string, string> {
+  private getKeybinds(): Record<KeybindAction, string> {
     return new UserSettings().keybinds(Platform.isMac);
   }
 
-  private getKeyLabel(code: string): string {
-    if (!code) return "";
-
-    const specialLabels: Record<string, string> = {
-      ShiftLeft: "⇧ Shift",
-      ShiftRight: "⇧ Shift",
-      ControlLeft: "Ctrl",
-      ControlRight: "Ctrl",
-      AltLeft: "Alt",
-      AltRight: "Alt",
-      MetaLeft: "⌘",
-      MetaRight: "⌘",
-      Space: "Space",
-      Escape: "Esc",
-      Enter: "↵ Return",
-      ArrowUp: "↑",
-      ArrowDown: "↓",
-      ArrowLeft: "←",
-      ArrowRight: "→",
-      Period: ">",
-      Comma: "<",
-    };
-
-    if (specialLabels[code]) return specialLabels[code];
-    if (code.startsWith("Key") && code.length === 4) return code.slice(3);
-    if (code.startsWith("Digit")) return code.slice(5);
-    if (code.startsWith("Numpad")) return `Num ${code.slice(6)}`;
-
-    return code;
-  }
-
   private renderKey(code: string) {
-    const label = this.getKeyLabel(code);
+    const label = formatKeyForDisplay(code);
     return html`<span
       class="inline-block min-w-[32px] text-center px-2 py-1 rounded bg-[#2a2a2a] border-b-2 border-[#1a1a1a] text-white font-mono text-xs font-bold mx-0.5"
       >${label}</span
@@ -285,7 +258,7 @@ export class HelpModal extends BaseModal {
                   <tr class="hover:bg-white/5 transition-colors">
                     <td class="py-3 pl-4 border-b border-white/5">
                       <div class="inline-flex items-center gap-2">
-                        ${this.renderKey(keybinds.modifierKey)}
+                        ${this.renderKey(keybinds.buildMenuModifier)}
                         <span class="text-white/40 font-bold">+</span>
                         <div
                           class="w-5 h-8 border border-white/40 rounded-full relative"
@@ -306,7 +279,7 @@ export class HelpModal extends BaseModal {
                   <tr class="hover:bg-white/5 transition-colors">
                     <td class="py-3 pl-4 border-b border-white/5">
                       <div class="inline-flex items-center gap-2">
-                        ${this.renderKey(keybinds.altKey)}
+                        ${this.renderKey(keybinds.emojiMenuModifier)}
                         <span class="text-white/40 font-bold">+</span>
                         <div
                           class="w-5 h-8 border border-white/40 rounded-full relative"
@@ -413,7 +386,7 @@ export class HelpModal extends BaseModal {
                   <tr class="hover:bg-white/5 transition-colors">
                     <td class="py-3 pl-4 border-b border-white/5">
                       <div class="inline-flex items-center gap-2">
-                        ${this.renderKey(keybinds.altKey)}
+                        ${this.renderKey(keybinds.emojiMenuModifier)}
                         <span class="text-white/40 font-bold">+</span>
                         ${this.renderKey(keybinds.resetGfx)}
                       </div>
diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts
index 65edeb9fc..6a2a728e3 100644
--- a/src/client/UserSettingModal.ts
+++ b/src/client/UserSettingModal.ts
@@ -1,7 +1,12 @@
 import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { formatKeyForDisplay, translateText } from "../client/Utils";
-import { getDefaultKeybinds, UserSettings } from "../core/game/UserSettings";
+import {
+  getDefaultKeybinds,
+  KeybindAction,
+  KeyUnbound,
+  UserSettings,
+} from "../core/game/UserSettings";
 import "./components/baseComponents/setting/SettingKeybind";
 import { SettingKeybind } from "./components/baseComponents/setting/SettingKeybind";
 import "./components/baseComponents/setting/SettingNumber";
@@ -21,9 +26,8 @@ export class UserSettingModal extends BaseModal {
   @state() private keySequence: string[] = [];
   @state() private showEasterEggSettings = false;
 
-  @state() private userKeybinds: Record<
-    string,
-    { value: string; key: string }
+  @state() private userKeybinds: Partial<
+    Record<KeybindAction, { value: string; key: string }>
   > = {};
 
   connectedCallback() {
@@ -43,9 +47,12 @@ export class UserSettingModal extends BaseModal {
       return;
     }
 
-    const validated: Record<string, { value: string; key: string }> = {};
+    const validated: Partial<
+      Record<KeybindAction, { value: string; key: string }>
+    > = {};
 
-    for (const [action, entry] of Object.entries(parsed)) {
+    for (const [rawAction, entry] of Object.entries(parsed)) {
+      const action = rawAction as KeybindAction;
       if (typeof entry === "string") {
         validated[action] = { value: entry, key: entry };
       } else if (
@@ -53,12 +60,12 @@ export class UserSettingModal extends BaseModal {
         entry !== null &&
         !Array.isArray(entry)
       ) {
-        const rawValue = (entry as any).value ?? "Null";
+        const rawValue = entry.value ?? KeyUnbound;
         const value = Array.isArray(rawValue)
           ? rawValue.find((v) => typeof v === "string")
           : rawValue;
 
-        const rawKey = (entry as any).key ?? value;
+        const rawKey = entry.key ?? value;
         const key = Array.isArray(rawKey)
           ? rawKey.find((v) => typeof v === "string")
           : rawKey;
@@ -74,29 +81,43 @@ export class UserSettingModal extends BaseModal {
 
   private handleKeybindChange(
     e: CustomEvent<{
-      action: string;
+      action: KeybindAction;
       value: string;
       key: string;
       prevValue?: string;
     }>,
   ) {
-    const { action, value, key, prevValue } = e.detail;
+    const { action, value, prevValue } = e.detail;
+    let { key } = e.detail;
 
-    const activeKeybinds: Record<string, string> = { ...this.defaultKeybinds };
-    for (const [k, v] of Object.entries(this.userKeybinds)) {
-      const normalizedValue = v.value;
-      if (normalizedValue === "Null") {
-        delete activeKeybinds[k];
+    // TODO: remove after testing
+    console.info(
+      "handleKeybindChange received value: " + value,
+      ", key: " + key,
+    );
+
+    // Don't display "Dead" for Quote / Backquote https://en.wikipedia.org/wiki/QWERTY#US-International
+    // nor "Unidentified" for some keys in Firefox ("" in Chrome). Empty the key to use value (key code).
+    key = key === "Dead" || key === "Unidentified" ? "" : key;
+
+    const activeKeybinds: Record<KeybindAction, string> = {
+      ...this.defaultKeybinds,
+    };
+    for (const [rawAction, codeAndKey] of Object.entries(this.userKeybinds)) {
+      const action = rawAction as KeybindAction;
+      const normalizedCode = codeAndKey.value;
+      if (normalizedCode === KeyUnbound) {
+        delete activeKeybinds[action];
       } else {
-        activeKeybinds[k] = normalizedValue;
+        activeKeybinds[action] = normalizedCode;
       }
     }
 
-    const values = Object.entries(activeKeybinds)
-      .filter(([k]) => k !== action)
-      .map(([, v]) => v);
+    const codes = Object.entries(activeKeybinds)
+      .filter(([a]) => a !== action)
+      .map(([, code]) => code);
 
-    if (values.includes(value) && value !== "Null") {
+    if (codes.includes(value) && value !== KeyUnbound) {
       const displayKey = formatKeyForDisplay(key || value);
       window.dispatchEvent(
         new CustomEvent("show-message", {
@@ -140,11 +161,8 @@ export class UserSettingModal extends BaseModal {
         `setting-keybind[action="${action}"]`,
       );
       if (element) {
-        element.value =
-          prevValue ??
-          (this.defaultKeybinds as Record<string, string>)[action] ??
-          "";
-        element.requestUpdate();
+        element.value = prevValue ?? this.defaultKeybinds[action] ?? "";
+        // requestUpdate() handled by SettingKeyBind which dispatches the "change" event that triggers this function
       }
       return;
     }
@@ -156,15 +174,15 @@ export class UserSettingModal extends BaseModal {
     this.userSettings.setUserKeybinds(this.userKeybinds);
   }
 
-  private getKeyValue(action: string): string | undefined {
+  private getKeyValue(action: KeybindAction): string | undefined {
     const entry = this.userKeybinds[action];
     if (!entry) return undefined;
     const normalizedValue = entry.value;
-    if (normalizedValue === "Null") return "";
+    if (normalizedValue === KeyUnbound) return "";
     return normalizedValue || undefined;
   }
 
-  private getKeyChar(action: string): string {
+  private getKeyChar(action: KeybindAction): string {
     const entry = this.userKeybinds[action];
     if (!entry) return "";
     return entry.key || "";
@@ -385,22 +403,22 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="toggleView"
+        action=${KeybindAction.toggleView}
         label=${translateText("user_setting.toggle_view")}
         description=${translateText("user_setting.toggle_view_desc")}
         defaultKey=${this.defaultKeybinds.toggleView}
-        .value=${this.getKeyValue("toggleView")}
-        .display=${this.getKeyChar("toggleView")}
+        .value=${this.getKeyValue(KeybindAction.toggleView)}
+        .display=${this.getKeyChar(KeybindAction.toggleView)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="coordinateGrid"
+        action=${KeybindAction.coordinateGrid}
         label=${translateText("user_setting.coordinate_grid_label")}
         description=${translateText("user_setting.coordinate_grid_desc")}
         defaultKey=${this.defaultKeybinds.coordinateGrid}
-        .value=${this.getKeyValue("coordinateGrid")}
-        .display=${this.getKeyChar("coordinateGrid")}
+        .value=${this.getKeyValue(KeybindAction.coordinateGrid)}
+        .display=${this.getKeyChar(KeybindAction.coordinateGrid)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -411,102 +429,102 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="buildCity"
+        action=${KeybindAction.buildCity}
         label=${translateText("user_setting.build_city")}
         description=${translateText("user_setting.build_city_desc")}
         defaultKey=${this.defaultKeybinds.buildCity}
-        .value=${this.getKeyValue("buildCity")}
-        .display=${this.getKeyChar("buildCity")}
+        .value=${this.getKeyValue(KeybindAction.buildCity)}
+        .display=${this.getKeyChar(KeybindAction.buildCity)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildFactory"
+        action=${KeybindAction.buildFactory}
         label=${translateText("user_setting.build_factory")}
         description=${translateText("user_setting.build_factory_desc")}
         defaultKey=${this.defaultKeybinds.buildFactory}
-        .value=${this.getKeyValue("buildFactory")}
-        .display=${this.getKeyChar("buildFactory")}
+        .value=${this.getKeyValue(KeybindAction.buildFactory)}
+        .display=${this.getKeyChar(KeybindAction.buildFactory)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildPort"
+        action=${KeybindAction.buildPort}
         label=${translateText("user_setting.build_port")}
         description=${translateText("user_setting.build_port_desc")}
         defaultKey=${this.defaultKeybinds.buildPort}
-        .value=${this.getKeyValue("buildPort")}
-        .display=${this.getKeyChar("buildPort")}
+        .value=${this.getKeyValue(KeybindAction.buildPort)}
+        .display=${this.getKeyChar(KeybindAction.buildPort)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildDefensePost"
+        action=${KeybindAction.buildDefensePost}
         label=${translateText("user_setting.build_defense_post")}
         description=${translateText("user_setting.build_defense_post_desc")}
         defaultKey=${this.defaultKeybinds.buildDefensePost}
-        .value=${this.getKeyValue("buildDefensePost")}
-        .display=${this.getKeyChar("buildDefensePost")}
+        .value=${this.getKeyValue(KeybindAction.buildDefensePost)}
+        .display=${this.getKeyChar(KeybindAction.buildDefensePost)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildMissileSilo"
+        action=${KeybindAction.buildMissileSilo}
         label=${translateText("user_setting.build_missile_silo")}
         description=${translateText("user_setting.build_missile_silo_desc")}
         defaultKey=${this.defaultKeybinds.buildMissileSilo}
-        .value=${this.getKeyValue("buildMissileSilo")}
-        .display=${this.getKeyChar("buildMissileSilo")}
+        .value=${this.getKeyValue(KeybindAction.buildMissileSilo)}
+        .display=${this.getKeyChar(KeybindAction.buildMissileSilo)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildSamLauncher"
+        action=${KeybindAction.buildSamLauncher}
         label=${translateText("user_setting.build_sam_launcher")}
         description=${translateText("user_setting.build_sam_launcher_desc")}
         defaultKey=${this.defaultKeybinds.buildSamLauncher}
-        .value=${this.getKeyValue("buildSamLauncher")}
-        .display=${this.getKeyChar("buildSamLauncher")}
+        .value=${this.getKeyValue(KeybindAction.buildSamLauncher)}
+        .display=${this.getKeyChar(KeybindAction.buildSamLauncher)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildWarship"
+        action=${KeybindAction.buildWarship}
         label=${translateText("user_setting.build_warship")}
         description=${translateText("user_setting.build_warship_desc")}
         defaultKey=${this.defaultKeybinds.buildWarship}
-        .value=${this.getKeyValue("buildWarship")}
-        .display=${this.getKeyChar("buildWarship")}
+        .value=${this.getKeyValue(KeybindAction.buildWarship)}
+        .display=${this.getKeyChar(KeybindAction.buildWarship)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildAtomBomb"
+        action=${KeybindAction.buildAtomBomb}
         label=${translateText("user_setting.build_atom_bomb")}
         description=${translateText("user_setting.build_atom_bomb_desc")}
         defaultKey=${this.defaultKeybinds.buildAtomBomb}
-        .value=${this.getKeyValue("buildAtomBomb")}
-        .display=${this.getKeyChar("buildAtomBomb")}
+        .value=${this.getKeyValue(KeybindAction.buildAtomBomb)}
+        .display=${this.getKeyChar(KeybindAction.buildAtomBomb)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildHydrogenBomb"
+        action=${KeybindAction.buildHydrogenBomb}
         label=${translateText("user_setting.build_hydrogen_bomb")}
         description=${translateText("user_setting.build_hydrogen_bomb_desc")}
         defaultKey=${this.defaultKeybinds.buildHydrogenBomb}
-        .value=${this.getKeyValue("buildHydrogenBomb")}
-        .display=${this.getKeyChar("buildHydrogenBomb")}
+        .value=${this.getKeyValue(KeybindAction.buildHydrogenBomb)}
+        .display=${this.getKeyChar(KeybindAction.buildHydrogenBomb)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildMIRV"
+        action=${KeybindAction.buildMIRV}
         label=${translateText("user_setting.build_mirv")}
         description=${translateText("user_setting.build_mirv_desc")}
         defaultKey=${this.defaultKeybinds.buildMIRV}
-        .value=${this.getKeyValue("buildMIRV")}
-        .display=${this.getKeyChar("buildMIRV")}
+        .value=${this.getKeyValue(KeybindAction.buildMIRV)}
+        .display=${this.getKeyChar(KeybindAction.buildMIRV)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -517,52 +535,52 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="buildMenuModifier"
+        action=${KeybindAction.buildMenuModifier}
         label=${translateText("user_setting.build_menu_modifier")}
         description=${translateText("user_setting.build_menu_modifier_desc")}
         .defaultKey=${this.defaultKeybinds.buildMenuModifier}
-        .value=${this.getKeyValue("buildMenuModifier")}
-        .display=${this.getKeyChar("buildMenuModifier")}
+        .value=${this.getKeyValue(KeybindAction.buildMenuModifier)}
+        .display=${this.getKeyChar(KeybindAction.buildMenuModifier)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="emojiMenuModifier"
+        action=${KeybindAction.emojiMenuModifier}
         label=${translateText("user_setting.emoji_menu_modifier")}
         description=${translateText("user_setting.emoji_menu_modifier_desc")}
         .defaultKey=${this.defaultKeybinds.emojiMenuModifier}
-        .value=${this.getKeyValue("emojiMenuModifier")}
-        .display=${this.getKeyChar("emojiMenuModifier")}
+        .value=${this.getKeyValue(KeybindAction.emojiMenuModifier)}
+        .display=${this.getKeyChar(KeybindAction.emojiMenuModifier)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="pauseGame"
+        action=${KeybindAction.pauseGame}
         label=${translateText("user_setting.pause_game")}
         description=${translateText("user_setting.pause_game_desc")}
         .defaultKey=${this.defaultKeybinds.pauseGame}
-        .value=${this.getKeyValue("pauseGame")}
-        .display=${this.getKeyChar("pauseGame")}
+        .value=${this.getKeyValue(KeybindAction.pauseGame)}
+        .display=${this.getKeyChar(KeybindAction.pauseGame)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="gameSpeedUp"
+        action=${KeybindAction.gameSpeedUp}
         label=${translateText("user_setting.game_speed_up")}
         description=${translateText("user_setting.game_speed_up_desc")}
         .defaultKey=${this.defaultKeybinds.gameSpeedUp}
-        .value=${this.getKeyValue("gameSpeedUp")}
-        .display=${this.getKeyChar("gameSpeedUp")}
+        .value=${this.getKeyValue(KeybindAction.gameSpeedUp)}
+        .display=${this.getKeyChar(KeybindAction.gameSpeedUp)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="gameSpeedDown"
+        action=${KeybindAction.gameSpeedDown}
         label=${translateText("user_setting.game_speed_down")}
         description=${translateText("user_setting.game_speed_down_desc")}
         .defaultKey=${this.defaultKeybinds.gameSpeedDown}
-        .value=${this.getKeyValue("gameSpeedDown")}
-        .display=${this.getKeyChar("gameSpeedDown")}
+        .value=${this.getKeyValue(KeybindAction.gameSpeedDown)}
+        .display=${this.getKeyChar(KeybindAction.gameSpeedDown)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -573,26 +591,26 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="attackRatioDown"
+        action=${KeybindAction.attackRatioDown}
         label=${translateText("user_setting.attack_ratio_down")}
         description=${translateText("user_setting.attack_ratio_down_desc", {
           amount: this.userSettings.attackRatioIncrement(),
         })}
         defaultKey=${this.defaultKeybinds.attackRatioDown}
-        .value=${this.getKeyValue("attackRatioDown")}
-        .display=${this.getKeyChar("attackRatioDown")}
+        .value=${this.getKeyValue(KeybindAction.attackRatioDown)}
+        .display=${this.getKeyChar(KeybindAction.attackRatioDown)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="attackRatioUp"
+        action=${KeybindAction.attackRatioUp}
         label=${translateText("user_setting.attack_ratio_up")}
         description=${translateText("user_setting.attack_ratio_up_desc", {
           amount: this.userSettings.attackRatioIncrement(),
         })}
         defaultKey=${this.defaultKeybinds.attackRatioUp}
-        .value=${this.getKeyValue("attackRatioUp")}
-        .display=${this.getKeyChar("attackRatioUp")}
+        .value=${this.getKeyValue(KeybindAction.attackRatioUp)}
+        .display=${this.getKeyChar(KeybindAction.attackRatioUp)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -603,42 +621,42 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="boatAttack"
+        action=${KeybindAction.boatAttack}
         label=${translateText("user_setting.boat_attack")}
         description=${translateText("user_setting.boat_attack_desc")}
         defaultKey=${this.defaultKeybinds.boatAttack}
-        .value=${this.getKeyValue("boatAttack")}
-        .display=${this.getKeyChar("boatAttack")}
+        .value=${this.getKeyValue(KeybindAction.boatAttack)}
+        .display=${this.getKeyChar(KeybindAction.boatAttack)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="groundAttack"
+        action=${KeybindAction.groundAttack}
         label=${translateText("user_setting.ground_attack")}
         description=${translateText("user_setting.ground_attack_desc")}
         defaultKey=${this.defaultKeybinds.groundAttack}
-        .value=${this.getKeyValue("groundAttack")}
-        .display=${this.getKeyChar("groundAttack")}
+        .value=${this.getKeyValue(KeybindAction.groundAttack)}
+        .display=${this.getKeyChar(KeybindAction.groundAttack)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="retaliateAttack"
+        action=${KeybindAction.retaliateAttack}
         label=${translateText("user_setting.retaliate_attack")}
         description=${translateText("user_setting.retaliate_attack_desc")}
         defaultKey=${this.defaultKeybinds.retaliateAttack}
-        .value=${this.getKeyValue("retaliateAttack")}
-        .display=${this.getKeyChar("retaliateAttack")}
+        .value=${this.getKeyValue(KeybindAction.retaliateAttack)}
+        .display=${this.getKeyChar(KeybindAction.retaliateAttack)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="swapDirection"
+        action=${KeybindAction.swapDirection}
         label=${translateText("user_setting.swap_direction")}
         description=${translateText("user_setting.swap_direction_desc")}
         .defaultKey=${this.defaultKeybinds.swapDirection}
-        .value=${this.getKeyValue("swapDirection")}
-        .display=${this.getKeyChar("swapDirection")}
+        .value=${this.getKeyValue(KeybindAction.swapDirection)}
+        .display=${this.getKeyChar(KeybindAction.swapDirection)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -649,22 +667,22 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="requestAlliance"
+        action=${KeybindAction.requestAlliance}
         label=${translateText("user_setting.request_alliance")}
         description=${translateText("user_setting.request_alliance_desc")}
         defaultKey=${this.defaultKeybinds.requestAlliance}
-        .value=${this.getKeyValue("requestAlliance")}
-        .display=${this.getKeyChar("requestAlliance")}
+        .value=${this.getKeyValue(KeybindAction.requestAlliance)}
+        .display=${this.getKeyChar(KeybindAction.requestAlliance)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="breakAlliance"
+        action=${KeybindAction.breakAlliance}
         label=${translateText("user_setting.break_alliance")}
         description=${translateText("user_setting.break_alliance_desc")}
         defaultKey=${this.defaultKeybinds.breakAlliance}
-        .value=${this.getKeyValue("breakAlliance")}
-        .display=${this.getKeyChar("breakAlliance")}
+        .value=${this.getKeyValue(KeybindAction.breakAlliance)}
+        .display=${this.getKeyChar(KeybindAction.breakAlliance)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -675,22 +693,22 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="zoomOut"
+        action=${KeybindAction.zoomOut}
         label=${translateText("user_setting.zoom_out")}
         description=${translateText("user_setting.zoom_out_desc")}
         defaultKey=${this.defaultKeybinds.zoomOut}
-        .value=${this.getKeyValue("zoomOut")}
-        .display=${this.getKeyChar("zoomOut")}
+        .value=${this.getKeyValue(KeybindAction.zoomOut)}
+        .display=${this.getKeyChar(KeybindAction.zoomOut)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="zoomIn"
+        action=${KeybindAction.zoomIn}
         label=${translateText("user_setting.zoom_in")}
         description=${translateText("user_setting.zoom_in_desc")}
         defaultKey=${this.defaultKeybinds.zoomIn}
-        .value=${this.getKeyValue("zoomIn")}
-        .display=${this.getKeyChar("zoomIn")}
+        .value=${this.getKeyValue(KeybindAction.zoomIn)}
+        .display=${this.getKeyChar(KeybindAction.zoomIn)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -701,52 +719,52 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="centerCamera"
+        action=${KeybindAction.centerCamera}
         label=${translateText("user_setting.center_camera")}
         description=${translateText("user_setting.center_camera_desc")}
         defaultKey=${this.defaultKeybinds.centerCamera}
-        .value=${this.getKeyValue("centerCamera")}
-        .display=${this.getKeyChar("centerCamera")}
+        .value=${this.getKeyValue(KeybindAction.centerCamera)}
+        .display=${this.getKeyChar(KeybindAction.centerCamera)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="moveUp"
+        action=${KeybindAction.moveUp}
         label=${translateText("user_setting.move_up")}
         description=${translateText("user_setting.move_up_desc")}
         defaultKey=${this.defaultKeybinds.moveUp}
-        .value=${this.getKeyValue("moveUp")}
-        .display=${this.getKeyChar("moveUp")}
+        .value=${this.getKeyValue(KeybindAction.moveUp)}
+        .display=${this.getKeyChar(KeybindAction.moveUp)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="moveLeft"
+        action=${KeybindAction.moveLeft}
         label=${translateText("user_setting.move_left")}
         description=${translateText("user_setting.move_left_desc")}
         defaultKey=${this.defaultKeybinds.moveLeft}
-        .value=${this.getKeyValue("moveLeft")}
-        .display=${this.getKeyChar("moveLeft")}
+        .value=${this.getKeyValue(KeybindAction.moveLeft)}
+        .display=${this.getKeyChar(KeybindAction.moveLeft)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="moveDown"
+        action=${KeybindAction.moveDown}
         label=${translateText("user_setting.move_down")}
         description=${translateText("user_setting.move_down_desc")}
         defaultKey=${this.defaultKeybinds.moveDown}
-        .value=${this.getKeyValue("moveDown")}
-        .display=${this.getKeyChar("moveDown")}
+        .value=${this.getKeyValue(KeybindAction.moveDown)}
+        .display=${this.getKeyChar(KeybindAction.moveDown)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="moveRight"
+        action=${KeybindAction.moveRight}
         label=${translateText("user_setting.move_right")}
         description=${translateText("user_setting.move_right_desc")}
         defaultKey=${this.defaultKeybinds.moveRight}
-        .value=${this.getKeyValue("moveRight")}
-        .display=${this.getKeyChar("moveRight")}
+        .value=${this.getKeyValue(KeybindAction.moveRight)}
+        .display=${this.getKeyChar(KeybindAction.moveRight)}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
     `;
diff --git a/src/client/Utils.ts b/src/client/Utils.ts
index 7ff9345b1..b6f7a12e6 100644
--- a/src/client/Utils.ts
+++ b/src/client/Utils.ts
@@ -374,8 +374,8 @@ export function formatKeyForDisplay(value: string): string {
     Minus: "-",
     Equal: "=",
     Semicolon: ";",
-    Comma: ",",
-    Period: ".",
+    Comma: ",", // old getKeyLabel in HelpModal, had this as "<", but not every keyboard layout has it that way?
+    Period: ".",// old getKeyLabel in HelpModal, had this as ">", but not every keyboard layout has it that way?
     Slash: "/",
     Backslash: "\\",
     Shift: "Shift ⇧",