Skip to content

Commit

Permalink
fix: prevent default canvas events and enable select keys
Browse files Browse the repository at this point in the history
  • Loading branch information
@ultraviolet-jordan
ultraviolet-jordan committed Jun 12, 2024
1 parent 7c17792 commit 5ebe679
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 56 deletions.
104 changes: 51 additions & 53 deletions src/js/jagex2/client/GameShell.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import PixMap from '../graphics/PixMap';
import Draw3D from '../graphics/Draw3D';

import {sleep} from '../util/JsUtil';
import {CANVAS_PREVENTED, KEY_CODES} from './KeyCodes';
import {CanvasEnabledKeys, KeyCodes} from './KeyCodes';
import InputTracking from './InputTracking';
import {canvas, canvas2d} from '../graphics/Canvas';

Expand Down Expand Up @@ -340,21 +340,16 @@ export default abstract class GameShell {
private onkeydown = (e: KeyboardEvent): void => {
const key: string = e.key;

if (CANVAS_PREVENTED.includes(key)) {
// prevent canvas from using tab and other blacklisted keys. no function in 225?
e.preventDefault();
}

this.idleCycles = 0;

const mappedKey: {code: number; ch: number} = KEY_CODES[key];
if (!mappedKey || (e.code.length === 0 && !e.isTrusted)) {
const keyCode: {code: number; ch: number} = KeyCodes[key];
if (!keyCode || (e.code.length === 0 && !e.isTrusted)) {
console.warn(`Unhandled key: ${key}`);
return;
}

const code: number = mappedKey.code;
let ch: number = mappedKey.ch;
const code: number = keyCode.code;
let ch: number = keyCode.ch;

if (e.ctrlKey) {
if ((ch >= 'A'.charCodeAt(0) && ch <= ']'.charCodeAt(0)) || ch == '_'.charCodeAt(0)) {
Expand All @@ -368,37 +363,37 @@ export default abstract class GameShell {
ch = 0;
}

if (code === KEY_CODES['ArrowLeft'].code) {
if (code === KeyCodes['ArrowLeft'].code) {
ch = 1;
} else if (code === KEY_CODES['ArrowRight'].code) {
} else if (code === KeyCodes['ArrowRight'].code) {
ch = 2;
} else if (code === KEY_CODES['ArrowUp'].code) {
} else if (code === KeyCodes['ArrowUp'].code) {
ch = 3;
} else if (code === KEY_CODES['ArrowDown'].code) {
} else if (code === KeyCodes['ArrowDown'].code) {
ch = 4;
} else if (code === KEY_CODES['Control'].code) {
} else if (code === KeyCodes['Control'].code) {
ch = 5;
} else if (code === KEY_CODES['Shift'].code) {
} else if (code === KeyCodes['Shift'].code) {
ch = 6; // (custom)
} else if (code === KEY_CODES['Alt'].code) {
} else if (code === KeyCodes['Alt'].code) {
ch = 7; // (custom)
} else if (code === KEY_CODES['Backspace'].code) {
} else if (code === KeyCodes['Backspace'].code) {
ch = 8;
} else if (code === KEY_CODES['Delete'].code) {
} else if (code === KeyCodes['Delete'].code) {
ch = 8;
} else if (code === KEY_CODES['Tab'].code) {
} else if (code === KeyCodes['Tab'].code) {
ch = 9;
} else if (code === KEY_CODES['Enter'].code) {
} else if (code === KeyCodes['Enter'].code) {
ch = 10;
} else if (code >= KEY_CODES['F1'].code && code <= KEY_CODES['F12'].code) {
ch = code + 1008 - KEY_CODES['F1'].code;
} else if (code === KEY_CODES['Home'].code) {
} else if (code >= KeyCodes['F1'].code && code <= KeyCodes['F12'].code) {
ch = code + 1008 - KeyCodes['F1'].code;
} else if (code === KeyCodes['Home'].code) {
ch = 1000;
} else if (code === KEY_CODES['End'].code) {
} else if (code === KeyCodes['End'].code) {
ch = 1001;
} else if (code === KEY_CODES['PageUp'].code) {
} else if (code === KeyCodes['PageUp'].code) {
ch = 1002;
} else if (code === KEY_CODES['PageDown'].code) {
} else if (code === KeyCodes['PageDown'].code) {
ch = 1003;
}

Expand All @@ -414,62 +409,61 @@ export default abstract class GameShell {
if (InputTracking.enabled) {
InputTracking.keyPressed(ch);
}

if (!CanvasEnabledKeys.includes(key)) {
e.preventDefault();
}
};

private onkeyup = (e: KeyboardEvent): void => {
const key: string = e.key;

if (CANVAS_PREVENTED.includes(key)) {
// prevent canvas from using tab and other blacklisted keys. no function in 225?
e.preventDefault();
}

this.idleCycles = 0;

const mappedKey: {code: number; ch: number} = KEY_CODES[key];
if (!mappedKey || (e.code.length === 0 && !e.isTrusted)) {
const keyCode: {code: number; ch: number} = KeyCodes[key];
if (!keyCode || (e.code.length === 0 && !e.isTrusted)) {
console.warn(`Unhandled key: ${key}`);
return;
}

const code: number = mappedKey.code;
let ch: number = mappedKey.ch;
const code: number = keyCode.code;
let ch: number = keyCode.ch;

if (ch < 30) {
ch = 0;
}

if (code === KEY_CODES['ArrowLeft'].code) {
if (code === KeyCodes['ArrowLeft'].code) {
ch = 1;
} else if (code === KEY_CODES['ArrowRight'].code) {
} else if (code === KeyCodes['ArrowRight'].code) {
ch = 2;
} else if (code === KEY_CODES['ArrowUp'].code) {
} else if (code === KeyCodes['ArrowUp'].code) {
ch = 3;
} else if (code === KEY_CODES['ArrowDown'].code) {
} else if (code === KeyCodes['ArrowDown'].code) {
ch = 4;
} else if (code === KEY_CODES['Control'].code) {
} else if (code === KeyCodes['Control'].code) {
ch = 5;
} else if (code === KEY_CODES['Shift'].code) {
} else if (code === KeyCodes['Shift'].code) {
ch = 6; // (custom)
} else if (code === KEY_CODES['Alt'].code) {
} else if (code === KeyCodes['Alt'].code) {
ch = 7; // (custom)
} else if (code === KEY_CODES['Backspace'].code) {
} else if (code === KeyCodes['Backspace'].code) {
ch = 8;
} else if (code === KEY_CODES['Delete'].code) {
} else if (code === KeyCodes['Delete'].code) {
ch = 8;
} else if (code === KEY_CODES['Tab'].code) {
} else if (code === KeyCodes['Tab'].code) {
ch = 9;
} else if (code === KEY_CODES['Enter'].code) {
} else if (code === KeyCodes['Enter'].code) {
ch = 10;
} else if (code >= KEY_CODES['F1'].code && code <= KEY_CODES['F12'].code) {
ch = code + 1008 - KEY_CODES['F1'].code;
} else if (code === KEY_CODES['Home'].code) {
} else if (code >= KeyCodes['F1'].code && code <= KeyCodes['F12'].code) {
ch = code + 1008 - KeyCodes['F1'].code;
} else if (code === KeyCodes['Home'].code) {
ch = 1000;
} else if (code === KEY_CODES['End'].code) {
} else if (code === KeyCodes['End'].code) {
ch = 1001;
} else if (code === KEY_CODES['PageUp'].code) {
} else if (code === KeyCodes['PageUp'].code) {
ch = 1002;
} else if (code === KEY_CODES['PageDown'].code) {
} else if (code === KeyCodes['PageDown'].code) {
ch = 1003;
}

Expand All @@ -480,6 +474,10 @@ export default abstract class GameShell {
if (InputTracking.enabled) {
InputTracking.keyReleased(ch);
}

if (!CanvasEnabledKeys.includes(key)) {
e.preventDefault();
}
};

private onmousedown = (e: MouseEvent): void => {
Expand Down
6 changes: 3 additions & 3 deletions src/js/jagex2/client/KeyCodes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ export type JavaKeyCodes = {
};
};

export const CanvasEnabledKeys: string[] = ['F11', 'F12'];

// prettier-ignore
export const KEY_CODES: JavaKeyCodes = {
export const KeyCodes: JavaKeyCodes = {
'Backspace': {code: 8, ch: 8},
'Enter': {code: 10, ch: 10},
'Shift': {code: 16, ch: 65535},
Expand Down Expand Up @@ -142,5 +144,3 @@ export const KEY_CODES: JavaKeyCodes = {
'Y': {code: 89, ch: 89},
'Z': {code: 90, ch: 90}
};

export const CANVAS_PREVENTED: string[] = ['Tab', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];

0 comments on commit 5ebe679

Please sign in to comment.