some fixes

src/App.js

@@ -103,8 +103,12 @@ class App extends React.Component {
 
   openKeyboard(open) {
     if (open) {
+      this.showKeyboard = true;
+      this.element.classList.add("keyboard");
       this.keyboard.focus();
     } else {
+      this.showKeyboard = false;
+      this.element.classList.remove("keyboard");
       this.keyboard.blur();
     }
   }
@@ -262,9 +266,11 @@ class App extends React.Component {
   onKeyDown = e => {
     if (!this.canvas) return;
     this.game("DApi_Key", 0, this.eventMods(e), e.keyCode);
-    if (e.keyCode >= 32 && e.key.length === 1) {
+    // if (e.keyCode >= 32 && e.key.length === 1) {
-      this.game("DApi_Char", e.key.charCodeAt(0));
+    //   this.game("DApi_Char", e.key.charCodeAt(0));
-    }
+    // }
+    this.clearKeySel();
+    e.preventDefault();
   }
 
   onMenu = e => {
@@ -274,9 +280,27 @@ class App extends React.Component {
   onKeyUp = e => {
     if (!this.canvas) return;
     this.game("DApi_Key", 1, this.eventMods(e), e.keyCode);
-    const text = this.keyboard.value;
+    this.clearKeySel();
-    const values = [...Array(15)].map((_, i) => i < text.length ? text.charCodeAt(i) : 0);
+  }
-    this.game("DApi_SyncText", ...values);
+
+  clearKeySel() {
+    if (this.showKeyboard) {
+      const len = this.keyboard.value.length;
+      this.keyboard.setSelectionRange(len, len);
+    }
+  }
+
+  onKeyboard = () => {
+    if (this.showKeyboard) {
+      const text = this.keyboard.value;
+      const valid = (text.match(/[\x20-\x7E]/g) || []).join("").substring(0, 15);
+      if (text !== valid) {
+        this.keyboard.value = valid;
+      }
+      this.clearKeySel();
+      const values = [...Array(15)].map((_, i) => i < valid.length ? valid.charCodeAt(i) : 0);
+      this.game("DApi_SyncText", ...values);
+    }
   }
 
   parseFile = e => {
@@ -443,7 +467,7 @@ class App extends React.Component {
   render() {
     const {started, loading, error, progress, dropping, touch, has_spawn} = this.state;
     return (
-      <div className={classNames("App", {touch, started, dropping})} ref={this.setElement}>
+      <div className={classNames("App", {touch, started, dropping, keyboard: this.showKeyboard})} ref={this.setElement}>
         <div className="touch-ui touch-mods">
           <div className={classNames("touch-button", "touch-button-0", {active: this.touchMods[0]})} ref={this.setTouch0}/>
           <div className={classNames("touch-button", "touch-button-1", {active: this.touchMods[1]})} ref={this.setTouch1}/>
@@ -455,14 +479,16 @@ class App extends React.Component {
           <div className={classNames("touch-button", "touch-button-2")} ref={this.setTouch5}/>
         </div>
         <div className="Body">
-          {!error && (
+          {!error && <canvas ref={this.setCanvas} width={640} height={480}/>}
-            <canvas ref={this.setCanvas} width={640} height={480}/>
+          <input type="text" className="keyboard" onChange={this.onKeyboard} ref={this.setKeyboard} spellCheck={false}/>
-          )}
         </div>
         <div className="BodyV">
-          <input type="text" className="keyboard" ref={this.setKeyboard}/>
           {!!error && (
-            <div className="error">{error}</div>
+            <Link className="error" href="https://github.com/d07RiV/diabloweb/issues">
+              <p className="header">The following error has occurred:</p>
+              <p className="body">{error}</p>
+              <p className="footer">Click to go to GitHub issues</p>
+            </Link>
           )}
           {!!loading && !started && !error && (
             <div className="loading">

src/App.scss

@@ -38,6 +38,17 @@ body, #root, .App {
   pointer-events: none;
 }
 
+@media (min-aspect-ratio: 3/1) {
+  .App.keyboard .Body canvas {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 80vw;
+    height: auto;
+    transform: translate(-50%, -70%);
+  }
+}
+
 .App {
   canvas {
     width: 100%;
@@ -50,11 +61,24 @@ body, #root, .App {
   }
   .keyboard {
     position: absolute;
-    left: -1000px;
-    top: -1000px;
-    width: 100px;
-    height: 100px;
     pointer-events: auto;
+    background: rgba(0, 0, 0, 0);
+    color: rgba(0, 0, 0, 0);
+    border: none;
+    outline: none;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    cursor: none;
+    &::selection {
+      background: rgba(0, 0, 0, 0);
+      color: rgba(0, 0, 0, 0);
+      }
+  }
+  &.keyboard .keyboard {
+    display: block;
   }
 
   .start, .error, .loading {
@@ -89,20 +113,38 @@ body, #root, .App {
       padding: 4px 18px;
       cursor: pointer;
       margin-top: 6px;
-      width: 90%;
+      width: 8em;
       &:hover {
         background-color: #111;
       }
     }
   }
+}
 
+.App {
   .error {
+    display: block;
     border: 1px solid #800;
-    background: #400;
+    background: #300;
     padding: 12px;
-    color: #f00;
+    color: #f33;
     font-size: 18px;
     text-align: center;
+    &:hover {
+      text-decoration: none;
+    }
+    .header {
+      font-weight: bold;
+      font-size: 1.2em;
+      margin-bottom: 0.3em;
+    }
+    .body {
+      font-family: monospace;
+    }
+    .footer {
+      margin-top: 0.5em;
+      font-size: 0.8em;
+    }
   }
 
   .loading {

src/api/game.worker.js

@@ -4,8 +4,8 @@ import SpawnBinary from './DiabloSpawn.wasm';
 import SpawnModule from './DiabloSpawn.jscc';
 import axios from 'axios';
 
-const DiabloSize = 1288646;
+const DiabloSize = 1288845;
-const SpawnSize = 1160666;
+const SpawnSize = 1160682;
 
 /* eslint-disable-next-line no-restricted-globals */
 const worker = self;
@@ -172,14 +172,18 @@ worker.DApi = DApi;
 let wasm = null;
 
 function call_api(func, ...params) {
-  audioBatch = [];
+  try {
-  audioTransfer = [];
+    audioBatch = [];
-  wasm["_" + func](...params);
+    audioTransfer = [];
-  if (audioBatch.length) {
+    wasm["_" + func](...params);
-    maxSoundId = maxBatchId;
+    if (audioBatch.length) {
-    worker.postMessage({action: "audioBatch", batch: audioBatch}, audioTransfer);
+      maxSoundId = maxBatchId;
-    audioBatch = null;
+      worker.postMessage({action: "audioBatch", batch: audioBatch}, audioTransfer);
-    audioTransfer = null;
+      audioBatch = null;
+      audioTransfer = null;
+    }
+  } catch (e) {
+    worker.postMessage({action: "error", error: e.message});
   }
 }
 

src/api/load_spawn.js

@@ -13,7 +13,7 @@ export default async function load_spawn(api, fs) {
   }
   if (!file) {
     const spawn = await axios.request({
-      url: '/spawn.mpq',
+      url: process.env.PUBLIC_URL + '/spawn.mpq',
       responseType: 'arraybuffer',
       onDownloadProgress: e => {
         if (api.onProgress) {