Phase 5: wire emotes into the Game + settings toggle + asset

Pass the emote sheet URL into comboBattler, fire a level-up heart via heroEmote, add
a Gameplay > 'Show character emotes' toggle, copy the emote sheet to web/assets
(served at /sprites/emotes.png) and add it to build.sh. Rebuilt comboBattler bundle.

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

build.sh

@@ -65,6 +65,9 @@ cp "$AB/public/assets/characters.json" web/assets/characters.json
 cp "$AB/public/assets/effects.json" web/assets/effects.json
 cp "$AB/public/classes.json" web/assets/classes.json
 cp "$AB/public/enemies.json" web/assets/enemies.json
+# Emote sheet (Minifantasy UI Overhaul "Character_Emotions") for the on-map condition emotes.
+# Served at /sprites/emotes.png; comboBattler slices it as an 8×8 grid (src/render/emotes.js).
+cp "$AB/public/assets/minifantasy/Minifantasy_UI _Overhaul_v1.0/_Minifantasy_UI_Overhaul_Assets/_General_UI_Resources/Character_Emotions/_Emotions.png" web/assets/emotes.png
 # Map assets: dump the manifest (MAP_ASSET_URLS — assembled from the map renderers + configs in
 # src/render/mapConfigs.js so it can't drift) and curate exactly those PNGs (tilesets / props /
 # premade-scene layers / interior+tower skins, ~105 files). No whole-pack copy.

web/comboBattler.js

@@ -5903,6 +5903,103 @@ function step(b, dt) {
   }
 }
 
+// ../auto-battler/src/render/emotes.js
+var CELL = {
+  happy: [6, 0],
+  // smile — killed a foe / level-up payoff
+  angry: [4, 2],
+  // grr — took a hit
+  surprised: [2, 3],
+  // o-mouth
+  dizzy: [5, 3],
+  // red X eyes — stunned / dead
+  sick: [2, 4],
+  // queasy — bleeding/poison/burning
+  sweat: [2, 5],
+  // nervous drop — low HP
+  love: [6, 5],
+  // ❤ — level-up
+  sleepy: [7, 5]
+  // ♪ — idle, out of combat
+};
+async function createEmoteLayer(pixi, parent, { url, unit, sizeTiles = 1.3, headTiles = 1.15 }) {
+  await pixi.Assets.load(url);
+  const base = pixi.Texture.from(url);
+  try {
+    base.source.scaleMode = "nearest";
+  } catch {
+  }
+  const sub4 = (c, r) => new pixi.Texture({ source: base.source, frame: new pixi.Rectangle(8 + 16 * c, 8 + 16 * r, 8, 8) });
+  const tex = {};
+  for (const k in CELL) tex[k] = sub4(CELL[k][0], CELL[k][1]);
+  const layer = new pixi.Container();
+  layer.zIndex = 5e8;
+  parent.addChild(layer);
+  const scale = unit * sizeTiles / 8;
+  const active = /* @__PURE__ */ new Map();
+  const enabled = () => {
+    try {
+      return localStorage.getItem("tinyarmy.emotes") !== "0";
+    } catch {
+      return true;
+    }
+  };
+  function show(actorId, key, now, secs = 1.4) {
+    if (!enabled() || !tex[key]) return;
+    let e = active.get(actorId);
+    if (!e) {
+      const spr = new pixi.Sprite(tex[key]);
+      spr.anchor.set(0.5, 1);
+      layer.addChild(spr);
+      e = { spr };
+      active.set(actorId, e);
+    }
+    e.spr.texture = tex[key];
+    e.until = now + secs;
+    e.born = now;
+  }
+  function update(now, posOf) {
+    for (const [id, e] of [...active]) {
+      if (now >= e.until) {
+        e.spr.destroy();
+        active.delete(id);
+        continue;
+      }
+      const p = posOf(id);
+      if (!p) {
+        e.spr.visible = false;
+        continue;
+      }
+      const age = now - e.born, pop = Math.min(1, age / 0.1);
+      e.spr.visible = true;
+      e.spr.scale.set(scale * (0.5 + 0.5 * pop));
+      e.spr.x = p.x;
+      e.spr.y = p.y - headTiles * unit - Math.sin(Math.min(age, 0.25) / 0.25 * Math.PI) * 0.3 * unit;
+    }
+  }
+  function clear(actorId) {
+    const e = active.get(actorId);
+    if (e) {
+      e.spr.destroy();
+      active.delete(actorId);
+    }
+  }
+  function destroy() {
+    for (const [, e] of active) {
+      try {
+        e.spr.destroy();
+      } catch {
+      }
+    }
+    active.clear();
+    try {
+      layer.destroy({ children: true });
+    } catch {
+    }
+  }
+  return { show, update, clear, destroy, keys: Object.keys(CELL) };
+}
+
 // ../auto-battler/src/render/comboBattler.js
 var TILE8 = 8;
 var SPRITE_TILES = 0.95;
@@ -5958,6 +6055,9 @@ function mountComboBattler(pixi, host, opts = {}) {
     return { forgottenPlains: e, orc: e, necropolis: e };
   })();
   let battle = null, R = null, combatRoot = null, rings = null, markers = null, navDbg = null, spawnFn = null, dead = false;
+  let emoteLayer = null;
+  const emoPrev = /* @__PURE__ */ new Map();
+  let idleEmoAcc = 0;
   const depthScale = { v: 2 };
   let offTick = null, keyHandlers = null, tapHandlers = null, controlsEl = null, alive = true;
   const keys = { x: 0, y: 0 };
@@ -6213,11 +6313,51 @@ function mountComboBattler(pixi, host, opts = {}) {
     R.updateFloats(dtMS);
     R.drawProjectiles(battle);
     R.processLog(battle, cursor);
+    updateEmotes(dt);
     drawRings();
     drawMarkers();
     drawNav();
     emit();
   }
+  const AFFLICT = ["bleeding", "poison", "burning", "deepWound"];
+  function updateEmotes(dt) {
+    if (!emoteLayer || !battle) return;
+    const now = battle.t;
+    for (const a of battle.actors) {
+      const prev = emoPrev.get(a.id) || { hp: a.hp, low: false, conds: /* @__PURE__ */ new Set(), kd: 0, alive: true };
+      if (a.alive) {
+        if (a.hp < prev.hp - 0.5) emoteLayer.show(a.id, "angry", now, 0.85);
+        const low = a.maxHp ? a.hp / a.maxHp < 0.33 : false;
+        if (low && !prev.low) emoteLayer.show(a.id, "sweat", now, 1.4);
+        const conds = new Set((a.conds || []).map((c) => c.type));
+        for (const t of conds) if (!prev.conds.has(t) && AFFLICT.includes(t)) {
+          emoteLayer.show(a.id, "sick", now, 1.2);
+          break;
+        }
+        if (a.kd > now && a.kd > prev.kd) emoteLayer.show(a.id, "dizzy", now, 1);
+        emoPrev.set(a.id, { hp: a.hp, low, conds, kd: a.kd, alive: true });
+      } else {
+        if (prev.alive) emoteLayer.show(a.id, "dizzy", now, 1.3);
+        emoPrev.set(a.id, { ...prev, alive: false, hp: a.hp, conds: /* @__PURE__ */ new Set() });
+      }
+    }
+    const p = pa();
+    if (p && p.alive && nearestFoeDist() === Infinity) {
+      idleEmoAcc += dt;
+      if (idleEmoAcc > 6) {
+        emoteLayer.show(p.id, "sleepy", now, 1.6);
+        idleEmoAcc = 0;
+      }
+    } else idleEmoAcc = 0;
+    emoteLayer.update(now, (id) => {
+      const a = battle.actors.find((x) => x.id === id);
+      return a ? { x: a.x, y: a.y } : null;
+    });
+  }
+  function heroEmote(key) {
+    const p = pa();
+    if (emoteLayer && p && battle) emoteLayer.show(p.id, key, battle.t, 1.6);
+  }
   function drawRings() {
     const p = pa();
     rings.clear();
@@ -6292,6 +6432,12 @@ function mountComboBattler(pixi, host, opts = {}) {
     } catch {
     }
     navDbg = null;
+    try {
+      emoteLayer?.destroy();
+    } catch {
+    }
+    emoteLayer = null;
+    emoPrev.clear();
     try {
       combatRoot?.destroy({ children: true });
     } catch {
@@ -6365,6 +6511,20 @@ function mountComboBattler(pixi, host, opts = {}) {
     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;
     for (const a of battle.actors) a.attackTimer = 0;
+    emoPrev.clear();
+    idleEmoAcc = 0;
+    if (opts.emoteSheetUrl) {
+      try {
+        emoteLayer = await createEmoteLayer(pixi, combatRoot, { url: opts.emoteSheetUrl, unit: TILE8 / G });
+      } catch {
+        emoteLayer = null;
+      }
+    }
+    if (!alive) {
+      emoteLayer?.destroy();
+      emoteLayer = null;
+      return;
+    }
     let foeN = 0;
     const deadAt = /* @__PURE__ */ new Map();
     const spawnAcc = { t: SPAWN_INTERVAL };
@@ -6389,6 +6549,7 @@ function mountComboBattler(pixi, host, opts = {}) {
         if (!a.alive) {
           if (!deadAt.has(a.id)) {
             deadAt.set(a.id, battle.t);
+            heroEmote("happy");
             try {
               opts.onEnemyDefeated?.({ id: a.id, name: a.name, profession: a.profession, tier: a.tier, x: a.x, y: a.y, t: battle.t });
             } catch {
@@ -6488,7 +6649,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     const p = pa();
     return p ? { name: p.name, profession: p.profession, hp: Math.round(p.hp), maxHp: Math.round(p.maxHp), skills: (p.bar || []).map((s) => s.name) } : null;
   }
-  const ctrl = { ready, selectHero, getSpawnWorld, getSnapshot, getHero, resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
+  const ctrl = { ready, selectHero, getSpawnWorld, getSnapshot, getHero, heroEmote, resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
   if (typeof window !== "undefined") {
     window.__comboSnap = () => ctrl.getSnapshot();
     window.__combo = ctrl;

web/settingsPanel.js

@@ -37,6 +37,16 @@ function injectSection(sample, id, title, intro, mountFn) {
   mountFn(host)
 }
 
+// Gameplay toggles. Currently just emotes on/off, persisted to the same localStorage flag the
+// emote layer reads ('tinyarmy.emotes', default on → only '0' disables).
+function mountGameplayBar(host) {
+  const cb = el('input', { type: 'checkbox' })
+  try { cb.checked = localStorage.getItem('tinyarmy.emotes') !== '0' } catch { cb.checked = true }
+  cb.addEventListener('change', () => { try { localStorage.setItem('tinyarmy.emotes', cb.checked ? '1' : '0') } catch { /* ignore */ } })
+  const lab = el('label', { class: 'tac-set-row', style: 'display:flex;align-items:center;gap:8px;cursor:pointer' }, [cb, 'Show character emotes'])
+  host.append(lab)
+}
+
 export function mountSettingsPanel() {
   const tryInject = () => {
     const sample = [...document.querySelectorAll('.banner-wrap')].find((e) => /Display Theme/i.test(e.textContent))
@@ -64,6 +74,9 @@ export function mountSettingsPanel() {
       'Nemotron 3 Nano (NVIDIA) runs via NVIDIA NIM; Mellum2 (JetBrains) runs as a ' +
       'ZeroGPU sidecar and falls back to Nemotron (NIM) if its sidecar is unavailable.',
       mountCodingModelBar)
+    injectSection(sample, 'tac-gameplay-settings', 'Gameplay',
+      'On-map flourishes during the Game. Emotes pop little reaction bubbles above heroes ' +
+      'and enemies when they take a hit, get afflicted, drop low, or score a kill.', mountGameplayBar)
   }
   new MutationObserver(tryInject).observe(document.body, { childList: true, subtree: true })
   tryInject()

web/tiny.js

@@ -352,7 +352,7 @@ whenEl('battle-stage', async (el) => {
   // Award XP to the active hero when it defeats a foe (the loop fires this once per kill).
   // Declared as a closure so it always reads the *current* hero + freshest stored progression.
   const onEnemyDefeated = (enemy) => { try { awardKill(enemy) } catch { /* never break combat */ } }
-  comboCtrl = mountComboBattler(PIXI, el, { seed: 1, rosters, onEnemyDefeated })
+  comboCtrl = mountComboBattler(PIXI, el, { seed: 1, rosters, onEnemyDefeated, emoteSheetUrl: '/sprites/emotes.png' })
   await comboCtrl.ready
   const FALLBACK = { name: 'Fighter', unitClass: 'Warrior' }
   const OVERVIEW_ZOOM = 0.45, GAMEPLAY_ZOOM = 2.5
@@ -382,7 +382,7 @@ whenEl('battle-stage', async (el) => {
     if (res.leveledUp) events = appendEvent(events, 'level_up', { level: prog.level, ts: Date.now() })
     patchPersona(id, { progression: prog, events })
     currentHero = getPersona(id)
-    if (res.leveledUp) showLevelUp(prog)
+    if (res.leveledUp) { showLevelUp(prog); comboCtrl?.heroEmote?.('love') }
     if (sheetOpen) renderSheet()
   }
   // A brief level-up banner over the canvas (mobile-friendly: centered, auto-dismiss).