@vgai/editor 0.2.0

package/dist/ingest/simcity/vgai.game.json

@@ -0,0 +1,20 @@
+{
+  "manifestVersion": 1,
+  "name": "dgreenheck/simcity-threejs-clone (vendored bundle)",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "simcity",
+      "kind": "threejs",
+      "description": "REAL, UNMODIFIED single-player three.js game (dgreenheck/simcity-threejs-clone — vanilla three r0.155, no React) ingested at the zero-source-diff bar. See UPSTREAM.md. Mounted today via the dedicated simcity-proof.html capture harness, not the generic resolver (docs/CLI-ON-FOLDER-DESIGN.md §1H — a stretch goal, not this manifest's job).",
+      "adapter": {
+        "ingest": {
+          "strategy": "iframe-reachable"
+        }
+      }
+    }
+  ]
+}

package/dist/ingest/tanks/UPSTREAM.md

@@ -0,0 +1,69 @@
+# colyseus/realtime-tanks-demo (web-threejs client) — vendored bundle (scale ingest #3)
+
+A REAL, UNMODIFIED **server-authoritative multiplayer** three.js client ingested through
+the VGAI adapter primitives, at the zero-source-diff bar — captured as a single client
+against the upstream server run locally.
+
+## Upstream
+
+- Repo: https://github.com/colyseus/realtime-tanks-demo
+- Commit: **`6339493130b4b1d4d28f0f52d17b2fba738c7d47`**
+- Client: `web-threejs/` — **vanilla three.js r0.170** (== the editor's), Vite 6, `colyseus.js`
+- Server: `server/` — Colyseus 0.17 (`tsx src/index.ts`, port 2567)
+- License: **MIT** — see the upstream `LICENSE`.
+
+## Why a server is involved (and why it is still "unmodified")
+
+tanks is server-authoritative: the client's `start()` returns early if it cannot connect
+(`Game.ts` — `await this.network.connect()` in a try/catch that `return`s on failure), so
+nothing renders without the server. The objective is to load the UNMODIFIED game; for a
+server-authoritative game the reasonable single-client path is to run the UNMODIFIED upstream
+server locally and capture one client. Zero edits to the game's source.
+
+## Zero source diff (the bar) — reproducible, not asserted
+
+`scripts/verify-unmodified-ingest.sh tanks [--rebuild]`: clones the pinned upstream and
+sha256-checks the vendored FBX model + the client's own three module; `--rebuild` rebuilds
+the client bundle and byte-compares it (HARD pass/fail). `RESULT: PASS` (the rebuilt
+`tanks-entry.js` is byte-identical to the committed one).
+
+## Build (host-supplied — no game edits)
+
+Built by the client's OWN Vite (in `web-threejs/`) with one host-supplied externalization:
+
+```
+base: '/ingest/tanks/'
+external: (id) => id === 'three'
+output.paths: { three: '/ingest/tanks/three-r170.module.js' }
+```
+
+## Vendored files
+
+| File | What |
+|---|---|
+| `tanks-entry.js` | the built client bundle (artifact of the unmodified source) |
+| `three-r170.module.js` | the client's OWN three (r0.170, == the editor's) |
+| `models/pixelTank.fbx` | the tank model, upstream-verbatim |
+| `index.html` | upstream HUD DOM (the harness reuses it) |
+
+## How it is hosted (through the adapter)
+
+`/tanks-proof.html` + `/tanks-proof.ts` (served by the editor's own Vite): import the served
+r170 three, install the **engine `installSceneCapture`** trap + a URL modifier for the client's
+relative `./models/` path, then run the unmodified client (its `main.ts` self-runs
+`new Game(); game.start()`). It connects to the local Colyseus server, renders the arena +
+the player tank, and is authored through the editor `IngestAuthoringAdapter` (live recolor +
+move).
+
+**Live reproduction:** `scripts/run-tanks-proof.sh` stands up the upstream server; then open
+`/tanks-proof.html` on the editor dev server. Proven live (rev 170, ~118 meshes, live
+recolor `#22ddff` + move, recorded screenshot test-results, zero errors).
+
+### Note on the committed e2e
+
+Unlike the single-player games, a fully self-contained suite e2e would need to spawn the
+upstream Colyseus server (a multiplayer backend) inside the test. To avoid adding a
+server-spawn + network dependency to the editor e2e suite, the tanks proof is delivered as:
+the verify.sh byte-identical check (runnable) + the recorded live run + `run-tanks-proof.sh`
+(runnable). This is a documented infra scoping (the server dependency), not a soft narrowing
+of "does it load" — it loads and is edited through the adapter, recorded and reproducible.

package/dist/ingest/tanks/index.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Realtime Tanks Demo — Three.js</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      overflow: hidden; background: #111; font-family: 'Courier New', monospace;
+      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpolygon points='16,5 25.5,10.5 25.5,21.5 16,27 6.5,21.5 6.5,10.5' fill='none' stroke='black' stroke-width='3' opacity='0.3'/%3E%3Cpolygon points='16,5 25.5,10.5 25.5,21.5 16,27 6.5,21.5 6.5,10.5' fill='none' stroke='white' stroke-width='1.5' opacity='0.8'/%3E%3Ccircle cx='16' cy='16' r='2' fill='white' opacity='0.9'/%3E%3C/svg%3E") 16 16, crosshair;
+    }
+    canvas { display: block; }
+
+    #hud {
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      pointer-events: none; color: #fff;
+    }
+
+    #health-bar {
+      position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
+      width: 200px; height: 12px; background: #333; border: 1px solid #666;
+    }
+    #health-fill {
+      height: 100%; width: 100%; background: #4f4; transition: width 0.15s;
+    }
+    #shield-bar {
+      position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
+      width: 200px; height: 6px; background: #333; border: 1px solid #444;
+    }
+    #shield-fill {
+      height: 100%; width: 0%; background: #48f; transition: width 0.15s;
+    }
+
+    #scores {
+      position: absolute; top: 10px; right: 10px;
+      font-size: 13px; line-height: 1;
+      background: rgba(0, 0, 0, 0.5);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      padding: 8px 4px;
+      min-width: 140px;
+      backdrop-filter: blur(4px);
+    }
+    #scores-title {
+      font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
+      color: rgba(255, 255, 255, 0.4);
+      text-align: center; padding: 2px 0 6px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      margin-bottom: 4px;
+    }
+    #scores-list {
+      position: relative;
+    }
+    .team-score {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 5px 10px; margin: 2px 0; border-radius: 4px;
+      font-weight: bold; letter-spacing: 0.5px;
+      position: absolute; left: 0; right: 0;
+      transition: top 0.4s ease;
+    }
+    .team-score .team-name { opacity: 0.9; }
+    .team-score .team-pts {
+      font-size: 15px;
+      min-width: 24px; text-align: right;
+    }
+    .team-0 { color: #ff6666; background: rgba(255, 68, 68, 0.12); }
+    .team-1 { color: #66aaff; background: rgba(68, 136, 255, 0.12); }
+    .team-2 { color: #66ff66; background: rgba(68, 255, 68, 0.12); }
+    .team-3 { color: #ffff66; background: rgba(255, 255, 68, 0.12); }
+
+
+    #death-screen {
+      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+      font-size: 24px; color: #f44; display: none; text-align: center;
+    }
+
+    #winner-screen {
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      display: none; align-items: center; justify-content: center;
+      z-index: 10; overflow: hidden;
+    }
+    #winner-screen.ready, #winner-screen.exit { display: flex; }
+
+    /* Screen tint */
+    #winner-tint {
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    #winner-screen.active #winner-tint { opacity: 1; }
+    #winner-screen.exit #winner-tint {
+      opacity: 0;
+      transition: opacity 0.5s ease 0.2s;
+    }
+
+    /* Main stripe */
+    #winner-stripe {
+      position: absolute; left: -10%; width: 120%; height: 110px;
+      transform: rotate(-3deg) scaleX(0);
+      transform-origin: left center;
+      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    #winner-screen.active #winner-stripe {
+      transform: rotate(-3deg) scaleX(1);
+    }
+    #winner-screen.exit #winner-stripe {
+      transform: rotate(-3deg) scaleX(0);
+      transform-origin: right center;
+      transition: transform 0.35s cubic-bezier(0.55, 0, 1, 0.45) 0.15s;
+    }
+
+    /* Thin accent lines above and below */
+    #winner-line-top, #winner-line-bot {
+      position: absolute; left: -10%; width: 120%; height: 3px;
+      transform: rotate(-3deg) scaleX(0);
+      transform-origin: right center;
+      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
+    }
+    #winner-line-top { margin-top: -62px; }
+    #winner-line-bot { margin-top: 62px; }
+    #winner-screen.active #winner-line-top,
+    #winner-screen.active #winner-line-bot {
+      transform: rotate(-3deg) scaleX(1);
+    }
+    #winner-screen.exit #winner-line-top,
+    #winner-screen.exit #winner-line-bot {
+      transform: rotate(-3deg) scaleX(0);
+      transform-origin: left center;
+      transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45) 0.05s;
+    }
+
+    /* Text container */
+    #winner-banner {
+      position: relative; z-index: 1;
+      text-align: center;
+    }
+    #winner-label {
+      font-size: 80px; font-weight: bold;
+      text-transform: uppercase; letter-spacing: 10px;
+      text-shadow: 0 2px 30px rgba(0,0,0,0.7), 0 0 60px rgba(0,0,0,0.3);
+      opacity: 0;
+      transform: translateX(-80px) scale(1.1);
+      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
+                  opacity 0.3s ease 0.12s;
+    }
+    #winner-screen.active #winner-label {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+    #winner-screen.exit #winner-label {
+      opacity: 0;
+      transform: translateX(80px) scale(0.95);
+      transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45),
+                  opacity 0.2s ease;
+    }
+
+    #winner-team {
+      font-size: 18px; letter-spacing: 6px; text-transform: uppercase;
+      margin-top: 6px;
+      text-shadow: 0 1px 10px rgba(0,0,0,0.5);
+      opacity: 0;
+      transform: translateX(60px);
+      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.22s,
+                  opacity 0.3s ease 0.22s;
+    }
+    #winner-screen.active #winner-team {
+      opacity: 0.9;
+      transform: translateX(0);
+    }
+    #winner-screen.exit #winner-team {
+      opacity: 0;
+      transform: translateX(-60px);
+      transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45) 0.05s,
+                  opacity 0.2s ease 0.05s;
+    }
+
+    #ammo-display {
+      position: absolute; bottom: 65px; left: 50%; transform: translateX(-50%);
+      font-size: 12px; color: #f84;
+    }
+
+    #connect-status {
+      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+      font-size: 18px; color: #aaa;
+    }
+  </style>
+  <script type="module" crossorigin src="/ingest/tanks/tanks-entry.js"></script>
+</head>
+<body>
+  <div id="hud">
+    <div id="connect-status">Connecting...</div>
+
+    <div id="health-bar"><div id="health-fill"></div></div>
+    <div id="shield-bar"><div id="shield-fill"></div></div>
+    <div id="ammo-display"></div>
+    <div id="scores">
+      <div id="scores-title">Leaderboard</div>
+      <div id="scores-list"></div>
+    </div>
+    <div id="death-screen">DESTROYED<br><span style="font-size:14px;color:#aaa">Respawning...</span></div>
+    <div id="winner-screen">
+      <div id="winner-tint"></div>
+      <div id="winner-stripe"></div>
+      <div id="winner-line-top"></div>
+      <div id="winner-line-bot"></div>
+      <div id="winner-banner">
+        <div id="winner-label"></div>
+        <div id="winner-team"></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>