Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-07-09 05:23:59 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix touch controls on Android Chrome

Browse Source
This commit is contained in:
Andrio Celos 2023-02-26 12:41:39 +11:00
parent 154d223d17
commit e11497fdfc
3 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
TableturfBattleClient/src/Board.ts
View File

@ -9,7 +9,6 @@ class Board {
specialAttack = false;
autoHighlight = true;
touchscreenMode = false;
flip = false;
highlightX = NaN;
@ -19,12 +18,10 @@ class Board {
startSpaces: { x: number, y: number }[] = [ ];
onclick: ((x: number, y: number) => void) | null = null;
onsubmit: ((x: number, y: number) => void) | null = null;
oncancel: (() => void) | null = null;
constructor(table: HTMLTableElement) {
const boardSection = table.parentElement;
this.table = table;
table.addEventListener('mouseleave', _ => {
if (this.autoHighlight) this.clearHighlight()
@ -51,8 +48,8 @@ class Board {
this.moveHighlight((x, y, r) => [x + (this.flip ? -1 : 1), y, r], true);
break;
case 'Enter': case ' ':
if (this.onclick)
this.onclick(this.highlightX, this.highlightY);
if (this.onsubmit)
this.onsubmit(this.highlightX, this.highlightY);
break;
case 'Escape': case 'Backspace':
if (this.oncancel)
@ -62,7 +59,6 @@ class Board {
}
});
table.addEventListener('touchstart', e => {
this.touchscreenMode = true;
if (this.playerIndex == null) return;
if (this.touch == null) {
const touch = e.changedTouches[0];
@ -89,6 +85,7 @@ class Board {
this.moveHighlight((x, y, r) => [x2, y2, r], true);
}
this.refreshHighlight();
e.preventDefault();
}
}
});
@ -214,22 +211,14 @@ class Board {
td.dataset.x = x.toString();
td.dataset.y = y.toString();
col.push(td);
td.addEventListener('click', e => {
if (this.autoHighlight && this.cardPlaying != null && this.onclick) {
if (this.touchscreenMode) {
this.onclick(this.highlightX, this.highlightY);
} else {
const x = parseInt((e.target as HTMLTableCellElement).dataset.x!) - (this.flip ? 4 : 3);
const y = parseInt((e.target as HTMLTableCellElement).dataset.y!) - (this.flip ? 4 : 3);
this.onclick(x, y);
}
td.addEventListener('click', () => {
if (this.autoHighlight && this.cardPlaying != null && this.onsubmit && !isNaN(this.highlightX) && !isNaN(this.highlightY)) {
this.onsubmit(this.highlightX, this.highlightY);
}
});
td.addEventListener('contextmenu', e => e.preventDefault());
td.addEventListener('mousemove', e => {
if (e.buttons == 0)
this.touchscreenMode = false;
if (!this.touchscreenMode) {
td.addEventListener('pointermove', e => {
if (e.pointerType != 'touch') {
if (this.autoHighlight && this.cardPlaying != null) {
const x = parseInt((e.target as HTMLTableCellElement).dataset.x!) - (this.flip ? 4 : 3);
const y = parseInt((e.target as HTMLTableCellElement).dataset.y!) - (this.flip ? 4 : 3);

2
TableturfBattleClient/src/Pages/GamePage.ts
View File

@ -658,7 +658,7 @@ function specialButton_input() {
}
specialButton.input.addEventListener('input', specialButton_input);
board.onclick = (x, y) => {
board.onsubmit = (x, y) => {
if (board.cardPlaying == null || !currentGame?.me)
return;
const message = board.checkMoveLegality(currentGame.me.playerIndex, board.cardPlaying, x, y, board.cardRotation, board.specialAttack);

4
TableturfBattleClient/tableturf.css
View File

@ -8,6 +8,10 @@
src: url('assets/external/splatoon2.woff2') format('woff2');
}
html, body {
overflow-x: hidden; /* TODO: This stops the page from scrolling into whitespace on mobile Chrome. A better solution is probably possible. */
}
body, dialog {
color: white;
background: black;