Try to fix viewport issues

arthur.html

@@ -15,7 +15,11 @@ <h1>Arthur</h1>
         </div>
         <div id="inner">
             <div id="game">
-                <canvas id="canvas"></canvas>
+                <div id="arthurmodes">
+                    <p class="arthurfull">Graphics</p><p class="arthurfull">Map</p><p class="arthurfull">Inventory</p><p class="arthurfull">Score</p><p class="arthurfull">Room</p><p class="arthurfull">Text only</p>
+                    <p class="arthurshort">Graph</p><p class="arthurshort">Map</p><p class="arthurshort">Inv</p><p class="arthurshort">Score</p><p class="arthurshort">Room</p><p class="arthurshort">Text</p>
+                </div>
+                <canvas id="canvas" height="400"></canvas>
                 <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
             </div>
         </div>

interface.js

@@ -3,6 +3,22 @@
 const canvas_elem = document.getElementById('canvas')
 const textinput_elem = document.getElementById('textinput')
 
+// Prevent iOS from zooming in when focusing input, but allow Android to still pinch zoom
+// As they handle the maximum-scale viewport meta option differently, we will conditionally add it only in iOS
+// Idea from https://stackoverflow.com/a/62750441/2854284
+if (/iPhone OS/i.test(navigator.userAgent)) {
+    document.head.querySelector('meta[name="viewport"]').content = 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1'
+}
+
+visualViewport.addEventListener('resize', () => {
+    const height = visualViewport.height
+    document.documentElement.style.height = `${height}px`
+
+    // Safari might have scrolled weirdly, so try to put it right
+    window.scrollTo(0, 0)
+    setTimeout(() => window.scrollTo(0, 0), 500)
+})
+
 // Mobile input event handlers
 canvas_elem.addEventListener('touchstart', ev => {
     textinput_elem.focus()

sfrotz.js

@@ -36,13 +36,6 @@ Module.arguments = ['/' + files[0], '/' + files[1]]
 Module.canvas = document.getElementById('canvas')
 
 Module.preRun = () => {
-    // Prevent iOS from zooming in when focusing input, but allow Android to still pinch zoom
-    // As they handle the maximum-scale viewport meta option differently, we will conditionally add it only in iOS
-    // Idea from https://stackoverflow.com/a/62750441/2854284
-    if (/iPhone OS/i.test(navigator.userAgent)) {
-        document.head.querySelector('meta[name="viewport"]').content = 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1'
-    }
-
     // Load storyfile and blorb
     FS.createPreloadedFile('/', files[0], files[0], true, false)
     FS.createPreloadedFile('/', files[1], files[1], true, false)

styles.css

@@ -40,7 +40,7 @@ html, body {
     max-width: 640px;
 }
 
-#heading {
+#heading, #arthurmodes {
     display: flex;
     flex-flow: row;
     justify-content: space-between;
@@ -49,7 +49,7 @@ html, body {
 
 #heading h1, #heading p {
     font-size: 16px;
-    margin: 12px 0;
+    margin: 12px;
 }
 
 #inner {
@@ -59,6 +59,36 @@ html, body {
     justify-content: center;
 }
 
+#arthurmodes {
+    justify-content: space-around;
+}
+
+#arthurmodes p {
+    border: 1px solid;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 6px 0;
+    padding: 6px;
+}
+
+/* Show shorter buttons on mobile */
+#arthurshort {
+    display: none;
+}
+
+@media (max-width: 500px) {
+    #arthurfull {
+        display: none;
+    }
+    #arthurshort {
+        display: block;
+    }
+}
+
+canvas {
+    display: block;
+}
+
 #textinput {
     position: absolute;
     left: -10000px;