Game page: directly-controlled Forgotten Plains battle; rename to "Game"

Replace the Battle tab's combat window with the new single-sim map game
(web/comboBattler.js, bundled from auto-battler): control the persona with
WASD/tap, attack + cast skills (Space / 1–3 / on-screen ⚔ buttons), enemies
aggro on proximity, camera drag/scroll/pinch like the World Map sandbox.

- tiny.js: mount mountComboBattler on #battle-stage (persona → engine profession
+ class skills; enemy band with aggroRadius); drop the old hardcoded 4v4 loop.
- build.sh: esbuild web/comboBattler.js; sed the sidebar label "Combo-Battler" →
"Game" (Space-only; auto-battler's own nav is unchanged).
- personaPanel.js: export CLASS_SLUG (single-source the class→slug map).
- Rebuilt bundles pick up the additive teamBattle terrain/aggro hooks.
- app.py + requirements.txt: load a local .env for `python app.py` (python-dotenv;
no-op on the Space where real secrets are used).

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

app.py

@@ -21,6 +21,18 @@ import os
 import threading
 import time
 
+# Local dev convenience: load a sibling .env (HF_TOKEN, TINY_*_SPACE keys, etc.) so
+# `python app.py` picks them up the same way the HF Space gets them from secrets.
+# override=False → if a var is already set in the real environment (as on the
+# Space, where there is no .env), that value wins. Optional dep, so a missing
+# install just skips it.
+try:
+    from dotenv import load_dotenv
+
+    load_dotenv(os.path.join(os.path.dirname(os.path.abspath(__file__)), ".env"))
+except ImportError:
+    pass
+
 # ZeroGPU requires the spaces shim to be imported before torch. Locally, or on
 # non-ZeroGPU hardware, this falls back to a no-op decorator.
 try:

build.sh

@@ -22,11 +22,19 @@ npx --yes esbuild "$AB/src/render/enemiesSandbox.js"   --bundle --format=esm --o
 # Orc Kingdom / Forgotten Plains / Interiors / Towers, each with Generated/Tilesheet/Reference).
 # Pulls in every map renderer + the shared chunked-map engine. Pixi injected by web/tiny.js.
 npx --yes esbuild "$AB/src/render/mapSandbox.js"       --bundle --format=esm --outfile=web/mapSandbox.js
+# Game page (the Space's "Battle" tab) — Forgotten Plains roam + on-map real-time combat. Drops a
+# persona on the map, walks it via A*, (later) fights nearby enemies. Pulls in the chunked-map +
+# combat engine + sim. This is a Space-only surface; auto-battler's own Combo-Battler game is untouched.
+npx --yes esbuild "$AB/src/render/comboBattler.js"     --bundle --format=esm --outfile=web/comboBattler.js
 
 # 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/
+# Tiny-army-only label override: the "Battle" page here is the new Game surface (Forgotten Plains
+# roam + on-map combat), not auto-battler's React Combo-Battler. Rename just the sidebar label;
+# the Gradio tab ("Battle"/#battle-stage) and auto-battler's own nav.json are left untouched.
+sed -i 's/"label": "Combo-Battler"/"label": "Game"/' web/shell/nav.json
 # Design tokens — the shared component CSS (classes/worldmap/spriteScene) references the global
 # :root palette/fonts/shadows defined in the React app's styles.css. Extract just that :root block
 # (NOT the app-specific selectors) so the Space's components render with auto-battler's look.

requirements.txt

@@ -1,6 +1,9 @@
 --extra-index-url https://abetlen.github.io/llama-cpp-python/whl/cpu
 gradio==6.15.2
 huggingface_hub
+# Loads .env for local `python app.py` runs (see load_dotenv in app.py). On the
+# Space there's no .env, so it's a no-op and the real Space secrets are used.
+python-dotenv
 # llama.cpp runtime for the persona + war-diary model. The CPU wheel index ships a
 # prebuilt py3-none-manylinux_2_17_x86_64 wheel (no source compile needed). Pulled
 # via the --extra-index-url in the Dockerfile.

web/classesSandbox.js

@@ -1017,14 +1017,16 @@ function makeActor(unit, team, id, slot) {
     prep: null,
     alive: true,
     mods: [],
-    kd: 0
+    kd: 0,
+    aggroRadius: unit.aggroRadius ?? null
+    // optional: idle until a foe is within this distance (else always engage)
   };
 }
-function makeTeamBattle({ seed = 1, players = [], enemies = [], sandbox = false, respawnDummies = 0, freeCast = false } = {}) {
+function makeTeamBattle({ seed = 1, players = [], enemies = [], sandbox = false, respawnDummies = 0, freeCast = false, world = null } = {}) {
   const actors = [];
   players.filter(Boolean).slice(0, 5).forEach((u, i) => actors.push(makeActor(u, "player", `P${i}`, i)));
   enemies.filter(Boolean).slice(0, 5).forEach((u, i) => actors.push(makeActor(u, "enemy", `E${i}`, i)));
-  return { t: 0, rng: makeRng(seed), actors, projectiles: [], log: [], over: false, winner: null, sandbox, respawnDummies, freeCast, input: {} };
+  return { t: 0, rng: makeRng(seed), actors, projectiles: [], log: [], over: false, winner: null, sandbox, respawnDummies, freeCast, input: {}, world };
 }
 function setInput(b, id, cmd) {
   if (!b.input) b.input = {};
@@ -1563,11 +1565,11 @@ function moveActor(b, a, enemy, dt) {
   const dx = enemy.x - a.x, dy = enemy.y - a.y, len = Math.hypot(dx, dy) || 1;
   const desVx = dx / len * speed * toward, desVy = dy / len * speed * toward;
   const [vx, vy] = avoidVelocity(b, a, enemy, desVx, desVy, speed);
-  a.x = clampField(a.x + vx * dt, a.radius, FIELD.w);
-  a.y = clampField(a.y + vy * dt, a.radius, FIELD.h);
+  const px = a.x, py = a.y;
+  stepMove(b, a, vx, vy, dt);
   a.vx = vx;
   a.vy = vy;
-  a.moving = true;
+  a.moving = b.world ? a.x !== px || a.y !== py : true;
 }
 var RVO_TAU = 1.6;
 var RVO_RANGE = 280;
@@ -1619,6 +1621,17 @@ function timeToHit(px, py, rvx, rvy, R) {
   return (-b2 - Math.sqrt(disc)) / a2;
 }
 var clampField = (v, r, max) => Math.max(r, Math.min(max - r, v));
+function stepMove(b, a, vx, vy, dt) {
+  const w = b.world && b.world.walkable;
+  let nx = clampField(a.x + vx * dt, a.radius, FIELD.w);
+  let ny = clampField(a.y + vy * dt, a.radius, FIELD.h);
+  if (w) {
+    if (!w(nx, a.y)) nx = a.x;
+    if (!w(nx, ny)) ny = a.y;
+  }
+  a.x = nx;
+  a.y = ny;
+}
 function resolveOverlaps(b) {
   const live = b.actors.filter((a) => a.alive);
   for (let it = 0; it < DEOVERLAP_ITERS; it++) {
@@ -1650,9 +1663,9 @@ function stepPlayer(b, a, foe, dt) {
   if (mx || my) {
     const len = Math.hypot(mx, my) || 1;
     const speed = a.moveSpeed * moveSpeedMult(b, a);
-    a.x = clampField(a.x + mx / len * speed * dt, a.radius, FIELD.w);
-    a.y = clampField(a.y + my / len * speed * dt, a.radius, FIELD.h);
-    a.moving = true;
+    const px = a.x, py = a.y;
+    stepMove(b, a, mx / len * speed, my / len * speed, dt);
+    a.moving = b.world ? a.x !== px || a.y !== py : true;
     a.faceX = mx < 0 ? -1 : mx > 0 ? 1 : a.faceX;
     a.faceY = my < 0 ? -1 : my > 0 ? 1 : a.faceY;
     a.facing = a.faceX;
@@ -1738,10 +1751,16 @@ function step(b, dt) {
   for (const a of b.actors) {
     if (!a.alive || b.over) continue;
     const enemy = nearestFoe(b, a);
-    if (!enemy) continue;
-    a.facing = enemy.x < a.x ? -1 : 1;
-    a.faceX = a.facing;
-    a.faceY = enemy.y < a.y ? -1 : 1;
+    if (!enemy && a.control !== "player") continue;
+    if (a.aggroRadius != null && a.control !== "player" && dist(a, enemy) > a.aggroRadius) {
+      a.moving = false;
+      continue;
+    }
+    if (enemy) {
+      a.facing = enemy.x < a.x ? -1 : 1;
+      a.faceX = a.facing;
+      a.faceY = enemy.y < a.y ? -1 : 1;
+    }
     a.moving = false;
     if (isKd(b, a)) {
       a.casting = null;

web/enemiesSandbox.js

@@ -850,14 +850,16 @@ function makeActor(unit, team, id, slot) {
     prep: null,
     alive: true,
     mods: [],
-    kd: 0
+    kd: 0,
+    aggroRadius: unit.aggroRadius ?? null
+    // optional: idle until a foe is within this distance (else always engage)
   };
 }
-function makeTeamBattle({ seed = 1, players = [], enemies = [], sandbox = false, respawnDummies = 0, freeCast = false } = {}) {
+function makeTeamBattle({ seed = 1, players = [], enemies = [], sandbox = false, respawnDummies = 0, freeCast = false, world = null } = {}) {
   const actors = [];
   players.filter(Boolean).slice(0, 5).forEach((u, i) => actors.push(makeActor(u, "player", `P${i}`, i)));
   enemies.filter(Boolean).slice(0, 5).forEach((u, i) => actors.push(makeActor(u, "enemy", `E${i}`, i)));
-  return { t: 0, rng: makeRng(seed), actors, projectiles: [], log: [], over: false, winner: null, sandbox, respawnDummies, freeCast, input: {} };
+  return { t: 0, rng: makeRng(seed), actors, projectiles: [], log: [], over: false, winner: null, sandbox, respawnDummies, freeCast, input: {}, world };
 }
 function setInput(b, id, cmd) {
   if (!b.input) b.input = {};
@@ -1396,11 +1398,11 @@ function moveActor(b, a, enemy, dt) {
   const dx = enemy.x - a.x, dy = enemy.y - a.y, len = Math.hypot(dx, dy) || 1;
   const desVx = dx / len * speed * toward, desVy = dy / len * speed * toward;
   const [vx, vy] = avoidVelocity(b, a, enemy, desVx, desVy, speed);
-  a.x = clampField(a.x + vx * dt, a.radius, FIELD.w);
-  a.y = clampField(a.y + vy * dt, a.radius, FIELD.h);
+  const px = a.x, py = a.y;
+  stepMove(b, a, vx, vy, dt);
   a.vx = vx;
   a.vy = vy;
-  a.moving = true;
+  a.moving = b.world ? a.x !== px || a.y !== py : true;
 }
 var RVO_TAU = 1.6;
 var RVO_RANGE = 280;
@@ -1452,6 +1454,17 @@ function timeToHit(px, py, rvx, rvy, R) {
   return (-b2 - Math.sqrt(disc)) / a2;
 }
 var clampField = (v, r, max) => Math.max(r, Math.min(max - r, v));
+function stepMove(b, a, vx, vy, dt) {
+  const w = b.world && b.world.walkable;
+  let nx = clampField(a.x + vx * dt, a.radius, FIELD.w);
+  let ny = clampField(a.y + vy * dt, a.radius, FIELD.h);
+  if (w) {
+    if (!w(nx, a.y)) nx = a.x;
+    if (!w(nx, ny)) ny = a.y;
+  }
+  a.x = nx;
+  a.y = ny;
+}
 function resolveOverlaps(b) {
   const live = b.actors.filter((a) => a.alive);
   for (let it = 0; it < DEOVERLAP_ITERS; it++) {
@@ -1483,9 +1496,9 @@ function stepPlayer(b, a, foe, dt) {
   if (mx || my) {
     const len = Math.hypot(mx, my) || 1;
     const speed = a.moveSpeed * moveSpeedMult(b, a);
-    a.x = clampField(a.x + mx / len * speed * dt, a.radius, FIELD.w);
-    a.y = clampField(a.y + my / len * speed * dt, a.radius, FIELD.h);
-    a.moving = true;
+    const px = a.x, py = a.y;
+    stepMove(b, a, mx / len * speed, my / len * speed, dt);
+    a.moving = b.world ? a.x !== px || a.y !== py : true;
     a.faceX = mx < 0 ? -1 : mx > 0 ? 1 : a.faceX;
     a.faceY = my < 0 ? -1 : my > 0 ? 1 : a.faceY;
     a.facing = a.faceX;
@@ -1571,10 +1584,16 @@ function step(b, dt) {
   for (const a of b.actors) {
     if (!a.alive || b.over) continue;
     const enemy = nearestFoe(b, a);
-    if (!enemy) continue;
-    a.facing = enemy.x < a.x ? -1 : 1;
-    a.faceX = a.facing;
-    a.faceY = enemy.y < a.y ? -1 : 1;
+    if (!enemy && a.control !== "player") continue;
+    if (a.aggroRadius != null && a.control !== "player" && dist(a, enemy) > a.aggroRadius) {
+      a.moving = false;
+      continue;
+    }
+    if (enemy) {
+      a.facing = enemy.x < a.x ? -1 : 1;
+      a.faceX = a.facing;
+      a.faceY = enemy.y < a.y ? -1 : 1;
+    }
     a.moving = false;
     if (isKd(b, a)) {
       a.casting = null;

web/engine.js

@@ -824,14 +824,16 @@ function makeActor(unit, team, id, slot) {
     prep: null,
     alive: true,
     mods: [],
-    kd: 0
+    kd: 0,
+    aggroRadius: unit.aggroRadius ?? null
+    // optional: idle until a foe is within this distance (else always engage)
   };
 }
-function makeTeamBattle({ seed = 1, players = [], enemies = [], sandbox = false, respawnDummies = 0, freeCast = false } = {}) {
+function makeTeamBattle({ seed = 1, players = [], enemies = [], sandbox = false, respawnDummies = 0, freeCast = false, world = null } = {}) {
   const actors = [];
   players.filter(Boolean).slice(0, 5).forEach((u, i) => actors.push(makeActor(u, "player", `P${i}`, i)));
   enemies.filter(Boolean).slice(0, 5).forEach((u, i) => actors.push(makeActor(u, "enemy", `E${i}`, i)));
-  return { t: 0, rng: makeRng(seed), actors, projectiles: [], log: [], over: false, winner: null, sandbox, respawnDummies, freeCast, input: {} };
+  return { t: 0, rng: makeRng(seed), actors, projectiles: [], log: [], over: false, winner: null, sandbox, respawnDummies, freeCast, input: {}, world };
 }
 function setInput(b, id, cmd) {
   if (!b.input) b.input = {};
@@ -1370,11 +1372,11 @@ function moveActor(b, a, enemy, dt) {
   const dx = enemy.x - a.x, dy = enemy.y - a.y, len = Math.hypot(dx, dy) || 1;
   const desVx = dx / len * speed * toward, desVy = dy / len * speed * toward;
   const [vx, vy] = avoidVelocity(b, a, enemy, desVx, desVy, speed);
-  a.x = clampField(a.x + vx * dt, a.radius, FIELD.w);
-  a.y = clampField(a.y + vy * dt, a.radius, FIELD.h);
+  const px = a.x, py = a.y;
+  stepMove(b, a, vx, vy, dt);
   a.vx = vx;
   a.vy = vy;
-  a.moving = true;
+  a.moving = b.world ? a.x !== px || a.y !== py : true;
 }
 var RVO_TAU = 1.6;
 var RVO_RANGE = 280;
@@ -1426,6 +1428,17 @@ function timeToHit(px, py, rvx, rvy, R) {
   return (-b2 - Math.sqrt(disc)) / a2;
 }
 var clampField = (v, r, max) => Math.max(r, Math.min(max - r, v));
+function stepMove(b, a, vx, vy, dt) {
+  const w = b.world && b.world.walkable;
+  let nx = clampField(a.x + vx * dt, a.radius, FIELD.w);
+  let ny = clampField(a.y + vy * dt, a.radius, FIELD.h);
+  if (w) {
+    if (!w(nx, a.y)) nx = a.x;
+    if (!w(nx, ny)) ny = a.y;
+  }
+  a.x = nx;
+  a.y = ny;
+}
 function resolveOverlaps(b) {
   const live = b.actors.filter((a) => a.alive);
   for (let it = 0; it < DEOVERLAP_ITERS; it++) {
@@ -1457,9 +1470,9 @@ function stepPlayer(b, a, foe, dt) {
   if (mx || my) {
     const len = Math.hypot(mx, my) || 1;
     const speed = a.moveSpeed * moveSpeedMult(b, a);
-    a.x = clampField(a.x + mx / len * speed * dt, a.radius, FIELD.w);
-    a.y = clampField(a.y + my / len * speed * dt, a.radius, FIELD.h);
-    a.moving = true;
+    const px = a.x, py = a.y;
+    stepMove(b, a, mx / len * speed, my / len * speed, dt);
+    a.moving = b.world ? a.x !== px || a.y !== py : true;
     a.faceX = mx < 0 ? -1 : mx > 0 ? 1 : a.faceX;
     a.faceY = my < 0 ? -1 : my > 0 ? 1 : a.faceY;
     a.facing = a.faceX;
@@ -1545,10 +1558,16 @@ function step(b, dt) {
   for (const a of b.actors) {
     if (!a.alive || b.over) continue;
     const enemy = nearestFoe(b, a);
-    if (!enemy) continue;
-    a.facing = enemy.x < a.x ? -1 : 1;
-    a.faceX = a.facing;
-    a.faceY = enemy.y < a.y ? -1 : 1;
+    if (!enemy && a.control !== "player") continue;
+    if (a.aggroRadius != null && a.control !== "player" && dist(a, enemy) > a.aggroRadius) {
+      a.moving = false;
+      continue;
+    }
+    if (enemy) {
+      a.facing = enemy.x < a.x ? -1 : 1;
+      a.faceX = a.facing;
+      a.faceY = enemy.y < a.y ? -1 : 1;
+    }
     a.moving = false;
     if (isKd(b, a)) {
       a.casting = null;

web/mapSandbox.js

@@ -30,6 +30,7 @@ function createChunkedMap(pixi, host, config) {
   const keys = /* @__PURE__ */ new Set();
   const texCache = /* @__PURE__ */ new Map();
   const listeners = /* @__PURE__ */ new Set();
+  const tickHooks = /* @__PURE__ */ new Set();
   const drag = { on: false, px: 0, py: 0 };
   const pointers = /* @__PURE__ */ new Map();
   const pinch = { on: false, dist: 0 };
@@ -292,8 +293,10 @@ function createChunkedMap(pixi, host, config) {
     canvas.addEventListener("pointermove", handlers.move);
     window.addEventListener("pointerup", handlers.up);
     canvas.addEventListener("wheel", handlers.wheel, { passive: false });
-    window.addEventListener("keydown", handlers.keydown);
-    window.addEventListener("keyup", handlers.keyup);
+    if (config.keyboardPan !== false) {
+      window.addEventListener("keydown", handlers.keydown);
+      window.addEventListener("keyup", handlers.keyup);
+    }
   }
   function unbindInput() {
     const canvas = app?.canvas;
@@ -306,6 +309,7 @@ function createChunkedMap(pixi, host, config) {
   }
   const PAN_SPEED = 6;
   function tick(ticker) {
+    for (const fn of tickHooks) fn(ticker);
     if (!enabled) return;
     let dx = 0, dy = 0;
     for (const k of keys) {
@@ -371,6 +375,24 @@ function createChunkedMap(pixi, host, config) {
   function getCamera() {
     return { x: camera.x, y: camera.y, zoom };
   }
+  function onTick(fn) {
+    tickHooks.add(fn);
+    return () => tickHooks.delete(fn);
+  }
+  function getEntityLayer() {
+    return propLayer;
+  }
+  function getApp() {
+    return app;
+  }
+  function screenToWorld(sx, sy) {
+    if (!app) return { x: 0, y: 0 };
+    return { x: camera.x + (sx - app.screen.width / 2) / zoom, y: camera.y + (sy - app.screen.height / 2) / zoom };
+  }
+  function worldToScreen(wx, wy) {
+    if (!app) return { x: 0, y: 0 };
+    return { x: app.screen.width / 2 + (wx - camera.x) * zoom, y: app.screen.height / 2 + (wy - camera.y) * zoom };
+  }
   function tileIndexAt(wx, wy) {
     if (!config.tileIndexAt) return null;
     const cx = Math.floor(wx / CHUNK5), cy = Math.floor(wy / CHUNK5);
@@ -426,7 +448,7 @@ function createChunkedMap(pixi, host, config) {
     ctx = null;
     texCache.clear();
   }
-  return { ready, regenerate, destroy, onChange, getSnapshot, getCamera, tileIndexAt, zoomBy, setEnabled };
+  return { ready, regenerate, destroy, onChange, getSnapshot, getCamera, tileIndexAt, zoomBy, setEnabled, onTick, getEntityLayer, getApp, screenToWorld, worldToScreen, tile: TILE6 };
 }
 
 // ../auto-battler/src/engine/rng.js
@@ -1477,7 +1499,7 @@ var fpConfig = (seed) => ({
   }
 });
 function createForgottenPlainsMap(pixi, host, opts = {}) {
-  return createChunkedMap(pixi, host, fpConfig(opts.seed ?? 1));
+  return createChunkedMap(pixi, host, { ...fpConfig(opts.seed ?? 1), keyboardPan: opts.keyboardPan });
 }
 
 // ../auto-battler/src/engine/necropolisGen.js

web/personaPanel.js

@@ -20,7 +20,7 @@ const MAX_TOKENS = 200 // persona JSON + a voice line + a quote
 // Each class shows the idle pose of a fitting sprite (character slug → see
 // characters.json). The sheet's front-right row is animated as a tiny looping
 // icon beside the class name in the dropdown.
-const CLASS_SLUG = {
+export const CLASS_SLUG = {
   Warrior: 'true-heroes-iii-fighter',
   Ranger: 'true-heroes-iii-ranger',
   Monk: 'true-heroes-ii-bard',

web/shell/nav.json

@@ -5,7 +5,7 @@
     {
       "title": "World",
       "items": [
-        { "label": "Combo-Battler", "icon": "◆", "href": "#/stage", "view": "stage", "space": "Battle" }
+        { "label": "Game", "icon": "◆", "href": "#/stage", "view": "stage", "space": "Battle" }
       ]
     },
     {

web/tiny.js

@@ -4,13 +4,13 @@
 // (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'
-import { sliceGridWith, cellOf, rowFor, facingFor, ANIM } from '/web/sheet.js'
 import { mountSpritePlayground } from '/web/playground.js'
 import { mountClassesSandbox } from '/web/classesSandbox.js'
 import { mountEnemiesSandbox } from '/web/enemiesSandbox.js'
 import { mountMapSandbox } from '/web/mapSandbox.js'
-import { mountPersonaPanel } from '/web/personaPanel.js'
+import { mountComboBattler } from '/web/comboBattler.js'
+import { mountPersonaPanel, CLASS_SLUG } from '/web/personaPanel.js'
+import { listPersonas } from '/web/personaStore.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
 import { mountSettingsPanel } from '/web/settingsPanel.js'
 import { mountSkillForgePanel } from '/web/skillForgePanel.js'
@@ -72,13 +72,10 @@ async function loadChars() {
   for (const p of d.packs || []) for (const c of p.characters || []) charMap[c.slug] = c
   return charMap
 }
-const loadSheet = async (url) => {
-  const t = await PIXI.Assets.load(spriteUrl(url)); t.source.scaleMode = 'nearest'; return t
-}
 
-let playground = null, battleApp = null
+let playground = null, comboCtrl = null
 window.tinyResize = () => {
-  try { battleApp && battleApp.resize() } catch {}
+  try { comboCtrl?.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 (playground) { playground.resize(); playground.recenter() } } catch {}
@@ -154,86 +151,38 @@ window.tacNavigate = function (target) {
   if (_tacNav) _tacNav(target)
 }
 
-// ── Battle tab (real sprites, reusing the engine + shared renderer) ──────────
-const PLAYERS = [
-  { 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: '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' },
+// ── Game tab (#battle-stage) — Forgotten Plains roam + on-map combat ──────────
+// Drops a persona from the roster onto the map, lets it wander (A*), and fights enemies that aggro
+// on proximity in real-time on the map. The old hardcoded 4v4 demo lived here; this is the shared
+// comboBattler surface (auto-battler source, bundled to /web/comboBattler.js).
+const sheetsOf = (c) => ({ idle: spriteUrl(c.idle), walk: spriteUrl(c.walk), attack: spriteUrl(c.attack), dmg: spriteUrl(c.dmg), die: spriteUrl(c.die) })
+// An enemy band (character slug + combat stats), resolved against characters.json.
+const GAME_ENEMIES = [
+  { name: 'Orc Blade', slug: 'dark-orc-army-orc-blade', stats: { hp: 130, armor: 25, basicDamage: 13 }, attackType: 'melee' },
+  { name: 'Orc Raider', slug: 'dark-orc-army-orc-raider', stats: { hp: 120, armor: 20, basicDamage: 12 }, attackType: 'melee' },
+  { name: 'Orc Scout', slug: 'dark-orc-army-orc-scout', stats: { hp: 90, armor: 12, basicDamage: 10 }, attackType: 'melee' },
+  { name: 'Reaver', slug: 'dark-brotherhood-devoted-blade', stats: { hp: 120, armor: 20, basicDamage: 12 }, attackType: 'melee' },
+  { name: 'Acolyte', slug: 'dark-brotherhood-acolyte', stats: { hp: 100, armor: 15, basicDamage: 10 }, attackType: 'melee' },
+  { name: 'Berserker', slug: 'dark-orc-army-feral-berserker', stats: { hp: 160, armor: 30, basicDamage: 16 }, attackType: 'melee' },
 ]
-
-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) }
-}
-
+// Persona class → engine profession (the engine has templates + skills for these five).
+const PERSONA_PROF = { Warrior: 'Warrior', Ranger: 'Ranger', Monk: 'Monk', Assassin: 'Assassin', Mage: 'Necromancer', Paladin: 'Monk', Cleric: 'Monk', Knight: 'Warrior' }
+const ENEMY_AGGRO = 220 // FIELD units (~8 tiles): enemy idles until the player is this near
 whenEl('battle-stage', async (el) => {
-  const app = new PIXI.Application()
-  await app.init({ background: 0x0b0e12, resizeTo: el, antialias: false })
-  el.appendChild(app.canvas)
-  battleApp = app
-  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
-  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 })
+  unprose(el)
+  const chars = await loadChars()
+  // Active persona → class → character sheets + a directly-controlled hero (WASD + keys).
+  const p = listPersonas()[0] || null
+  const pc = chars[CLASS_SLUG[p?.unitClass]] || chars['true-heroes-iii-fighter']
+  const player = {
+    name: p?.name || pc?.name || 'Hero',
+    sheets: sheetsOf(pc),
+    unit: { profession: PERSONA_PROF[p?.unitClass] || 'Warrior', name: p?.name || 'Hero' }, // skills filled from profession
   }
-  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 > 3000) fresh()
-    bars.clear()
-    const base = Math.min(Math.max(W / 190, 1.6), 3)
-    for (const a of battle.actors) {
-      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
-      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)
-    }
-  })
+  const enemies = GAME_ENEMIES.map((e) => {
+    const c = chars[e.slug]; if (!c) return null
+    return { name: e.name, sheets: sheetsOf(c), unit: { name: e.name, stats: e.stats, attackType: e.attackType, skills: [], aggroRadius: ENEMY_AGGRO } }
+  }).filter(Boolean)
+  comboCtrl = mountComboBattler(PIXI, el, { seed: 1, player, enemies })
+  await comboCtrl.ready
 })