Game: diagonal 2x map + half-size heroes; hidden overlay sidebar; persona-select state

- web/*: rebuilt comboBattler bundle; mirror shell/sidebar.js (starts hidden).
- app.py: #battle-stage spans the full width so the sidebar overlays it as a drawer instead of pushing/resizing the canvas — fixes the blank map strip on toggle.
- web/tiny.js: bottom persona picker — mount the map with no hero, selectHero on pick, re-show the picker when there's no live hero (initial + on death).

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

app.py

@@ -122,12 +122,16 @@ THEME = ('<style>'
          # Gradio still hides it (display:none on the inactive tab's ancestor).
          '.gradio-container .tabitem{padding:0 !important;}'
          '.gradio-container .tabs{border:0 !important;}'
-         '#sprite-stage,#persona-stage,#diary-stage,#classes-stage,#enemies-stage,#worldmap-stage,#battle-stage{position:fixed !important;top:0;bottom:0;'
+         '#sprite-stage,#persona-stage,#diary-stage,#classes-stage,#enemies-stage,#worldmap-stage{position:fixed !important;top:0;bottom:0;'
          'right:0;left:var(--tac-w,240px);height:auto !important;z-index:1;}'
          'body.tac-collapsed #sprite-stage,body.tac-collapsed #persona-stage,'
          'body.tac-collapsed #diary-stage,body.tac-collapsed #classes-stage,body.tac-collapsed #enemies-stage,'
-         'body.tac-collapsed #worldmap-stage,body.tac-collapsed #battle-stage{left:0;}'
-         '@media (max-width:768px){#sprite-stage,#persona-stage,#diary-stage,#classes-stage,#enemies-stage,#worldmap-stage,#battle-stage{left:0;}}'
+         'body.tac-collapsed #worldmap-stage{left:0;}'
+         '@media (max-width:768px){#sprite-stage,#persona-stage,#diary-stage,#classes-stage,#enemies-stage,#worldmap-stage{left:0;}}'
+         # The Game stage ALWAYS spans the full width (left:0) — the sidebar (z-index 1000) slides OVER
+         # it as a drawer instead of pushing/resizing the canvas, so toggling it never leaves a blank
+         # strip where the map hasn't re-rendered into the resized area.
+         '#battle-stage{position:fixed !important;top:0;bottom:0;left:0;right:0;height:auto !important;z-index:1;}'
          # Gradio's relocated footer links (Use via API / Built with Gradio / Settings), styled to look
          # like the sidebar nav items WITHOUT the tac-nav-item class — that class makes sidebar.js hijack
          # the click (mark them active = white, and swallow navigation). web/tiny.js copies the reference

web/comboBattler.js

@@ -2229,29 +2229,30 @@ function dominantForeign(at, tx, ty, A, rankA) {
   }
   return best;
 }
-var GAME_W = 510;
-var GAME_H = 340;
+var GAME_W = 720;
+var GAME_H = 480;
 var BAND_IDS = ["forgottenPlains", "orc", "necropolis"];
 var BAND_WARP_SCALE = 0.014;
-var BAND_WARP_AMP = 26;
-var BAND_EDGE_TILES = 50;
+var BAND_WARP_T = 0.035;
+var BAND_EDGE_T = 0.06;
 var bandSub = (seed, salt) => (Math.imul(seed | 0, 2654435761) ^ (salt | 0)) >>> 0;
-function bandedRegion(W) {
-  const b1 = W / 3, b2 = 2 * W / 3;
+function diagonalRegion(W, H) {
+  const b1 = 0.8, b2 = 1.2;
   return (seed, x, y) => {
-    const wx = x + BAND_WARP_AMP * (fbm(bandSub(seed, 1441), x * BAND_WARP_SCALE, y * BAND_WARP_SCALE) - 0.5);
+    const warp = BAND_WARP_T * (fbm(bandSub(seed, 1441), x * BAND_WARP_SCALE, y * BAND_WARP_SCALE) - 0.5) * 2;
+    const t = x / W + (H - y) / H + warp;
     let i, j, d;
-    if (wx < b1) {
+    if (t < b1) {
       i = 0;
       j = 1;
-      d = b1 - wx;
-    } else if (wx >= b2) {
+      d = b1 - t;
+    } else if (t >= b2) {
       i = 2;
       j = 1;
-      d = wx - b2;
+      d = t - b2;
     } else {
       i = 1;
-      const dl = wx - b1, dr = b2 - wx;
+      const dl = t - b1, dr = b2 - t;
       if (dl < dr) {
         j = 0;
         d = dl;
@@ -2260,16 +2261,16 @@ function bandedRegion(W) {
         d = dr;
       }
     }
-    const edge = Math.max(0, Math.min(1, d / BAND_EDGE_TILES));
+    const edge = Math.max(0, Math.min(1, d / BAND_EDGE_T));
     return { id: BAND_IDS[i], id2: BAND_IDS[j], edge };
   };
 }
 function createGameOverworldMap(pixi, host, opts = {}) {
   const config = overworldConfig(opts.seed ?? 1, {
-    regionFn: bandedRegion(GAME_W),
+    regionFn: diagonalRegion(GAME_W, GAME_H),
     bounds: { x0: 0, y0: 0, x1: GAME_W, y1: GAME_H },
-    // Start the view near the left (Forgotten Plains) edge, vertically centred.
-    initialCamera: { x: 64 * TILE5, y: GAME_H / 2 * TILE5 }
+    // Start the view in the bottom-left (Forgotten Plains) corner.
+    initialCamera: { x: 64 * TILE5, y: (GAME_H - 64) * TILE5 }
   });
   return createChunkedMap(pixi, host, { ...config, keyboardPan: opts.keyboardPan });
 }
@@ -4700,7 +4701,7 @@ function makeRoamWalkable(seed, biomeAt) {
 
 // ../auto-battler/src/render/comboBattler.js
 var TILE6 = 8;
-var SPRITE_TILES = 1.9;
+var SPRITE_TILES = 0.95;
 var STEP = 0.05;
 var SPAWN_TILES = 22;
 var SPAWN_JITTER = 6;
@@ -4930,10 +4931,49 @@ function mountComboBattler(pixi, host, opts = {}) {
     const p = pa();
     if (p) dot(p.x, p.y, 16766474);
   }
-  const ready = (async () => {
-    await map.ready;
-    if (!alive) return;
-    const cam = map.getCamera();
+  const sd = (o) => ({ idle: o?.idle, walk: o?.walk, attack: o?.attack, dmg: o?.dmg, die: o?.die });
+  function teardownCombat() {
+    try {
+      offTick?.();
+    } catch {
+    }
+    offTick = null;
+    try {
+      keyHandlers?.();
+    } catch {
+    }
+    keyHandlers = null;
+    try {
+      tapHandlers?.();
+    } catch {
+    }
+    tapHandlers = null;
+    try {
+      controlsEl?.remove();
+    } catch {
+    }
+    controlsEl = null;
+    try {
+      markers?.destroy();
+    } catch {
+    }
+    markers = null;
+    try {
+      combatRoot?.destroy({ children: true });
+    } catch {
+    }
+    combatRoot = null;
+    R = null;
+    rings = null;
+    battle = null;
+    spawnFn = null;
+    dead = false;
+    acc.t = 0;
+    cursor.logIdx = 0;
+    moveTarget = null;
+  }
+  async function spawnHero(player) {
+    if (!alive || !player) return;
     const bnds = map.getBounds();
     ARENA.ox = bnds.x0;
     ARENA.oy = bnds.y0;
@@ -4947,11 +4987,11 @@ function mountComboBattler(pixi, host, opts = {}) {
       }
       return { x: Math.max(0, Math.min(field.w, fx2)), y: Math.max(0, Math.min(field.h, fy)) };
     };
-    const pProf = opts.player?.unit?.profession;
-    const pSkills = opts.player?.unit?.skills?.length ? opts.player.unit.skills : CB_SKILLS.filter((s) => s.profession === pProf).slice(0, 3).map((s) => s.id);
-    const players = [{ ...opts.player?.unit || {}, name: opts.player?.name || "Hero", control: "player", skills: pSkills }];
+    const pProf = player?.unit?.profession;
+    const pSkills = player?.unit?.skills?.length ? player.unit.skills : CB_SKILLS.filter((s) => s.profession === pProf).slice(0, 3).map((s) => s.id);
+    const players = [{ ...player?.unit || {}, name: player?.name || "Hero", control: "player", skills: pSkills }];
     battle = makeTeamBattle({ seed, players, enemies: [], sandbox: true, freeCast: true, world, field });
-    const start = worldToField(cam.x, cam.y);
+    const start = worldToField(bnds.x0 + 64 * TILE6, bnds.y1 - 64 * TILE6);
     const p0 = snapField(start.x, start.y);
     const P = pa();
     if (P) {
@@ -4959,8 +4999,7 @@ function mountComboBattler(pixi, host, opts = {}) {
       P.y = p0.y;
     }
     const defsById = {};
-    const sd = (o) => ({ idle: o?.idle, walk: o?.walk, attack: o?.attack, dmg: o?.dmg, die: o?.die });
-    defsById.P0 = { name: players[0].name, profession: players[0].profession, ...sd(opts.player?.sheets) };
+    defsById.P0 = { name: players[0].name, profession: players[0].profession, ...sd(player?.sheets) };
     combatRoot = new Container();
     combatRoot.scale.set(G);
     combatRoot.position.set(ARENA.ox, ARENA.oy);
@@ -4974,7 +5013,8 @@ function mountComboBattler(pixi, host, opts = {}) {
     map.getEntityLayer().addChild(combatRoot);
     markers = new Graphics();
     map.getApp().stage.addChild(markers);
-    const ch = await contentHeight(opts.player?.sheets?.idle || opts.player?.sheets?.walk);
+    const ch = await contentHeight(player?.sheets?.idle || player?.sheets?.walk);
+    if (!alive) return;
     depthScale.v = SPRITE_TILES * TILE6 / (ch * G);
     R = await createCombatRenderer({ pixi, defsById, layers: { units, fx, projLayer: proj }, coords: { mapX: (x) => x, mapY: (y) => y, depthOf: () => depthScale.v }, getBattle: () => battle });
     if (!alive) return;
@@ -4982,8 +5022,8 @@ function mountComboBattler(pixi, host, opts = {}) {
     let foeN = 0;
     const deadAt = /* @__PURE__ */ new Map();
     const spawnAcc = { t: SPAWN_INTERVAL };
-    const rosterAt = (fx2, fy) => {
-      const w = fieldToWorld(fx2, fy);
+    const rosterAt = (fx2, fy2) => {
+      const w = fieldToWorld(fx2, fy2);
       const b = map.biomeAt(Math.round(w.x / TILE6), Math.round(w.y / TILE6)) || "forgottenPlains";
       const r = rosters[b];
       return r && r.length ? r : rosters.forgottenPlains || [];
@@ -5030,6 +5070,16 @@ function mountComboBattler(pixi, host, opts = {}) {
     buildControls();
     offTick = map.onTick(tick);
     emit();
+  }
+  async function selectHero(player) {
+    if (!alive || !player) return;
+    if (battle || combatRoot) teardownCombat();
+    await spawnHero(player);
+  }
+  const ready = (async () => {
+    await map.ready;
+    if (!alive) return;
+    if (opts.player) await spawnHero(opts.player);
   })();
   function getSnapshot() {
     return snap();
@@ -5075,7 +5125,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     combatRoot = null;
     listeners.clear();
   }
-  const ctrl = { ready, getSnapshot, resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
+  const ctrl = { ready, selectHero, getSnapshot, resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
   if (typeof window !== "undefined") {
     window.__comboSnap = () => ctrl.getSnapshot();
     window.__combo = ctrl;

web/shell/sidebar.js

@@ -12,8 +12,9 @@
   function collapsed() { return document.body.classList.contains('tac-collapsed') }
   function setCollapsed(c) { document.body.classList.toggle('tac-collapsed', !!c) }
 
-  // Auto-collapse on mobile unless the user has explicitly toggled this session.
-  function applyResponsive() { if (!userToggled) setCollapsed(isMobile()) }
+  // Start collapsed (hidden drawer) and stay that way until the user opens it via the toggle —
+  // a mobile-style drawer on every viewport. Never auto-expands; once toggled, the user is in charge.
+  function applyResponsive() { if (!userToggled) setCollapsed(true) }
 
   // Highlight the active nav item by its target label.
   function setActive(target) {

web/tiny.js

@@ -210,22 +210,60 @@ const GAME_ROSTERS = {
 // 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
+// A persona → controllable hero (class → sheets + engine profession).
+const buildPlayer = (chars, p) => {
+  const pc = chars[CLASS_SLUG[p?.unitClass]] || chars['true-heroes-iii-fighter']
+  return { name: p?.name || pc?.name || 'Hero', sheets: sheetsOf(pc), unit: { profession: PERSONA_PROF[p?.unitClass] || 'Warrior', name: p?.name || 'Hero' } }
+}
+// Bottom-of-screen hero picker: a card per saved persona (idle-sprite avatar + name). onPick gets the
+// chosen persona record. Overlays the map (pointer-events only on the cards, so the map still pans).
+function buildHeroPicker(host, personas, chars, onPick) {
+  const bar = document.createElement('div')
+  bar.style.cssText = 'position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 12px 18px;pointer-events:none;background:linear-gradient(to top,rgba(8,11,16,.86),rgba(8,11,16,0));font-family:var(--tac-font,system-ui)'
+  const title = document.createElement('div')
+  title.textContent = 'Choose your hero'
+  title.style.cssText = 'color:#e8e8e8;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;text-shadow:0 1px 3px #000'
+  const row = document.createElement('div')
+  row.style.cssText = 'display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:100%;pointer-events:auto'
+  for (const p of personas) {
+    const pc = chars[CLASS_SLUG[p?.unitClass]] || chars['true-heroes-iii-fighter']
+    const card = document.createElement('button')
+    card.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:8px 6px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.92);color:#e8e8e8;cursor:pointer;font:600 11px var(--tac-font,system-ui)'
+    const av = document.createElement('div')
+    av.style.cssText = 'width:48px;height:48px;border-radius:8px;background:#0b0e12 0% 0%/400% 400% no-repeat;image-rendering:pixelated;border:1px solid #20262e'
+    if (pc?.idle) av.style.backgroundImage = `url(${spriteUrl(pc.idle)})`
+    const nm = document.createElement('div'); nm.textContent = p?.name || pc?.name || 'Hero'
+    nm.style.cssText = 'max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
+    card.append(av, nm)
+    if (p?.unitClass) { const cl = document.createElement('div'); cl.textContent = p.unitClass; cl.style.cssText = 'color:#8a93a0;font-weight:500;font-size:10px'; card.append(cl) }
+    card.addEventListener('pointerdown', (ev) => { ev.preventDefault(); ev.stopPropagation(); onPick(p) })
+    row.appendChild(card)
+  }
+  bar.append(title, row); host.appendChild(bar)
+  return bar
+}
 whenEl('battle-stage', async (el) => {
   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
-  }
   const buildRoster = (list) => list.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)
   const rosters = Object.fromEntries(Object.entries(GAME_ROSTERS).map(([k, v]) => [k, buildRoster(v)]))
-  comboCtrl = mountComboBattler(PIXI, el, { seed: 1, player, rosters })
+  // Mount with NO hero → the map shows and the player picks a persona from the bottom picker. The
+  // picker reappears whenever there's no live hero (initial, and after the current one dies).
+  comboCtrl = mountComboBattler(PIXI, el, { seed: 1, rosters })
   await comboCtrl.ready
+  const FALLBACK = { name: 'Fighter', unitClass: 'Warrior' }
+  let picker = null
+  const showPicker = () => {
+    if (picker) return
+    const personas = listPersonas()
+    picker = buildHeroPicker(el, personas.length ? personas : [FALLBACK], chars, (p) => {
+      picker?.remove(); picker = null
+      comboCtrl.selectHero(buildPlayer(chars, p))
+    })
+  }
+  showPicker()
+  comboCtrl.onChange((s) => { if (s.over) showPicker() })
 })