Space: Sprite tab uses the shared spriteScene render core + click/tap-to-move

The Sprite Animations tab now mounts the same framework-agnostic scene the React
app uses (auto-battler src/render/spriteScene.js, bundled to web/scene.js, Pixi
injected): directional walk, idle, one-shot actions, and NEW click/tap-to-move.
Character dropdown -> setCharacter; Attack/Hurt/Die buttons -> triggerAction;
desktop WASD gated so it never fights Gradio inputs. Adds build.sh to make the
engine/sheet/scene bundles reproducible.

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

app.py

@@ -21,7 +21,9 @@ 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"]]
-ANIMS = ["idle", "walk", "attack", "dmg", "die"]
+# 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")]
 
 # 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,
@@ -95,12 +97,14 @@ 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():
-                char = gr.Dropdown(CHARACTERS, value=CHARACTERS[0][1], label="Character")
-                anim = gr.Dropdown(ANIMS, value="idle", label="Animation")
+                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>')
-            char.change(None, [char, anim], None, js="(c,a)=>window.tinyShowSprite(c,a)")
-            anim.change(None, [char, anim], None, js="(c,a)=>window.tinyShowSprite(c,a)")
+            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)")
         # 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()")
@@ -110,8 +114,8 @@ 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)
-    # Render the initial sprite once the page (and the canvas) are up.
-    demo.load(None, [char, anim], None, js="(c,a)=>{window.tinyShowSprite&&window.tinyShowSprite(c,a)}")
+    # 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

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+# Bundle the shared, framework-agnostic JS modules from the auto-battler repo into
+# this Space's web/ dir. Pixi is INJECTED by the caller (web/tiny.js imports it
+# from a CDN and passes it in), so none of these modules import Pixi — nothing to
+# mark external. Run from the tiny-army dir with ../auto-battler alongside.
+#
+#   ./build.sh          # uses ../auto-battler
+#   AB=/path ./build.sh # override the source repo
+set -euo pipefail
+AB="${AB:-../auto-battler}"
+
+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
+
+echo "bundled web/{engine,sheet,scene}.js from $AB"

web/engine.js

@@ -1,4 +1,4 @@
-// src/engine/skills.js
+// ../auto-battler/src/engine/skills.js
 var FIRST_15 = [
   // ── Warrior: adrenaline-fuelled condition → spike (Swordsmanship line) ──
   {
@@ -705,7 +705,7 @@ var VARIANT_EXTRA = [
 ];
 var CB_SKILLS = [...FIRST_15, ...VARIANT_EXTRA];
 
-// src/engine/rng.js
+// ../auto-battler/src/engine/rng.js
 function makeRng(seed) {
   let a = seed >>> 0;
   return function rng() {
@@ -717,12 +717,12 @@ function makeRng(seed) {
   };
 }
 
-// src/engine/range.js
+// ../auto-battler/src/engine/range.js
 var MELEE_GW = 144;
 var BASIC_MELEE_GW = MELEE_GW / 2;
 var BOW_GW = 1e3;
 
-// src/engine/teamBattle.js
+// ../auto-battler/src/engine/teamBattle.js
 var byId = Object.fromEntries(CB_SKILLS.map((s) => [s.id, s]));
 var skillById = (id) => byId[id] || null;
 var FIELD = { w: 1e3, h: 600 };

web/scene.js

@@ -0,0 +1,463 @@
+// ../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);
+    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))));
+    if (!app) return;
+    const grids = {};
+    const idleIdx = sheets.findIndex((s) => s.gridKey === "idle");
+    const cell = cellOf(texs[idleIdx].source.height);
+    sheets.forEach((s, i) => {
+      texs[i].source.scaleMode = "nearest";
+      if (s.type === "proj") grids[s.gridKey] = sliceGrid(texs[i], Math.max(1, Math.round(texs[i].source.height / ROWS)));
+      else if (s.type === "imp") grids[s.gridKey] = sliceGrid(texs[i], Math.max(1, texs[i].source.height));
+      else grids[s.gridKey] = sliceGrid(texs[i], 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.destroy(true, { children: true });
+      }
+      sprite = shadow = overlay = frames = marker = null;
+      flying = [];
+    }
+  };
+}
+export {
+  SCENE_ACTIONS,
+  createSpriteScene,
+  diagRow,
+  orthoRow,
+  usesAimedAttack
+};

web/sheet.js

@@ -1,4 +1,4 @@
-// src/render/spriteSheet.js
+// ../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)) {

web/tiny.js

@@ -6,6 +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'
 
 function whenEl(id, cb) {
   const found = document.getElementById(id)
@@ -32,42 +33,51 @@ const loadSheet = async (url) => {
   const t = await PIXI.Assets.load(spriteUrl(url)); t.source.scaleMode = 'nearest'; return t
 }
 
-let spriteApp = null, battleApp = null, lastSprite = null
+let scene = null, battleApp = null, pendingChar = null
 window.tinyResize = () => {
   try { battleApp && battleApp.resize() } catch {}
-  try { spriteApp && spriteApp.resize() } catch {}
-  if (spriteApp && lastSprite) window.tinyShowSprite(...lastSprite)
+  // 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 {}
 }
 
-// ── Sprite Animations tab ────────────────────────────────────────────────────
-let pending = null
-window.tinyShowSprite = (slug, anim) => { pending = [slug, anim] }
+// ── 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) }
 
 whenEl('sprite-stage', async (el) => {
-  const app = new PIXI.Application()
-  await app.init({ background: 0x10151b, resizeTo: el, antialias: false })
-  el.appendChild(app.canvas)
-  spriteApp = app
-  let sprite = null
-  window.tinyShowSprite = async (slug, anim) => {
-    const map = await loadChars()
-    const c = map[slug]; if (!c) return
-    // Cell comes from the IDLE sheet and is used for ALL sheets — Death sheets are
-    // a single non-directional row, so slicing them by their own height/4 breaks
-    // them (the old bug). Same rule the auto-battler uses.
-    const idleTex = await loadSheet(c.idle)
-    const cell = cellOf(idleTex.source.height)
-    const tex = await loadSheet(c[anim] || c.idle)
-    const frames = rowFor(sliceGridWith(PIXI, tex, cell), 'front-right')
-    if (sprite) { app.stage.removeChild(sprite); sprite.destroy() }
-    sprite = new PIXI.AnimatedSprite(frames)
-    sprite.anchor.set(0.5, 0.92); sprite.loop = true; sprite.animationSpeed = (ANIM[anim] ?? 0.12)
-    sprite.scale.set(Math.max(2, Math.min(app.screen.width, app.screen.height) / cell * 0.6))
-    sprite.position.set(app.screen.width / 2, app.screen.height * 0.6)
-    app.stage.addChild(sprite); sprite.play()
-    lastSprite = [slug, anim]
+  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
   }
-  if (pending) window.tinyShowSprite(...pending)
+  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() } })
+  if (pendingChar) window.tinySetChar(pendingChar)
 })
 
 // ── Battle tab (real sprites, reusing the engine + shared renderer) ──────────