Adapting web version

2026-02-28 20:37:47 +03:00
1 parent 7e5aa22fee
commit 2728ca9646
@@ -1,100 +1,76 @@
-<!doctypehtml>
-    <html lang=en-us>
+<!DOCTYPE html>
+<html lang="en-us">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title>Space Game</title>
+    <style>
+        body, html {
+            margin: 0; padding: 0; width: 100%; height: 100%;
+            overflow: hidden; background-color: #000;
+            position: fixed; /* Предотвращает pull-to-refresh на Android */
+        }
+        #canvas {
+            display: block;
+            position: absolute;
+            top: 0; left: 0;
+            width: 100vw; height: 100vh;
+            border: none;
+        }
+        /* Кнопка Fullscreen */
+        #fs-button {
+            position: absolute;
+            top: 10px; right: 10px;
+            padding: 10px;
+            z-index: 10;
+            background: rgba(255,255,255,0.3);
+            color: white; border: 1px solid white;
+            cursor: pointer;
+            font-family: sans-serif;
+            border-radius: 5px;
+        }
+        #status { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+    </style>
+</head>
+<body>
+    <button id="fs-button">Fullscreen</button>
+    <div id="status">Downloading...</div>
+    <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>

-    <head>
-        <meta charset=utf-8>
-        <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
-        <title>Space Game</title>
-        <style>
-            body {
-                font-family: arial;
-                margin: 0;
-                overflow: hidden;
-                padding: 0;
-                min-height: 100vh;
-                background-color: #000;
+    <script>
+        var statusElement = document.getElementById("status");
+        var canvas = document.getElementById("canvas");
+
+        var Module = {
+            canvas: canvas,
+            setStatus: function(text) {
+                statusElement.innerHTML = text;
+                statusElement.style.display = text ? 'block' : 'none';
            }
+        };

-            .emscripten {
-                padding-right: 0;
-                margin-left: auto;
-                margin-right: auto;
-                display: block
+        // Кнопка Fullscreen
+        document.getElementById('fs-button').addEventListener('click', function() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen().catch(e => {
+                    console.error(`Error attempting to enable full-screen mode: ${e.message}`);
+                });
+            } else {
+                document.exitFullscreen();
            }
+        });

-            div.emscripten {
-                text-align: center
-            }
+        // Обработка ориентации
+        window.addEventListener("orientationchange", function() {
+            // Chrome на Android обновляет innerWidth/Height не мгновенно.
+            // Ждем завершения анимации поворота.
+            setTimeout(() => {
+                // В Emscripten это вызовет ваш onWindowResized в C++
+                window.dispatchEvent(new Event('resize'));
+            }, 200);
+        });

-            div.emscripten_border {
-                border: 1px solid #000
-            }
-
-            canvas.emscripten {
-                border: 0 none;
-                background-color: #000;
-                width: 90%;
-                height: 100vh;
-            }
-
-            @-webkit-keyframes rotation {
-                from {
-                    -webkit-transform: rotate(0)
-                }
-
-                to {
-                    -webkit-transform: rotate(360deg)
-                }
-            }
-
-            @-moz-keyframes rotation {
-                from {
-                    -moz-transform: rotate(0)
-                }
-
-                to {
-                    -moz-transform: rotate(360deg)
-                }
-            }
-
-            @-o-keyframes rotation {
-                from {
-                    -o-transform: rotate(0)
-                }
-
-                to {
-                    -o-transform: rotate(360deg)
-                }
-            }
-
-            @keyframes rotation {
-                from {
-                    transform: rotate(0)
-                }
-
-                to {
-                    transform: rotate(360deg)
-                }
-            }
-
-            #status {
-                display: none;
-            }
-
-            #progress {
-                height: 20px;
-                width: 300px
-            }
-        </style>
-    </head>
-
-    <body>
-        <div class=emscripten id=status></div>
-        <div class=emscripten><progress hidden id=progress max=100 value=0></progress></div>
-        <div class=emscripten_border><canvas class=emscripten id=canvas oncontextmenu=event.preventDefault()
-                tabindex=-1></canvas></div>
-        <script>var statusElement = document.getElementById("status"), progressElement = document.getElementById("progress"), spinnerElement = document.getElementById("spinner"), Module = { print: function () { var e = document.getElementById("output"); return e && (e.value = ""), function (t) { arguments.length > 1 && (t = Array.prototype.slice.call(arguments).join(" ")), console.log(t), e && (e.value += t + "\n", e.scrollTop = e.scrollHeight) } }(), canvas: (() => { var e = document.getElementById("canvas"); return e.addEventListener("webglcontextlost", (e => { alert("WebGL context lost. You will need to reload the page."), e.preventDefault() }), !1), e })(), setStatus: e => { if (Module.setStatus.last || (Module.setStatus.last = { time: Date.now(), text: "" }), e !== Module.setStatus.last.text) { var t = e.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/), n = Date.now(); t && n - Module.setStatus.last.time < 30 || (Module.setStatus.last.time = n, Module.setStatus.last.text = e, t ? (e = t[1], progressElement.value = 100 * parseInt(t[2]), progressElement.max = 100 * parseInt(t[4]), progressElement.hidden = !1, spinnerElement.hidden = !1) : (progressElement.value = null, progressElement.max = null, progressElement.hidden = !0, e || (spinnerElement.style.display = "none")), statusElement.innerHTML = e) } }, totalDependencies: 0, monitorRunDependencies: e => { this.totalDependencies = Math.max(this.totalDependencies, e), Module.setStatus(e ? "Preparing... (" + (this.totalDependencies - e) + "/" + this.totalDependencies + ")" : "All downloads complete.") } }; Module.setStatus("Downloading..."), window.onerror = e => { Module.setStatus("Exception thrown, see JavaScript console"), spinnerElement.style.display = "none", Module.setStatus = e => { e && console.error("[post-exception status] " + e) } }</script>
-        <script async src=space-game001.js></script>
-    </body>
-
-    </html>
+    </script>
+    <script async src="space-game001.js"></script>
+</body>
+</html>