tsp

projects/thin_ice/script.js

@@ -1,32 +1,30 @@
-const statusElement = document.getElementById("status");
-const progressElement = document.getElementById("progress");
-const spinnerElement = document.getElementById("spinner");
-const canvasElement = document.getElementById("canvas");
-const outputElement = document.getElementById("output");
+const statusElement = document.getElementById('status');
+const progressElement = document.getElementById('progress');
+const canvasElement = document.getElementById('canvas');
+const outputElement = document.getElementById('output');
+const fullscreenButton = document.getElementById('fullscreenButton');
+const resizeCheckbox = document.getElementById('resize');
+const pointerLockCheckbox = document.getElementById('pointerLock');
 
 if (outputElement) {
-    outputElement.value = "";
+    outputElement.value = '';
 }
 
-canvasElement.addEventListener(
-    "webglcontextlost",
-    (event) => {
-        alert("WebGL context lost. You will need to reload the page.");
-        event.preventDefault();
-    },
-    false
-);
+canvasElement.addEventListener('webglcontextlost', (event) => {
+    event.preventDefault();
+    setStatus('WebGL context lost. Reload the page to restart the game.');
+}, false);
 
 function setStatus(text) {
     if (!setStatus.last) {
-        setStatus.last = { time: Date.now(), text: "" };
+        setStatus.last = { time: Date.now(), text: '' };
     }
 
     if (text === setStatus.last.text) {
         return;
     }
 
-    const match = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+    const match = text?.match(/([^(]+)\((\d+(?:\.\d+)?)\/(\d+)\)/);
     const now = Date.now();
 
     if (match && now - setStatus.last.time < 30) {
@@ -37,58 +35,55 @@ function setStatus(text) {
     setStatus.last.text = text;
 
     if (match) {
-        statusElement.innerHTML = match[1].trim();
-        progressElement.value = 100 * parseInt(match[2], 10);
-        progressElement.max = 100 * parseInt(match[4], 10);
+        statusElement.textContent = match[1].trim();
+        progressElement.value = Number.parseInt(match[2], 10) * 100;
+        progressElement.max = Number.parseInt(match[3], 10) * 100;
         progressElement.hidden = false;
-        spinnerElement.hidden = false;
     } else {
-        statusElement.innerHTML = text;
-        progressElement.value = null;
-        progressElement.max = null;
-        progressElement.hidden = true;
-
+        statusElement.textContent = text || '';
+        progressElement.hidden = !text;
         if (!text) {
-            spinnerElement.style.display = "none";
+            progressElement.removeAttribute('value');
         }
     }
 }
 
-var Module = window.Module || {};
-Module.print = (...args) => {
+globalThis.Module = globalThis.Module || {};
+globalThis.Module.canvas = canvasElement;
+globalThis.Module.print = (...args) => {
     console.log(...args);
-
     if (!outputElement) {
         return;
     }
-
-    const text = args.join(" ");
-    outputElement.value += text + "\n";
+    outputElement.value += `${args.join(' ')}\n`;
     outputElement.scrollTop = outputElement.scrollHeight;
 };
-Module.canvas = canvasElement;
-Module.setStatus = setStatus;
-Module.totalDependencies = 0;
-Module.monitorRunDependencies = function (left) {
+globalThis.Module.printErr = (...args) => {
+    console.error(...args);
+    if (!outputElement) {
+        return;
+    }
+    outputElement.value += `[err] ${args.join(' ')}\n`;
+    outputElement.scrollTop = outputElement.scrollHeight;
+};
+globalThis.Module.setStatus = setStatus;
+globalThis.Module.totalDependencies = 0;
+globalThis.Module.monitorRunDependencies = function (left) {
     this.totalDependencies = Math.max(this.totalDependencies, left);
-    setStatus(
-        left
-            ? "Preparing... (" + (this.totalDependencies - left) + "/" + this.totalDependencies + ")"
-            : "All downloads complete."
-    );
+    setStatus(left ? `Preparing... (${this.totalDependencies - left}/${this.totalDependencies})` : 'Running...');
+    if (!left) {
+        setTimeout(() => setStatus(''), 250);
+    }
 };
 
-setStatus("Downloading...");
+fullscreenButton.addEventListener('click', () => {
+    if (typeof globalThis.Module.requestFullscreen === 'function') {
+        globalThis.Module.requestFullscreen(pointerLockCheckbox.checked, resizeCheckbox.checked);
+    }
+});
 
-window.onerror = (message) => {
-    setStatus("Exception thrown, see JavaScript console");
-    spinnerElement.style.display = "none";
-    setStatus = (text) => {
-        if (text) {
-            console.error("[post-exception status] " + text);
-        }
-    };
-    return message;
+setStatus('Downloading...');
+
+globalThis.onerror = () => {
+    setStatus('Exception thrown, see JavaScript console');
 };
-
-window.Module = Module;