Battle tab: real sprites (shared slicer/facing/anim); fix die animation (idle-cell)

Die/Death sheets are a single non-directional row — slice them with the idle-
derived cell (not their own height/4). Battle units now render as animated
sprites with facing + walk/idle/die, reusing src/render/spriteSheet.js.

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

web/sheet.js

@@ -12,9 +12,17 @@ var rowFramesWith = (pixi, texture, row = 0) => {
   const g = sliceGridWith(pixi, texture);
   return g[row] ?? g[0];
 };
+var ANIM = { idle: 0.12, walk: 0.18, attack: 0.3, dmg: 0.25, die: 0.28 };
+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];
+var facingFor = (faceX, faceY) => (faceY < 0 ? "back" : "front") + "-" + (faceX < 0 ? "left" : "right");
 export {
+  ANIM,
+  ROW_FOR,
   SHEET_ROWS,
   cellOf,
+  facingFor,
+  rowFor,
   rowFramesWith,
   sliceGridWith
 };

web/tiny.js

@@ -1,14 +1,12 @@
 // Tiny Army — head module for the Gradio app. Renders Pixi into the gr.HTML
-// canvas divs that gr.Blocks puts on the page (#battle-stage, #sprite-stage).
-// Gradio's gr.Dropdown/gr.Tabs drive it via `js=` handlers that call the globals
-// exposed here — so the UI chrome is 100% Gradio, the rendering is Pixi.
+// canvas divs (#battle-stage, #sprite-stage). The slicing + facing/anim
+// convention come from the SAME shared source as the auto-battler
+// (src/render/spriteSheet.js → /web/sheet.js). Pixi is injected (CDN) so there's
+// one Pixi instance.
 import * as PIXI from 'https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.mjs'
 import { makeTeamBattle, step, FIELD } from '/web/engine.js'
-// Shared sprite-sheet slicer — ONE source with the auto-battler
-// (src/render/spriteSheet.js, esbuilt to /web/sheet.js).
-import { sliceGridWith, cellOf } from '/web/sheet.js'
+import { sliceGridWith, cellOf, rowFor, facingFor, ANIM } from '/web/sheet.js'
 
-// Run cb when an element with `id` appears (Gradio renders after our head runs).
 function whenEl(id, cb) {
   const found = document.getElementById(id)
   if (found && !found.dataset.tmounted) { found.dataset.tmounted = '1'; cb(found); return }
@@ -19,22 +17,10 @@ function whenEl(id, cb) {
   o.observe(document.body, { childList: true, subtree: true })
 }
 
-// Pixi apps live in tabs that start hidden (0×0); Gradio fires a tab `select`
-// event wired to window.tinyResize so the canvas re-measures when shown.
-let spriteApp = null, battleApp = null, lastSprite = null
-window.tinyResize = () => {
-  try { battleApp && battleApp.resize() } catch {}
-  try { spriteApp && spriteApp.resize() } catch {}
-  // Re-render the sprite at the now-correct canvas size (it may have been first
-  // drawn while its tab was hidden at 0×0).
-  if (spriteApp && lastSprite) window.tinyShowSprite(...lastSprite)
-}
-
-// ── Sprite Animations tab ────────────────────────────────────────────────────
-let charMap = null
-// Sprite assets are served at /sprites (not /assets — that's Gradio's bundle).
-// The manifest paths are authored as /assets/… so rewrite the prefix.
+// Character manifest (slug → sheet URLs). Sheets are served at /sprites (not
+// /assets — that's Gradio's bundle); the manifest paths are authored as /assets/…
 const spriteUrl = (u) => (u || '').replace('/assets/', '/sprites/')
+let charMap = null
 async function loadChars() {
   if (charMap) return charMap
   const d = await fetch('/sprites/characters.json').then((r) => r.json())
@@ -42,8 +28,18 @@ async function loadChars() {
   for (const p of d.packs || []) for (const c of p.characters || []) charMap[c.slug] = c
   return charMap
 }
-// Stub until the canvas mounts; remembers the last request so the initial
-// gr load() event isn't lost to a race.
+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
+window.tinyResize = () => {
+  try { battleApp && battleApp.resize() } catch {}
+  try { spriteApp && spriteApp.resize() } catch {}
+  if (spriteApp && lastSprite) window.tinyShowSprite(...lastSprite)
+}
+
+// ── Sprite Animations tab ────────────────────────────────────────────────────
 let pending = null
 window.tinyShowSprite = (slug, anim) => { pending = [slug, anim] }
 
@@ -56,14 +52,17 @@ whenEl('sprite-stage', async (el) => {
   window.tinyShowSprite = async (slug, anim) => {
     const map = await loadChars()
     const c = map[slug]; if (!c) return
-    const url = spriteUrl(c[anim] || c.idle); if (!url) return
-    const tex = await PIXI.Assets.load(url); tex.source.scaleMode = 'nearest'
-    const frames = sliceGridWith(PIXI, tex)[0]               // shared slicer, row 0 (front-right)
+    // 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 = 0.12
-    const sc = Math.max(2, Math.min(app.screen.width, app.screen.height) / cellOf(tex.source.height) * 0.6)
-    sprite.scale.set(sc)
+    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]
@@ -71,40 +70,86 @@ whenEl('sprite-stage', async (el) => {
   if (pending) window.tinyShowSprite(...pending)
 })
 
-// ── Battle tab (reuses the deterministic engine) ─────────────────────────────
+// ── Battle tab (real sprites, reusing the engine + shared renderer) ──────────
 const PLAYERS = [
-  { profession: 'Warrior', name: 'Bram', skills: [] }, { profession: 'Ranger', name: 'Sela', skills: [] },
-  { profession: 'Monk', name: 'Oda', skills: [] }, { profession: 'Assassin', name: 'Vex', skills: [] },
+  { profession: 'Warrior', name: 'Bram', skills: [], slug: 'true-heroes-iii-fighter' },
+  { profession: 'Ranger', name: 'Sela', skills: [], slug: 'true-heroes-iii-ranger' },
+  { profession: 'Monk', name: 'Oda', skills: [], slug: 'true-heroes-ii-cleric' },
+  { profession: 'Assassin', name: 'Vex', skills: [], slug: 'true-heroes-iv-ninja-assassin' },
 ]
 const ENEMIES = [
-  { name: 'Orc Reaver', stats: { hp: 340, armor: 30, basicDamage: 16 }, attackType: 'melee', skills: [] },
-  { name: 'Orc Reaver', stats: { hp: 340, armor: 30, basicDamage: 16 }, attackType: 'melee', skills: [] },
-  { name: 'Bog Shaman', stats: { hp: 280, armor: 30, basicDamage: 12 }, attackType: 'ranged', skills: [] },
-  { name: 'Dire Wolf', stats: { hp: 240, armor: 20, basicDamage: 14 }, attackType: 'melee', skills: [] },
+  { name: 'Reaver', stats: { hp: 340, armor: 30, basicDamage: 16 }, attackType: 'melee', skills: [], slug: 'dark-brotherhood-devoted-blade' },
+  { name: 'Acolyte', stats: { hp: 300, armor: 30, basicDamage: 14 }, attackType: 'melee', skills: [], slug: 'dark-brotherhood-acolyte' },
+  { name: 'Blood Mage', stats: { hp: 280, armor: 30, basicDamage: 12 }, attackType: 'ranged', skills: [], slug: 'true-heroes-iv-blood-mage' },
+  { name: 'Knight', stats: { hp: 360, armor: 40, basicDamage: 14 }, attackType: 'melee', skills: [], slug: 'rts-humans-knight' },
 ]
+
+async function loadUnitSheets(slug) {
+  const c = (await loadChars())[slug]; if (!c) return null
+  const idle = await loadSheet(c.idle)
+  const cell = cellOf(idle.source.height)
+  const grid = async (u) => (u ? sliceGridWith(PIXI, await loadSheet(u), cell) : null)
+  return { cell, idle: sliceGridWith(PIXI, idle, cell), walk: await grid(c.walk), die: await grid(c.die) }
+}
+
 whenEl('battle-stage', async (el) => {
   const app = new PIXI.Application()
-  await app.init({ background: 0x0b0e12, resizeTo: el, antialias: true })
+  await app.init({ background: 0x0b0e12, resizeTo: el, antialias: false })
   el.appendChild(app.canvas)
   battleApp = app
-  const g = new PIXI.Graphics(); app.stage.addChild(g)
+  const slugById = {}
+  PLAYERS.forEach((p, i) => { slugById['P' + i] = p.slug })
+  ENEMIES.forEach((e, i) => { slugById['E' + i] = e.slug })
+  const sheets = {}
+  for (const s of new Set(Object.values(slugById))) sheets[s] = await loadUnitSheets(s)
+  const layer = new PIXI.Container(); layer.sortableChildren = true
+  const bars = new PIXI.Graphics()
+  app.stage.addChild(layer, bars)
+  const view = {}
   let battle, seed = 1, overAt = 0
-  const fresh = () => { battle = makeTeamBattle({ seed: seed++, players: PLAYERS, enemies: ENEMIES }); overAt = 0 }
+  function fresh() {
+    battle = makeTeamBattle({ seed: seed++, players: PLAYERS, enemies: ENEMIES }); overAt = 0
+    for (const id in view) { const v = view[id]; v.dead = false; v.state = null; v.facing = null; v.sp.onComplete = null; v.sp.alpha = 1 }
+  }
+  function ensureView(a) {
+    if (view[a.id]) return view[a.id]
+    const sh = sheets[slugById[a.id]]
+    const sp = new PIXI.AnimatedSprite(sh ? rowFor(sh.idle, 'front-right') : [PIXI.Texture.WHITE])
+    sp.anchor.set(0.5, 0.9); sp.animationSpeed = ANIM.idle; sp.play(); layer.addChild(sp)
+    return (view[a.id] = { sp, sh, state: null, facing: null, dead: false })
+  }
   fresh()
   app.ticker.add(() => {
     const W = app.screen.width, H = app.screen.height, sx = W / FIELD.w, sy = H / FIELD.h
     if (!battle.over) { for (let i = 0; i < 3; i++) if (!battle.over) step(battle, 0.05) }
     else if (!overAt) overAt = performance.now()
-    if (overAt && performance.now() - overAt > 2500) fresh()
-    g.clear(); g.rect(0, 0, W, H).fill(0x10151b)
+    if (overAt && performance.now() - overAt > 3000) fresh()
+    bars.clear()
+    const base = Math.min(Math.max(W / 190, 1.6), 3)
     for (const a of battle.actors) {
-      const cx = a.x * sx, cy = a.y * sy, r = Math.max(6, (a.radius || 24) * sx)
-      const col = a.team === 'player' ? 0x4ad6ff : 0xff5a4a
-      if (!a.alive) { g.circle(cx, cy, r).fill({ color: col, alpha: 0.1 }); continue }
-      g.circle(cx, cy, r).fill({ color: col, alpha: 0.85 }).stroke({ color: 0xffffff, width: 1, alpha: 0.5 })
+      const v = ensureView(a); if (!v.sh) continue
+      const cx = a.x * sx, cy = a.y * sy
+      const depth = base * (0.85 + 0.4 * (a.y / FIELD.h))
+      v.sp.position.set(cx, cy); v.sp.zIndex = a.y; v.sp.scale.set(depth)
+      const facing = facingFor(a.faceX, a.faceY)
+      if (!a.alive) {
+        if (!v.dead) {
+          v.dead = true; const f = rowFor(v.sh.die || v.sh.idle, facing)
+          v.sp.loop = false; v.sp.textures = f; v.sp.animationSpeed = ANIM.die * 0.75; v.sp.alpha = 0.92
+          v.sp.onComplete = () => v.sp.gotoAndStop(f.length - 1); v.sp.gotoAndPlay(0)
+        }
+        continue
+      }
+      const mode = a.moving ? 'walk' : 'idle'
+      if (v.state !== mode || v.facing !== facing) {
+        v.state = mode; v.facing = facing
+        v.sp.loop = true; v.sp.textures = rowFor(v.sh[mode] || v.sh.idle, facing)
+        v.sp.animationSpeed = ANIM[mode]; v.sp.play()
+      }
+      const r = v.sh.cell * depth * 0.45, top = cy - v.sh.cell * depth - 4
       const hp = Math.max(0, a.hp) / a.maxHp
-      g.rect(cx - r, cy - r - 8, r * 2, 4).fill({ color: 0x000000, alpha: 0.6 })
-      g.rect(cx - r, cy - r - 8, r * 2 * hp, 4).fill(hp > 0.35 ? 0x6ee36e : 0xe36e6e)
+      bars.rect(cx - r, top, r * 2, 4).fill({ color: 0x000000, alpha: 0.6 })
+      bars.rect(cx - r, top, r * 2 * hp, 4).fill(hp > 0.35 ? 0x6ee36e : 0xe36e6e)
     }
   })
 })