fix name input on mobile

qchateau · Sep 17, 2020 · 86ef870 · 86ef870
1 parent f5c188a
commit 86ef870
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/client/input.js b/client/input.js
@@ -29,6 +29,7 @@ class Input {
     this.mouseDown = false;
     this.onInput = onInput;
     this.maxDragLength = maxDragLength;
+    this.preventDefaultTouchStart = false;
 
     element.addEventListener("touchstart", this.onTouchStart.bind(this), {
       passive: false,
@@ -48,7 +49,13 @@ class Input {
   }
 
   onTouchStart(e) {
-    e.preventDefault(); // very important, otherwise chrome throttles inputs
+    if (this.preventDefaultTouchStart) {
+      // preventing the touchstart will prevent
+      // chrome from throttling touchmove on mobile
+      // but will also prevent the "input" field
+      // from working
+      e.preventDefault();
+    }
     this.touchStartX = e.changedTouches[0].clientX;
     this.touchStartY = e.changedTouches[0].clientY;
     this.onInput({

diff --git a/client/main.js b/client/main.js
@@ -404,6 +404,7 @@ class GameManager {
   }
 
   newGame() {
+    this.input.preventDefaultTouchStart = true;
     const playerName = this.getPlayerName();
     this.currentGame = new GameEngine(
       this.getWsHref(),