diff options
Diffstat (limited to '2026/index.html')
| -rw-r--r-- | 2026/index.html | 94 |
1 files changed, 72 insertions, 22 deletions
diff --git a/2026/index.html b/2026/index.html index ce28e45..f45326c 100644 --- a/2026/index.html +++ b/2026/index.html @@ -11,6 +11,9 @@ width: 100vw; height: 100vh; } + .jam-hidden { + visibility: hidden; + } #jam-iframe-parent { display: grid; grid-template-columns: 100%; @@ -28,10 +31,9 @@ padding: 0px; border: 0px; } - #jam-game-iframe { - } #jam-framing-iframe { z-index: 1; + pointer-events: none; } </style> </head> @@ -39,44 +41,92 @@ <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" width="240" height="160" src="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 iframe = document.getElementById("jam-game-iframe"); - iframe.addEventListener("load", () => { - iframe.contentDocument.body.style["overflow"] = "hidden"; - iframe.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); - let game = document.getElementById("jam-game-iframe"); - game.style["transform"] = `scale(${factor})`; - console.log(game.style.transform); - let framing = document.getElementById("jam-framing-iframe"); - framing.style["transform"] = `scale(${factor})`; - } - resizeView(); + let microgame_index = 0; + let microgames = [ + {url: "./examples/raylib/output/game.html", loaded: null}, + {url: "./examples/godot/output/game.html", loaded: null}, + ]; + let framing = document.getElementById("jam-framing-iframe"); + let iframes = [...Array(5).keys()].map(i => document.getElementById(`jam-game-iframe-${i}`)); window.addEventListener("resize", resizeView); + function loadGame(i) { + if (!microgames[i].loaded) { + for (let iframe of iframes) { + if (!iframe.src) { + iframe.src = microgames[i].url; + microgames[i].loaded = iframe; + } + } + } + } + function unloadGame(i) { + if (microgames[i].loaded) { + microgames[i].loaded.src = null; + microgaems[i].loaded = null; + } + } + 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) { + unloadGame(i) + } + for (let off = 0; off < to_load; ++off) { + let i = (microgame_index + off) % microgames.length; + loadGame(i) + } + } + function readyNextGame() { + 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; + } + readyNextGame(); window.addEventListener("message", ev => { console.log(ev.data); switch (ev.data.op) { case "ready": window.setTimeout(() => { const resp = {op: "start", difficulty: 1.0}; - iframe.contentWindow.postMessage(resp); - iframe.contentWindow.lcolonqJamStart = resp.difficulty; + game.contentWindow.postMessage(resp); + game.contentWindow.lcolonqJamStart = resp.difficulty; }, 1000); break; case "started": - iframe.contentWindow.focus(); + game.contentWindow.focus(); break; case "done": + if (!ev.data.win) { + framing.contentWindow.postMessage({op: "loselife"}); + } + readyNextGame(); 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> |