aboutsummaryrefslogtreecommitdiff
path: root/wrapper.html
diff options
context:
space:
mode:
authorSamuel Johnson <[email protected]>2025-05-07 00:08:29 -0400
committerSamuel Johnson <[email protected]>2025-05-07 00:08:29 -0400
commit5f383da62c7a80526634b68c28d7ba9d9e693e75 (patch)
tree7a8e1e8b6d4dcc07126f9e65ca2618aee0c920be /wrapper.html
parent4223fb686b99a5db73da79fb73123568b75822ed (diff)
Create html shell wrapper for gameHEADtrunkdev
Diffstat (limited to 'wrapper.html')
-rw-r--r--wrapper.html91
1 files changed, 91 insertions, 0 deletions
diff --git a/wrapper.html b/wrapper.html
new file mode 100644
index 0000000..0bd537b
--- /dev/null
+++ b/wrapper.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <style>
+ body {
+ color: white;
+ background-color: black;
+ }
+
+ header {
+ text-align: center;
+ }
+
+ #loading_bg {
+ position: absolute;
+ left: 25%;
+ top: 50%;
+
+ width: 50%;
+ background-color: grey;
+ }
+
+ #loading_bar {
+ width: 0%;
+ padding: 2px;
+ background-color: red;
+ }
+
+ .game_canvas {
+ display: none;
+ margin: auto;
+ outline-style: double;
+ outline-color: red;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>This Starless Sky</h1>
+ <p>we are deserving of no gifts.</p?
+ </header>
+ <main>
+ <div id="loading_bg">
+ <div id="loading_bar"></div>
+ </div>
+ <canvas class="game_canvas" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+ </main>
+ <script>
+ let progressBar = document.getElementById("loading_bar");
+ let canvas = document.getElementById("canvas");
+
+ function convertStatusToNumeric (status) {
+ if (status === "Running...") {
+ return 100;
+ } else if (status.length === 0) {
+ return 0;
+ }
+
+ // Ungodly regex from the depths of hell, see
+ // https://github.com/emscripten-core/emscripten/issues/16278#issuecomment-2178303577
+ const regExp = RegExp(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+ const matches = regExp.exec(status);
+
+ if (matches) {
+ const currentValue = parseInt(matches[2]);
+ const maxValue = parseInt(matches[4]);
+ return (currentValue * 100) / maxValue;
+ } else {
+ return NaN;
+ }
+ }
+
+ var Module = {
+ setStatus (status) {
+ if (progressBar.style.width !== "100%") {
+ const percentage = convertStatusToNumeric(status);
+ progressBar.style.width = percentage + "%";
+ } else {
+ progressBar.style.display = "none";
+ canvas.style.display = "block";
+ }
+ },
+
+ };
+ </script>
+ {{{ SCRIPT }}}
+</body>
+</html>
+