Fix rebinded keys (#4175)

> **Before opening a PR:** discuss new features on
[Discord](https://discord.gg/K9zernJB5z) first, and file bugs or small
improvements as
[issues](https://github.com/openfrontio/OpenFrontIO/issues/new/choose).
You must be assigned to an `approved` issue — unsolicited PRs will be
auto-closed.

**Add approved & assigned issue number here:**

Resolves #4174 

## Description:

I have fixed the rebinding of the keys for the build menu modifier and
the emoji menu modifier in the settings so that they actually work.
And cleaned up the code

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory

## Please put your Discord username so you can be contacted if a bug or
regression is found:

tktk1234567

src/client/HelpModal.ts

@@ -285,7 +285,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 +306,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"

src/client/InputHandler.ts

@@ -436,6 +436,8 @@ export class InputHandler {
           "ControlLeft",
           "ControlRight",
           this.keybinds.shiftKey,
+          this.keybinds.emojiMenuModifier,
+          this.keybinds.buildMenuModifier,
         ].includes(e.code)
       ) {
         this.activeKeys.add(e.code);
@@ -689,13 +691,12 @@ export class InputHandler {
         this.eventBus.emit(new WarshipSelectionBoxCancelEvent());
       }
     }
-
-    if (this.isModifierKeyPressed(event)) {
+    if (this.activeKeys.has(this.keybinds.buildMenuModifier)) {
       this.suppressNextTap = false;
       this.eventBus.emit(new ShowBuildMenuEvent(event.clientX, event.clientY));
       return;
     }
-    if (this.isAltKeyPressed(event)) {
+    if (this.activeKeys.has(this.keybinds.emojiMenuModifier)) {
       this.suppressNextTap = false;
       this.eventBus.emit(new ShowEmojiMenuEvent(event.clientX, event.clientY));
       return;
@@ -992,23 +993,6 @@ export class InputHandler {
     this.activeKeys.clear();
   }
 
-  isModifierKeyPressed(event: PointerEvent): boolean {
-    return (
-      ((this.keybinds.modifierKey === "AltLeft" ||
-        this.keybinds.modifierKey === "AltRight") &&
-        event.altKey) ||
-      ((this.keybinds.modifierKey === "ControlLeft" ||
-        this.keybinds.modifierKey === "ControlRight") &&
-        event.ctrlKey) ||
-      ((this.keybinds.modifierKey === "ShiftLeft" ||
-        this.keybinds.modifierKey === "ShiftRight") &&
-        event.shiftKey) ||
-      ((this.keybinds.modifierKey === "MetaLeft" ||
-        this.keybinds.modifierKey === "MetaRight") &&
-        event.metaKey)
-    );
-  }
-
   private isAltKeyHeld(event: KeyboardEvent): boolean {
     if (
       this.keybinds.altKey === "AltLeft" ||
@@ -1036,21 +1020,4 @@ export class InputHandler {
     }
     return false;
   }
-
-  isAltKeyPressed(event: PointerEvent): boolean {
-    return (
-      ((this.keybinds.altKey === "AltLeft" ||
-        this.keybinds.altKey === "AltRight") &&
-        event.altKey) ||
-      ((this.keybinds.altKey === "ControlLeft" ||
-        this.keybinds.altKey === "ControlRight") &&
-        event.ctrlKey) ||
-      ((this.keybinds.altKey === "ShiftLeft" ||
-        this.keybinds.altKey === "ShiftRight") &&
-        event.shiftKey) ||
-      ((this.keybinds.altKey === "MetaLeft" ||
-        this.keybinds.altKey === "MetaRight") &&
-        event.metaKey)
-    );
-  }
 }

src/client/UserSettingModal.ts

@@ -505,22 +505,22 @@ export class UserSettingModal extends BaseModal {
       </h2>
 
       <setting-keybind
-        action="modifierKey"
+        action="buildMenuModifier"
         label=${translateText("user_setting.build_menu_modifier")}
         description=${translateText("user_setting.build_menu_modifier_desc")}
-        .defaultKey=${this.defaultKeybinds.modifierKey}
-        .value=${this.getKeyValue("modifierKey")}
-        .display=${this.getKeyChar("modifierKey")}
+        .defaultKey=${this.defaultKeybinds.buildMenuModifier}
+        .value=${this.getKeyValue("buildMenuModifier")}
+        .display=${this.getKeyChar("buildMenuModifier")}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="altKey"
+        action="emojiMenuModifier"
         label=${translateText("user_setting.emoji_menu_modifier")}
         description=${translateText("user_setting.emoji_menu_modifier_desc")}
-        .defaultKey=${this.defaultKeybinds.altKey}
-        .value=${this.getKeyValue("altKey")}
-        .display=${this.getKeyChar("altKey")}
+        .defaultKey=${this.defaultKeybinds.emojiMenuModifier}
+        .value=${this.getKeyValue("emojiMenuModifier")}
+        .display=${this.getKeyChar("emojiMenuModifier")}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 

src/core/game/UserSettings.ts

@@ -34,8 +34,8 @@ export function getDefaultKeybinds(isMac: boolean): Record<string, string> {
     moveLeft: "KeyA",
     moveDown: "KeyS",
     moveRight: "KeyD",
-    modifierKey: isMac ? "MetaLeft" : "ControlLeft",
-    altKey: "AltLeft",
+    buildMenuModifier: isMac ? "MetaLeft" : "ControlLeft",
+    emojiMenuModifier: "AltLeft",
     shiftKey: "ShiftLeft",
     resetGfx: "KeyR",
     selectAllWarships: "KeyF",