Working on mobile input

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

Hide file tree

Showing 6 changed files with 61 additions and 7 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')
 
@@ -8729,7 +8730,10 @@ var ASM_CONSTS = {
 
       var keyEventHandlerFunc = (e) => {
         assert(e);
-
+  console.log('keyEventHandlerFunc', e)
+  if (e.which === 229) {
+    return
+  }
         var keyEventData = JSEvents.keyEvent;
         HEAPF64[((keyEventData)>>3)] = e.timeStamp;
 
@@ -8761,8 +8765,49 @@ 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
+          if (userData) {
+            textinput_elem.addEventListener('input', input_handler)
+          }
+          else {
+            textinput_elem.removeEventListener('input', input_handler)
+          }
+          // 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()
+              }
+          })*/
+      };
+
+      function input_handler(ev) {
+        console.log('input event', ev)
+        const char = ev.data
+        textinput_elem.value = ''
+        if (char) {
+          const upper_key = char.toUpperCase()
+          const keyCode = upper_key.codePointAt(0)
+          const ev_options = {
+              code: 'Key' + upper_key,
+              key: char,
+              keyCode,
+              which: keyCode,
+          }
+          window.dispatchEvent(new KeyboardEvent('keydown', ev_options))
+          window.dispatchEvent(new KeyboardEvent('keypress', ev_options))
+          window.dispatchEvent(new KeyboardEvent('keyup', ev_options))
+        }
+        // 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()
+        }
+      }
 
   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>