Skip to content

Commit

Permalink
fix: touch controls input listener
Browse files Browse the repository at this point in the history
  • Loading branch information
@ultraviolet-jordan
ultraviolet-jordan committed Apr 3, 2024
1 parent 585cb0a commit f92041d
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 74 deletions.
113 changes: 55 additions & 58 deletions src/js/jagex2/client/GameShell.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default abstract class GameShell {
protected keyQueueWritePos: number = 0;

// touch controls
private touchInput: HTMLElement | null = null;
private input: HTMLElement | null = null;
private touching: boolean = false;
private startedInViewport: boolean = false;
private startedInTabArea: boolean = false;
Expand All @@ -61,6 +61,7 @@ export default abstract class GameShell {
private ny: number = 0;

constructor(resizetoFit: boolean = false) {
canvas.tabIndex = -1;
canvas2d.fillStyle = 'black';
canvas2d.fillRect(0, 0, canvas.width, canvas.height);
this.resizeToFit = resizetoFit;
Expand Down Expand Up @@ -491,6 +492,7 @@ export default abstract class GameShell {
};

private mouseReleased = (e: MouseEvent): void => {
this.setMousePosition(e);
this.idleCycles = 0;
this.mouseButton = 0;

Expand All @@ -500,13 +502,15 @@ export default abstract class GameShell {
};

private mouseEntered = (e: MouseEvent): void => {
this.setMousePosition(e);
if (!InputTracking.enabled) {
return;
}
InputTracking.mouseEntered();
};

private mouseExited = (e: MouseEvent): void => {
this.setMousePosition(e);
if (!InputTracking.enabled) {
return;
}
Expand Down Expand Up @@ -542,19 +546,19 @@ export default abstract class GameShell {
return;
}

if (this.touchInput !== null) {
this.touchInput.parentNode?.removeChild(this.touchInput);
this.touchInput = null;
if (this.input !== null) {
this.input.parentNode?.removeChild(this.input);
this.input = null;
}

this.touching = true;
const touch: Touch = e.changedTouches[0];
const clientX: number = touch.clientX || 0;
const clientY: number = touch.clientY || 0;
const clientX: number = touch.clientX | 0;
const clientY: number = touch.clientY | 0;
this.mouseMoved(new MouseEvent('mousedown', {clientX: clientX, clientY: clientY}));

this.sx = this.nx = this.mx = touch.screenX || 0;
this.sy = this.ny = this.my = touch.screenY || 0;
this.sx = this.nx = this.mx = touch.screenX | 0;
this.sy = this.ny = this.my = touch.screenY | 0;
this.time = e.timeStamp;

this.startedInViewport = this.insideViewportArea();
Expand All @@ -567,12 +571,12 @@ export default abstract class GameShell {
}

const touch: Touch = e.changedTouches[0];
const clientX: number = touch.clientX || 0;
const clientY: number = touch.clientY || 0;
const clientX: number = touch.clientX | 0;
const clientY: number = touch.clientY | 0;
this.mouseMoved(new MouseEvent('mousedown', {clientX: clientX, clientY: clientY}));

this.nx = touch.screenX || 0;
this.ny = touch.screenY || 0;
this.nx = touch.screenX | 0;
this.ny = touch.screenY | 0;

this.keyReleased(new KeyboardEvent('ArrowLeft', {key: 'ArrowLeft', code: 'ArrowLeft'}));
this.keyReleased(new KeyboardEvent('ArrowUp', {key: 'ArrowUp', code: 'ArrowUp'}));
Expand All @@ -586,39 +590,41 @@ export default abstract class GameShell {
this.touching = false;
return;
} else if (this.insideChatInputArea() || this.insideChatPopupArea() || this.insideUsernameArea() || this.inPasswordArea()) {
if (this.touchInput !== null) {
this.touchInput.parentNode?.removeChild(this.touchInput);
this.touchInput = null;
if (this.input !== null) {
if (this.input.parentNode?.contains(this.input)) {
this.input.parentNode?.removeChild(this.input);
}
this.input = null;
}

const document: Document = window.document;
this.touchInput = document.createElement('touchInput');
this.input = document.createElement('input');
if (this.insideUsernameArea()) {
this.touchInput.setAttribute('id', 'username');
this.touchInput.setAttribute('placeholder', 'Username');
this.input.setAttribute('id', 'username');
this.input.setAttribute('placeholder', 'Username');
} else if (this.inPasswordArea()) {
this.touchInput.setAttribute('id', 'password');
this.touchInput.setAttribute('placeholder', 'Password');
this.input.setAttribute('id', 'password');
this.input.setAttribute('placeholder', 'Password');
}
this.touchInput.setAttribute('type', this.inPasswordArea() ? 'password' : 'text');
this.touchInput.setAttribute('autofocus', 'autofocus');
this.touchInput.setAttribute('style', `position: absolute; left: ${clientX}px; top: ${clientY}px; width: 1px; height: 1px; opacity: 0;`);
document.body.appendChild(this.touchInput);
this.touchInput.focus();
this.touchInput.click();

this.touchInput.addEventListener('keydown', (event: KeyboardEvent): void => {
this.keyPressed(event);
});

this.touchInput.addEventListener('keyup', (event: KeyboardEvent): void => {
this.keyReleased(event);
});

this.touchInput.addEventListener('focusout', (): void => {
this.touchInput?.parentNode?.removeChild(this.touchInput);
this.touchInput = null;
});
this.input.setAttribute('type', this.inPasswordArea() ? 'password' : 'text');
this.input.setAttribute('autofocus', 'autofocus');
this.input.setAttribute('style', `position: absolute; left: ${clientX}px; top: ${clientY}px; width: 1px; height: 1px; opacity: 0;`);
document.body.appendChild(this.input);

this.input.focus();
this.input.click();

this.input.onkeydown = (e: KeyboardEvent): void => {
this.keyPressed(e);
};

this.input.onkeyup = (e: KeyboardEvent): void => {
this.keyReleased(e);
};

this.input.onfocus = (e: FocusEvent): void => {
this.input?.parentNode?.removeChild(this.input);
this.input = null;
};

this.touching = false;
return;
Expand All @@ -643,12 +649,12 @@ export default abstract class GameShell {
}

const touch: Touch = e.changedTouches[0];
const clientX: number = touch.clientX || 0;
const clientY: number = touch.clientY || 0;
const clientX: number = touch.clientX | 0;
const clientY: number = touch.clientY | 0;
this.mouseMoved(new MouseEvent('mousedown', {clientX: clientX, clientY: clientY}));

this.nx = touch.screenX || 0;
this.ny = touch.screenY || 0;
this.nx = touch.screenX | 0;
this.ny = touch.screenY | 0;

if (this.startedInViewport && this.getViewportInterfaceId() === -1) {
// Camera panning
Expand Down Expand Up @@ -764,20 +770,11 @@ export default abstract class GameShell {
const fixedWidth: number = 789;
const fixedHeight: number = 532;

if (this.isFullScreen()) {
const element: HTMLElement = e.target as HTMLElement;
const br: DOMRect = element.getBoundingClientRect();
const ratio: number = window.innerHeight / canvas.height;
const offset: number = (window.innerWidth - canvas.width * ratio) / 2.0;
this.mouseX = this.mapCoord(e.clientX - br.left - offset, 0, canvas.width * ratio, 0, fixedWidth) | 0;
this.mouseY = this.mapCoord(e.clientY - br.top, 0, canvas.height * ratio, 0, fixedHeight) | 0;
} else {
const rect: DOMRect = canvas.getBoundingClientRect();
const scaleX: number = canvas.width / rect.width;
const scaleY: number = canvas.height / rect.height;
this.mouseX = ((e.clientX - rect.left) * scaleX) | 0;
this.mouseY = ((e.clientY - rect.top) * scaleY) | 0;
}
const rect: DOMRect = canvas.getBoundingClientRect();
const scaleX: number = canvas.width / rect.width;
const scaleY: number = canvas.height / rect.height;
this.mouseX = ((e.clientX - rect.left) * scaleX) | 0;
this.mouseY = ((e.clientY - rect.top) * scaleY) | 0;

if (this.mouseX < 0) {
this.mouseX = 0;
Expand Down
32 changes: 16 additions & 16 deletions src/js/mesanim.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class Mesanim extends Client {

activeNpc: NpcType = new NpcType();
inputMesanimId: number = -1;
input: string = '';
mes: string = '';

async loadPack(url: string): Promise<Map<number, string>> {
const map: Map<number, string> = new Map();
Expand Down Expand Up @@ -154,15 +154,15 @@ class Mesanim extends Client {
const newline: HTMLInputElement | null = document.querySelector('#newline');
if (newline !== null) {
newline.onclick = (): void => {
this.input += '|';
this.mes += '|';
this.exportChat();
};
}

const clear: HTMLInputElement | null = document.querySelector('#clear');
if (clear !== null) {
clear.onclick = (): void => {
this.input = '';
this.mes = '';
this.exportChat();
};
}
Expand Down Expand Up @@ -280,7 +280,7 @@ class Mesanim extends Client {
li.className = 'list-group-item active';

this.activeNpc = NpcType.get(id);
this.chatNpc(this.activeNpc, this.inputMesanimId, this.input);
this.chatNpc(this.activeNpc, this.inputMesanimId, this.mes);
};
ul.appendChild(li);
}
Expand Down Expand Up @@ -356,7 +356,7 @@ class Mesanim extends Client {
}

el.onclick = (): void => {
this.input += `@${tag}@`;
this.mes += `@${tag}@`;
this.exportChat();
};
}
Expand All @@ -377,20 +377,20 @@ class Mesanim extends Client {

const valid: boolean = PixFont.CHARSET.indexOf(String.fromCharCode(key)) !== -1;
if (valid) {
this.input += String.fromCharCode(key);
this.mes += String.fromCharCode(key);
changed = true;
} else if (key === 8 && this.input.length > 0) {
this.input = this.input.substring(0, this.input.length - 1);
} else if (key === 8 && this.mes.length > 0) {
this.mes = this.mes.substring(0, this.mes.length - 1);
changed = true;
} else if (key === 10 || key === 13) {
this.input += '|';
this.mes += '|';
changed = true;
}
}

if (changed && this.input.indexOf('\\n') !== -1) {
if (changed && this.mes.indexOf('\\n') !== -1) {
// we want split to take over and there's hardcoded draw logic around \n
this.input = this.input.replaceAll('\\n', '|');
this.mes = this.mes.replaceAll('\\n', '|');
}

if (changed) {
Expand All @@ -413,11 +413,11 @@ class Mesanim extends Client {
return;
}

this.splitInit(this.input, 380, 4, this.fontQuill8, this.inputMesanimId); // so we can early-paginate
this.splitInit(this.mes, 380, 4, this.fontQuill8, this.inputMesanimId); // so we can early-paginate
if (this.splitPageCount() > 1) {
this.input = '';
this.mes = '';
}
this.chatNpc(this.activeNpc, this.inputMesanimId, this.input);
this.chatNpc(this.activeNpc, this.inputMesanimId, this.mes);

const el: HTMLInputElement | null = document.querySelector('#export');
if (el) {
Expand All @@ -426,9 +426,9 @@ class Mesanim extends Client {

if (authentic === null || authentic.checked === false) {
const mesanimName: string = mesanim.debugname === 'default' ? '"default"' : mesanim.debugname ?? `mesanim_${mesanim.id}`;
el.value = `~chatnpc(${mesanimName}, "${this.input}");`;
el.value = `~chatnpc(${mesanimName}, "${this.mes}");`;
} else {
el.value = `~chatnpc("<p,${mesanim.debugname}>${this.input}");`;
el.value = `~chatnpc("<p,${mesanim.debugname}>${this.mes}");`;
}
}
}
Expand Down

0 comments on commit f92041d

Please sign in to comment.