From 063574c224f84294dc312e872f87f62612fd670b Mon Sep 17 00:00:00 2001 From: Christopher Mesona <45428623+Ble4Ch@users.noreply.github.com> Date: Mon, 9 Jun 2025 23:41:47 +0200 Subject: [PATCH] fix: correct mac modifier and emoji key detection in input handler (#1118) ## Description: Fixes Command and Option Keys for Mac. Shows this modification in help ![image](https://github.com/user-attachments/assets/81f884c2-6929-48cf-a8e5-3fde6290df34) ## 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 - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced - [x] I understand that submitting code with bugs that could have been caught through manual testing blocks releases and new features for all contributors ## Please put your Discord username so you can be contacted if a bug or regression is found: George Co-authored-by: cmesona --- src/client/HelpModal.ts | 13 ++++--- src/client/InputHandler.ts | 76 ++++++++++++++++++++++++++------------ src/client/Utils.ts | 18 +++++++++ 3 files changed, 77 insertions(+), 30 deletions(-) diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts index bd1807f59..0f2aebe60 100644 --- a/src/client/HelpModal.ts +++ b/src/client/HelpModal.ts @@ -1,6 +1,6 @@ import { LitElement, html } from "lit"; import { customElement, query } from "lit/decorators.js"; -import { translateText } from "../client/Utils"; +import { getAltKey, getModifierKey, translateText } from "../client/Utils"; import "./components/Difficulties"; import "./components/Maps"; @@ -41,7 +41,7 @@ export class HelpModal extends LitElement {
- Shift + ⇧ Shift +
@@ -54,7 +54,7 @@ export class HelpModal extends LitElement {
- Ctrl + ${getModifierKey()} +
@@ -67,7 +67,7 @@ export class HelpModal extends LitElement {
- Alt + ${getAltKey()} +
@@ -99,7 +99,7 @@ export class HelpModal extends LitElement {
- Shift + ⇧ Shift +
@@ -116,7 +116,8 @@ export class HelpModal extends LitElement { - ALT + R + ${getAltKey()} + + R ${translateText("help_modal.action_reset_gfx")} diff --git a/src/client/InputHandler.ts b/src/client/InputHandler.ts index 597733705..a4ba1eae6 100644 --- a/src/client/InputHandler.ts +++ b/src/client/InputHandler.ts @@ -103,6 +103,7 @@ export class InputHandler { private moveInterval: NodeJS.Timeout | null = null; private activeKeys = new Set(); + private keybinds: Record = {}; private readonly PAN_SPEED = 5; private readonly ZOOM_SPEED = 10; @@ -115,7 +116,7 @@ export class InputHandler { ) {} initialize() { - const keybinds = { + this.keybinds = { toggleView: "Space", centerCamera: "KeyC", moveUp: "KeyW", @@ -127,8 +128,17 @@ export class InputHandler { attackRatioDown: "Digit1", attackRatioUp: "Digit2", boatAttack: "KeyB", + modifierKey: "ControlLeft", + altKey: "AltLeft", ...JSON.parse(localStorage.getItem("settings.keybinds") ?? "{}"), }; + + // Mac users might have different keybinds + const isMac = /Mac/.test(navigator.userAgent); + if (isMac) { + this.keybinds.modifierKey = "MetaLeft"; // Use Command key on Mac + } + this.canvas.addEventListener("pointerdown", (e) => this.onPointerDown(e)); window.addEventListener("pointerup", (e) => this.onPointerUp(e)); this.canvas.addEventListener( @@ -154,22 +164,22 @@ export class InputHandler { let deltaY = 0; if ( - this.activeKeys.has(keybinds.moveUp) || + this.activeKeys.has(this.keybinds.moveUp) || this.activeKeys.has("ArrowUp") ) deltaY += this.PAN_SPEED; if ( - this.activeKeys.has(keybinds.moveDown) || + this.activeKeys.has(this.keybinds.moveDown) || this.activeKeys.has("ArrowDown") ) deltaY -= this.PAN_SPEED; if ( - this.activeKeys.has(keybinds.moveLeft) || + this.activeKeys.has(this.keybinds.moveLeft) || this.activeKeys.has("ArrowLeft") ) deltaX += this.PAN_SPEED; if ( - this.activeKeys.has(keybinds.moveRight) || + this.activeKeys.has(this.keybinds.moveRight) || this.activeKeys.has("ArrowRight") ) deltaX -= this.PAN_SPEED; @@ -182,13 +192,13 @@ export class InputHandler { const cy = window.innerHeight / 2; if ( - this.activeKeys.has(keybinds.zoomOut) || + this.activeKeys.has(this.keybinds.zoomOut) || this.activeKeys.has("Minus") ) { this.eventBus.emit(new ZoomEvent(cx, cy, this.ZOOM_SPEED)); } if ( - this.activeKeys.has(keybinds.zoomIn) || + this.activeKeys.has(this.keybinds.zoomIn) || this.activeKeys.has("Equal") ) { this.eventBus.emit(new ZoomEvent(cx, cy, -this.ZOOM_SPEED)); @@ -196,7 +206,7 @@ export class InputHandler { }, 1); window.addEventListener("keydown", (e) => { - if (e.code === keybinds.toggleView) { + if (e.code === this.keybinds.toggleView) { e.preventDefault(); if (!this.alternateView) { this.alternateView = true; @@ -211,21 +221,21 @@ export class InputHandler { if ( [ - keybinds.moveUp, - keybinds.moveDown, - keybinds.moveLeft, - keybinds.moveRight, - keybinds.zoomOut, - keybinds.zoomIn, + this.keybinds.moveUp, + this.keybinds.moveDown, + this.keybinds.moveLeft, + this.keybinds.moveRight, + this.keybinds.zoomOut, + this.keybinds.zoomIn, "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight", "Minus", "Equal", - keybinds.attackRatioDown, - keybinds.attackRatioUp, - keybinds.centerCamera, + this.keybinds.attackRatioDown, + this.keybinds.attackRatioUp, + this.keybinds.centerCamera, "ControlLeft", "ControlRight", ].includes(e.code) @@ -234,7 +244,7 @@ export class InputHandler { } }); window.addEventListener("keyup", (e) => { - if (e.code === keybinds.toggleView) { + if (e.code === this.keybinds.toggleView) { e.preventDefault(); this.alternateView = false; this.eventBus.emit(new AlternateViewEvent(false)); @@ -245,22 +255,22 @@ export class InputHandler { this.eventBus.emit(new RefreshGraphicsEvent()); } - if (e.code === keybinds.boatAttack) { + if (e.code === this.keybinds.boatAttack) { e.preventDefault(); this.eventBus.emit(new DoBoatAttackEvent()); } - if (e.code === keybinds.attackRatioDown) { + if (e.code === this.keybinds.attackRatioDown) { e.preventDefault(); this.eventBus.emit(new AttackRatioEvent(-10)); } - if (e.code === keybinds.attackRatioUp) { + if (e.code === this.keybinds.attackRatioUp) { e.preventDefault(); this.eventBus.emit(new AttackRatioEvent(10)); } - if (e.code === keybinds.centerCamera) { + if (e.code === this.keybinds.centerCamera) { e.preventDefault(); this.eventBus.emit(new CenterCameraEvent()); } @@ -297,11 +307,11 @@ export class InputHandler { this.pointerDown = false; this.pointers.clear(); - if (event.ctrlKey) { + if (this.isModifierKeyPressed(event)) { this.eventBus.emit(new ShowBuildMenuEvent(event.clientX, event.clientY)); return; } - if (event.altKey) { + if (this.isAltKeyPressed(event)) { this.eventBus.emit(new ShowEmojiMenuEvent(event.clientX, event.clientY)); return; } @@ -400,4 +410,22 @@ export class InputHandler { } this.activeKeys.clear(); } + + isModifierKeyPressed(event: PointerEvent): boolean { + return ( + (this.keybinds.modifierKey === "AltLeft" && event.altKey) || + (this.keybinds.modifierKey === "ControlLeft" && event.ctrlKey) || + (this.keybinds.modifierKey === "ShiftLeft" && event.shiftKey) || + (this.keybinds.modifierKey === "MetaLeft" && event.metaKey) + ); + } + + isAltKeyPressed(event: PointerEvent): boolean { + return ( + (this.keybinds.altKey === "AltLeft" && event.altKey) || + (this.keybinds.altKey === "ControlLeft" && event.ctrlKey) || + (this.keybinds.altKey === "ShiftLeft" && event.shiftKey) || + (this.keybinds.altKey === "MetaLeft" && event.metaKey) + ); + } } diff --git a/src/client/Utils.ts b/src/client/Utils.ts index b60dcaeb6..d8e782f16 100644 --- a/src/client/Utils.ts +++ b/src/client/Utils.ts @@ -150,3 +150,21 @@ export function getMessageTypeClasses(type: MessageType): string { return severityColors["white"]; } } + +export function getModifierKey(): string { + const isMac = /Mac/.test(navigator.userAgent); + if (isMac) { + return "⌘"; // Command key + } else { + return "Ctrl"; + } +} + +export function getAltKey(): string { + const isMac = /Mac/.test(navigator.userAgent); + if (isMac) { + return "⌥"; // Option key + } else { + return "Alt"; + } +}