From bc7046180ac869de90bcf9a6ccf0a072e4ce0f5a Mon Sep 17 00:00:00 2001
From: John McCardle <mccardle.john@gmail.com>
Date: Sat, 31 Jan 2026 14:36:22 -0500
Subject: [PATCH] Add Emscripten shell and pre-JS for browser compatibility

- src/shell.html: Custom HTML shell with crisp pixel CSS
  (image-rendering: pixelated) and zoom prevention on canvas
- src/emscripten_pre.js: Patches browser quirks that cause crashes:
  - Intercepts resize/scroll events to ensure e.detail is always 0
  - Wraps window properties (innerWidth, outerWidth, etc.) to
    always return integers, fixing browser zoom crashes
- CMakeLists.txt: Output as .html, include shell and pre-js files

The pre-JS fix addresses "attempt to write non-integer (undefined)
into integer heap" errors that occurred when users zoomed the browser
via Ctrl+scroll or browser menu.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 CMakeLists.txt        |   7 ++
 src/emscripten_pre.js |  69 ++++++++++++++++++
 src/shell.html        | 162 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 238 insertions(+)
 create mode 100644 src/emscripten_pre.js
 create mode 100644 src/shell.html

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 265f910..49d3625 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -269,6 +269,10 @@ if(EMSCRIPTEN)
         --preload-file=${CMAKE_SOURCE_DIR}/src/scripts@/scripts
         # Preload assets
         --preload-file=${CMAKE_SOURCE_DIR}/assets@/assets
+        # Use custom HTML shell for crisp pixel rendering
+        --shell-file=${CMAKE_SOURCE_DIR}/src/shell.html
+        # Pre-JS to fix browser zoom causing undefined values in events
+        --pre-js=${CMAKE_SOURCE_DIR}/src/emscripten_pre.js
     )
 
     # Add SDL2 options if using SDL2 backend
@@ -288,6 +292,9 @@ if(EMSCRIPTEN)
 
     target_link_options(mcrogueface PRIVATE ${EMSCRIPTEN_LINK_OPTIONS})
 
+    # Output as HTML to use the shell file
+    set_target_properties(mcrogueface PROPERTIES SUFFIX ".html")
+
     # Set Python home for the embedded interpreter
     target_compile_definitions(mcrogueface PRIVATE
         MCRF_WASM_PYTHON_HOME="/lib/python3.14"
diff --git a/src/emscripten_pre.js b/src/emscripten_pre.js
new file mode 100644
index 0000000..a4b4108
--- /dev/null
+++ b/src/emscripten_pre.js
@@ -0,0 +1,69 @@
+// Pre-JS file for McRogueFace Emscripten build
+// This runs BEFORE Emscripten's code, allowing us to patch browser quirks
+
+// Fix for browser zoom causing undefined values in resize events
+// When browser zoom changes, some event/window properties can become undefined
+// which causes Emscripten's HEAP32 writes to fail with assertion errors
+
+(function() {
+    'use strict';
+
+    // Store original addEventListener
+    var originalAddEventListener = EventTarget.prototype.addEventListener;
+
+    // Properties that Emscripten's uiEventHandlerFunc reads
+    // These need to be integers, not undefined
+    var windowIntegerProps = [
+        'innerWidth', 'innerHeight',
+        'outerWidth', 'outerHeight',
+        'pageXOffset', 'pageYOffset'
+    ];
+
+    // Ensure window properties return integers even during zoom transitions
+    windowIntegerProps.forEach(function(prop) {
+        var descriptor = Object.getOwnPropertyDescriptor(window, prop);
+        if (descriptor && descriptor.get) {
+            var originalGetter = descriptor.get;
+            Object.defineProperty(window, prop, {
+                get: function() {
+                    var val = originalGetter.call(this);
+                    // Return 0 if undefined/null, otherwise floor to integer
+                    return (val === undefined || val === null) ? 0 : Math.floor(val);
+                },
+                configurable: true
+            });
+        }
+    });
+
+    // Wrap addEventListener to intercept resize/scroll events
+    EventTarget.prototype.addEventListener = function(type, listener, options) {
+        if (type === 'resize' || type === 'scroll') {
+            var wrappedListener = function(e) {
+                // Ensure e.detail is an integer
+                if (e.detail === undefined || e.detail === null) {
+                    // Create a new event with detail = 0
+                    try {
+                        Object.defineProperty(e, 'detail', {
+                            value: 0,
+                            writable: false
+                        });
+                    } catch (ex) {
+                        // If we can't modify, create a proxy event
+                        e = new Proxy(e, {
+                            get: function(target, prop) {
+                                if (prop === 'detail') return 0;
+                                var val = target[prop];
+                                return typeof val === 'function' ? val.bind(target) : val;
+                            }
+                        });
+                    }
+                }
+                return listener.call(this, e);
+            };
+            return originalAddEventListener.call(this, type, wrappedListener, options);
+        }
+        return originalAddEventListener.call(this, type, listener, options);
+    };
+
+    console.log('McRogueFace: Emscripten pre-JS patches applied');
+})();
diff --git a/src/shell.html b/src/shell.html
new file mode 100644
index 0000000..a1ab612
--- /dev/null
+++ b/src/shell.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>McRogueFace - WebGL</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            background: #1a1a2e;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            color: #eee;
+        }
+        h1 {
+            margin-bottom: 10px;
+            color: #e94560;
+        }
+        #status {
+            margin-bottom: 10px;
+            color: #888;
+        }
+        .emscripten {
+            display: block;
+            margin: 0 auto;
+        }
+        #canvas {
+            border: 2px solid #e94560;
+            background: #000;
+            display: block;
+            /* Crisp pixel rendering - no smoothing/interpolation */
+            image-rendering: pixelated;
+            image-rendering: crisp-edges;
+            -ms-interpolation-mode: nearest-neighbor;
+        }
+        #output {
+            margin-top: 20px;
+            max-width: 1024px;
+            width: 100%;
+            max-height: 200px;
+            overflow-y: auto;
+            background: #0f0f23;
+            padding: 10px;
+            font-family: monospace;
+            font-size: 12px;
+            white-space: pre-wrap;
+            border: 1px solid #333;
+        }
+        .spinner {
+            margin: 20px;
+            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); }
+        }
+    </style>
+</head>
+<body>
+    <h1>McRogueFace</h1>
+    <div id="status">Downloading...</div>
+    <div id="spinner" class="spinner"></div>
+    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
+    <div id="output"></div>
+
+    <script type='text/javascript'>
+        var statusElement = document.getElementById('status');
+        var spinnerElement = document.getElementById('spinner');
+        var outputElement = document.getElementById('output');
+        var canvasElement = document.getElementById('canvas');
+
+        // Pre-set canvas size
+        canvasElement.width = 1024;
+        canvasElement.height = 768;
+
+        var Module = {
+            print: (function() {
+                return function(text) {
+                    if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+                    console.log(text);
+                    outputElement.textContent += text + '\n';
+                    outputElement.scrollTop = outputElement.scrollHeight;
+                };
+            })(),
+            printErr: function(text) {
+                if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+                console.error(text);
+                outputElement.textContent += '[ERR] ' + text + '\n';
+                outputElement.scrollTop = outputElement.scrollHeight;
+            },
+            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.innerHTML = 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() {
+                console.log('Emscripten runtime initialized');
+                spinnerElement.style.display = 'none';
+            }
+        };
+
+        Module.setStatus('Downloading...');
+
+        window.onerror = function(event) {
+            Module.setStatus('Error! See console for details.');
+            spinnerElement.style.display = 'none';
+        };
+
+        // Stub for resolveGlobalSymbol - needed by Emscripten's promising main feature
+        if (typeof resolveGlobalSymbol === 'undefined') {
+            window.resolveGlobalSymbol = function(name, direct) {
+                return {
+                    sym: Module['_' + name] || Module[name],
+                    type: 'function'
+                };
+            };
+        }
+
+        // Prevent browser zoom on canvas (Ctrl+scroll causes Emscripten heap errors)
+        // Use capture phase to intercept BEFORE Emscripten's handlers
+        // Also stop propagation to prevent the event from reaching SDL
+        document.addEventListener('wheel', function(e) {
+            if (e.ctrlKey) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                return false;
+            }
+        }, { passive: false, capture: true });
+
+        // Also prevent Ctrl+Plus/Minus zoom
+        document.addEventListener('keydown', function(e) {
+            if (e.ctrlKey && (e.key === '+' || e.key === '-' || e.key === '=' || e.key === '_')) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                return false;
+            }
+        }, { capture: true });
+    </script>
+    {{{ SCRIPT }}}
+</body>
+</html>