Resize Pixi canvases on tab select (tabs start hidden at 0x0)

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

app.py

@@ -41,15 +41,18 @@ with gr.Blocks(title="Tiny Army") as demo:
                 "legend is true.* Built on Gradio; sprites + engine reused from "
                 "auto-battler, rendered with Pixi.")
     with gr.Tabs():
-        with gr.Tab("Battle"):
+        with gr.Tab("Battle") as battle_tab:
             gr.HTML(f'<div id="battle-stage" style="{STAGE}"></div>')
-        with gr.Tab("Sprite Animations"):
+        with gr.Tab("Sprite Animations") as sprite_tab:
             with gr.Row():
                 char = gr.Dropdown(CHARACTERS, value=CHARACTERS[0][1], label="Character")
                 anim = gr.Dropdown(ANIMS, value="idle", label="Animation")
             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)")
+        # 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()")
         with gr.Tab("Barracks"):
             with gr.Row():
                 unit = gr.Textbox("Bram the Warrior", label="Unit")

web/tiny.js

@@ -16,6 +16,19 @@ 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, spriteObj = null
+function centerSprite() {
+  if (!spriteApp || !spriteObj) return
+  spriteObj.position.set(spriteApp.screen.width / 2, spriteApp.screen.height * 0.6)
+}
+window.tinyResize = () => {
+  try { spriteApp && spriteApp.resize() } catch {}
+  try { battleApp && battleApp.resize() } catch {}
+  centerSprite()
+}
+
 // ── Sprite Animations tab ────────────────────────────────────────────────────
 let charMap = null
 async function loadChars() {
@@ -34,6 +47,7 @@ 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()
@@ -51,6 +65,7 @@ whenEl('sprite-stage', async (el) => {
     sprite.scale.set(sc)
     sprite.position.set(app.screen.width / 2, app.screen.height * 0.6)
     app.stage.addChild(sprite); sprite.play()
+    spriteObj = sprite
   }
   if (pending) window.tinyShowSprite(...pending)
 })
@@ -70,6 +85,7 @@ whenEl('battle-stage', async (el) => {
   const app = new PIXI.Application()
   await app.init({ background: 0x0b0e12, resizeTo: el, antialias: true })
   el.appendChild(app.canvas)
+  battleApp = app
   const g = new PIXI.Graphics(); app.stage.addChild(g)
   let battle, seed = 1, overAt = 0
   const fresh = () => { battle = makeTeamBattle({ seed: seed++, players: PLAYERS, enemies: ENEMIES }); overAt = 0 }