alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 12:10:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: correct mac modifier and emoji key detection in input handler (#1118)

Browse Source 
## 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 <christopher.mesona@ubisoft.com>
This commit is contained in:
Christopher Mesona
2025-06-09 23:41:47 +02:00
committed by GitHub
parent 5e821bec06
commit 063574c224
3 changed files with 77 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/HelpModal.ts
+7 -6
View File
@@ -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 {
<tr>
<td>
<div class="scroll-combo-horizontal">
<span class="key">Shift</span>
<span class="key">⇧ Shift</span>
<span class="plus">+</span>
<div class="mouse-shell alt-left-click">
<div class="mouse-left-corner"></div>
@@ -54,7 +54,7 @@ export class HelpModal extends LitElement {
<tr>
<td>
<div class="scroll-combo-horizontal">
<span class="key">Ctrl</span>
<span class="key">${getModifierKey()}</span>
<span class="plus">+</span>
<div class="mouse-shell alt-left-click">
<div class="mouse-left-corner"></div>
@@ -67,7 +67,7 @@ export class HelpModal extends LitElement {
<tr>
<td>
<div class="scroll-combo-horizontal">
<span class="key">Alt</span>
<span class="key">${getAltKey()}</span>
<span class="plus">+</span>
<div class="mouse-shell alt-left-click">
<div class="mouse-left-corner"></div>
@@ -99,7 +99,7 @@ export class HelpModal extends LitElement {
<tr>
<td>
<div class="scroll-combo-horizontal">
<span class="key">Shift</span>
<span class="key">⇧ Shift</span>
<span class="plus">+</span>
<div class="mouse-with-arrows">
<div class="mouse-shell">
@@ -116,7 +116,8 @@ export class HelpModal extends LitElement {
</tr>
<tr>
<td>
<span class="key">ALT</span> + <span class="key">R</span>
<span class="key">${getAltKey()}</span> +
<span class="key">R</span>
</td>
<td>${translateText("help_modal.action_reset_gfx")}</td>
</tr>
src/client/InputHandler.ts
+52 -24
View File
@@ -103,6 +103,7 @@ export class InputHandler {
private moveInterval: NodeJS.Timeout | null = null;
private activeKeys = new Set<string>();
private keybinds: Record<string, string> = {};
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)
);
}
}
src/client/Utils.ts
+18
View File
@@ -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";
}
}