diff --git a/src/js/core/click_detector.js b/src/js/core/click_detector.js index 557c1f28..1e332aa2 100644 --- a/src/js/core/click_detector.js +++ b/src/js/core/click_detector.js @@ -311,7 +311,7 @@ export class ClickDetector { const position = /** @type {typeof ClickDetector} */ (this.constructor).extractPointerPosition(event); if (event instanceof MouseEvent) { - const isRightClick = event.which == 3; + const isRightClick = event.button === 2; if (isRightClick) { // Ignore right clicks this.rightClick.dispatch(position, event); @@ -384,7 +384,7 @@ export class ClickDetector { } if (event instanceof MouseEvent) { - const isRightClick = event.which == 3; + const isRightClick = event.button === 2; if (isRightClick) { return; } diff --git a/src/js/core/input_distributor.js b/src/js/core/input_distributor.js index 4bd476b4..03ad8e0c 100644 --- a/src/js/core/input_distributor.js +++ b/src/js/core/input_distributor.js @@ -141,8 +141,13 @@ export class InputDistributor { bindToEvents() { window.addEventListener("popstate", this.handleBackButton.bind(this), false); document.addEventListener("backbutton", this.handleBackButton.bind(this), false); - window.addEventListener("keydown", this.handleKeydown.bind(this)); - window.addEventListener("keyup", this.handleKeyup.bind(this)); + + window.addEventListener("keydown", this.handleKeyMouseDown.bind(this)); + window.addEventListener("keyup", this.handleKeyMouseUp.bind(this)); + + window.addEventListener("mousedown", this.handleKeyMouseDown.bind(this)); + window.addEventListener("mouseup", this.handleKeyMouseUp.bind(this)); + window.addEventListener("blur", this.handleBlur.bind(this)); } @@ -182,25 +187,28 @@ export class InputDistributor { } /** - * @param {KeyboardEvent} event + * @param {KeyboardEvent | MouseEvent} event */ - handleKeydown(event) { + handleKeyMouseDown(event) { + const keyCode = event instanceof MouseEvent ? event.button + 1 : event.keyCode; if ( - event.keyCode === 9 || // TAB - event.keyCode === 16 || // SHIFT - event.keyCode === 17 || // CTRL - event.keyCode === 18 || // ALT - (event.keyCode >= 112 && event.keyCode < 122) // F1 - F10 + keyCode === 4 || // MB4 + keyCode === 5 || // MB5 + keyCode === 9 || // TAB + keyCode === 16 || // SHIFT + keyCode === 17 || // CTRL + keyCode === 18 || // ALT + (keyCode >= 112 && keyCode < 122) // F1 - F10 ) { event.preventDefault(); } - const isInitial = !this.keysDown.has(event.keyCode); - this.keysDown.add(event.keyCode); + const isInitial = !this.keysDown.has(keyCode); + this.keysDown.add(keyCode); if ( this.forwardToReceiver("keydown", { - keyCode: event.keyCode, + keyCode: keyCode, shift: event.shiftKey, alt: event.altKey, initial: isInitial, @@ -210,8 +218,7 @@ export class InputDistributor { return; } - const code = event.keyCode; - if (code === 27) { + if (keyCode === 27) { // Escape key event.preventDefault(); event.stopPropagation(); @@ -220,13 +227,14 @@ export class InputDistributor { } /** - * @param {KeyboardEvent} event + * @param {KeyboardEvent | MouseEvent} event */ - handleKeyup(event) { - this.keysDown.delete(event.keyCode); + handleKeyMouseUp(event) { + const keyCode = event instanceof MouseEvent ? event.button + 1 : event.keyCode; + this.keysDown.delete(keyCode); this.forwardToReceiver("keyup", { - keyCode: event.keyCode, + keyCode: keyCode, shift: event.shiftKey, alt: event.altKey, }); diff --git a/src/js/game/camera.js b/src/js/game/camera.js index 96bf5cd0..f4441ad7 100644 --- a/src/js/game/camera.js +++ b/src/js/game/camera.js @@ -440,11 +440,11 @@ export class Camera extends BasicSerializableObject { } this.touchPostMoveVelocity = new Vector(0, 0); - if (event.which === 1) { + if (event.button === 0) { this.combinedSingleTouchStartHandler(event.clientX, event.clientY); - } else if (event.which === 2) { + } else if (event.button === 1) { this.downPreHandler.dispatch(new Vector(event.clientX, event.clientY), enumMouseButton.middle); - } else if (event.which === 3) { + } else if (event.button === 2) { this.downPreHandler.dispatch(new Vector(event.clientX, event.clientY), enumMouseButton.right); } return false; @@ -464,7 +464,7 @@ export class Camera extends BasicSerializableObject { return; } - if (event.which === 1) { + if (event.button === 0) { this.combinedSingleTouchMoveHandler(event.clientX, event.clientY); } diff --git a/src/js/game/key_action_mapper.js b/src/js/game/key_action_mapper.js index 2ffbb03c..9de75731 100644 --- a/src/js/game/key_action_mapper.js +++ b/src/js/game/key_action_mapper.js @@ -89,6 +89,16 @@ for (const categoryId in KEYMAPPINGS) { */ export function getStringForKeyCode(code) { switch (code) { + case 1: + return "LMB"; + case 2: + return "MMB"; + case 3: + return "RMB"; + case 4: + return "MB4"; + case 5: + return "MB5"; case 8: return "⌫"; case 9: diff --git a/src/js/states/keybindings.js b/src/js/states/keybindings.js index 0f7fcf9e..f9b25359 100644 --- a/src/js/states/keybindings.js +++ b/src/js/states/keybindings.js @@ -121,9 +121,23 @@ export class KeybindingsState extends TextualGameState { this.updateKeybindings(); }); - dialog.inputReciever.backButton.add(() => {}); + const clickListener = event => { + if (event.target.tagName == "BUTTON") { + return; + } + event.preventDefault(); + const keyCode = event.button + 1; + this.app.settings.updateKeybindingOverride(id, keyCode); + + this.dialogs.closeDialog(dialog); + this.updateKeybindings(); + }; + + dialog.inputReciever.backButton.add(() => {}); this.dialogs.internalShowDialog(dialog); + dialog.element.addEventListener("mousedown", clickListener); + this.app.sound.playUiSound(SOUNDS.dialogOk); }