Tour: pulse-glow the control each step is waiting on

While a tour step awaits input, the button it points to now pulses with a gold
glow so the eye is led straight to it. The glow follows the tour — it clears
from the old control and lights the new one as steps advance, and it tracks
controls that only appear once a modal/sheet opens or get re-rendered (picker
card, skill buttons) via a light poll.

- tutorial.js: inject .ta-tut-glow keyframes; trackGlow(selector) per step,
cleared on teardown; steps gain an optional `target` CSS selector.
- tiny.js: target selectors on the create/recruit/save/move/attack/dodge/sheet/
forge/talk steps; data-tut tags on the create card, Save & Play, ☰ sheet,
Forge skill and Talk buttons.
- heroCreator.js: data-tut="recruit" on the Recruit button.
- comboBattler.js: rebuilt bundle (joystick/dodge/attack now carry data-tut).

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

web/comboBattler.js

@@ -6410,6 +6410,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     wrap.style.cssText = "position:absolute;inset:0;pointer-events:none;z-index:5;font-family:monospace";
     const BASE = 116, KNOB = 54, R2 = (BASE - KNOB) / 2, DEAD = 0.22;
     const base = document.createElement("div");
+    base.dataset.tut = "move";
     base.style.cssText = `position:absolute;left:20px;bottom:20px;width:${BASE}px;height:${BASE}px;border-radius:50%;background:rgba(20,24,33,.32);border:2px solid rgba(232,232,232,.32);pointer-events:auto;touch-action:none`;
     const knob = document.createElement("div");
     knob.style.cssText = `position:absolute;left:${(BASE - KNOB) / 2}px;top:${(BASE - KNOB) / 2}px;width:${KNOB}px;height:${KNOB}px;border-radius:50%;background:rgba(232,232,232,.85);border:1px solid #20262e;transition:transform .05s linear`;
@@ -6485,9 +6486,12 @@ function mountComboBattler(pixi, host, opts = {}) {
       req.dodge = true;
     }, false);
     dodgeBtn.title = "Dodge roll (Shift)";
-    actionRow.append(dodgeBtn, roundBtn("\u2694", () => {
+    dodgeBtn.dataset.tut = "dodge";
+    const atkBtn = roundBtn("\u2694", () => {
       req.attack = true;
-    }, true));
+    }, true);
+    atkBtn.dataset.tut = "attack";
+    actionRow.append(dodgeBtn, atkBtn);
     pad.appendChild(actionRow);
     wrap.appendChild(pad);
     threatBadge = document.createElement("div");

web/heroCreator.js

@@ -147,7 +147,7 @@ export function mountHeroCreator(host, opts = {}) {
   const seed = el('input', { class: 'persona-input', type: 'text', placeholder: 'a word, a vibe… (optional)' })
   const stats = el('div', { class: 'persona-stats' })
   const status = el('div', { class: 'persona-status' }, DEFAULT_STATUS)
-  const btn = el('button', { class: 'persona-go', type: 'button' }, '⚔ Recruit hero')
+  const btn = el('button', { class: 'persona-go', type: 'button', 'data-tut': 'recruit' }, '⚔ Recruit hero')
 
   const nameEl = el('div', { class: 'persona-name persona-edit', 'data-ph': 'Name' })
   const aboutEl = el('div', { class: 'persona-about persona-edit', 'data-ph': 'Their story…' })

web/tiny.js

@@ -28,16 +28,16 @@ import { createTutorial } from '/web/tutorial.js'
 // First-run guided tour (in-world copy). Steps advance as the player acts; always skippable.
 const TUTORIAL_STEPS = [
   { anchor: 'center', nextLabel: 'Begin', skipLabel: 'No thanks', text: 'Welcome, commander. Your champions aren’t chosen from a roster — each is forged anew, body and soul. A quick tour?' },
-  { anchor: 'bottom-center', advanceOn: 'create-open', text: 'Recruit your first champion — tap “+ Create hero”.' },
-  { anchor: 'center', advanceOn: 'persona', text: 'Choose a calling and Recruit. Their name and legend are written for them alone — here and now.' },
-  { anchor: 'center', advanceOn: 'spawn', text: 'A face all their own, and a voice to match. Save & Play to bring them to the field.' },
-  { anchor: 'bottom-left', advanceOn: 'move', text: 'Lead them with the stick — or WASD on a keyboard.' },
-  { anchor: 'bottom-right', advanceOn: 'kill', text: 'Strike with ⚔ (or Space). Most foes fall in a blow or two — thin the ranks.' },
-  { anchor: 'bottom-right', text: 'Roll with ⟲ (or Shift) to slip a blow — untouchable for a heartbeat.' },
+  { anchor: 'bottom-center', advanceOn: 'create-open', target: '[data-tut="create"]', text: 'Recruit your first champion — tap “+ Create hero”.' },
+  { anchor: 'center', advanceOn: 'persona', target: '[data-tut="recruit"]', text: 'Choose a calling and Recruit. Their name and legend are written for them alone — here and now.' },
+  { anchor: 'center', advanceOn: 'spawn', target: '[data-tut="save"]', text: 'A face all their own, and a voice to match. Save & Play to bring them to the field.' },
+  { anchor: 'bottom-left', advanceOn: 'move', target: '[data-tut="move"]', text: 'Lead them with the stick — or WASD on a keyboard.' },
+  { anchor: 'bottom-right', advanceOn: 'kill', target: '[data-tut="attack"]', text: 'Strike with ⚔ (or Space). Most foes fall in a blow or two — thin the ranks.' },
+  { anchor: 'bottom-right', target: '[data-tut="dodge"]', text: 'Roll with ⟲ (or Shift) to slip a blow — untouchable for a heartbeat.' },
   { anchor: 'top-left', text: 'Felling foes earns XP. Fill the bar to level up and draft a boon.' },
-  { anchor: 'top-right', advanceOn: 'sheet', text: 'Press C (or the ☰ button) to open your champion’s sheet.' },
-  { anchor: 'right', advanceOn: 'forge', text: 'Forge a skill from your own words — describe it and it’s made real, unlike any other, with art of its own. Then set it to a slot and hold 1/2/3 to aim, release to unleash — it strikes all who stand near.' },
-  { anchor: 'right', text: 'Tap “Talk” — they remember every battle they’ve lived, and answer in their own voice (🔊).' },
+  { anchor: 'top-right', advanceOn: 'sheet', target: '[data-tut="sheet"]', text: 'Press C (or the ☰ button) to open your champion’s sheet.' },
+  { anchor: 'right', advanceOn: 'forge', target: '[data-tut="forge"]', text: 'Forge a skill from your own words — describe it and it’s made real, unlike any other, with art of its own. Then set it to a slot and hold 1/2/3 to aim, release to unleash — it strikes all who stand near.' },
+  { anchor: 'right', target: '[data-tut="talk"]', text: 'Tap “Talk” — they remember every battle they’ve lived, and answer in their own voice (🔊).' },
   { anchor: 'center', nextLabel: 'To battle!', text: 'Recruit, fight, forge, speak. The field is yours, commander.' },
 ]
 const tut = createTutorial(TUTORIAL_STEPS)
@@ -346,7 +346,7 @@ function buildHeroPicker(host, personas, chars, onPick, onCreate) {
   }
   // "+ Create hero" card → opens the create modal.
   const create = document.createElement('button')
-  create.className = 'hero-pick-create'; create.style.cssText = PICK_CARD_CSS
+  create.className = 'hero-pick-create'; create.dataset.tut = 'create'; create.style.cssText = PICK_CARD_CSS
   const plus = document.createElement('div'); plus.className = 'hero-pick-plus'; plus.textContent = '+'
   plus.style.cssText = 'width:48px;height:48px;display:flex;align-items:center;justify-content:center'
   const clbl = document.createElement('div'); clbl.textContent = 'Create hero'; clbl.style.cssText = 'max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
@@ -370,7 +370,7 @@ function openCreateModal(host, onCreated) {
   const body = document.createElement('div'); body.className = 'hero-modal-body'
   const foot = document.createElement('div'); foot.className = 'hero-modal-foot'
   const cancel = document.createElement('button'); cancel.className = 'hero-modal-cancel'; cancel.type = 'button'; cancel.textContent = 'Cancel'
-  const save = document.createElement('button'); save.className = 'hero-modal-save'; save.type = 'button'; save.textContent = 'Save & Play ▶'; save.disabled = true
+  const save = document.createElement('button'); save.className = 'hero-modal-save'; save.dataset.tut = 'save'; save.type = 'button'; save.textContent = 'Save & Play ▶'; save.disabled = true
   foot.append(cancel, save) // the creator prepends its ← Back here (shown only once a hero exists)
   card.append(head, body, foot); backdrop.append(card); host.appendChild(backdrop)
 
@@ -494,7 +494,7 @@ whenEl('battle-stage', async (el) => {
 
   // ── Character sheet — a top-right button slides a hero panel in from the right (sidebar-style). ──
   let sheetOpen = false
-  const sheetBtn = document.createElement('button'); sheetBtn.type = 'button'; sheetBtn.title = 'Character (C)'
+  const sheetBtn = document.createElement('button'); sheetBtn.type = 'button'; sheetBtn.title = 'Character (C)'; sheetBtn.dataset.tut = 'sheet'
   sheetBtn.innerHTML = '☰<span style="font:700 9px var(--tac-font,system-ui);display:block;margin-top:-2px;color:#9aa4b2;letter-spacing:.04em">C</span>'
   sheetBtn.style.cssText = 'position:absolute;top:14px;right:14px;z-index:7;width:44px;height:46px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.85);color:#e8e8e8;font:600 17px var(--tac-font,system-ui);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1'
   const sheet = document.createElement('aside')
@@ -614,7 +614,7 @@ whenEl('battle-stage', async (el) => {
     const { sh, close } = openToolSheet(`⚒ Forge a skill for ${currentHero.name || 'this hero'}`)
     const ta = document.createElement('textarea'); ta.rows = 3; ta.placeholder = 'describe the skill (e.g. “a whirlwind that bleeds everyone around me”)'
     ta.style.cssText = 'width:100%;resize:vertical;background:#0d1015;border:1px solid #2a3340;border-radius:10px;color:#e8e8e8;padding:10px;font:13px var(--tac-font,system-ui);box-sizing:border-box'
-    const go = document.createElement('button'); go.type = 'button'; go.textContent = '⚒ Forge skill'
+    const go = document.createElement('button'); go.type = 'button'; go.textContent = '⚒ Forge skill'; go.dataset.tut = 'forge'
     go.style.cssText = 'width:100%;margin-top:10px;padding:12px;border-radius:10px;border:1px solid #c9a227;background:#2a2410;color:#ffe082;font:600 14px var(--tac-font,system-ui);cursor:pointer'
     const status = document.createElement('div'); status.style.cssText = 'color:#9aa4b2;font-size:12px;margin-top:8px;min-height:16px'
     sh.append(ta, go, status); setTimeout(() => ta.focus(), 50)
@@ -663,7 +663,7 @@ whenEl('battle-stage', async (el) => {
     }
     // Talk to this fighter (chat + voice). Needs a saved hero (id) to persist the conversation.
     if (currentHero.id) {
-      const talk = document.createElement('button'); talk.type = 'button'; talk.textContent = `💬 Talk to ${currentHero.name || 'them'}`
+      const talk = document.createElement('button'); talk.type = 'button'; talk.dataset.tut = 'talk'; talk.textContent = `💬 Talk to ${currentHero.name || 'them'}`
       talk.style.cssText = 'width:100%;padding:11px;border-radius:10px;border:1px solid #2a3340;background:#16202e;color:#e8e8e8;font:600 13px var(--tac-font,system-ui);cursor:pointer;margin-bottom:12px'
       talk.addEventListener('click', openChat); sheet.append(talk)
     }

web/tutorial.js

@@ -8,6 +8,17 @@ const save = (s) => { try { localStorage.setItem(KEY, JSON.stringify(s)) } catch
 
 function elc(tag, css, text) { const n = document.createElement(tag); if (css) n.style.cssText = css; if (text != null) n.textContent = text; return n }
 
+// Pulsing gold glow drawn on whatever control the current step is waiting for, so the eye is led
+// straight to the button to press. Injected once; targets carry a [data-tut="…"] attribute.
+;(function injectTutGlow() {
+  try {
+    if (document.getElementById('ta-tut-glow-css')) return
+    const s = document.createElement('style'); s.id = 'ta-tut-glow-css'
+    s.textContent = '@keyframes ta-tut-pulse{0%,100%{box-shadow:0 0 0 2px rgba(255,224,130,.55),0 0 8px 2px rgba(201,162,39,.35)}50%{box-shadow:0 0 0 3px rgba(255,224,130,.95),0 0 22px 8px rgba(255,224,130,.7)}}.ta-tut-glow{animation:ta-tut-pulse 1.15s ease-in-out infinite;border-color:#ffe082!important;position:relative;z-index:9}'
+    document.head.appendChild(s)
+  } catch { /* ignore */ }
+})()
+
 // Place a fixed-position callout in a screen region, offset so it doesn't cover the control.
 // All anchors sit in the LOWER part of the screen so the callout never covers the map, the create
 // modal, the picker or the top UI — and you can still read + click through. 'bottom' is the default
@@ -21,8 +32,28 @@ const REGION = { center: BANNER, bottom: BANNER, 'bottom-center': BANNER, 'botto
 export function createTutorial(steps) {
   let state = { step: 0, done: false, dismissed: false, ...load() }
   let idx = -1, box = null
+  let glowEl = null, glowTimer = null
   const persist = () => save(state)
 
+  // Keep a pulsing glow on the step's target control. Polled because some targets only appear once a
+  // modal/sheet opens, and some get re-rendered (the picker card, skill buttons) — we follow the swap.
+  function clearGlow() {
+    if (glowTimer) { clearInterval(glowTimer); glowTimer = null }
+    if (glowEl) { try { glowEl.classList.remove('ta-tut-glow') } catch { /* ignore */ } glowEl = null }
+  }
+  function trackGlow(sel) {
+    clearGlow()
+    if (!sel) return
+    const tick = () => {
+      const el = document.querySelector(sel)
+      if (el === glowEl) return
+      if (glowEl) { try { glowEl.classList.remove('ta-tut-glow') } catch { /* ignore */ } }
+      glowEl = el
+      if (el) { try { el.classList.add('ta-tut-glow') } catch { /* ignore */ } }
+    }
+    tick(); glowTimer = setInterval(tick, 400)
+  }
+
   const shouldAutoStart = () => !state.done && !state.dismissed
   function startOrResume() { if (state.done) return; idx = Math.min(state.step || 0, steps.length - 1); show() }
   function emit(event) { const s = steps[idx]; if (idx >= 0 && s && s.advanceOn === event) advance() }
@@ -30,7 +61,7 @@ export function createTutorial(steps) {
   function skip() { state.dismissed = true; persist(); teardown() }
   function finish() { state.done = true; persist(); teardown() }
   function reset() { state = { step: 0, done: false, dismissed: false }; persist(); idx = 0; show() }
-  function teardown() { if (box) { try { box.remove() } catch { /* ignore */ } } box = null }
+  function teardown() { clearGlow(); if (box) { try { box.remove() } catch { /* ignore */ } } box = null }
 
   function show() {
     const s = steps[idx]
@@ -51,6 +82,7 @@ export function createTutorial(steps) {
     nx.type = 'button'; nx.addEventListener('click', advance); row.appendChild(nx)
     box.appendChild(row)
     document.body.appendChild(box)
+    trackGlow(s.target) // pulse the control this step is pointing at (if any)
   }
 
   return { emit, startOrResume, shouldAutoStart, reset, skip, isActive: () => !!box }