Working on mobile input

curiousdannii · May 18, 2024 · a6a8877 · a6a8877
1 parent 0ccb04e
commit a6a8877
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 6 deletions.
diff --git a/arthur.html b/arthur.html
@@ -7,8 +7,9 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Arthur: The Quest for Excalibur</h1>
+    <h1>Arthur</h1>
     <canvas id="canvas"></canvas>
+    <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
     <p><a href="index.html">Other games on Infocom Frotz</a></p>
     <script>window.files = ["arthur-r74-s890714.z6", "Arthur.blb"]</script>
     <script async type="text/javascript" src="sfrotz.js"></script>

diff --git a/journey.html b/journey.html
@@ -7,8 +7,9 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Journey: The Quest Begins</h1>
+    <h1>Journey</h1>
     <canvas id="canvas"></canvas>
+    <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
     <p><a href="index.html">Other games on Infocom Frotz</a></p>
     <script>window.files = ["journey-r83-s890706.z6", "Journey.blb"]</script>
     <script async type="text/javascript" src="sfrotz.js"></script>

diff --git a/sfrotz.js b/sfrotz.js
@@ -32,6 +32,7 @@ if (Module['ENVIRONMENT']) {
 // Infocom Frotz Emscripten preamble
 
 const files = window.files
+const textinput_elem = document.getElementById('textinput')
 Module.arguments = ['/' + files[0], '/' + files[1]]
 Module.canvas = document.getElementById('canvas')
 
@@ -8761,8 +8762,33 @@ var ASM_CONSTS = {
       };
       return JSEvents.registerOrRemoveHandler(eventHandler);
     };
-  var _emscripten_set_keydown_callback_on_thread = (target, userData, useCapture, callbackfunc, targetThread) =>
-      registerKeyEventCallback(target, userData, useCapture, callbackfunc, 2, "keydown", targetThread);
+  var _emscripten_set_keydown_callback_on_thread = function emscripten_set_keydown_callback_on_thread(target, userData, useCapture, callbackfunc, targetThread) {console.log('emscripten_set_keydown_callback_on_thread', target, userData, useCapture, callbackfunc)
+          registerKeyEventCallback(target, userData, useCapture, callbackfunc, 2, "keydown", targetThread)
+
+          // Input handling for mobile
+          // Process input events
+          textinput_elem.addEventListener('input', ev => {
+              console.log('input event', ev)
+              const char = ev.data
+              textinput_elem.value = ''
+              if (char) {
+                const new_event = new KeyboardEvent('keydown', {key: char})
+                document.dispatchEvent(new_event)
+              }
+              // Even though we have reset and emptied the input, Android acts as though it still has spaces within it, and won't send backspace keydown events until the phantom spaces have all been deleted. Refocusing seems to fix it.
+              if (char === ' ') {
+                  textinput_elem.blur()
+                  textinput_elem.focus()
+              }
+          })
+          // Ignore keydown events which return 229 - which is most events on mobile Chrome
+          textinput_elem.addEventListener('keydown', ev => {
+              console.log('keydown event', ev)
+              if (ev.which === 229) {
+                  ev.stopPropagation()
+              }
+          })
+      };
 
   var _emscripten_set_keypress_callback_on_thread = (target, userData, useCapture, callbackfunc, targetThread) =>
       registerKeyEventCallback(target, userData, useCapture, callbackfunc, 1, "keypress", targetThread);

diff --git a/shogun.html b/shogun.html
@@ -7,8 +7,9 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>James Clavell's Shōgun</h1>
+    <h1>Shōgun</h1>
     <canvas id="canvas"></canvas>
+    <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
     <p><a href="index.html">Other games on Infocom Frotz</a></p>
     <script>window.files = ["shogun-r322-s890706.z6", "Shogun.blb"]</script>
     <script async type="text/javascript" src="sfrotz.js"></script>

diff --git a/styles.css b/styles.css
@@ -25,4 +25,9 @@ a {
 #games h2 img {
     display: block;
     margin: 0 auto;
+}
+
+#textinput {
+    position: absolute;
+    left: -10000px;
 }
diff --git a/zorkzero.html b/zorkzero.html
@@ -7,8 +7,9 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Zork Zero: The Revenge of Megaboz</h1>
+    <h1>Zork Zero</h1>
     <canvas id="canvas"></canvas>
+    <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
     <p><a href="index.html">Other games on Infocom Frotz</a></p>
     <script>window.files = ["zork0-r393-s890714.z6", "ZorkZero.blb"]</script>
     <script async type="text/javascript" src="sfrotz.js"></script>