Game maybe

assets/sass/pages/games/whittler.scss

@@ -0,0 +1,161 @@
+body.games.whittler {
+  font-family: "Pixelify Sans", display;
+  -webkit-font-smoothing: none;
+  text-transform: uppercase;
+  color: #f6e6c4;
+
+  a {
+    text-decoration-style: wavy;
+  }
+
+  .neon-sign {
+    transform: none;
+    top: 10px;
+    left: 20px;
+    line-height: 3rem;
+    .neon-text {
+      color: #f6e6c4;
+      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
+      animation: none;
+      font-family: "Pixelify Sans", display;
+
+      &:after {
+        color: #4e4223;
+        content: "GAMES";
+        font-size: 1.25rem;
+        position: absolute;
+        bottom: -15px;
+        right: 0;
+        transform: rotate(-5deg);
+      }
+    }
+  }
+
+  footer[role="contentinfo"] {
+    border-image: url("/images/games/whittler/panelInset_brown.png") 10 10 /
+      10px 10px / 1px round round;
+
+    right: 5px;
+    bottom: 5px;
+    background: transparent;
+    padding: 2px;
+    .crt,
+    .warning,
+    a {
+      animation: none;
+      background: #97714a;
+      color: #4e4223 !important;
+      font-family: "Pixelify Sans", display;
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  #whittler-game {
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    padding-top: 2rem;
+    margin: auto;
+    text-align: center;
+    background-color: #4e4223;
+    overflow: hidden;
+    background-image:
+      url("/images/games/whittler/layer_1.png"),
+      url("/images/games/whittler/layer_2.png"),
+      url("/images/games/whittler/layer_3.png"),
+      url("/images/games/whittler/layer_4.png"),
+      url("/images/games/whittler/layer_5.png");
+    background-size: 100%;
+    background-repeat: repeat-x;
+    background-position:
+      0 0,
+      0 0,
+      0 0,
+      0 0,
+      0 0;
+    transition: background-position 0.15s ease-out;
+
+    .whittler-birds {
+      position: absolute;
+      top: 10%;
+      left: -200px;
+      z-index: 1;
+      opacity: 0;
+      pointer-events: none;
+
+      img {
+        filter: none;
+        margin: 0;
+      }
+
+      &.flying {
+        animation: flyAcross 15s linear;
+      }
+    }
+
+    @keyframes flyAcross {
+      0% {
+        left: -200px;
+        opacity: 0;
+      }
+      5% {
+        opacity: 1;
+      }
+      95% {
+        opacity: 1;
+      }
+      100% {
+        left: 110%;
+        opacity: 0;
+      }
+    }
+
+    .whitter-game-container {
+      width: 1152px;
+      margin: auto;
+    }
+
+    h1 {
+      width: 70%;
+      margin: auto;
+      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+      margin-bottom: 3rem;
+    }
+
+    .header-image {
+      position: relative;
+      filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
+      margin-bottom: 3rem;
+      z-index: 999;
+    }
+
+    .iframe-container {
+      border-image: url("/images/games/whittler/panelInset_brown.png") 10 10 /
+        10px 10px / 1px round round;
+      border-width: 8px;
+      border-style: solid;
+      width: 1152px;
+      height: auto;
+      aspect-ratio: 16/9;
+      margin: auto;
+      filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
+
+      div {
+        background-color: #97714a;
+      }
+
+      iframe {
+        margin-top: 2px;
+        border: 0px;
+        width: 100%;
+        aspect-ratio: 16/9;
+        border: 2px solid #563c23;
+        border-radius: 5px;
+      }
+    }
+  }
+}

assets/sass/style.scss

@@ -34,7 +34,9 @@
 @import "pages/buttons";
 @import "pages/log";
 
-@import url(https://fonts.bunny.net/css?family=abel:400|barlow-condensed:400,500|caveat:400|lato:300,300i,400,400i|neonderthaw:400);
+@import "pages/games/whittler";
+
+@import url(https://fonts.bunny.net/css?family=abel:400|barlow-condensed:400,500|caveat:400|lato:300,300i,400,400i|neonderthaw:400|pixelify-sans:400);
 
 @font-face {
   font-family: "DSEG7-Classic";

content/games/whittler/index.md

@@ -0,0 +1,8 @@
+---
+title: "Whittler"
+type: games
+layout: whittler
+logo: logo.avif
+---
+
+Whittler the game :)

layouts/_default/baseof.html

@@ -35,7 +35,7 @@
     {{ end }}
   </head>
 
-  <body>
+  <body class="{{ urlize  .Type }} {{ urlize .Title }}">
     {{ block "header" . }}{{ partial "site-header.html" .}}{{ end }}
     <main role="main">{{ block "main" . }}{{ end }}</main>
     {{ block "footer" . }}{{ partial "site-footer.html" . }}{{ end }} {{ block

layouts/games/whittler.html

@@ -0,0 +1,88 @@
+{{ define "main" }}
+
+<div id="whittler-game">
+  <div class="whittler-birds">
+    <img src="/images/games/whittler/birds1.png" />
+  </div>
+  <div class="whitter-game-container">
+    {{ if .Params.logo }}
+    <div class="banner-image">
+      <picture>
+        <img
+          src="{{ .Params.logo }}"
+          srcset="{{ .Params.logo }} 1x"
+          width="430"
+          alt="{{ .Title }}"
+          class="header-image"
+        />
+      </picture>
+    </div>
+    {{ end }}
+
+    <h1>
+      a game where you try to earn ¥1,000,000 as quickly as possible so you can
+      retire
+    </h1>
+
+    <div class="iframe-container">
+      <div>
+        <iframe src="http://localhost:1313/games/clicker/index.html"></iframe>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  (function () {
+    const gameContainer = document.getElementById("whittler-game");
+    const birds = document.querySelector(".whittler-birds");
+
+    // Parallax effect
+    document.addEventListener("mousemove", function (e) {
+      const windowWidth = window.innerWidth;
+      const mouseX = e.clientX;
+
+      // Calculate percentage from center (-1 to 1)
+      const percentX = (mouseX / windowWidth - 0.5) * 2;
+
+      // Maximum shift amount in pixels
+      const maxShift = 50;
+
+      // Different parallax speeds for each layer (layer 1 is closest, moves most)
+      const layer1Shift = percentX * maxShift * 0.6;
+      const layer2Shift = percentX * maxShift * 0.5;
+      const layer3Shift = percentX * maxShift * 0.35;
+      const layer4Shift = percentX * maxShift * 0.2;
+      const layer5Shift = percentX * maxShift * 0.1;
+
+      gameContainer.style.backgroundPosition =
+        `${layer1Shift}px 0, ` +
+        `${layer2Shift}px 0, ` +
+        `${layer3Shift}px 0, ` +
+        `${layer4Shift}px 0, ` +
+        `${layer5Shift}px 0`;
+    });
+
+    // Occasional bird flying
+    function flyBirds() {
+      const randomTop = Math.random() * 2 + 5;
+      birds.style.top = randomTop + "%";
+
+      birds.classList.add("flying");
+
+      // Remove class after animation completes
+      setTimeout(() => {
+        birds.classList.remove("flying");
+
+        const nextFlight = Math.random() * 20000 + 10000;
+        setTimeout(flyBirds, nextFlight);
+      }, 15000);
+    }
+
+    // Wait  2 seconds to start first flyby
+    const initialDelay = 2000;
+    setTimeout(flyBirds, initialDelay);
+  })();
+</script>
+
+{{ end }}

static/games/clicker/index.audio.position.worklet.js

@@ -0,0 +1,66 @@
+/**************************************************************************/
+/*  godot.audio.position.worklet.js                                                      */
+/**************************************************************************/
+/*                         This file is part of:                          */
+/*                             GODOT ENGINE                               */
+/*                        https://godotengine.org                         */
+/**************************************************************************/
+/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
+/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur.                  */
+/*                                                                        */
+/* Permission is hereby granted, free of charge, to any person obtaining  */
+/* a copy of this software and associated documentation files (the        */
+/* "Software"), to deal in the Software without restriction, including    */
+/* without limitation the rights to use, copy, modify, merge, publish,    */
+/* distribute, sublicense, and/or sell copies of the Software, and to     */
+/* permit persons to whom the Software is furnished to do so, subject to  */
+/* the following conditions:                                              */
+/*                                                                        */
+/* The above copyright notice and this permission notice shall be         */
+/* included in all copies or substantial portions of the Software.        */
+/*                                                                        */
+/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,        */
+/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF     */
+/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
+/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY   */
+/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,   */
+/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE      */
+/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                 */
+/**************************************************************************/
+
+class GodotPositionReportingProcessor extends AudioWorkletProcessor {
+	static get parameterDescriptors() {
+		return [
+			{
+				name: 'reset',
+				defaultValue: 0,
+				minValue: 0,
+				maxValue: 1,
+				automationRate: 'k-rate',
+			},
+		];
+	}
+
+	constructor(...args) {
+		super(...args);
+		this.position = 0;
+	}
+
+	process(inputs, _outputs, parameters) {
+		if (parameters['reset'][0] > 0) {
+			this.position = 0;
+		}
+
+		if (inputs.length > 0) {
+			const input = inputs[0];
+			if (input.length > 0) {
+				this.position += input[0].length;
+				this.port.postMessage({ type: 'position', data: this.position });
+			}
+		}
+
+		return true;
+	}
+}
+
+registerProcessor('godot-position-reporting-processor', GodotPositionReportingProcessor);

static/games/clicker/index.audio.worklet.js

@@ -0,0 +1,213 @@
+/**************************************************************************/
+/*  audio.worklet.js                                                      */
+/**************************************************************************/
+/*                         This file is part of:                          */
+/*                             GODOT ENGINE                               */
+/*                        https://godotengine.org                         */
+/**************************************************************************/
+/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
+/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur.                  */
+/*                                                                        */
+/* Permission is hereby granted, free of charge, to any person obtaining  */
+/* a copy of this software and associated documentation files (the        */
+/* "Software"), to deal in the Software without restriction, including    */
+/* without limitation the rights to use, copy, modify, merge, publish,    */
+/* distribute, sublicense, and/or sell copies of the Software, and to     */
+/* permit persons to whom the Software is furnished to do so, subject to  */
+/* the following conditions:                                              */
+/*                                                                        */
+/* The above copyright notice and this permission notice shall be         */
+/* included in all copies or substantial portions of the Software.        */
+/*                                                                        */
+/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,        */
+/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF     */
+/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
+/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY   */
+/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,   */
+/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE      */
+/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                 */
+/**************************************************************************/
+
+class RingBuffer {
+	constructor(p_buffer, p_state, p_threads) {
+		this.buffer = p_buffer;
+		this.avail = p_state;
+		this.threads = p_threads;
+		this.rpos = 0;
+		this.wpos = 0;
+	}
+
+	data_left() {
+		return this.threads ? Atomics.load(this.avail, 0) : this.avail;
+	}
+
+	space_left() {
+		return this.buffer.length - this.data_left();
+	}
+
+	read(output) {
+		const size = this.buffer.length;
+		let from = 0;
+		let to_write = output.length;
+		if (this.rpos + to_write > size) {
+			const high = size - this.rpos;
+			output.set(this.buffer.subarray(this.rpos, size));
+			from = high;
+			to_write -= high;
+			this.rpos = 0;
+		}
+		if (to_write) {
+			output.set(this.buffer.subarray(this.rpos, this.rpos + to_write), from);
+		}
+		this.rpos += to_write;
+		if (this.threads) {
+			Atomics.add(this.avail, 0, -output.length);
+			Atomics.notify(this.avail, 0);
+		} else {
+			this.avail -= output.length;
+		}
+	}
+
+	write(p_buffer) {
+		const to_write = p_buffer.length;
+		const mw = this.buffer.length - this.wpos;
+		if (mw >= to_write) {
+			this.buffer.set(p_buffer, this.wpos);
+			this.wpos += to_write;
+			if (mw === to_write) {
+				this.wpos = 0;
+			}
+		} else {
+			const high = p_buffer.subarray(0, mw);
+			const low = p_buffer.subarray(mw);
+			this.buffer.set(high, this.wpos);
+			this.buffer.set(low);
+			this.wpos = low.length;
+		}
+		if (this.threads) {
+			Atomics.add(this.avail, 0, to_write);
+			Atomics.notify(this.avail, 0);
+		} else {
+			this.avail += to_write;
+		}
+	}
+}
+
+class GodotProcessor extends AudioWorkletProcessor {
+	constructor() {
+		super();
+		this.threads = false;
+		this.running = true;
+		this.lock = null;
+		this.notifier = null;
+		this.output = null;
+		this.output_buffer = new Float32Array();
+		this.input = null;
+		this.input_buffer = new Float32Array();
+		this.port.onmessage = (event) => {
+			const cmd = event.data['cmd'];
+			const data = event.data['data'];
+			this.parse_message(cmd, data);
+		};
+	}
+
+	process_notify() {
+		if (this.notifier) {
+			Atomics.add(this.notifier, 0, 1);
+			Atomics.notify(this.notifier, 0);
+		}
+	}
+
+	parse_message(p_cmd, p_data) {
+		if (p_cmd === 'start' && p_data) {
+			const state = p_data[0];
+			let idx = 0;
+			this.threads = true;
+			this.lock = state.subarray(idx, ++idx);
+			this.notifier = state.subarray(idx, ++idx);
+			const avail_in = state.subarray(idx, ++idx);
+			const avail_out = state.subarray(idx, ++idx);
+			this.input = new RingBuffer(p_data[1], avail_in, true);
+			this.output = new RingBuffer(p_data[2], avail_out, true);
+		} else if (p_cmd === 'stop') {
+			this.running = false;
+			this.output = null;
+			this.input = null;
+			this.lock = null;
+			this.notifier = null;
+		} else if (p_cmd === 'start_nothreads') {
+			this.output = new RingBuffer(p_data[0], p_data[0].length, false);
+		} else if (p_cmd === 'chunk') {
+			this.output.write(p_data);
+		}
+	}
+
+	static array_has_data(arr) {
+		return arr.length && arr[0].length && arr[0][0].length;
+	}
+
+	process(inputs, outputs, parameters) {
+		if (!this.running) {
+			return false; // Stop processing.
+		}
+		if (this.output === null) {
+			return true; // Not ready yet, keep processing.
+		}
+		const process_input = GodotProcessor.array_has_data(inputs);
+		if (process_input) {
+			const input = inputs[0];
+			const chunk = input[0].length * input.length;
+			if (this.input_buffer.length !== chunk) {
+				this.input_buffer = new Float32Array(chunk);
+			}
+			if (!this.threads) {
+				GodotProcessor.write_input(this.input_buffer, input);
+				this.port.postMessage({ 'cmd': 'input', 'data': this.input_buffer });
+			} else if (this.input.space_left() >= chunk) {
+				GodotProcessor.write_input(this.input_buffer, input);
+				this.input.write(this.input_buffer);
+			} else {
+				// this.port.postMessage('Input buffer is full! Skipping input frame.'); // Uncomment this line to debug input buffer.
+			}
+		}
+		const process_output = GodotProcessor.array_has_data(outputs);
+		if (process_output) {
+			const output = outputs[0];
+			const chunk = output[0].length * output.length;
+			if (this.output_buffer.length !== chunk) {
+				this.output_buffer = new Float32Array(chunk);
+			}
+			if (this.output.data_left() >= chunk) {
+				this.output.read(this.output_buffer);
+				GodotProcessor.write_output(output, this.output_buffer);
+				if (!this.threads) {
+					this.port.postMessage({ 'cmd': 'read', 'data': chunk });
+				}
+			} else {
+				// this.port.postMessage('Output buffer has not enough frames! Skipping output frame.'); // Uncomment this line to debug output buffer.
+			}
+		}
+		this.process_notify();
+		return true;
+	}
+
+	static write_output(dest, source) {
+		const channels = dest.length;
+		for (let ch = 0; ch < channels; ch++) {
+			for (let sample = 0; sample < dest[ch].length; sample++) {
+				dest[ch][sample] = source[sample * channels + ch];
+			}
+		}
+	}
+
+	static write_input(dest, source) {
+		const channels = source.length;
+		for (let ch = 0; ch < channels; ch++) {
+			for (let sample = 0; sample < source[ch].length; sample++) {
+				dest[sample * channels + ch] = source[ch][sample];
+			}
+		}
+	}
+}
+
+registerProcessor('godot-processor', GodotProcessor);

static/games/clicker/index.html

@@ -0,0 +1,344 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0"
+    />
+    <title>Clicker</title>
+    <style>
+      html,
+      body,
+      #canvas {
+        margin: 0;
+        padding: 0;
+        border: 0;
+      }
+
+      body {
+        color: white;
+        background-color: black;
+        overflow: hidden;
+        touch-action: none;
+      }
+
+      #canvas {
+        display: block;
+      }
+
+      #canvas:focus {
+        outline: none;
+      }
+
+      #status,
+      #status-splash,
+      #status-progress {
+        position: absolute;
+        left: 0;
+        right: 0;
+      }
+
+      #status,
+      #status-splash {
+        top: 0;
+        bottom: 0;
+      }
+
+      #status {
+        background-color: #97714a;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        visibility: hidden;
+      }
+
+      #status-splash {
+        max-height: 250px;
+        max-width: 100%;
+        margin: auto;
+      }
+
+      #status-splash.show-image--false {
+        display: none;
+      }
+
+      #status-splash.fullsize--true {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+      }
+
+      #status-splash.use-filter--false {
+        image-rendering: pixelated;
+      }
+
+      #status-progress,
+      #status-notice {
+        display: none;
+      }
+
+      #status-progress {
+        bottom: 10%;
+        width: 50%;
+        margin: 0 auto;
+        accent-color: #3d2815;
+      }
+
+      #status-notice {
+        background-color: #fff;
+        border-radius: 0.5rem;
+        border: 1px solid #9b3943;
+        color: #000;
+        font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;
+        line-height: 1.3;
+        margin: 0 2rem;
+        overflow: hidden;
+        padding: 1rem;
+        text-align: center;
+        z-index: 1;
+      }
+    </style>
+    <link id="-gd-engine-icon" rel="icon" type="image/png" href="index.icon.png" />
+<link rel="apple-touch-icon" href="index.apple-touch-icon.png"/>
+<link rel="manifest" href="index.manifest.json">
+
+  </head>
+  <body>
+    <canvas id="canvas"> Your browser does not support the canvas tag. </canvas>
+
+    <noscript> Your browser does not support JavaScript. </noscript>
+
+    <div id="status">
+      <img
+        id="status-splash"
+        class="show-image--true fullsize--true use-filter--true"
+        src="index.png"
+        alt=""
+      />
+      <progress id="status-progress"></progress>
+      <div id="status-notice"></div>
+    </div>
+
+    <script src="index.js"></script>
+    <script>
+      const GODOT_CONFIG = {"args":[],"canvasResizePolicy":1,"emscriptenPoolSize":8,"ensureCrossOriginIsolationHeaders":true,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":14467852,"index.wasm":37686550},"focusCanvas":true,"gdextensionLibs":[],"godotPoolSize":4,"serviceWorker":"index.service.worker.js"};
+      const GODOT_THREADS_ENABLED = false;
+      const engine = new Engine(GODOT_CONFIG);
+
+      // High Score API Bridge
+      const godotBridge = {
+        // Configuration - Update these with your actual API endpoints
+        API_BASE_URL: "https://api.ritual.sh/highscore",
+
+        // Request a nonce from the API
+        requestNonce: async function () {
+          try {
+            const response = await fetch(`${this.API_BASE_URL}/nonce`, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+
+            // Store nonce for Godot to poll
+            window.godotNonce = data.nonce;
+
+            return data.nonce;
+          } catch (error) {
+            console.error("Error requesting nonce:", error);
+
+            // Store error for Godot to poll
+            window.godotNonce = "";
+            window.godotNonceError = error.message;
+
+            return null;
+          }
+        },
+
+        // Submit the high score with pre-encoded payload from Godot
+        // encodedPayload should be passed as an object: {data: "...", nonce: "..."}
+        submitScore: async function (encodedPayload, nonce) {
+          try {
+            const response = await fetch(`${this.API_BASE_URL}/submit-score`, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                data: encodedPayload,
+                nonce: nonce,
+              }),
+            });
+
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const result = await response.json();
+
+            // Store result for Godot to poll
+            window.godotSubmissionResult = {
+              completed: true,
+              success: true,
+              message: result.message || "Score submitted successfully!",
+              rank: result.rank || 0,
+              leaderboardUrl: result.leaderboardUrl || "",
+            };
+
+            return result;
+          } catch (error) {
+            console.error("Error submitting score:", error);
+
+            // Store error result for Godot to poll
+            window.godotSubmissionResult = {
+              completed: true,
+              success: false,
+              message: error.message || "Failed to submit score",
+              rank: 0,
+              leaderboardUrl: "",
+            };
+
+            return null;
+          }
+        },
+
+        // Test ping function
+        ping: function () {
+          return "pong";
+        },
+      };
+
+      // Store reference for Godot to access
+      window.godotBridge = godotBridge;
+
+      (function () {
+        const statusOverlay = document.getElementById("status");
+        const statusProgress = document.getElementById("status-progress");
+        const statusNotice = document.getElementById("status-notice");
+
+        let initializing = true;
+        let statusMode = "";
+
+        function setStatusMode(mode) {
+          if (statusMode === mode || !initializing) {
+            return;
+          }
+          if (mode === "hidden") {
+            statusOverlay.remove();
+            initializing = false;
+            return;
+          }
+          statusOverlay.style.visibility = "visible";
+          statusProgress.style.display = mode === "progress" ? "block" : "none";
+          statusNotice.style.display = mode === "notice" ? "block" : "none";
+          statusMode = mode;
+        }
+
+        function setStatusNotice(text) {
+          while (statusNotice.lastChild) {
+            statusNotice.removeChild(statusNotice.lastChild);
+          }
+          const lines = text.split("\n");
+          lines.forEach((line) => {
+            statusNotice.appendChild(document.createTextNode(line));
+            statusNotice.appendChild(document.createElement("br"));
+          });
+        }
+
+        function displayFailureNotice(err) {
+          console.error(err);
+          if (err instanceof Error) {
+            setStatusNotice(err.message);
+          } else if (typeof err === "string") {
+            setStatusNotice(err);
+          } else {
+            setStatusNotice("An unknown error occurred.");
+          }
+          setStatusMode("notice");
+          initializing = false;
+        }
+
+        const missing = Engine.getMissingFeatures({
+          threads: GODOT_THREADS_ENABLED,
+        });
+
+        if (missing.length !== 0) {
+          if (
+            GODOT_CONFIG["serviceWorker"] &&
+            GODOT_CONFIG["ensureCrossOriginIsolationHeaders"] &&
+            "serviceWorker" in navigator
+          ) {
+            let serviceWorkerRegistrationPromise;
+            try {
+              serviceWorkerRegistrationPromise =
+                navigator.serviceWorker.getRegistration();
+            } catch (err) {
+              serviceWorkerRegistrationPromise = Promise.reject(
+                new Error("Service worker registration failed."),
+              );
+            }
+            // There's a chance that installing the service worker would fix the issue
+            Promise.race([
+              serviceWorkerRegistrationPromise
+                .then((registration) => {
+                  if (registration != null) {
+                    return Promise.reject(
+                      new Error("Service worker already exists."),
+                    );
+                  }
+                  return registration;
+                })
+                .then(() => engine.installServiceWorker()),
+              // For some reason, `getRegistration()` can stall
+              new Promise((resolve) => {
+                setTimeout(() => resolve(), 2000);
+              }),
+            ])
+              .then(() => {
+                // Reload if there was no error.
+                window.location.reload();
+              })
+              .catch((err) => {
+                console.error("Error while registering service worker:", err);
+              });
+          } else {
+            // Display the message as usual
+            const missingMsg =
+              "Error\nThe following features required to run Godot projects on the Web are missing:\n";
+            displayFailureNotice(missingMsg + missing.join("\n"));
+          }
+        } else {
+          setStatusMode("progress");
+          engine
+            .startGame({
+              onProgress: function (current, total) {
+                if (current > 0 && total > 0) {
+                  statusProgress.value = current;
+                  statusProgress.max = total;
+                } else {
+                  statusProgress.removeAttribute("value");
+                  statusProgress.removeAttribute("max");
+                }
+              },
+            })
+            .then(() => {
+              setStatusMode("hidden");
+              // Store Godot instance reference for bridge callbacks
+              window.requestAnimationFrame(() => {
+                window.godotInstance = engine;
+              });
+            }, displayFailureNotice);
+        }
+      })();
+    </script>
+  </body>
+</html>
+

static/games/clicker/index.manifest.json

@@ -0,0 +1 @@
+{"background_color":"#d1b77a","display":"standalone","icons":[{"sizes":"144x144","src":"index.144x144.png","type":"image/png"},{"sizes":"180x180","src":"index.180x180.png","type":"image/png"},{"sizes":"512x512","src":"index.512x512.png","type":"image/png"}],"name":"Clicker","orientation":"any","start_url":"./index.html"}

static/games/clicker/index.offline.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>You are offline</title>
+		<style>
+html {
+	background-color: #000000;
+	color: #ffffff;
+}
+
+body {
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	margin: 2rem;
+}
+
+p {
+	margin-block: 1rem;
+}
+
+button {
+	display: block;
+	padding: 1rem 2rem;
+	margin: 3rem auto 0;
+}
+		</style>
+	</head>
+	<body>
+		<h1>You are offline</h1>
+		<p>This application requires an Internet connection to run for the first time.</p>
+		<p>Press the button below to try reloading:</p>
+		<button type="button">Reload</button>
+		<script>
+document.querySelector('button').addEventListener('click', () => {
+	window.location.reload();
+});
+		</script>
+	</body>
+</html>

static/games/clicker/index.service.worker.js

@@ -0,0 +1,166 @@
+// This service worker is required to expose an exported Godot project as a
+// Progressive Web App. It provides an offline fallback page telling the user
+// that they need an Internet connection to run the project if desired.
+// Incrementing CACHE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+/** @type {string} */
+const CACHE_VERSION = '1769693184|4645131895';
+/** @type {string} */
+const CACHE_PREFIX = 'Clicker-sw-cache-';
+const CACHE_NAME = CACHE_PREFIX + CACHE_VERSION;
+/** @type {string} */
+const OFFLINE_URL = 'index.offline.html';
+/** @type {boolean} */
+const ENSURE_CROSSORIGIN_ISOLATION_HEADERS = true;
+// Files that will be cached on load.
+/** @type {string[]} */
+const CACHED_FILES = ["index.html","index.js","index.offline.html","index.icon.png","index.apple-touch-icon.png","index.audio.worklet.js","index.audio.position.worklet.js"];
+// Files that we might not want the user to preload, and will only be cached on first load.
+/** @type {string[]} */
+const CACHEABLE_FILES = ["index.wasm","index.pck"];
+const FULL_CACHE = CACHED_FILES.concat(CACHEABLE_FILES);
+
+self.addEventListener('install', (event) => {
+	event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(CACHED_FILES)));
+});
+
+self.addEventListener('activate', (event) => {
+	event.waitUntil(caches.keys().then(
+		function (keys) {
+			// Remove old caches.
+			return Promise.all(keys.filter((key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME).map((key) => caches.delete(key)));
+		}
+	).then(function () {
+		// Enable navigation preload if available.
+		return ('navigationPreload' in self.registration) ? self.registration.navigationPreload.enable() : Promise.resolve();
+	}));
+});
+
+/**
+ * Ensures that the response has the correct COEP/COOP headers
+ * @param {Response} response
+ * @returns {Response}
+ */
+function ensureCrossOriginIsolationHeaders(response) {
+	if (response.headers.get('Cross-Origin-Embedder-Policy') === 'require-corp'
+		&& response.headers.get('Cross-Origin-Opener-Policy') === 'same-origin') {
+		return response;
+	}
+
+	const crossOriginIsolatedHeaders = new Headers(response.headers);
+	crossOriginIsolatedHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
+	crossOriginIsolatedHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
+	const newResponse = new Response(response.body, {
+		status: response.status,
+		statusText: response.statusText,
+		headers: crossOriginIsolatedHeaders,
+	});
+
+	return newResponse;
+}
+
+/**
+ * Calls fetch and cache the result if it is cacheable
+ * @param {FetchEvent} event
+ * @param {Cache} cache
+ * @param {boolean} isCacheable
+ * @returns {Response}
+ */
+async function fetchAndCache(event, cache, isCacheable) {
+	// Use the preloaded response, if it's there
+	/** @type { Response } */
+	let response = await event.preloadResponse;
+	if (response == null) {
+		// Or, go over network.
+		response = await self.fetch(event.request);
+	}
+
+	if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+		response = ensureCrossOriginIsolationHeaders(response);
+	}
+
+	if (isCacheable) {
+		// And update the cache
+		cache.put(event.request, response.clone());
+	}
+
+	return response;
+}
+
+self.addEventListener(
+	'fetch',
+	/**
+	 * Triggered on fetch
+	 * @param {FetchEvent} event
+	 */
+	(event) => {
+		const isNavigate = event.request.mode === 'navigate';
+		const url = event.request.url || '';
+		const referrer = event.request.referrer || '';
+		const base = referrer.slice(0, referrer.lastIndexOf('/') + 1);
+		const local = url.startsWith(base) ? url.replace(base, '') : '';
+		const isCacheable = FULL_CACHE.some((v) => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
+		if (isNavigate || isCacheable) {
+			event.respondWith((async () => {
+				// Try to use cache first
+				const cache = await caches.open(CACHE_NAME);
+				if (isNavigate) {
+					// Check if we have full cache during HTML page request.
+					/** @type {Response[]} */
+					const fullCache = await Promise.all(FULL_CACHE.map((name) => cache.match(name)));
+					const missing = fullCache.some((v) => v === undefined);
+					if (missing) {
+						try {
+							// Try network if some cached file is missing (so we can display offline page in case).
+							const response = await fetchAndCache(event, cache, isCacheable);
+							return response;
+						} catch (e) {
+							// And return the hopefully always cached offline page in case of network failure.
+							console.error('Network error: ', e); // eslint-disable-line no-console
+							return caches.match(OFFLINE_URL);
+						}
+					}
+				}
+				let cached = await cache.match(event.request);
+				if (cached != null) {
+					if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+						cached = ensureCrossOriginIsolationHeaders(cached);
+					}
+					return cached;
+				}
+				// Try network if don't have it in cache.
+				const response = await fetchAndCache(event, cache, isCacheable);
+				return response;
+			})());
+		} else if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+			event.respondWith((async () => {
+				let response = await fetch(event.request);
+				response = ensureCrossOriginIsolationHeaders(response);
+				return response;
+			})());
+		}
+	}
+);
+
+self.addEventListener('message', (event) => {
+	// No cross origin
+	if (event.origin !== self.origin) {
+		return;
+	}
+	const id = event.source.id || '';
+	const msg = event.data || '';
+	// Ensure it's one of our clients.
+	self.clients.get(id).then(function (client) {
+		if (!client) {
+			return; // Not a valid client.
+		}
+		if (msg === 'claim') {
+			self.skipWaiting().then(() => self.clients.claim());
+		} else if (msg === 'clear') {
+			caches.delete(CACHE_NAME);
+		} else if (msg === 'update') {
+			self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then((all) => all.forEach((c) => c.navigate(c.url)));
+		}
+	});
+});
+