Spaces:

RSIGame
/

rsigame-page

Running

App Files Files Community

WenyiWU0111 commited on 25 days ago

Commit

1ac8436

verified ·

1 Parent(s): 71e7e75

First screen is the playable game

Browse files

Files changed (4) hide show

index.html +16 -16
play.html +10 -2
static/css/v1.css +26 -35
static/js/v1.js +43 -28

index.html CHANGED Viewed

@@ -24,12 +24,26 @@
   </div>
 </nav>
 <header class="hero" id="top">
   <div class="hero-bg" aria-hidden="true">
     <video id="hero-video" muted loop playsinline preload="auto" data-src="hero_evo.mp4" data-poster="hero_evo.webp"></video>
   </div>
-  <div class="hero-inner has-play">
-   <div class="hero-text">
     <p class="eyebrow">Agentic verification · Progressive development</p>
     <h1>EvoGame</h1>
     <p class="hero-sub">Self-Evolving Game Generation through Agentic Verification and Progressive Development</p>
@@ -40,20 +54,6 @@
       <a class="btn" href="#" aria-disabled="true">Code <small>soon</small></a>
       <a class="btn" href="#" aria-disabled="true">Dataset <small>soon</small></a>
     </div>
-   </div>
-    <section class="play-card" id="play" aria-labelledby="play-title" hidden>
-      <div class="play-top">
-        <span class="play-tag">Playable</span>
-        <b id="play-title"></b>
-        <span class="play-who" id="play-who"></span>
-      </div>
-      <div class="play-screen" id="play-screen"></div>
-      <div class="play-ctl">
-        <div class="seg" id="play-rounds" role="group" aria-label="Which build to play"></div>
-        <span class="play-keys" id="play-keys"></span>
-        <button class="btn btn-sm play-fs" id="play-fs" type="button" hidden>⛶ Fullscreen</button>
-      </div>
-    </section>
   </div>
 </header>

   </div>
 </nav>
+<section class="stage" id="stage" aria-label="Playable game" hidden>
+  <div class="stage-game" id="stage-game"></div>
+  <div class="stage-bar">
+    <div class="stage-about">
+      <b id="stage-title"></b>
+      <span id="stage-who"></span>
+    </div>
+    <div class="stage-mid">
+      <div class="seg" id="stage-rounds" role="group" aria-label="Which build to play"></div>
+      <span class="stage-keys" id="stage-keys"></span>
+    </div>
+    <a class="btn btn-primary stage-down" href="#top">Explore EvoGame ↓</a>
+  </div>
+</section>
 <header class="hero" id="top">
   <div class="hero-bg" aria-hidden="true">
     <video id="hero-video" muted loop playsinline preload="auto" data-src="hero_evo.mp4" data-poster="hero_evo.webp"></video>
   </div>
+  <div class="hero-inner">
     <p class="eyebrow">Agentic verification · Progressive development</p>
     <h1>EvoGame</h1>
     <p class="hero-sub">Self-Evolving Game Generation through Agentic Verification and Progressive Development</p>
       <a class="btn" href="#" aria-disabled="true">Code <small>soon</small></a>
       <a class="btn" href="#" aria-disabled="true">Dataset <small>soon</small></a>
     </div>
   </div>
 </header>

play.html CHANGED Viewed

@@ -12,7 +12,10 @@
 <style>
   html, body { margin: 0; height: 100%; background: #05060a; overflow: hidden; }
   #canvas { display: block; width: 100%; height: 100%; outline: none; }
-  #boot { position: absolute; inset: 0; display: grid; place-items: center; color: #b4bccd; font: 500 13px/1.5 ui-monospace, "JetBrains Mono", Menlo, monospace; text-align: center; padding: 16px; }
   #boot[hidden] { display: none; }
   #bar { width: min(320px, 70vw); height: 4px; margin: 10px auto 0; border-radius: 2px; background: #1c2130; overflow: hidden; }
   #bar i { display: block; height: 100%; width: 0; background: #c6f432; transition: width .15s; }
@@ -20,7 +23,7 @@
 </head>
 <body>
 <canvas id="canvas" tabindex="0">Your browser does not support the canvas element.</canvas>
-<div id="boot"><div><div id="msg">Loading engine…</div><div id="bar"><i></i></div></div></div>
 <script>
 (() => {
   const q = new URLSearchParams(location.search);
@@ -29,6 +32,9 @@
   const pckSize = +q.get("pck_size") || 0;
   const wasmGz = +q.get("wasm_gz") || 0;
   const msg = document.getElementById("msg"), bar = document.querySelector("#bar i");
   const mb = (n) => (n / 1048576).toFixed(1);
   const show = (text, frac) => { msg.textContent = text; if (frac != null) bar.style.width = `${Math.min(100, frac * 100)}%`; };
   const fail = (e) => { console.error(e); show(`Could not start the game: ${e && e.message ? e.message : e}`); };
@@ -88,6 +94,8 @@
   };
   document.head.append(script);
   addEventListener("pointerdown", () => document.getElementById("canvas").focus());
 })();
 </script>
 </body>

 <style>
   html, body { margin: 0; height: 100%; background: #05060a; overflow: hidden; }
   #canvas { display: block; width: 100%; height: 100%; outline: none; }
+  #boot { position: absolute; inset: 0; display: grid; place-items: center; color: #b4bccd; font: 500 13px/1.5 ui-monospace, "JetBrains Mono", Menlo, monospace; text-align: center; padding: 16px; background: #05060a center / cover no-repeat; }
+  #boot::before { content: ""; position: absolute; inset: 0; background: rgba(5, 6, 10, .6); backdrop-filter: blur(3px); }
+  #boot > div { position: relative; }
+  #boot h1 { margin: 0 0 6px; font: 700 clamp(22px, 4vw, 40px)/1.1 system-ui, sans-serif; color: #eef1f7; }
   #boot[hidden] { display: none; }
   #bar { width: min(320px, 70vw); height: 4px; margin: 10px auto 0; border-radius: 2px; background: #1c2130; overflow: hidden; }
   #bar i { display: block; height: 100%; width: 0; background: #c6f432; transition: width .15s; }
 </head>
 <body>
 <canvas id="canvas" tabindex="0">Your browser does not support the canvas element.</canvas>
+<div id="boot"><div><h1 id="boot-title"></h1><div id="msg">Loading engine…</div><div id="bar"><i></i></div></div></div>
 <script>
 (() => {
   const q = new URLSearchParams(location.search);
   const pckSize = +q.get("pck_size") || 0;
   const wasmGz = +q.get("wasm_gz") || 0;
   const msg = document.getElementById("msg"), bar = document.querySelector("#bar i");
+  document.getElementById("boot-title").textContent = q.get("title") || "";
+  if (/^(https?:|\/|\.)/.test(q.get("poster") || "") || /^[\w/.-]+$/.test(q.get("poster") || ""))
+    document.getElementById("boot").style.backgroundImage = `url("${encodeURI(q.get("poster"))}")`;
   const mb = (n) => (n / 1048576).toFixed(1);
   const show = (text, frac) => { msg.textContent = text; if (frac != null) bar.style.width = `${Math.min(100, frac * 100)}%`; };
   const fail = (e) => { console.error(e); show(`Could not start the game: ${e && e.message ? e.message : e}`); };
   };
   document.head.append(script);
   addEventListener("pointerdown", () => document.getElementById("canvas").focus());
+  // the game fills the embedding page's first screen: let the mouse wheel keep scrolling that page
+  if (parent !== window) addEventListener("wheel", (e) => { try { parent.scrollBy(0, e.deltaY); } catch { /* cross-origin parent */ } }, { passive: true, capture: true });
 })();
 </script>
 </body>

static/css/v1.css CHANGED Viewed

@@ -82,38 +82,29 @@
 .modal.simple .m-prompt, .modal.simple .m-h, .modal.simple #m-reqhint, .modal.simple #m-reqs, .modal.simple #m-evo { display: none; }
 @media (max-width: 760px) { .modal.simple .modal-info { grid-template-columns: 1fr; } .modal.simple .m-score { grid-column: 1; grid-row: auto; } }
-/* ---------- playable hero ---------- */
-.hero-inner.has-play { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1320px; width: 100%; text-align: left; }
-.has-play .hero-text { min-width: 0; }
-.has-play h1 { font-size: clamp(56px, 8vw, 112px); }
-.has-play .hero-sub { margin-inline: 0; }
-.has-play .hero-cta { justify-content: flex-start; }
-.play-card { background: rgba(10, 12, 18, .88); border: 1px solid var(--hover-border); border-radius: 18px; padding: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.55); backdrop-filter: blur(10px); display: grid; gap: 10px; min-width: 0; }
-.play-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 4px 0; }
-.play-top b { font: 700 17px var(--display); }
-.play-tag { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 3px 7px; border-radius: 5px; }
-.play-who { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
-.play-screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; overflow: hidden; background: var(--media-bg); }
-.play-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
-.play-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--media-bg); display: grid; place-items: center; color: var(--text); }
-.play-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: filter .2s, transform .4s; }
-.play-poster:hover img, .play-poster:focus-visible img { filter: brightness(.7); transform: scale(1.02); }
-.play-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
-.play-go { position: relative; display: grid; justify-items: center; gap: 10px; }
-.play-go i { width: 76px; height: 76px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(198,244,50,.18); transition: transform .2s; }
-.play-go i::before { content: ""; margin-left: 6px; border-left: 22px solid var(--accent-ink); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
-.play-poster:hover .play-go i { transform: scale(1.06); }
-.play-go b { font: 700 18px var(--display); text-shadow: 0 2px 12px rgba(0,0,0,.7); }
-.play-go span { font: 500 12px var(--mono); color: var(--text-2); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
-.play-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.play-ctl .seg button { display: inline-flex; gap: 8px; align-items: baseline; }
-.play-ctl .seg button b { font: 700 12px var(--mono); color: var(--muted); }
-.play-ctl .seg button.on b { color: var(--accent); }
-.play-keys { font: 500 12px var(--mono); color: var(--muted); }
-.play-fs { margin-left: auto; }
-@media (max-width: 1020px) {
-  .hero-inner.has-play { grid-template-columns: 1fr; text-align: center; max-width: 820px; }
-  .has-play .hero-sub { margin-inline: auto; }
-  .has-play .hero-cta { justify-content: center; }
-  .play-card { text-align: left; }
-}

 .modal.simple .m-prompt, .modal.simple .m-h, .modal.simple #m-reqhint, .modal.simple #m-reqs, .modal.simple #m-evo { display: none; }
 @media (max-width: 760px) { .modal.simple .modal-info { grid-template-columns: 1fr; } .modal.simple .m-score { grid-column: 1; grid-row: auto; } }
+/* ---------- the first screen is a game ---------- */
+.stage { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--media-bg); }
+.stage-game { position: relative; min-height: 0; overflow: hidden; }
+.stage-game iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
+.stage-cover { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
+.stage-cover img, .stage-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.stage-cover img { filter: brightness(.45) blur(2px); transform: scale(1.03); }
+.stage-cover > div { position: relative; display: grid; gap: 12px; justify-items: center; max-width: 560px; }
+.stage-cover h2 { font-size: clamp(28px, 5vw, 48px); text-wrap: balance; }
+.stage-cover p { margin: 0; color: var(--text-2); }
+.stage-wipe { position: absolute; inset: 0; border: 0; border-radius: 0; aspect-ratio: auto; }
+.stage-hint { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 2; pointer-events: none; font: 600 13px var(--mono); color: var(--accent-ink); background: var(--accent); padding: 6px 12px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: opacity .4s; white-space: nowrap; }
+.stage-hint.gone { opacity: 0; }
+.stage-bar { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 10px var(--gutter); background: var(--bg); border-top: 1px solid var(--border); }
+.stage-about { display: grid; gap: 1px; min-width: 0; }
+.stage-about b { font: 700 16px var(--display); }
+.stage-about span { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
+.stage-mid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-inline: auto; }
+.stage-mid .seg button { display: inline-flex; gap: 8px; align-items: baseline; }
+.stage-mid .seg button b { font: 700 12px var(--mono); color: var(--muted); }
+.stage-mid .seg button.on b { color: var(--accent); }
+.stage-keys { font: 500 12px var(--mono); color: var(--muted); }
+body.on-stage .nav { transform: translateY(-100%); }
+.nav { transition: transform .25s, border-color .2s, background .2s; }
+@media (max-width: 720px) { .stage-mid { margin-inline: 0; } .stage-down { margin-left: auto; } .stage-keys { display: none; } }
+.btn-reset { border: 0; padding: 24px; margin: 0; width: 100%; height: 100%; cursor: pointer; color: var(--text); font: inherit; background: none; }

static/js/v1.js CHANGED Viewed

@@ -12,41 +12,39 @@ Evo.boot(({ games, arms }) => {
   const hv = $("#hero-video");
   Evo.mountHeroVideo(hv, { src: hv.dataset.src, poster: hv.dataset.poster });
-  // ---------- playable hero: the real round-0 and round-30 builds, in the browser ----------
-  (async function playable() {
     const cfg = window.EVO_PLAY || await fetch(Evo.data("play.json")).then((r) => (r.ok ? r.json() : null)).catch(() => null);
     const game = cfg?.games?.[0];
     if (!game) return;
-    const screen = $("#play-screen"), rounds = $("#play-rounds"), fsBtn = $("#play-fs");
     const ROUNDS = [["r0", "Round 0"], ["r30", "Round 30"]];
     const label = (r) => ROUNDS.find(([k]) => k === r)[1];
-    let sel = "r30", running = false;
-    $("#play-title").textContent = game.title;
-    $("#play-who").replaceChildren(dot(game.model), `${game.model} · Godot 4`);
-    $("#play-keys").textContent = game.controls;
-    function idle() {
-      running = false;
-      fsBtn.hidden = true;
-      const mbs = Math.round((cfg.engine.wasm_gz + game.builds[sel].size) / 1048576);
-      const poster = h("button", { class: "play-poster", type: "button", "aria-label": `Play ${game.title}, ${label(sel)}` },
-        h("img", { src: Evo.media(`${game.pair}/${sel === "r0" ? "p0" : "final"}.webp`), alt: "" }),
-        h("span", { class: "play-go" }, h("i"), h("b", {}, `Play ${label(sel)} in your browser`), h("span", {}, `${mbs} MB download · keyboard`)));
-      poster.addEventListener("click", start);
-      screen.replaceChildren(poster);
-    }
-    function start() {
-      running = true;
-      Evo.pauseAll();
-      $("#hero-video").pause();
       const b = game.builds[sel];
       const src = "play.html?" + new URLSearchParams({
         engine: Evo.media(cfg.engine.base), wasm_gz: cfg.engine.wasm_gz, pck: Evo.media(b.pck), pck_size: b.size,
       });
-      const frame = h("iframe", { src, title: `${game.title}, ${label(sel)}`, allow: "autoplay; fullscreen; gamepad" });
       frame.addEventListener("load", () => frame.contentWindow?.focus());
-      screen.replaceChildren(frame);
-      fsBtn.hidden = false;
     }
     rounds.replaceChildren(...ROUNDS.map(([r, t]) => h("button", {
       type: "button", class: r === sel ? "on" : "", "data-r": r,
@@ -54,12 +52,29 @@ Evo.boot(({ games, arms }) => {
         if (sel === r) return;
         sel = r;
         rounds.querySelectorAll("button").forEach((x) => x.classList.toggle("on", x.dataset.r === r));
-        running ? start() : idle();
       },
     }, t, h("b", {}, s100(game.scores[r])))));
-    fsBtn.addEventListener("click", () => screen.querySelector("iframe")?.requestFullscreen?.());
-    idle();
-    $("#play").hidden = false;
   })();
   // ---------- headline: one row per generator ----------

   const hv = $("#hero-video");
   Evo.mountHeroVideo(hv, { src: hv.dataset.src, poster: hv.dataset.poster });
+  // ---------- first screen: a real game, already running ----------
+  (async function stage() {
     const cfg = window.EVO_PLAY || await fetch(Evo.data("play.json")).then((r) => (r.ok ? r.json() : null)).catch(() => null);
     const game = cfg?.games?.[0];
+    const el = $("#stage");
     if (!game) return;
+    const box = $("#stage-game"), rounds = $("#stage-rounds");
     const ROUNDS = [["r0", "Round 0"], ["r30", "Round 30"]];
     const label = (r) => ROUNDS.find(([k]) => k === r)[1];
+    const canPlay = matchMedia("(pointer: fine)").matches && !navigator.connection?.saveData;
+    let sel = "r30", frame = null;
+    $("#stage-title").textContent = canPlay ? `You're playing ${game.title}` : `${game.title}: round 0 → round 30`;
+    $("#stage-who").replaceChildren(dot(game.model), `made by ${game.model}, then improved over 30 EvoGame rounds`);
+    $("#stage-keys").textContent = canPlay ? game.controls : "";
+    function run() {
       const b = game.builds[sel];
       const src = "play.html?" + new URLSearchParams({
         engine: Evo.media(cfg.engine.base), wasm_gz: cfg.engine.wasm_gz, pck: Evo.media(b.pck), pck_size: b.size,
+        title: `${game.title} · ${label(sel)}`, poster: Evo.media(`${game.pair}/${sel === "r0" ? "p0" : "final"}.webp`),
       });
+      frame = h("iframe", { src, title: `${game.title}, ${label(sel)}`, allow: "autoplay; fullscreen; gamepad" });
+      const hint = h("div", { class: "stage-hint" }, `Live game · ${game.controls}`);
       frame.addEventListener("load", () => frame.contentWindow?.focus());
+      box.replaceChildren(frame, hint);
+      const dismiss = () => hint.classList.add("gone");
+      setTimeout(dismiss, 6000);
+      frame.addEventListener("load", () => frame.contentWindow?.addEventListener("keydown", dismiss, { once: true }));
+    }
+    function watch() {  // touch screens and data saver: the same two builds, replayed
+      const wipe = Evo.wipeFrame(game.pair, { alt: game.title, eager: true, cls: "wipe stage-wipe", after: "Round 30" });
+      box.replaceChildren(wipe);
+      Evo.observe(wipe);
     }
     rounds.replaceChildren(...ROUNDS.map(([r, t]) => h("button", {
       type: "button", class: r === sel ? "on" : "", "data-r": r,
         if (sel === r) return;
         sel = r;
         rounds.querySelectorAll("button").forEach((x) => x.classList.toggle("on", x.dataset.r === r));
+        if (canPlay) run();
       },
     }, t, h("b", {}, s100(game.scores[r])))));
+    if (!canPlay) rounds.hidden = true;
+    el.hidden = false;
+    canPlay ? run() : watch();
+    // hide the site nav while the game has the screen; free the game once it is far out of view
+    new IntersectionObserver(([e]) => {
+      document.body.classList.toggle("on-stage", e.intersectionRatio > 0.6);
+      if (e.intersectionRatio > 0.2) $("#hero-video").pause();
+    }, { threshold: [0, 0.2, 0.6, 1] }).observe(el);
+    new IntersectionObserver(([e]) => {
+      if (!canPlay) return;
+      if (!e.isIntersecting && frame) {
+        frame = null;
+        const again = h("button", { class: "stage-cover btn-reset", type: "button" },
+          h("img", { src: Evo.media(`${game.pair}/${sel === "r0" ? "p0" : "final"}.webp`), alt: "" }),
+          h("div", {}, h("h2", {}, `${game.title} is paused`), h("span", { class: "btn btn-primary" }, "Play again")));
+        again.addEventListener("click", run);
+        box.replaceChildren(again);
+      }
+    }, { rootMargin: "300px 0px" }).observe(el);
   })();
   // ---------- headline: one row per generator ----------