updates

src/App.js

@@ -147,7 +147,9 @@ class App extends React.Component {
       document.addEventListener('keyup', this.onKeyUp, true);
       document.addEventListener('contextmenu', this.onMenu, true);
 
-      document.addEventListener('touchstart', this.onTouchStart, true);
+      document.addEventListener('touchstart', this.onTouchStart, {passive: false, capture: true});
+      document.addEventListener('touchmove', this.onTouchStart, {passive: false, capture: true});
+      document.addEventListener('touchend', this.onTouchStart, {passive: false, capture: true});
 
       document.addEventListener('pointerlockchange', this.onPointerLockChange);
       window.addEventListener('resize', this.onResize);
@@ -200,10 +202,6 @@ class App extends React.Component {
     }
   }
 
-  onTouchStart = e => {
-    this.touchEvent = true;
-  }
-
   onMouseMove = e => {
     if (!this.canvas) return;
     const {x, y} = this.mousePos(e);
@@ -214,11 +212,7 @@ class App extends React.Component {
   onMouseDown = e => {
     if (!this.canvas) return;
     const {x, y} = this.mousePos(e);
-    if (this.touchEvent) {
-      this.element.requestFullscreen();
-      this.touchEvent = false;
-      this.game("DApi_Mouse", 0, 0, this.eventMods(e), x, y);
-    } else if (window.screen && window.innerHeight === window.screen.height) {
+    if (window.screen && window.innerHeight === window.screen.height) {
       // we're in fullscreen, let's get pointer lock!
       if (!this.pointerLocked()) {
         this.canvas.requestPointerLock();
@@ -262,14 +256,34 @@ class App extends React.Component {
     }
   }
 
+  onTouchStart = e => {
+    if (!this.canvas || !e.touches.length) return;
+    e.preventDefault();
+    this.element.requestFullscreen();
+    const {x, y} = this.mousePos(e.touches[0]);
+    this.game("DApi_Mouse", 0, 0, this.eventMods(e), x, y);
+    this.game("DApi_Mouse", 1, 0, this.eventMods(e), x, y);
+  }
+  onTouchMove = e => {
+    if (!this.canvas || !e.touches.length) return;
+    e.preventDefault();
+  }
+  onTouchEnd = e => {
+    if (!this.canvas) return;
+    e.preventDefault();
+  }
+
   setCanvas = e => this.canvas = e;
   setElement = e => this.element = e;
   setKeyboard = e => this.keyboard = e;
+  setTouchMove = e => this.touchMove = e;
+  setTouchRmb = e => this.touchRmb = e;
+  setTouchShift = e => this.touchShift = e;
 
   render() {
     const {started, loading, error, progress, dropping} = this.state;
     return (
-      <div className={"App" + (started ? " started" : "") + (dropping ? " dropping" : "")} ref={this.setElement}>
+      <div className={"App touch " + (started ? " started" : "") + (dropping ? " dropping" : "")} ref={this.setElement}>
         <div className="Body">
           {!error && (
             <canvas ref={this.setCanvas} width={640} height={480}/>
@@ -306,6 +320,14 @@ class App extends React.Component {
             </div>
           )}
         </div>
+        <div className="touch-ui">
+          <div className="touch-button touch-button-1" ref={this.touchMove}>
+          </div>
+          <div className="touch-button touch-button-2" ref={this.touchRmb}>
+          </div>
+          <div className="touch-button touch-button-3" ref={this.touchShift}>
+          </div>
+        </div>
       </div>
     );
   }

src/App.scss

@@ -141,3 +141,78 @@ body, #root, .App {
     cursor: pointer;
   }
 }
+
+.App {
+  .touch-ui {
+    display: none;
+  }
+  &.touch .touch-ui {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 25vh;
+    .touch-button {
+      position: absolute;
+      left: 50%;
+      width: 20vh;
+      height: 20vh;
+      border-radius: 10vh;
+      background-color: #888;
+      transform: translate(-50%, -50%);
+    }
+    .touch-button-1 {
+      top: 16.7vh;
+    }
+    .touch-button-2 {
+      top: 50vh;
+    }
+    .touch-button-3 {
+      top: 83.3vh;
+    }
+  }
+}
+@media (max-aspect-ratio: 880/480) {
+  .App.touch .touch-ui {
+    width: calc(50vw - 200vh / 3);
+  }
+}
+@media (max-aspect-ratio: 832/480) {
+  .App.touch .touch-ui {
+    width: 20vh;
+  }
+}
+@media (max-aspect-ratio: 640/480) {
+  .App.touch .touch-ui {
+    top: auto;
+    width: auto;
+    right: 0;
+    height: 20vw;
+    .touch-button {
+      top: 50%;
+      width: 20vw;
+      height: 20vw;
+      border-radius: 10vw;
+    }
+    .touch-button-1 {
+      left: 16.7vw;
+    }
+    .touch-button-2 {
+      left: 50vw;
+    }
+    .touch-button-3 {
+      left: 83.3vw;
+    }
+  }
+}
+@media (max-aspect-ratio: 640/736) {
+  .App.touch .touch-ui {
+    height: calc(50vh - 75vw / 2);
+  }
+}
+@media (max-aspect-ratio: 640/800) {
+  .App.touch .touch-ui {
+    height: 25vw;
+  }
+}

src/api/game.worker.js

@@ -115,6 +115,7 @@ function call_api(func, ...params) {
 
 async function init_game(mpq) {
   if (mpq) {
+    /* eslint-disable-next-line no-undef */
     const reader = new FileReaderSync();
     const data = reader.readAsArrayBuffer(mpq);
     files.set('diabdat.mpq', new Uint8Array(data));