Space: render the FULL Sprite Animations chrome via shared playground

Replace the dropdown+buttons with the same spritePlayground.js + spriteScene.css the
React app uses: team-grouped character picker, on-canvas instructions, aimed-attack
compass, and the extras list with keypress hints — all from one source. app.py just
hosts the container; the playground builds everything. build.sh now bundles
playground.js and copies the chrome CSS too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app.py

@@ -18,12 +18,9 @@ from fastapi.staticfiles import StaticFiles
 HERE = os.path.dirname(os.path.abspath(__file__))
 WEB = os.path.join(HERE, "web")
 
-# Character dropdown choices from the (curated) manifest the frontend also reads.
-_manifest = json.load(open(os.path.join(WEB, "assets", "characters.json")))
-CHARACTERS = [(c["name"], c["slug"]) for p in _manifest["packs"] for c in p["characters"]]
-# One-shot action buttons on the Sprite tab → scene.triggerAction(state). No-op if
-# the character lacks that sheet, so a single static set is safe for every char.
-ACTIONS = [("Attack", "attack"), ("Hurt", "dmg"), ("Die", "die")]
+# The Sprite tab's character picker + controls are built entirely by the shared
+# playground (web/playground.js) from /sprites/characters.json — no Python-side
+# dropdown/buttons needed anymore.
 
 # NOTE: link sidebar.css here (head) rather than via mount's css_paths — Gradio
 # auto-scopes css_paths/css= selectors with a `.gradio-container .contain` prefix,
@@ -45,6 +42,7 @@ HIDE_TABS = ('<style>.tab-container[role="tablist"]{position:absolute!important;
 HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
         + HIDE_TABS +
         '<link rel="stylesheet" href="/web/shell/sidebar.css">'
+        '<link rel="stylesheet" href="/web/shell/spriteScene.css">'
         '<script type="module" src="/web/tiny.js"></script>'
         '<script src="/web/shell/sidebar.js"></script>')
 STAGE = "height:56vh;border:1px solid #20262e;border-radius:12px;overflow:hidden;background:#0b0e12"
@@ -104,14 +102,9 @@ with gr.Blocks(title="Tiny Army") as demo:
         with gr.Tab("Battle") as battle_tab:
             gr.HTML(f'<div id="battle-stage" style="{STAGE}"></div>')
         with gr.Tab("Sprite Animations") as sprite_tab:
-            char = gr.Dropdown(CHARACTERS, value=CHARACTERS[0][1], label="Character")
-            with gr.Row():
-                for _label, _state in ACTIONS:
-                    gr.Button(_label, size="sm").click(None, None, None, js=f"()=>window.tinyAction('{_state}')")
-            gr.HTML(f'<div id="sprite-stage" style="{STAGE.replace("56vh", "48vh")}"></div>')
-            gr.Markdown("*Tap / click the stage to walk there · **WASD** to move · "
-                        "buttons play one-shot actions.*")
-            char.change(None, [char], None, js="(c)=>window.tinySetChar(c)")
+            # The shared playground (web/playground.js) builds the whole page —
+            # team picker, canvas, instructions, compass, extras — into this div.
+            gr.HTML(f'<div id="sprite-stage" style="{STAGE.replace("56vh", "62vh")}"></div>')
         # Pixi canvases start hidden (0×0); re-measure them when a tab is shown.
         battle_tab.select(None, None, None, js="()=>window.tinyResize&&window.tinyResize()")
         sprite_tab.select(None, None, None, js="()=>window.tinyResize&&window.tinyResize()")
@@ -121,8 +114,6 @@ with gr.Blocks(title="Tiny Army") as demo:
                 traits = gr.Textbox("Cautious, Veteran, Vengeful", label="Traits")
             out = gr.Textbox(label="War diary", lines=6)
             gr.Button("Write diary", variant="primary").click(diary, [unit, traits], out)
-    # Load the initial character once the page (and the canvas) are up.
-    demo.load(None, [char], None, js="(c)=>{window.tinySetChar&&window.tinySetChar(c)}")
 
 # Mount Gradio on FastAPI so we can also serve the JS module + the sprite assets.
 fastapi_app = FastAPI()

build.sh

@@ -10,14 +10,16 @@ set -euo pipefail
 AB="${AB:-../auto-battler}"
 
 # 1. JS engine/render core → bundled (Pixi injected, so nothing external).
-npx --yes esbuild "$AB/src/engine/teamBattle.js"   --bundle --format=esm --outfile=web/engine.js
-npx --yes esbuild "$AB/src/render/spriteSheet.js"  --bundle --format=esm --outfile=web/sheet.js
-npx --yes esbuild "$AB/src/render/spriteScene.js"  --bundle --format=esm --outfile=web/scene.js
+npx --yes esbuild "$AB/src/engine/teamBattle.js"      --bundle --format=esm --outfile=web/engine.js
+npx --yes esbuild "$AB/src/render/spriteSheet.js"     --bundle --format=esm --outfile=web/sheet.js
+npx --yes esbuild "$AB/src/render/spriteScene.js"     --bundle --format=esm --outfile=web/scene.js
+npx --yes esbuild "$AB/src/render/spritePlayground.js" --bundle --format=esm --outfile=web/playground.js
 
-# 2. App shell (nav IR + sidebar CSS/JS) → copied verbatim, so it can't drift from
-#    the React app, which renders the SAME src/shell/nav.json.
+# 2. App shell (nav IR + sidebar CSS/JS) + the playground chrome CSS → copied
+#    verbatim, so they can't drift from the React app, which renders the same files.
 mkdir -p web/shell
 cp "$AB/src/shell/nav.json" "$AB/src/shell/sidebar.css" "$AB/src/shell/sidebar.js" web/shell/
+cp "$AB/src/render/spriteScene.css" web/shell/spriteScene.css
 
 # 3. Assets → curate the referenced sheets (shadows/extras/companions) for the
 #    curated characters from the full auto-battler set.

web/playground.js

@@ -0,0 +1,692 @@
+// ../auto-battler/src/render/spriteSheet.js
+var SHEET_ROWS = 4;
+var cellOf = (height) => Math.round(height / SHEET_ROWS);
+function sliceGridWith(pixi, texture, cell = cellOf(texture.source.height)) {
+  const { Texture, Rectangle } = pixi;
+  const src = texture.source;
+  const rows = Math.max(1, Math.round(src.height / cell));
+  const cols = Math.max(1, Math.round(src.width / cell));
+  return Array.from({ length: rows }, (_, r) => Array.from({ length: cols }, (_2, c) => new Texture({ source: src, frame: new Rectangle(c * cell, r * cell, cell, cell) })));
+}
+var ROW_FOR = { "front-right": 0, "front-left": 1, "back-right": 2, "back-left": 3 };
+var rowFor = (grid, facing) => grid[ROW_FOR[facing]] ?? grid[0];
+
+// ../auto-battler/src/render/spriteScene.js
+var SPEED = 3;
+var PROJ_SPEED = 5;
+var SCALE = 4;
+var ROWS = 4;
+var ARRIVE = SPEED;
+var ANIM_SPEED = { idle: 0.12, walk: 0.18, attack: 0.22, dmg: 0.2, die: 0.16, jump: 0.2 };
+var SCENE_ACTIONS = [
+  { state: "attack", code: "Space", label: "Space", verb: "attack" },
+  { state: "dmg", code: "KeyH", label: "H", verb: "hurt" },
+  { state: "die", code: "KeyK", label: "K", verb: "die" },
+  { state: "jump", code: "KeyJ", label: "J", verb: "jump" }
+];
+var STATE_KEYS = ["idle", "walk", ...SCENE_ACTIONS.map((a) => a.state), "attackDiagonal"];
+var orthoRow = (d) => d.x > 0 ? 0 : d.x < 0 ? 1 : d.y > 0 ? 2 : 3;
+var diagRow = (d) => d.y > 0 ? d.x > 0 ? 0 : 1 : d.x > 0 ? 2 : 3;
+var usesAimedAttack = (c) => c?.attackVerb === "shoot" || !!c?.attackOrtho;
+function createSpriteScene(pixi, host, opts = {}) {
+  const { Application, Assets, AnimatedSprite, Graphics } = pixi;
+  const urlFor = opts.urlFor || ((u) => u);
+  const anim = { ...ANIM_SPEED, ...opts.anim || {} };
+  const sliceGrid = (texture, cell) => sliceGridWith(pixi, texture, cell);
+  let app = null;
+  let sprite = null;
+  let shadow = null;
+  let overlay = null;
+  let frames = null;
+  let keys = { x: 0, y: 0 };
+  let moveTarget = null;
+  let action = null;
+  let pendingAction = null;
+  let dieHold = false;
+  let side = "right";
+  let depth = "front";
+  let dir = { x: 1, y: 1 };
+  let shoot = false;
+  let applied = "";
+  let extras = [];
+  let effectsOn = true;
+  let shadowsOn = true;
+  let flying = [];
+  let marker = null;
+  let markerLife = 0;
+  let currentKind = "idle";
+  let lastAimKey = "";
+  let changeCb = null;
+  let destroyed = false;
+  function snapshot() {
+    return {
+      kind: currentKind,
+      facing: `${depth}-${side}`,
+      aim: `${dir.x},${dir.y}`,
+      shoot,
+      moving: !!moveTarget || keys.x !== 0 || keys.y !== 0,
+      x: sprite ? sprite.x : null,
+      y: sprite ? sprite.y : null,
+      toggles: { effects: effectsOn, shadows: shadowsOn }
+    };
+  }
+  function emit() {
+    if (changeCb) changeCb(snapshot());
+  }
+  const ready = (async () => {
+    const a = new Application();
+    await a.init({ background: 15524556, antialias: false, resizeTo: host });
+    if (destroyed) {
+      a.destroy(true, { children: true });
+      return;
+    }
+    app = a;
+    app.canvas.setAttribute("data-testid", "pixi-canvas");
+    app.canvas.style.touchAction = "none";
+    app.canvas.addEventListener("pointerdown", onPointerDown);
+    app.canvas.addEventListener("click", onPointerDown);
+    host.appendChild(app.canvas);
+    app.ticker.add(tick);
+  })();
+  function onPointerDown(e) {
+    if (!app) return;
+    const rect = app.canvas.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    const x = (e.clientX - rect.left) / rect.width * app.screen.width;
+    const y = (e.clientY - rect.top) / rect.height * app.screen.height;
+    moveTo(x, y);
+  }
+  function moveTo(x, y) {
+    if (!app) return;
+    const tx = Math.max(0, Math.min(app.screen.width, x));
+    const ty = Math.max(0, Math.min(app.screen.height, y));
+    moveTarget = { x: tx, y: ty };
+    if (Graphics) {
+      if (!marker) {
+        marker = new Graphics();
+        app.stage.addChildAt(marker, 0);
+      }
+      marker.clear();
+      marker.circle(0, 0, 11).stroke({ color: 7035903, width: 2, alpha: 1 });
+      marker.position.set(tx, ty);
+      marker.alpha = 0.9;
+      markerLife = 30;
+    }
+  }
+  function tick(ticker) {
+    const s = sprite;
+    const f = frames;
+    if (!s || !f) return;
+    let vx = keys.x;
+    let vy = keys.y;
+    let usingTarget = false;
+    let seekDX = 0;
+    let seekDY = 0;
+    if (vx === 0 && vy === 0 && moveTarget) {
+      seekDX = moveTarget.x - s.x;
+      seekDY = moveTarget.y - s.y;
+      const d = Math.hypot(seekDX, seekDY);
+      if (d <= ARRIVE) {
+        s.x = moveTarget.x;
+        s.y = moveTarget.y;
+        moveTarget = null;
+      } else {
+        vx = seekDX;
+        vy = seekDY;
+        usingTarget = true;
+      }
+    }
+    const wantMove = vx !== 0 || vy !== 0;
+    if (pendingAction) {
+      const pend = pendingAction;
+      pendingAction = null;
+      if (f[pend] && (action === null || dieHold)) {
+        action = pend;
+        dieHold = false;
+        applied = "";
+      }
+    }
+    if (dieHold && wantMove) {
+      action = null;
+      dieHold = false;
+    }
+    const acting = action !== null;
+    if (!acting && wantMove) {
+      let sgx, sgy;
+      if (usingTarget) {
+        sgx = Math.abs(seekDX) > 4 ? Math.sign(seekDX) : 0;
+        sgy = Math.abs(seekDY) > 4 ? Math.sign(seekDY) : 0;
+      } else {
+        sgx = Math.sign(vx);
+        sgy = Math.sign(vy);
+      }
+      if (sgx > 0) side = "right";
+      else if (sgx < 0) side = "left";
+      if (sgy > 0) depth = "front";
+      else if (sgy < 0) depth = "back";
+      if (sgx || sgy) dir = { x: sgx, y: sgy };
+      const len = Math.hypot(vx, vy) || 1;
+      const step = SPEED * ticker.deltaTime;
+      s.x += vx / len * step;
+      s.y += vy / len * step;
+      const halfW = s.width / 2;
+      const halfH = s.height / 2;
+      s.x = Math.max(halfW, Math.min(app.screen.width - halfW, s.x));
+      s.y = Math.max(halfH, Math.min(app.screen.height - halfH, s.y));
+    }
+    const aimKey = `${dir.x},${dir.y}`;
+    if (aimKey !== lastAimKey) {
+      lastAimKey = aimKey;
+      emit();
+    }
+    if (shadow) {
+      shadow.x = s.x;
+      shadow.y = s.y;
+    }
+    if (overlay?.visible) {
+      overlay.x = s.x;
+      overlay.y = s.y;
+    }
+    if (marker && markerLife > 0) {
+      markerLife -= ticker.deltaTime;
+      const t = Math.max(0, markerLife / 30);
+      marker.alpha = t * 0.9;
+      marker.scale.set(1 + (1 - t) * 0.6);
+    }
+    for (let i = flying.length - 1; i >= 0; i--) {
+      const fl = flying[i];
+      fl.sprite.x += fl.dx * PROJ_SPEED * ticker.deltaTime;
+      fl.sprite.y += fl.dy * PROJ_SPEED * ticker.deltaTime;
+      if (!fl.impFired && fl.impGrid) {
+        const dist = Math.hypot(fl.sprite.x - fl.startX, fl.sprite.y - fl.startY);
+        if (dist > 150) {
+          fl.impFired = true;
+          const imp = new AnimatedSprite(fl.impGrid[0]);
+          imp.anchor.set(0.5);
+          imp.scale.set(SCALE);
+          imp.loop = false;
+          imp.animationSpeed = anim.attack;
+          imp.x = fl.sprite.x;
+          imp.y = fl.sprite.y;
+          imp.onComplete = () => {
+            if (imp.parent) imp.parent.removeChild(imp);
+            imp.destroy();
+          };
+          app.stage.addChild(imp);
+          imp.gotoAndPlay(0);
+        }
+      }
+      const os = fl.sprite.x < -128 || fl.sprite.x > app.screen.width + 128 || fl.sprite.y < -128 || fl.sprite.y > app.screen.height + 128;
+      if (os) {
+        if (fl.sprite.parent) fl.sprite.parent.removeChild(fl.sprite);
+        fl.sprite.destroy();
+        flying.splice(i, 1);
+      }
+    }
+    const kind = acting ? action : wantMove ? "walk" : "idle";
+    currentKind = kind;
+    let fr, key;
+    if (kind === "attack" && shoot) {
+      const d = dir;
+      const useDiag = d.x !== 0 && d.y !== 0 && !!f.attackDiagonal;
+      const grid = useDiag ? f.attackDiagonal : f.attack;
+      const row = useDiag ? diagRow(d) : orthoRow(d);
+      fr = grid[row] ?? grid[0];
+      key = `shoot:${useDiag ? "d" : "o"}${row}`;
+    } else {
+      const facing = `${depth}-${side}`;
+      fr = rowFor(f[kind], facing);
+      key = `${kind}:${facing}`;
+    }
+    if (key !== applied) {
+      applied = key;
+      const oneShot = kind !== "idle" && kind !== "walk";
+      s.textures = fr;
+      s.loop = !oneShot;
+      s.animationSpeed = anim[kind] ?? (oneShot ? anim.attack : anim.walk);
+      s.gotoAndPlay(0);
+      const actionKey = action ?? kind;
+      const facing = `${depth}-${side}`;
+      if (shadow) {
+        let shadGrid;
+        if (kind === "attack" && shoot) {
+          const d = dir;
+          const useDiag = d.x !== 0 && d.y !== 0 && !!f["shd:attackDiagonal"];
+          shadGrid = useDiag ? f["shd:attackDiagonal"] : f["shd:attack"];
+          if (shadGrid) {
+            const row = useDiag ? diagRow(d) : orthoRow(d);
+            shadow.textures = shadGrid[row] ?? shadGrid[0];
+          }
+        } else {
+          shadGrid = f["shd:" + actionKey];
+          if (shadGrid) shadow.textures = rowFor(shadGrid, facing);
+        }
+        if (shadGrid && shadowsOn) {
+          shadow.loop = s.loop;
+          shadow.animationSpeed = s.animationSpeed;
+          shadow.visible = true;
+          shadow.gotoAndPlay(0);
+        } else {
+          shadow.visible = false;
+        }
+      }
+      if (overlay) {
+        const effGrid = effectsOn && f["eff:" + actionKey];
+        if (effGrid && oneShot) {
+          overlay.textures = rowFor(effGrid, facing);
+          overlay.loop = false;
+          overlay.animationSpeed = s.animationSpeed;
+          overlay.x = s.x;
+          overlay.y = s.y;
+          overlay.visible = true;
+          overlay.gotoAndPlay(0);
+        } else {
+          overlay.visible = false;
+        }
+      }
+      if (oneShot && effectsOn) {
+        const projGrid = f["proj:" + actionKey];
+        if (projGrid) {
+          const d = dir;
+          const row = orthoRow(d);
+          const proj = new AnimatedSprite(projGrid[row] ?? projGrid[0]);
+          proj.anchor.set(0.5);
+          proj.scale.set(SCALE);
+          proj.loop = true;
+          proj.animationSpeed = anim.attack;
+          proj.x = s.x;
+          proj.y = s.y;
+          proj.gotoAndPlay(0);
+          app.stage.addChild(proj);
+          const len = Math.hypot(d.x, d.y) || 1;
+          flying.push({
+            sprite: proj,
+            dx: d.x / len,
+            dy: d.y / len,
+            startX: s.x,
+            startY: s.y,
+            impGrid: f["imp:" + actionKey] ?? null,
+            impFired: false
+          });
+        }
+      }
+    }
+  }
+  async function setCharacter(active) {
+    await ready;
+    if (!app || !active) return;
+    const sheets = [
+      ...STATE_KEYS.filter((k) => active[k]).map((k) => ({ gridKey: k, url: active[k], type: "body" })),
+      ...(active.extras ?? []).map((e) => ({ gridKey: "x:" + e.key, url: e.url, type: "body" })),
+      ...active.attackEffect ? [{ gridKey: "eff:attack", url: active.attackEffect, type: "eff" }] : [],
+      ...active.attackProjectile ? [{ gridKey: "proj:attack", url: active.attackProjectile, type: "proj" }] : [],
+      ...active.attackImpact ? [{ gridKey: "imp:attack", url: active.attackImpact, type: "imp" }] : [],
+      ...Object.entries(active.shadows ?? {}).map(([k, url]) => ({ gridKey: "shd:" + k, url, type: "body" })),
+      ...(active.extras ?? []).flatMap((e) => [
+        e.effect ? { gridKey: "eff:x:" + e.key, url: e.effect, type: "eff" } : null,
+        e.projectile ? { gridKey: "proj:x:" + e.key, url: e.projectile, type: "proj" } : null,
+        e.impact ? { gridKey: "imp:x:" + e.key, url: e.impact, type: "imp" } : null,
+        e.shadow ? { gridKey: "shd:x:" + e.key, url: e.shadow, type: "body" } : null
+      ].filter(Boolean))
+    ];
+    const texs = await Promise.all(sheets.map((s) => Assets.load(urlFor(s.url)).then((t) => t, () => null)));
+    if (!app) return;
+    const idleIdx = sheets.findIndex((s) => s.gridKey === "idle");
+    if (idleIdx < 0 || !texs[idleIdx]) return;
+    const grids = {};
+    const cell = cellOf(texs[idleIdx].source.height);
+    sheets.forEach((s, i) => {
+      const t = texs[i];
+      if (!t) return;
+      t.source.scaleMode = "nearest";
+      if (s.type === "proj") grids[s.gridKey] = sliceGrid(t, Math.max(1, Math.round(t.source.height / ROWS)));
+      else if (s.type === "imp") grids[s.gridKey] = sliceGrid(t, Math.max(1, t.source.height));
+      else grids[s.gridKey] = sliceGrid(t, cell);
+    });
+    frames = grids;
+    extras = active.extras ?? [];
+    shoot = usesAimedAttack(active);
+    action = null;
+    pendingAction = null;
+    dieHold = false;
+    applied = "";
+    lastAimKey = "";
+    const startFrames = rowFor(grids.idle, `${depth}-${side}`);
+    if (!sprite) {
+      const shd = new AnimatedSprite(startFrames);
+      shd.anchor.set(0.5);
+      shd.scale.set(SCALE);
+      shd.loop = true;
+      shd.visible = false;
+      shd.animationSpeed = anim.idle;
+      shd.x = app.screen.width / 2;
+      shd.y = app.screen.height / 2;
+      app.stage.addChild(shd);
+      shadow = shd;
+      const s = new AnimatedSprite(startFrames);
+      s.anchor.set(0.5);
+      s.scale.set(SCALE);
+      s.loop = true;
+      s.animationSpeed = anim.idle;
+      s.x = app.screen.width / 2;
+      s.y = app.screen.height / 2;
+      s.onComplete = () => {
+        if (action === "die") dieHold = true;
+        else action = null;
+      };
+      app.stage.addChild(s);
+      s.gotoAndPlay(0);
+      sprite = s;
+      const ov = new AnimatedSprite(startFrames);
+      ov.anchor.set(0.5);
+      ov.scale.set(SCALE);
+      ov.loop = false;
+      ov.visible = false;
+      ov.animationSpeed = anim.attack;
+      ov.onComplete = () => {
+        ov.visible = false;
+      };
+      app.stage.addChild(ov);
+      overlay = ov;
+    } else {
+      const s = sprite;
+      s.loop = true;
+      s.textures = startFrames;
+      s.animationSpeed = anim.idle;
+      s.gotoAndPlay(0);
+      if (shadow) shadow.visible = false;
+      if (overlay) overlay.visible = false;
+      for (const fl of flying) {
+        if (fl.sprite.parent) fl.sprite.parent.removeChild(fl.sprite);
+        fl.sprite.destroy();
+      }
+      flying = [];
+    }
+    emit();
+  }
+  function setVelocity(v) {
+    keys = { x: v?.x || 0, y: v?.y || 0 };
+    if (keys.x || keys.y) moveTarget = null;
+  }
+  function triggerAction(stateKey) {
+    if (stateKey) pendingAction = stateKey;
+  }
+  function setToggles(t) {
+    if (t && "effects" in t) effectsOn = !!t.effects;
+    if (t && "shadows" in t) {
+      shadowsOn = !!t.shadows;
+      if (shadow && !shadowsOn) shadow.visible = false;
+    }
+    emit();
+  }
+  return {
+    ready,
+    setCharacter,
+    setVelocity,
+    triggerAction,
+    moveTo,
+    setToggles,
+    getSnapshot: snapshot,
+    onChange: (cb) => {
+      changeCb = cb;
+    },
+    resize: () => {
+      if (app) app.resize();
+    },
+    // Re-place the character at the centre of the current canvas — used by hosts
+    // that mount the stage in a hidden/0-size tab and reveal it later (the Space).
+    recenter: () => {
+      if (!app || !sprite) return;
+      sprite.x = app.screen.width / 2;
+      sprite.y = app.screen.height / 2;
+      if (shadow) {
+        shadow.x = sprite.x;
+        shadow.y = sprite.y;
+      }
+      moveTarget = null;
+    },
+    destroy: () => {
+      destroyed = true;
+      const a = app;
+      app = null;
+      if (a) {
+        a.canvas.removeEventListener("pointerdown", onPointerDown);
+        a.canvas.removeEventListener("click", onPointerDown);
+        a.destroy(true, { children: true });
+      }
+      sprite = shadow = overlay = frames = marker = null;
+      flying = [];
+    }
+  };
+}
+
+// ../auto-battler/src/render/spritePlayground.js
+var COMPASS_CELLS = [
+  { dir: "-1,-1", glyph: "\u2196" },
+  { dir: "0,-1", glyph: "\u2191" },
+  { dir: "1,-1", glyph: "\u2197" },
+  { dir: "-1,0", glyph: "\u2190" },
+  { dir: "0,0", glyph: "\xB7" },
+  { dir: "1,0", glyph: "\u2192" },
+  { dir: "-1,1", glyph: "\u2199" },
+  { dir: "0,1", glyph: "\u2193" },
+  { dir: "1,1", glyph: "\u2198" }
+];
+var ACTION_BY_CODE = Object.fromEntries(SCENE_ACTIONS.map((a) => [a.code, a.state]));
+function el(tag, props = {}, kids = []) {
+  const n = document.createElement(tag);
+  for (const [k, v] of Object.entries(props)) {
+    if (k === "class") n.className = v;
+    else if (k === "html") n.innerHTML = v;
+    else if (k === "dataset") Object.assign(n.dataset, v);
+    else if (k.startsWith("on") && typeof v === "function") n.addEventListener(k.slice(2), v);
+    else if (v != null) n.setAttribute(k, v);
+  }
+  for (const kid of [].concat(kids)) if (kid != null) n.append(kid);
+  return n;
+}
+var flatList = (packs) => (packs ?? []).flatMap((p) => p.characters ?? []);
+function mountSpritePlayground(pixi, host, opts = {}) {
+  const packs = opts.packs ?? [];
+  const all = flatList(packs);
+  let active = all.find((c) => c.slug === opts.initialSlug) ?? all[0] ?? null;
+  let selIdx = 0;
+  const canvasEl = el("div", { class: "movement-canvas" });
+  const stage = el("div", { class: "movement-stage" }, [canvasEl]);
+  const charLinks = /* @__PURE__ */ new Map();
+  const picker = el("aside", { class: "movement-picker" }, [
+    el("h2", { class: "movement-picker-title" }, "Characters"),
+    ...packs.map((p) => {
+      const here = (p.characters ?? []).some((c) => c.slug === active?.slug);
+      const lis = (p.characters ?? []).map((c) => {
+        const a = el("a", {
+          class: "movement-char",
+          href: "#",
+          dataset: { slug: c.slug },
+          onclick: (e) => {
+            e.preventDefault();
+            setCharacter(c.slug);
+          }
+        }, c.name);
+        charLinks.set(c.slug, a);
+        return el("li", {}, a);
+      });
+      return el("details", { class: "movement-pack", ...here ? { open: "" } : {} }, [
+        el("summary", {}, p.name),
+        el("ul", {}, lis)
+      ]);
+    })
+  ]);
+  const view = el("div", { class: "movement-view" }, [picker, stage]);
+  host.appendChild(view);
+  const scene = createSpriteScene(pixi, canvasEl, { urlFor: opts.urlFor });
+  let compassEl = null;
+  let compassLabel = null;
+  scene.onChange((snap) => {
+    if (!compassEl) return;
+    for (const cell of compassEl.children) {
+      if (cell.dataset.dir != null) cell.classList.toggle("on", cell.dataset.dir === snap.aim);
+    }
+    const [x, y] = snap.aim.split(",").map(Number);
+    const diag = x !== 0 && y !== 0;
+    if (compassLabel) compassLabel.textContent = `${snap.aim}  ${diag ? "diag" : "ortho"} r${diag ? diagRow({ x, y }) : orthoRow({ x, y })}`;
+  });
+  function renderChrome() {
+    stage.querySelectorAll(".movement-hint,.movement-compass-wrap,.movement-extras").forEach((n) => n.remove());
+    compassEl = compassLabel = null;
+    if (!active) return;
+    if (usesAimedAttack(active)) {
+      compassEl = el(
+        "div",
+        { class: "movement-compass" },
+        COMPASS_CELLS.map((c) => el("span", { dataset: { dir: c.dir } }, c.glyph))
+      );
+      compassLabel = el("div", { class: "movement-compass-label" }, "1,1 diag r0");
+      stage.append(el("div", { class: "movement-compass-wrap", "aria-hidden": "true" }, [compassEl, compassLabel]));
+    }
+    const hint = el("div", { class: "movement-hint", "aria-hidden": "true" }, [
+      el("span", { class: "movement-key" }, "WASD"),
+      " move \xB7 ",
+      el("span", { class: "movement-key" }, "tap"),
+      " walk there"
+    ]);
+    if (active.shadows) hint.append(" \xB7 ", toggle("shadows", true, (on) => scene.setToggles({ shadows: on })));
+    if ((active.extras?.length ?? 0) > 0) hint.append(" \xB7 ", toggle("effects", true, (on) => scene.setToggles({ effects: on })));
+    for (const a of SCENE_ACTIONS) {
+      if (!active[a.state]) continue;
+      const verb = a.state === "attack" && active.attackVerb ? active.attackVerb : a.verb;
+      hint.append(" \xB7 ", el("span", { class: "movement-key" }, a.label), " " + verb);
+      if (a.state === "attack") {
+        for (const [f, t] of [["attackEffect", "e"], ["attackProjectile", "p"], ["attackImpact", "i"]])
+          if (active[f]) hint.append(el("span", { class: "movement-extra-tag" }, t));
+      }
+    }
+    stage.append(hint);
+    if ((active.extras?.length ?? 0) > 0) {
+      const list = el("ul", { class: "movement-extras-list" }, active.extras.map((ex, i) => {
+        const btn = el("button", {
+          type: "button",
+          class: "movement-extra" + (i === selIdx ? " active" : ""),
+          dataset: { i },
+          onclick: () => {
+            selectExtra(i);
+            scene.triggerAction("x:" + ex.key);
+          }
+        }, [
+          i < 9 ? el("span", { class: "movement-extra-num" }, String(i + 1)) : null,
+          ex.name,
+          ...["effect", "projectile", "impact"].filter((k) => ex[k]).map((k) => el("span", { class: "movement-extra-tag" }, k[0]))
+        ]);
+        return el("li", {}, btn);
+      }));
+      stage.append(el("div", { class: "movement-extras" }, [
+        el("div", { class: "movement-extras-hint", html: 'extra animations \xB7 <span class="movement-key">[</span> <span class="movement-key">]</span> cycle \xB7 <span class="movement-key">Enter</span> play \xB7 <span class="movement-key">1\u20139</span> quick' }),
+        list
+      ]));
+    }
+  }
+  function toggle(label, checked, onChange) {
+    const cb = el("input", { type: "checkbox", ...checked ? { checked: "" } : {} });
+    cb.addEventListener("change", () => onChange(cb.checked));
+    return el("label", { class: "movement-effects-toggle" }, [cb, " " + label]);
+  }
+  function selectExtra(i) {
+    selIdx = i;
+    stage.querySelectorAll(".movement-extra").forEach((b) => b.classList.toggle("active", +b.dataset.i === i));
+  }
+  function setCharacter(slug) {
+    const c = all.find((x) => x.slug === slug);
+    if (!c) return;
+    active = c;
+    selIdx = 0;
+    charLinks.forEach((a2, s) => a2.classList.toggle("active", s === slug));
+    const a = charLinks.get(slug);
+    const det = a && a.closest("details");
+    if (det) det.open = true;
+    scene.setCharacter(c);
+    renderChrome();
+  }
+  const held = { x: /* @__PURE__ */ new Set(), y: /* @__PURE__ */ new Set() };
+  const applyVel = () => scene.setVelocity({ x: held.x.has(1) - held.x.has(-1), y: held.y.has(1) - held.y.has(-1) });
+  const axis = (e) => {
+    const k = e.key.toLowerCase();
+    if (k === "a" || k === "arrowleft") return ["x", -1];
+    if (k === "d" || k === "arrowright") return ["x", 1];
+    if (k === "w" || k === "arrowup") return ["y", -1];
+    if (k === "s" || k === "arrowdown") return ["y", 1];
+    return null;
+  };
+  const blocked = () => {
+    const a = document.activeElement;
+    return a && (a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.tagName === "SELECT" || a.isContentEditable) || view.offsetParent === null;
+  };
+  const onKeyDown = (e) => {
+    if (blocked()) return;
+    const c = axis(e);
+    if (c) {
+      e.preventDefault();
+      held[c[0]].add(c[1]);
+      applyVel();
+      return;
+    }
+    const action = ACTION_BY_CODE[e.code];
+    if (action) {
+      e.preventDefault();
+      if (!e.repeat) scene.triggerAction(action);
+      return;
+    }
+    const ex = active?.extras ?? [];
+    if (!ex.length) return;
+    if (e.code === "BracketLeft") {
+      e.preventDefault();
+      selectExtra((selIdx - 1 + ex.length) % ex.length);
+      return;
+    }
+    if (e.code === "BracketRight") {
+      e.preventDefault();
+      selectExtra((selIdx + 1) % ex.length);
+      return;
+    }
+    if (e.code === "Enter") {
+      e.preventDefault();
+      if (!e.repeat) scene.triggerAction("x:" + ex[selIdx].key);
+      return;
+    }
+    const digit = e.code.match(/^Digit([1-9])$/);
+    if (digit) {
+      const i = +digit[1] - 1;
+      if (i < ex.length) {
+        e.preventDefault();
+        selectExtra(i);
+        scene.triggerAction("x:" + ex[i].key);
+      }
+    }
+  };
+  const onKeyUp = (e) => {
+    if (blocked()) return;
+    const c = axis(e);
+    if (c) {
+      held[c[0]].delete(c[1]);
+      applyVel();
+    }
+  };
+  window.addEventListener("keydown", onKeyDown);
+  window.addEventListener("keyup", onKeyUp);
+  renderChrome();
+  if (active) setCharacter(active.slug);
+  return {
+    setCharacter,
+    getSnapshot: () => scene.getSnapshot(),
+    resize: () => scene.resize(),
+    recenter: () => scene.recenter?.(),
+    destroy: () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      scene.destroy();
+      if (view.parentNode) view.parentNode.removeChild(view);
+    }
+  };
+}
+export {
+  mountSpritePlayground
+};

web/shell/spriteScene.css

@@ -0,0 +1,105 @@
+/* Shared chrome for the Sprite Animations playground — the team-grouped character
+ * picker, the on-canvas hint, the aimed-attack compass, and the extras list.
+ * ONE source for the React app (src/views/Movement.jsx) and the Gradio Space
+ * (tiny-army web/playground.js). It is fully self-contained: the palette is
+ * scoped on `.movement-view` (copied from the auto-battler theme) so it looks
+ * identical whether mounted in the app or inside Gradio, with no dependency on
+ * the host's theme vars or sidebar classes.
+ */
+.movement-view {
+  --mv-ink: #141821;
+  --mv-ink-muted: #6d6a5f;
+  --mv-ink-faint: #8a8574;
+  --mv-paper: #f3ebdc;
+  --mv-paper-2: #ece2cc;
+  --mv-card: #fbf6ea;
+  --mv-transmit: #d8271a;
+  --mv-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+  display: flex; height: 100%; width: 100%; box-sizing: border-box;
+  color: var(--mv-ink);
+}
+.movement-view * { box-sizing: border-box; }
+
+/* ── Team-grouped character picker ─────────────────────────────────────────── */
+.movement-picker {
+  width: 240px; flex-shrink: 0; border-right: 2px solid var(--mv-ink);
+  background: var(--mv-paper-2); overflow-y: auto; padding: 12px;
+}
+.movement-picker-title {
+  margin: 0 0 8px; font-family: var(--mv-mono); font-size: 11px; letter-spacing: .2em;
+  text-transform: uppercase; color: var(--mv-transmit);
+}
+.movement-pack { margin-top: 8px; border-top: 1px solid var(--mv-paper); }
+.movement-pack > summary {
+  cursor: pointer; list-style: none; padding: 6px 4px; font-family: var(--mv-mono);
+  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-ink-muted);
+}
+.movement-pack > summary::-webkit-details-marker { display: none; }
+.movement-pack > summary::before { content: '▸ '; color: var(--mv-ink-faint); }
+.movement-pack[open] > summary::before { content: '▾ '; }
+.movement-pack ul { list-style: none; margin: 0 0 6px; padding: 0; }
+.movement-char {
+  display: block; padding: 5px 10px; margin: 1px 0; border-radius: 4px;
+  color: var(--mv-ink); text-decoration: none; font-size: 13px; cursor: pointer;
+}
+.movement-char:hover { background: var(--mv-paper); }
+.movement-char.active { background: var(--mv-ink); color: var(--mv-card); }
+
+/* ── Stage + canvas ────────────────────────────────────────────────────────── */
+.movement-stage { flex: 1; min-width: 0; position: relative; }
+.movement-canvas { position: absolute; inset: 0; display: flex; }
+.movement-canvas canvas { display: block; width: 100%; height: 100%; }
+
+/* ── On-canvas hint (instructions + toggles) ───────────────────────────────── */
+.movement-hint {
+  position: absolute; bottom: 12px; left: 12px; z-index: 5; pointer-events: none;
+  font-family: var(--mv-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
+  color: var(--mv-ink); background: var(--mv-card); border: 1.5px solid var(--mv-ink);
+  padding: 4px 8px; box-shadow: 2px 2px 0 var(--mv-ink); max-width: calc(100% - 24px);
+}
+.movement-key {
+  font-family: var(--mv-mono); font-weight: 700; background: var(--mv-ink); color: var(--mv-card);
+  padding: 0 4px; border-radius: 2px;
+}
+.movement-effects-toggle { margin-left: 4px; cursor: pointer; opacity: .8; pointer-events: auto; }
+
+/* ── Aimed-attack debug compass ────────────────────────────────────────────── */
+.movement-compass-wrap {
+  position: absolute; top: 12px; left: 12px; z-index: 5; pointer-events: none;
+  display: flex; flex-direction: column; gap: 4px;
+  background: var(--mv-card); border: 1.5px solid var(--mv-ink); box-shadow: 2px 2px 0 var(--mv-ink); padding: 6px;
+}
+.movement-compass { display: grid; grid-template-columns: repeat(3, 18px); grid-template-rows: repeat(3, 18px); }
+.movement-compass span { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--mv-ink-faint); }
+.movement-compass span.on { color: var(--mv-card); background: var(--mv-ink); border-radius: 3px; }
+.movement-compass-label { font-family: var(--mv-mono); font-size: 9px; letter-spacing: .08em; color: var(--mv-ink-muted); text-align: center; }
+
+/* ── Extras list ───────────────────────────────────────────────────────────── */
+.movement-extras {
+  position: absolute; top: 12px; right: 12px; z-index: 5;
+  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
+  max-width: min(360px, 55%);
+  background: var(--mv-card); border: 1.5px solid var(--mv-ink); box-shadow: 2px 2px 0 var(--mv-ink); padding: 6px 8px;
+}
+.movement-extras-hint {
+  font-family: var(--mv-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-ink-muted);
+}
+.movement-extras-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
+.movement-extra {
+  font-family: var(--mv-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
+  color: var(--mv-ink); background: var(--mv-card); border: 1.5px solid var(--mv-ink); cursor: pointer;
+  padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px;
+}
+.movement-extra:hover { background: var(--mv-paper); }
+.movement-extra.active { color: var(--mv-card); background: var(--mv-ink); }
+.movement-extra-num { font-weight: 700; opacity: .55; }
+.movement-extra-tag { font-size: 7px; letter-spacing: .06em; padding: 0 2px; margin-left: 3px; border: 1px solid currentColor; opacity: .6; vertical-align: middle; }
+
+/* ── Mobile: stack the picker above the stage ──────────────────────────────── */
+@media (max-width: 768px) {
+  .movement-view { flex-direction: column; }
+  .movement-picker {
+    width: 100%; max-height: 32%; border-right: 0; border-bottom: 2px solid var(--mv-ink);
+  }
+  .movement-extras { max-width: 60%; }
+}

web/tiny.js

@@ -6,7 +6,7 @@
 import * as PIXI from 'https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.mjs'
 import { makeTeamBattle, step, FIELD } from '/web/engine.js'
 import { sliceGridWith, cellOf, rowFor, facingFor, ANIM } from '/web/sheet.js'
-import { createSpriteScene } from '/web/scene.js'
+import { mountSpritePlayground } from '/web/playground.js'
 
 function whenEl(id, cb) {
   const found = document.getElementById(id)
@@ -33,56 +33,23 @@ const loadSheet = async (url) => {
   const t = await PIXI.Assets.load(spriteUrl(url)); t.source.scaleMode = 'nearest'; return t
 }
 
-let scene = null, battleApp = null, pendingChar = null
+let playground = null, battleApp = null
 window.tinyResize = () => {
   try { battleApp && battleApp.resize() } catch {}
   // Re-fit + re-centre: the sprite stage mounts in a hidden (0-size) tab, so the
   // character must be re-placed once the tab is actually shown.
-  try { if (scene) { scene.resize(); scene.recenter() } } catch {}
+  try { if (playground) { playground.resize(); playground.recenter() } } catch {}
 }
+window.tinySnap = () => (playground ? playground.getSnapshot() : null) // read-only debug accessor
 
-// ── Sprite Animations tab — shared render core ───────────────────────────────
-// The framework-agnostic scene (auto-battler src/render/spriteScene.js → /web/
-// scene.js, Pixi injected) drives the SAME canvas the React app uses: directional
-// walk, idle, one-shot actions, and click/tap-to-move. The Gradio chrome only
-// switches characters (dropdown) and fires actions (buttons) through it.
-window.tinySetChar = async (slug) => {
-  pendingChar = slug
-  if (!scene) return
-  const c = (await loadChars())[slug]
-  if (c) scene.setCharacter(c)
-}
-// Back-compat: app.py's load hook may still call tinyShowSprite — treat as char.
-window.tinyShowSprite = (slug) => window.tinySetChar(slug)
-window.tinyAction = (state) => { if (scene) scene.triggerAction(state) }
-window.tinySnap = () => (scene ? scene.getSnapshot() : null) // read-only debug accessor
-
+// ── Sprite Animations tab — shared playground ────────────────────────────────
+// The SAME module the React app uses (auto-battler src/render/spritePlayground.js
+// → /web/playground.js, Pixi injected) builds the entire page: team-grouped
+// character picker, stage, canvas, instructions, aimed-attack compass and extras
+// list — and the shared render core. styled by /web/shell/spriteScene.css.
 whenEl('sprite-stage', async (el) => {
-  scene = createSpriteScene(PIXI, el, { urlFor: spriteUrl })
-  await scene.ready
-  // Desktop keyboard (WASD/arrows). Ignored while a form field is focused or the
-  // stage is hidden, so it never fights Gradio's own inputs on other tabs.
-  const held = { x: new Set(), y: new Set() }
-  const apply = () => scene.setVelocity({ x: held.x.has(1) - held.x.has(-1), y: held.y.has(1) - held.y.has(-1) })
-  const axis = (e) => {
-    const k = e.key.toLowerCase()
-    if (k === 'a' || k === 'arrowleft') return ['x', -1]
-    if (k === 'd' || k === 'arrowright') return ['x', 1]
-    if (k === 'w' || k === 'arrowup') return ['y', -1]
-    if (k === 's' || k === 'arrowdown') return ['y', 1]
-    return null
-  }
-  const blocked = () => {
-    const a = document.activeElement
-    return (a && (a.tagName === 'INPUT' || a.tagName === 'TEXTAREA' || a.tagName === 'SELECT' || a.isContentEditable)) || el.offsetParent === null
-  }
-  window.addEventListener('keydown', (e) => { if (blocked()) return; const c = axis(e); if (c) { e.preventDefault(); held[c[0]].add(c[1]); apply() } })
-  window.addEventListener('keyup', (e) => { const c = axis(e); if (c) { held[c[0]].delete(c[1]); apply() } })
-  // Always load a character on mount. demo.load's js can run before this module
-  // finishes (tinySetChar still undefined → pendingChar unset), so fall back to
-  // the first manifest character rather than leaving the stage empty.
-  const map = await loadChars()
-  window.tinySetChar(pendingChar || Object.keys(map)[0])
+  const man = await fetch('/sprites/characters.json').then((r) => r.json())
+  playground = mountSpritePlayground(PIXI, el, { packs: man.packs || [], urlFor: spriteUrl })
 })
 
 // ── Battle tab (real sprites, reusing the engine + shared renderer) ──────────