diff options
| author | LLLL Colonq <llll@colonq> | 2026-06-02 04:31:13 -0400 |
|---|---|---|
| committer | LLLL Colonq <llll@colonq> | 2026-06-02 04:31:13 -0400 |
| commit | 45e643d306e5fccfbf21fa75373a66275212cdb2 (patch) | |
| tree | 8c4593ca5adefd423e70a311220e63fdd7dfe6bd /2026/index.html | |
| parent | ab80e4583b53a7b424563cbd17ba2bf95e168cc9 (diff) | |
Multiple games loaded at once
Diffstat (limited to '2026/index.html')
| -rw-r--r-- | 2026/index.html | 81 |
1 files changed, 47 insertions, 34 deletions
diff --git a/2026/index.html b/2026/index.html index f45326c..14f629a 100644 --- a/2026/index.html +++ b/2026/index.html @@ -40,43 +40,63 @@ <body> <div id="jam-iframe-parent"> <iframe id="jam-framing-iframe" width="480" height="320" src="./framing/dist/index.html"></iframe> - <!-- <iframe id="jam-game-iframe" width="240" height="160" src="./examples/godot/output/game.html"></iframe> --> <iframe id="jam-game-iframe-0" class="jam-hidden" width="240" height="160"></iframe> <iframe id="jam-game-iframe-1" class="jam-hidden" width="240" height="160"></iframe> <iframe id="jam-game-iframe-2" class="jam-hidden" width="240" height="160"></iframe> <iframe id="jam-game-iframe-3" class="jam-hidden" width="240" height="160"></iframe> <iframe id="jam-game-iframe-4" class="jam-hidden" width="240" height="160"></iframe> - <!-- <iframe id="jam-game-iframe" width="240" height="160" src="game.html"></iframe> --> <div> <script type="module"> + let framing = document.getElementById("jam-framing-iframe"); let microgame_index = 0; let microgames = [ - {url: "./examples/raylib/output/game.html", loaded: null}, - {url: "./examples/godot/output/game.html", loaded: null}, + {url: "./examples/raylib/output/index.html", loaded: null, ready: false}, + {url: "./examples/godot/output/index.html", loaded: null, ready: false}, + {url: "./examples/js/index.html", loaded: null, ready: false}, ]; - let framing = document.getElementById("jam-framing-iframe"); let iframes = [...Array(5).keys()].map(i => document.getElementById(`jam-game-iframe-${i}`)); + function resizeView() { + let least_ratio = Math.min(Math.floor(window.innerWidth / 480), Math.floor(window.innerHeight / 320)); + let factor = Math.max(1, least_ratio); + for (let i of iframes) { + i.style["transform"] = `scale(${factor})`; + } + framing.style["transform"] = `scale(${factor})`; + } + resizeView(); window.addEventListener("resize", resizeView); + for (let i of iframes) { + i.addEventListener("load", () => { + i.contentDocument.body.style["overflow"] = "hidden"; + i.contentDocument.body.style["image-rendering"] = "pixelated"; + }); + } + function loadGame(i) { if (!microgames[i].loaded) { + console.log(`loading: ${i}`) for (let iframe of iframes) { - if (!iframe.src) { + if (iframe.src == "") { iframe.src = microgames[i].url; + console.log(`setting src ${iframe.src}`); microgames[i].loaded = iframe; + return; } } } } function unloadGame(i) { - if (microgames[i].loaded) { - microgames[i].loaded.src = null; - microgaems[i].loaded = null; + if (microgames[i] && microgames[i].loaded) { + console.log(`unloading: ${i}`) + microgames[i].loaded.src = ""; + microgames[i].loaded = null; + microgames[i].ready = false; } } function loadUpcomingGames() { let first = true; let to_load = Math.min(5, microgames.length); - for (let i = (microgame_index + to_load) % microgames.len; i != microgame_index; i = (i + 1) % microgames.length) { + for (let i = (microgame_index + to_load) % microgames.length; i != microgame_index; i = (i + 1) % microgames.length) { unloadGame(i) } for (let off = 0; off < to_load; ++off) { @@ -84,49 +104,42 @@ loadGame(i) } } - function readyNextGame() { + + function startNextGame() { loadUpcomingGames(); for (let i of iframes) { i.classList.add("jam-hidden"); } - microgames[microgame_index].loaded.classList.remove("jam-hidden"); microgame_index += 1; microgame_index %= microgames.length; + const resp = {op: "start", difficulty: 1.0}; + microgames[microgame_index].loaded.contentWindow.postMessage(resp); + microgames[microgame_index].loaded.contentWindow.lcolonqJamStart = resp.difficulty; + microgames[microgame_index].loaded.classList.remove("jam-hidden"); } - readyNextGame(); + + startNextGame(); + window.addEventListener("message", ev => { - console.log(ev.data); + console.log(`received message: ${ev.data.op}`); switch (ev.data.op) { case "ready": - window.setTimeout(() => { - const resp = {op: "start", difficulty: 1.0}; - game.contentWindow.postMessage(resp); - game.contentWindow.lcolonqJamStart = resp.difficulty; - }, 1000); + for (let mg of microgames) { + if (mg.loaded && ev.source.location.href === mg.loaded.src) { + mg.ready = true; + } + } break; case "started": - game.contentWindow.focus(); + microgames[microgame_index].loaded.contentWindow.focus(); break; case "done": if (!ev.data.win) { framing.contentWindow.postMessage({op: "loselife"}); } - readyNextGame(); + startNextGame(); break; default: console.log(`unknown event: ${ev}`); break; } }); - game.addEventListener("load", () => { - game.contentDocument.body.style["overflow"] = "hidden"; - game.contentDocument.body.style["image-rendering"] = "pixelated"; - }); - function resizeView() { - let least_ratio = Math.min(Math.floor(window.innerWidth / 480), Math.floor(window.innerHeight / 320)); - let factor = Math.max(1, least_ratio); - console.log(factor); - game.style["transform"] = `scale(${factor})`; - console.log(game.style.transform); - framing.style["transform"] = `scale(${factor})`; - } - resizeView(); </script> </body> </html> |