Mobile-"ish" emscripten support

Full screen "wasm-game" for viewport compatibility between desktop and web interfaces. Viewport modes ("fit", "center", and "stretch") should now work the same way under WASM/SDL and SFML. This should also enable android or web-for-mobile aspect ratios to be supported more easily.
2026-02-09 08:40:34 -05:00 · 2026-02-09 08:40:34 -05:00 · 726a9cf09d
commit 726a9cf09d
parent 24611c339c
9 changed files with 282 additions and 46 deletions
--- a/src/shell_game.html
+++ b/src/shell_game.html
@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
+    <title>McRogueFace</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body {
+            width: 100%; height: 100%; overflow: hidden;
+            background: #000;
+        }
+        body {
+            padding: env(safe-area-inset-top) env(safe-area-inset-right)
+                     env(safe-area-inset-bottom) env(safe-area-inset-left);
+        }
+        #canvas {
+            display: block; position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            image-rendering: pixelated;
+            image-rendering: crisp-edges;
+            -ms-interpolation-mode: nearest-neighbor;
+            outline: none;
+        }
+        .loading {
+            position: fixed; inset: 0; display: flex;
+            flex-direction: column; justify-content: center;
+            align-items: center; background: #000; color: #eee;
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            z-index: 10;
+        }
+        .loading.hidden { display: none; }
+        .spinner {
+            width: 50px; height: 50px; border: 5px solid #333;
+            border-top-color: #e94560; border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        #status {
+            margin-top: 15px;
+            font-size: 14px;
+            color: #888;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
+    <div class="loading" id="loading">
+        <div class="spinner"></div>
+        <p id="status">Loading...</p>
+    </div>
+    <script>
+        var canvasElement = document.getElementById('canvas');
+        var loadingElement = document.getElementById('loading');
+        var statusElement = document.getElementById('status');
+
+        var runtimeReady = false;
+
+        function updateCanvasSize() {
+            var w = Math.floor(window.innerWidth);
+            var h = Math.floor(window.innerHeight);
+            if (runtimeReady) {
+                // Notify C++ engine, which updates SDL + viewport system
+                Module.ccall('notify_canvas_resize', null, ['number', 'number'], [w, h]);
+            } else {
+                // Before runtime init, set canvas backing buffer directly
+                canvasElement.width = w;
+                canvasElement.height = h;
+            }
+        }
+        updateCanvasSize();
+        window.addEventListener('resize', updateCanvasSize);
+
+        // Focus canvas on click
+        canvasElement.addEventListener('click', function() {
+            canvasElement.focus();
+        });
+        canvasElement.addEventListener('mousedown', function() {
+            if (document.activeElement !== canvasElement) {
+                canvasElement.focus();
+            }
+        });
+
+        var Module = {
+            print: function(text) {
+                if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+                console.log(text);
+            },
+            printErr: function(text) {
+                if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+                console.error(text);
+            },
+            canvas: canvasElement,
+            setStatus: function(text) {
+                if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+                if (text === Module.setStatus.last.text) return;
+                var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+                var now = Date.now();
+                if (m && now - Module.setStatus.last.time < 30) return;
+                Module.setStatus.last.time = now;
+                Module.setStatus.last.text = text;
+                if (m) {
+                    text = m[1];
+                }
+                statusElement.textContent = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+                this.totalDependencies = Math.max(this.totalDependencies, left);
+                Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies - left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            },
+            onRuntimeInitialized: function() {
+                runtimeReady = true;
+                loadingElement.classList.add('hidden');
+                canvasElement.focus();
+                // Trigger resize so C++ picks up the actual canvas dimensions
+                window.dispatchEvent(new Event('resize'));
+            }
+        };
+
+        Module.setStatus('Downloading...');
+
+        window.onerror = function(event) {
+            Module.setStatus('Error! See console.');
+        };
+
+        if (typeof resolveGlobalSymbol === 'undefined') {
+            window.resolveGlobalSymbol = function(name, direct) {
+                return {
+                    sym: Module['_' + name] || Module[name],
+                    type: 'function'
+                };
+            };
+        }
+    </script>
+    {{{ SCRIPT }}}
+</body>
+</html>