Link to manuals

curiousdannii · May 24, 2024 · a1df7cc · a1df7cc
1 parent c087808
commit a1df7cc
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 95 deletions.
diff --git a/arthur.html b/arthur.html
@@ -7,11 +7,21 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <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>
+    <div id="col">
+        <div id="heading">
+            <h1>Arthur</h1>
+            <p><a href="arthur.pdf" target="_blank">Manual</a></p>
+            <p><a href="index.html" target="_blank">Other games</a></p>
+        </div>
+        <div id="inner">
+            <div id="game">
+                <canvas id="canvas"></canvas>
+                <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
+            </div>
+        </div>
+    </div>
     <script>window.files = ["arthur-r74-s890714.z6", "Arthur.blb"]</script>
+    <script type="text/javascript" src="interface.js"></script>
     <script async type="text/javascript" src="sfrotz.js"></script>
   </body>
 </html>
diff --git a/arthur.pdf b/arthur.pdf
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@ <h2><a href="shogun.html"><img src="shogun.jpg">James Clavell's Shōgun</a></h2>
         <h2><a href="zorkzero.html"><img src="zorkzero.jpg">Zork Zero: The Revenge of Megaboz</a></h2>
     </div>
     <p>Infocom Frotz builds <a href="https://gitlab.com/DavidGriffith/frotz">Frotz</a> with <a href="https://emscripten.org/">Emscripten</a> so that Infocom's Z6 games can be played online.</p>
-    <p>The game files were obtained from <a href="https://eblong.com/infocom/">The Obsessively Complete Infocom Catalog</a> and the media files from the <a href="https://ifarchive.org/indexes/if-archive/infocom/media/blorb/">IF Archive</a>. They are proprietary documents whose copyright belongs to Activision.</p>
+    <p>The game files were obtained from <a href="https://eblong.com/infocom/">The Obsessively Complete Infocom Catalog</a>, the media files from the <a href="https://ifarchive.org/indexes/if-archive/infocom/media/blorb/">IF Archive</a>, and the manuals from the <a href="https://infodoc.plover.net/manuals/index.html">Infocom Documentation Project</a>. They are proprietary documents whose copyright belongs to Activision.</p>
     <p>Infocom's non-Z6 games should be played with <a href="https://iplayif.com/">Parchment</a> instead.</p>
     <p>See the <a href="https://github.com/curiousdannii/infocom-frotz">Infocom Frotz Github page</a> for the interpreter's source code. Infocom Frotz is GPL-2.0 licensed.</p>
 </body>

diff --git a/interface.js b/interface.js
@@ -0,0 +1,78 @@
+// Infocom Frotz interface hacks
+
+const canvas_elem = document.getElementById('canvas')
+const textinput_elem = document.getElementById('textinput')
+
+// Mobile input event handlers
+canvas_elem.addEventListener('touchstart', ev => {
+    textinput_elem.focus()
+})
+textinput_elem.addEventListener('input', ev => {
+    const char = ev.data
+    if (char) {
+        const char_keycode = char.codePointAt(0)
+        const upper_key = char.toUpperCase()
+        const upper_keycode = upper_key.codePointAt(0)
+        const down_up_options = {
+            code: 'Key' + upper_key,
+            key: char,
+            keyCode: upper_keycode,
+            which: upper_keycode,
+        }
+        window.dispatchEvent(new KeyboardEvent('keydown', down_up_options))
+        window.dispatchEvent(new KeyboardEvent('keypress', {
+            charCode: char_keycode,
+            code: 'Key' + upper_key,
+            key: char,
+            keyCode: char_keycode,
+            which: char_keycode,
+        }))
+        window.dispatchEvent(new KeyboardEvent('keyup', down_up_options))
+    }
+
+    // To fully reset we have to clear the value then blur and refocus, otherwise Android will keep trying to do its IME magic, which we don't want.
+    textinput_elem.value = ''
+    textinput_elem.blur()
+    textinput_elem.focus()
+
+    ev.preventDefault()
+    ev.stopPropagation()
+})
+textinput_elem.addEventListener('keydown', ev => {
+    if (ev.which === 8) {
+        const options = {
+            code: 'Backspace',
+            key: 'Backspace',
+            keyCode: 8,
+            which: 8,
+        }
+        window.dispatchEvent(new KeyboardEvent('keydown', options))
+        window.dispatchEvent(new KeyboardEvent('keyup', options))
+        ev.preventDefault()
+        ev.stopPropagation()
+    }
+    if (ev.which === 13) {
+        const options = {
+            charCode: 13,
+            code: 'Enter',
+            key: 'Enter',
+            keyCode: 13,
+            which: 13,
+        }
+        window.dispatchEvent(new KeyboardEvent('keydown', options))
+        window.dispatchEvent(new KeyboardEvent('keypress', options))
+        window.dispatchEvent(new KeyboardEvent('keyup', options))
+        ev.preventDefault()
+        ev.stopPropagation()
+    }
+    if (ev.which === 229) {
+        ev.preventDefault()
+        ev.stopPropagation()
+    }
+})
+textinput_elem.addEventListener('keyup', ev => {
+    if (ev.which === 8 || ev.which === 13 || ev.which === 229) {
+        ev.preventDefault()
+        ev.stopPropagation()
+    }
+})
diff --git a/journey.html b/journey.html
@@ -7,11 +7,21 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <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>
+    <div id="col">
+        <div id="heading">
+            <h1>Journey</h1>
+            <p><a href="journey.pdf" target="_blank">Manual</a></p>
+            <p><a href="index.html" target="_blank">Other games</a></p>
+        </div>
+        <div id="inner">
+            <div id="game">
+                <canvas id="canvas"></canvas>
+                <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
+            </div>
+        </div>
+    </div>
     <script>window.files = ["journey-r83-s890706.z6", "Journey.blb"]</script>
+    <script type="text/javascript" src="interface.js"></script>
     <script async type="text/javascript" src="sfrotz.js"></script>
   </body>
 </html>
diff --git a/journey.pdf b/journey.pdf
diff --git a/sfrotz.js b/sfrotz.js
@@ -32,7 +32,6 @@ 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')
 
@@ -57,81 +56,7 @@ Module.preRun = () => {
             console.log(err)
         }
     })
-}
-
-// Mobile input event handlers
-Module.canvas.addEventListener('touchstart', ev => {
-    textinput_elem.focus()
-})
-textinput_elem.addEventListener('input', ev => {
-    const char = ev.data
-    if (char) {
-        const char_keycode = char.codePointAt(0)
-        const upper_key = char.toUpperCase()
-        const upper_keycode = upper_key.codePointAt(0)
-        const down_up_options = {
-            code: 'Key' + upper_key,
-            key: char,
-            keyCode: upper_keycode,
-            which: upper_keycode,
-        }
-        window.dispatchEvent(new KeyboardEvent('keydown', down_up_options))
-        window.dispatchEvent(new KeyboardEvent('keypress', {
-            charCode: char_keycode,
-            code: 'Key' + upper_key,
-            key: char,
-            keyCode: char_keycode,
-            which: char_keycode,
-        }))
-        window.dispatchEvent(new KeyboardEvent('keyup', down_up_options))
-    }
-
-    // To fully reset we have to clear the value then blur and refocus, otherwise Android will keep trying to do its IME magic, which we don't want.
-    textinput_elem.value = ''
-    textinput_elem.blur()
-    textinput_elem.focus()
-
-    ev.preventDefault()
-    ev.stopPropagation()
-})
-textinput_elem.addEventListener('keydown', ev => {
-    if (ev.which === 8) {
-        const options = {
-            code: 'Backspace',
-            key: 'Backspace',
-            keyCode: 8,
-            which: 8,
-        }
-        window.dispatchEvent(new KeyboardEvent('keydown', options))
-        window.dispatchEvent(new KeyboardEvent('keyup', options))
-        ev.preventDefault()
-        ev.stopPropagation()
-    }
-    if (ev.which === 13) {
-        const options = {
-            charCode: 13,
-            code: 'Enter',
-            key: 'Enter',
-            keyCode: 13,
-            which: 13,
-        }
-        window.dispatchEvent(new KeyboardEvent('keydown', options))
-        window.dispatchEvent(new KeyboardEvent('keypress', options))
-        window.dispatchEvent(new KeyboardEvent('keyup', options))
-        ev.preventDefault()
-        ev.stopPropagation()
-    }
-    if (ev.which === 229) {
-        ev.preventDefault()
-        ev.stopPropagation()
-    }
-})
-textinput_elem.addEventListener('keyup', ev => {
-    if (ev.which === 8 || ev.which === 13 || ev.which === 229) {
-        ev.preventDefault()
-        ev.stopPropagation()
-    }
-})// end include: /src/src/preamble.js
+}// end include: /src/src/preamble.js
 
 
 // Sometimes an existing Module object exists with properties

diff --git a/shogun.html b/shogun.html
@@ -7,11 +7,21 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <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>
+    <div id="col">
+        <div id="heading">
+            <h1>Shōgun</h1>
+
+            <p><a href="index.html" target="_blank">Other games</a></p>
+        </div>
+        <div id="inner">
+            <div id="game">
+                <canvas id="canvas"></canvas>
+                <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
+            </div>
+        </div>
+    </div>
     <script>window.files = ["shogun-r322-s890706.z6", "Shogun.blb"]</script>
+    <script type="text/javascript" src="interface.js"></script>
     <script async type="text/javascript" src="sfrotz.js"></script>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -10,10 +10,10 @@ a {
     color: #aee;
 }
 
+/* Front page */
 #games {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     margin: 0 auto;
     max-width: 600px;
 }
@@ -27,6 +27,38 @@ a {
     margin: 0 auto;
 }
 
+/* Game page */
+html, body {
+    height: 100%;
+}
+
+#col {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+    margin: 0 auto;
+    max-width: 640px;
+}
+
+#heading {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    max-width: 640px;
+}
+
+#heading h1, #heading p {
+    font-size: 16px;
+    margin: 12px 0;
+}
+
+#inner {
+    display: flex;
+    flex: 1;
+    flex-flow: column;
+    justify-content: center;
+}
+
 #textinput {
     position: absolute;
     left: -10000px;

diff --git a/zork0.pdf b/zork0.pdf
diff --git a/zorkzero.html b/zorkzero.html
@@ -7,11 +7,21 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <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>
+    <div id="col">
+        <div id="heading">
+            <h1>Zork Zero</h1>
+            <p><a href="zork0.pdf" target="_blank">Manual</a></p>
+            <p><a href="index.html" target="_blank">Other games</a></p>
+        </div>
+        <div id="inner">
+            <div id="game">
+                <canvas id="canvas"></canvas>
+                <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
+            </div>
+        </div>
+    </div>
     <script>window.files = ["zork0-r393-s890714.z6", "ZorkZero.blb"]</script>
+    <script type="text/javascript" src="interface.js"></script>
     <script async type="text/javascript" src="sfrotz.js"></script>
   </body>
 </html>