alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-27 11:04:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: correct mac modifier and emoji key detection in input handler

Browse Source
This commit is contained in:
cmesona
2025-06-09 15:48:51 +02:00
parent 4170aca548
commit 2d011ff42e
3 changed files with 76 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/HelpModal.ts
+5 -5
View File
@@ -1,6 +1,6 @@
import { LitElement, html } from "lit";
import { customElement, query } from "lit/decorators.js";
import { translateText } from "../client/Utils";
import { getEmojiKey, 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">${getEmojiKey()}</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">
src/client/InputHandler.ts
+53 -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,18 @@ export class InputHandler {
attackRatioDown: "Digit1",
attackRatioUp: "Digit2",
boatAttack: "KeyB",
modifierKey: "ControlLeft",
emojiKey: "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.keybinds.emojiKey = "AltLeft"; // Use Option key for emoji menu on Mac
}
this.canvas.addEventListener("pointerdown", (e) => this.onPointerDown(e));
window.addEventListener("pointerup", (e) => this.onPointerUp(e));
this.canvas.addEventListener(
@@ -154,22 +165,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 +193,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 +207,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 +222,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 +245,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 +256,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 +308,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.isEmojiKeyPressed(event)) {
this.eventBus.emit(new ShowEmojiMenuEvent(event.clientX, event.clientY));
return;
}
@@ -400,4 +411,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)
);
}
isEmojiKeyPressed(event: PointerEvent): boolean {
return (
(this.keybinds.emojiKey === "AltLeft" && event.altKey) ||
(this.keybinds.emojiKey === "ControlLeft" && event.ctrlKey) ||
(this.keybinds.emojiKey === "ShiftLeft" && event.shiftKey) ||
(this.keybinds.emojiKey === "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 getEmojiKey(): string {
const isMac = /Mac/.test(navigator.userAgent);
if (isMac) {
return "⌥"; // Option key
} else {
return "Ctrl";
}
}