kgames

game.js (44969B)

---

 // Story Stamp — the game. Plain DOM + CSS animations, keyboard only.
 //
 // The child runs the checkout desk of the island library. Kids queue up, each
 // wanting a book about something (bugs, space, dinosaurs ...). The child
 // picks who to help; that patron hands over a request slip with the book's
 // title in sound boxes. The child stamps each letter (hearing its sound),
 // then presses SPACE to sound the title out: the sounds play with shrinking
 // gaps until they nearly touch — the word itself is never said, the child
 // has to say it — and then picks the right book from the cart, stamps it, and
 // the patron leaves happy. "Returns" (unlocked later) go the other way: the
 // patron says the word and the child types its sounds to shelve the book.
 // Pure logic lives in lib.js, audio in audio.js; this file is UI + flow.
 //
 // Wall-clock rule: every delay is a setTimeout so the flow keeps moving in
 // throttled / headless browsers. window.__TEST_MODE__ shortens them all.
 (function (root) {
   'use strict';
 
   const SS     = root.SS;
   const ASSETS = root.SS_ASSETS || { phonemes: {}, words: {}, images: {} };
   const TEST   = !!root.__TEST_MODE__;
 
   const T     = (ms) => (TEST ? Math.min(ms, 15) : ms);
   const sleep = (ms) => new Promise((r) => setTimeout(r, T(ms)));
   const esc   = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
   const pick  = (arr) => arr[Math.floor(Math.random() * arr.length)];
   const cap   = (s) => s.charAt(0).toUpperCase() + s.slice(1);
   // Picture by Fluent Emoji asset name (see manifest.js); unknown names draw nothing.
   const img   = (name, cls) => {
     const f = ASSETS.images && ASSETS.images[name];
     return f ? '<img class="ss-img ' + (cls || '') + '" src="assets/' + f + '" alt="" draggable="false">' : '';
   };
   const BOX_COLORS = ['#E63946', '#1D7CF2', '#2EC4B6', '#9B5DE5', '#F4A261', '#06A77D', '#FF5DA2', '#8AC926'];
   const WALKERS = ['Child/Default', 'Girl/Default', 'Boy/Default', 'Penguin', 'Koala', 'Panda', 'Lion', 'Tiger face', 'Bear', 'Alien'];
   const DECOR = {
     rug:       '<div class="d-rug"></div>',
     plant:     '<span class="d-plant">' + img('Potted plant') + '</span>',
     lamp:      '<span class="d-lamp">' + img('Light bulb') + '</span>',
     fishtank:  '<div class="d-tank">' + img('Fish') + img('Tropical fish') + '</div>',
     bunting:   '<div class="d-bunting"></div>',
     cat:       '<span class="d-cat">' + img('Cat') + '</span>',
     globe:     '<span class="d-globe">' + img('Globe showing americas') + '</span>',
     telescope: '<span class="d-telescope">' + img('Telescope') + '</span>',
     dino:      '<span class="d-dino">' + img('Sauropod') + '</span>',
     rocket:    '<span class="d-rocket">' + img('Rocket') + '</span>',
   };
 
   const LINES = {
     hello:      ['Hello!', 'Hi there!', 'Good morning!', 'Hi!', 'Yoo-hoo!', 'Hello, librarian!'],
     again:      ['It is me again!', 'I am back!', 'Remember me?', 'Back for another book!'],
     want:       ['I want a book about {t}!', 'Do you have a book about {t}?', 'A book about {t}, please!', 'I would love a book about {t}.'],
     wantAny:    ['I want a good book!', 'Can you pick me a book?', 'Any good book, please!'],
     slip:       ['Here is my request slip. Can you read it?', 'It is called this. Can you read it?', 'This is the one I want!'],
     returning:  ['I am bringing this book back.', 'I finished my book! Here it is.', 'Time to return this one.'],
     happy:      ['Thank you!', 'Just what I wanted!', 'I love it!', 'You are the best librarian!', 'Hooray!', 'My favourite!'],
     wrongBook:  ['Hmm, that is not it.', 'Oops! Not that one.', 'Not quite! Try again.'],
     instrRead:  'Sound it out! Press each letter.',
     instrHear:  'Which sounds do you hear? Press the letters.',
     readIt:     'Now press space to read it out loud!',
     shelveIt:   'Now press space to put it back!',
     choose:     'What does it say? Say the word, then pick the right book.',
     queue:      'Who is next? Use the arrows and press enter.',
   };
 
   class StoryStamp {
     constructor(container) {
       this.container = container;
       this.storage = null;
       try { this.storage = root.localStorage; } catch (_) {}
       this.storage = this.storage || { getItem() { return null; }, setItem() {}, removeItem() {} };
       this.store   = SS.loadStore(this.storage);
       this.profile = null;
       this.audio   = new root.StoryStampAudio(ASSETS, 'assets/audio/');
       this.state   = 'boot';
       this.busy    = false;
       this.order   = null;
       this.queue   = [];
       this.sel     = 0;
       this.booksToday = 0;
       this.todayWords  = [];
       this.todaySounds = [];
       this.applied = {};
       this._build();
       this._bindKeys();
       this._watchSize();
       this.showProfiles();
       if (!TEST) this._ambient();
     }
 
     now() { return root.__SS_NOW__ || Date.now(); }
     save() { SS.saveStore(this.storage, this.store); }
 
     // ── DOM ────────────────────────────────────────────────────────────────
 
     _build() {
       const r = document.createElement('div');
       r.className = 'ss-root' + (TEST ? ' ss-test' : '');
       const spines = (n, seed) => {
         let out = '';
         for (let i = 0; i < n; i++) {
           const h = 55 + (SS.hashStr(seed + i) % 40);
           out += '<i style="height:' + h + '%;background:' + BOX_COLORS[(SS.hashStr(seed + 'c' + i)) % BOX_COLORS.length] + '"></i>';
         }
         return out;
       };
       const shelf = (side) => '<div class="ss-shelf ' + side + '">' +
         [0, 1, 2, 3].map((row) => '<div class="ss-row"><div class="ss-spines">' + spines(7, side + row) + '</div></div>').join('') + '</div>';
       r.innerHTML =
         '<div class="ss-wall">' +
           '<div class="ss-window"><div class="ss-sky"><div class="ss-sun"></div><div class="ss-cloud"></div><div class="ss-cloud c2"></div>' +
             '<span class="ss-bird">' + img('Bird') + '</span></div><div class="ss-sea"><span class="ss-boat">' + img('Sailboat') + '</span></div>' +
             '<span class="ss-palm">' + img('Palm tree') + '</span><div class="ss-walkers"></div></div>' +
           shelf('left') + shelf('right') +
           '<div class="ss-sign">Island Library</div>' +
           '<div class="ss-decor"></div>' +
         '</div>' +
         '<div class="ss-floor"></div>' +
         '<div class="ss-queue"></div>' +
         '<div class="ss-customer"><div class="ss-bubble"></div><div class="ss-cust-body"></div><div class="ss-cust-name"></div></div>' +
         '<div class="ss-desk"><div class="ss-desk-top"></div><div class="ss-desk-front"></div>' +
           '<div class="ss-slip"><div class="ss-slip-title"></div><div class="ss-boxes"></div><div class="ss-finger">' + img('Backhand index pointing up/Default') + '</div></div>' +
           '<div class="ss-stamp"><div class="ss-stamp-handle"></div><div class="ss-stamp-base"></div></div>' +
           '<div class="ss-cart"></div>' +
           '<div class="ss-book-out"></div>' +
         '</div>' +
         '<div class="ss-prompt"></div>' +
         '<div class="ss-hud"><div class="ss-chip ss-who"></div><div class="ss-chip right ss-shelf-chip"></div></div>' +
         '<div class="ss-day"></div>' +
         '<div class="ss-overlay" hidden><div class="ss-panel"></div></div>';
       this.container.appendChild(r);
       this.$ = (sel) => r.querySelector(sel);
       this.root = r;
       this.$queue = this.$('.ss-queue'); this.$boxes = this.$('.ss-boxes'); this.$prompt = this.$('.ss-prompt');
       this.$cart = this.$('.ss-cart'); this.$slip = this.$('.ss-slip'); this.$slipTitle = this.$('.ss-slip-title');
       this.$finger = this.$('.ss-finger'); this.$stamp = this.$('.ss-stamp'); this.$bookOut = this.$('.ss-book-out');
       this.$customer = this.$('.ss-customer'); this.$bubble = this.$('.ss-bubble'); this.$custBody = this.$('.ss-cust-body');
       this.$custName = this.$('.ss-cust-name'); this.$overlay = this.$('.ss-overlay'); this.$panel = this.$('.ss-panel');
       this.$who = this.$('.ss-who'); this.$shelfChip = this.$('.ss-shelf-chip'); this.$day = this.$('.ss-day');
       this.$decor = this.$('.ss-decor'); this.$walkers = this.$('.ss-walkers');
 
       const btnV = document.getElementById('btn-voice'), btnS = document.getElementById('btn-sfx');
       if (btnV) btnV.addEventListener('click', () => { this.audio.voiceMuted = !this.audio.voiceMuted; btnV.classList.toggle('muted', this.audio.voiceMuted); btnV.textContent = 'Speech: ' + (this.audio.voiceMuted ? 'OFF' : 'ON'); if (this.audio.voiceMuted) this.audio.cancel(); });
       if (btnS) btnS.addEventListener('click', () => { this.audio.sfxMuted = !this.audio.sfxMuted; btnS.classList.toggle('muted', this.audio.sfxMuted); btnS.textContent = 'SFX: ' + (this.audio.sfxMuted ? 'OFF' : 'ON'); });
     }
 
     _watchSize() {
       const apply = () => {
         const w = this.container.clientWidth || 800, h = this.container.clientHeight || 600;
         this.root.style.setProperty('--u', (Math.min(w, h * 1.25) / 100) + 'px');
         this.root.classList.toggle('ss-narrow', w < h * 0.9);
       };
       apply();
       if (root.ResizeObserver) { try { new ResizeObserver(apply).observe(this.container); } catch (_) {} }
       root.addEventListener('resize', apply);
     }
 
     // Passers-by outside the window.
     _ambient() {
       const spawn = () => {
         if (document.visibilityState === 'hidden') return;
         const el = document.createElement('span');
         el.className = 'ss-walker';
         const rev = Math.random() < 0.5;
         el.style.left = rev ? '100%' : '-15%';
         el.style.transform = 'translateX(0)';
         el.innerHTML = img(pick(WALKERS));
         this.$walkers.appendChild(el);
         requestAnimationFrame(() => requestAnimationFrame(() => { el.style.transform = 'translateX(' + (rev ? '-' : '') + '130%)'; }));
         setTimeout(() => el.remove(), 16000);
       };
       setTimeout(spawn, 3000);
       setInterval(spawn, 12000 + Math.random() * 6000);
     }
 
     setPrompt(html) { this.$prompt.innerHTML = html || ''; }
 
     toast(text) {
       const t = document.createElement('div');
       t.className = 'ss-toast'; t.innerHTML = text;
       this.root.appendChild(t);
       setTimeout(() => t.remove(), T(2600));
     }
 
     fx(emoji, x, y) {
       const e = document.createElement('span');
       e.className = 'ss-fx'; e.textContent = emoji;
       e.style.left = x + '%'; e.style.top = y + '%';
       this.root.appendChild(e);
       setTimeout(() => e.remove(), T(1400));
     }
 
     // ── Keyboard ───────────────────────────────────────────────────────────
 
     _bindKeys() {
       root.addEventListener('keydown', (e) => {
         if (e.ctrlKey || e.metaKey || e.altKey) return;
         const k = e.key;
         if ([' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Backspace'].indexOf(k) >= 0) e.preventDefault();
         this.onKey(k);
       });
     }
 
     onKey(k) {
       const letter = k.length === 1 && /[a-z]/i.test(k) ? k.toLowerCase() : null;
       const s = this.state;
       if (s === 'profiles')      return this._keyProfiles(k, letter);
       if (s === 'avatar')        return this._keyAvatar(k);
       if (s === 'name')          return this._keyName(k, letter);
       if (s === 'confirmDelete') return this._keyConfirm(letter);
       if (s === 'menu')          return this._keyMenu(k);
       if (s === 'shelf')         return this._keyShelf(k);
       if (s === 'dayend')        { if (k === 'Enter' || k === ' ') this.newDay(); else if (k === 'Backspace') this.showProfiles(); return; }
       if (s === 'newsound')      { if ((k === 'Enter' || k === ' ') && this._continue) { const c = this._continue; this._continue = null; c(); } return; }
       if (k === 'Backspace' || k === 'Escape') { if (!this.busy) this.showMenu(); return; }
       if (s === 'queue')  return this._keyQueue(k);
       if (s === 'read')   { if (letter) this.typeLetter(letter); else if (k === ' ' || k === 'Enter') this.hint(); return; }
       if (s === 'blend')  { if (k === ' ' || k === 'Enter') this.soundOut(); return; }
       if (s === 'choose') return this._keyChoose(k);
     }
 
     // ── Profiles ───────────────────────────────────────────────────────────
 
     showProfiles() {
       this.audio.cancel();
       this.state = 'profiles'; this.busy = false; this.sel = 0;
       const list = this.store.profiles;
       const idx = list.findIndex((p) => p.id === this.store.last);
       if (idx >= 0) this.sel = idx;
       this._renderProfiles();
       this.audio.speak(list.length ? 'Who is the librarian today? Use the arrows and press enter.' : 'Welcome to the island library! Press enter to make a new librarian.');
     }
 
     _renderProfiles() {
       const list = this.store.profiles;
       const items = list.map((p, i) => '<div class="ss-item' + (i === this.sel ? ' sel' : '') + '">' + img(p.avatar) + esc(p.name) +
         '<small>' + SS.masteredWords(p).length + ' books</small></div>');
       if (list.length < SS.MAX_PROFILES) items.push('<div class="ss-item new' + (this.sel === list.length ? ' sel' : '') + '">✨ New librarian</div>');
       this._panel('<h2>Who is the librarian today?</h2><div class="ss-list">' + items.join('') + '</div>' +
         '<p><kbd>↑</kbd> <kbd>↓</kbd> choose · <kbd>Enter</kbd> start' + (list.length ? ' · <kbd>X</kbd> remove' : '') + '</p>');
     }
 
     _keyProfiles(k, letter) {
       const list = this.store.profiles;
       const n = list.length + (list.length < SS.MAX_PROFILES ? 1 : 0);
       if (k === 'ArrowUp')   { this.sel = (this.sel + n - 1) % n; this._renderProfiles(); this.audio.init(); this.audio.tick(); return; }
       if (k === 'ArrowDown') { this.sel = (this.sel + 1) % n; this._renderProfiles(); this.audio.init(); this.audio.tick(); return; }
       if (/^[1-9]$/.test(k) && +k <= n) { this.sel = +k - 1; this._renderProfiles(); return; }
       if (k === 'Enter' || k === ' ') {
         this.audio.init();
         if (this.sel < list.length) this.start(list[this.sel]);
         else this.showAvatar();
         return;
       }
       if ((letter === 'x' || k === 'Delete') && this.sel < list.length) {
         this.state = 'confirmDelete';
         const p = list[this.sel];
         this._panel('<h2>Remove ' + esc(p.name) + '?</h2><p>' + img(p.avatar) + '</p><p>All of ' + esc(p.name) + '\'s books will be forgotten.</p><p><kbd>Y</kbd> yes, remove · any other key: keep</p>');
         this.audio.speak('Remove ' + p.name + '? Press Y to remove, or any other key to keep.');
       }
     }
 
     _keyConfirm(letter) {
       if (letter === 'y') {
         const p = this.store.profiles[this.sel];
         this.store.profiles = this.store.profiles.filter((x) => x !== p);
         if (this.store.last === p.id) this.store.last = null;
         this.save();
       }
       this.showProfiles();
     }
 
     showAvatar() {
       this.state = 'avatar'; this.avatarSel = Math.floor(Math.random() * SS.AVATARS.length);
       this._renderAvatar();
       this.audio.speak('Pick a picture for yourself. Use the arrows, then press enter.');
     }
     _renderAvatar() {
       this._panel('<h2>Pick your picture</h2><div class="ss-avatars">' +
         SS.AVATARS.map((a, i) => img(a, i === this.avatarSel ? 'sel' : '')).join('') +
         '</div><p><kbd>←</kbd> <kbd>→</kbd> choose · <kbd>Enter</kbd> next</p>');
     }
     _keyAvatar(k) {
       const n = SS.AVATARS.length;
       if (k === 'ArrowLeft' || k === 'ArrowUp')    { this.avatarSel = (this.avatarSel + n - 1) % n; this._renderAvatar(); this.audio.tick(); }
       if (k === 'ArrowRight' || k === 'ArrowDown') { this.avatarSel = (this.avatarSel + 1) % n; this._renderAvatar(); this.audio.tick(); }
       if (k === 'Enter' || k === ' ') { this.state = 'name'; this.nameBuf = ''; this._renderName(); this.audio.speak('Now type your name and press enter.'); }
       if (k === 'Backspace') this.showProfiles();
     }
     _renderName() {
       this._panel('<h2>What is your name?</h2><p>' + img(SS.AVATARS[this.avatarSel]) + '</p><div class="ss-namefield">' + esc(this.nameBuf) + '</div>' +
         '<p>Type your name · <kbd>Enter</kbd> when done</p>');
     }
     _keyName(k, letter) {
       if (letter && this.nameBuf.length < 12) { this.nameBuf += letter; this._renderName(); this.audio.tick(); return; }
       if (k === 'Backspace') { this.nameBuf = this.nameBuf.slice(0, -1); this._renderName(); return; }
       if (k === 'Enter') {
         const p = SS.newProfile(cap(this.nameBuf || 'librarian'), SS.AVATARS[this.avatarSel], this.now());
         this.store.profiles.push(p);
         this.save();
         this.start(p);
       }
     }
 
     // Test / debug helper: create (or reuse) a profile and open the desk.
     quickStart(name) {
       let p = this.store.profiles.find((x) => x.name === name);
       if (!p) { p = SS.newProfile(name, SS.AVATARS[0], this.now()); this.store.profiles.push(p); this.save(); }
       this.audio.init();
       return this.start(p);
     }
 
     // ── Menu / my shelf ────────────────────────────────────────────────────
 
     showMenu() {
       this.audio.cancel();
       this._resumeState = this.state; this.state = 'menu'; this.sel = 0;
       this._renderMenu();
       this.audio.speak('Menu. My shelf, change librarian, or back to the desk.');
     }
     _menuItems() { return ['📚 My shelf', '👋 Change librarian', '🏷️ Back to the desk']; }
     _renderMenu() {
       this._panel('<h2>Menu</h2><div class="ss-list">' + this._menuItems().map((t, i) => '<div class="ss-item' + (i === this.sel ? ' sel' : '') + '">' + t + '</div>').join('') +
         '</div><p><kbd>↑</kbd> <kbd>↓</kbd> · <kbd>Enter</kbd> · <kbd>⌫</kbd> back</p>');
     }
     _keyMenu(k) {
       const n = 3;
       if (k === 'ArrowUp')   { this.sel = (this.sel + n - 1) % n; this._renderMenu(); this.audio.tick(); }
       if (k === 'ArrowDown') { this.sel = (this.sel + 1) % n; this._renderMenu(); this.audio.tick(); }
       if (k === 'Backspace' || k === 'Escape') this._closeOverlay();
       if (k === 'Enter' || k === ' ') {
         if (this.sel === 0) this.showShelf();
         else if (this.sel === 1) { this.$overlay.hidden = true; this.showProfiles(); }
         else this._closeOverlay();
       }
     }
     _closeOverlay() {
       this.$overlay.hidden = true;
       this.state = this._resumeState || 'queue';
       this.audio.speak(this.state === 'queue' ? LINES.queue : 'Back to the desk!');
     }
 
     showShelf() {
       this.state = 'shelf'; this.sel = 0;
       this._renderShelf();
       const n = SS.masteredWords(this.profile).length;
       this.audio.speak(n ? 'Your shelf has ' + n + ' books. Press enter to hear one.' : 'Your shelf is empty. Check out some books!');
     }
     _shelfEntries() {
       const p = this.profile;
       const solid = SS.masteredWords(p), shaky = SS.shakyWords(p);   // both skip words no longer in WORDS
       const all = solid.map((w) => ({ w, solid: true })).concat(shaky.map((w) => ({ w, solid: false })));
       // Group by first topic so the shelf reads like the library's sections.
       const order = SS.TOPICS.map((t) => t.id);
       all.forEach((e) => { e.topic = SS.WORD_BY_NAME[e.w].t[0]; });
       all.sort((a, b) => order.indexOf(a.topic) - order.indexOf(b.topic) || a.w.localeCompare(b.w));
       return all;
     }
     _renderShelf() {
       const entries = this._shelfEntries();
       let html = '', lastTopic = null;
       entries.forEach((e, i) => {
         if (e.topic !== lastTopic) { html += '<div class="ss-shelf-label">' + img(SS.TOPIC_BY_ID[e.topic].art) + ' ' + esc(SS.TOPIC_BY_ID[e.topic].name) + '</div>'; lastTopic = e.topic; }
         html += '<div class="ss-book-mini' + (e.solid ? '' : ' shaky') + (i === this.sel ? ' sel' : '') + '">' + img(SS.WORD_BY_NAME[e.w].art) + '<span>' + e.w + '</span></div>';
       });
       this._panel('<h2>My shelf</h2>' + (entries.length ? '<div class="ss-books">' + html + '</div>' : '<p>No books yet — help someone at the desk!</p>') +
         '<p><kbd>←</kbd> <kbd>→</kbd> choose · <kbd>Enter</kbd> hear it · <kbd>⌫</kbd> back</p>');
       const sel = this.$panel.querySelector('.ss-book-mini.sel');
       if (sel && sel.scrollIntoView) { try { sel.scrollIntoView({ block: 'nearest' }); } catch (_) {} }
     }
     _keyShelf(k) {
       const entries = this._shelfEntries(); const n = entries.length || 1;
       if (k === 'ArrowLeft' || k === 'ArrowUp')    { this.sel = (this.sel + n - 1) % n; this._renderShelf(); this.audio.tick(); }
       if (k === 'ArrowRight' || k === 'ArrowDown') { this.sel = (this.sel + 1) % n; this._renderShelf(); this.audio.tick(); }
       if (k === 'Backspace' || k === 'Escape') this._closeOverlay();
       if ((k === 'Enter' || k === ' ') && entries.length) {
         const word = SS.WORD_BY_NAME[entries[this.sel].w];
         this.audio.cancel();
         this.audio.playSegmented(SS.phonemeUnits(word), { gap: 0.3 }).then(() => this.audio.playWord(word.w));
       }
     }
 
     _panel(html) { this.$panel.innerHTML = html; this.$overlay.hidden = false; }
 
     // ── Start / HUD / library ──────────────────────────────────────────────
 
     async start(profile) {
       this.profile = profile;
       this.store.last = profile.id;
       this.save();
       this.$overlay.hidden = true;
       this.booksToday = 0; this.todayWords = []; this.todaySounds = [];
       this.root.classList.remove('ss-dusk');
       this.applied = {};
       this._applyLibrary(true);
       this._hud();
       this.audio.init();
       this.busy = true; this.state = 'opening';
       root.__SS_READY__ = true;
       await this.audio.speak('Hello ' + profile.name + '! Welcome to the island library. You are at the checkout desk.');
       this.showQueue();
     }
 
     _hud() {
       const p = this.profile; if (!p) return;
       this.$who.innerHTML = img(p.avatar) + esc(p.name);
       this.$shelfChip.innerHTML = '📚 ' + SS.masteredWords(p).length + ' <small>⌫ menu</small>';
       let dots = '';
       for (let i = 0; i < SS.BOOKS_PER_DAY; i++) dots += '<span class="' + (i < this.booksToday ? 'on' : '') + '"></span>';
       this.$day.innerHTML = dots;
     }
 
     // Decorate the library for every upgrade earned; announce new ones if asked.
     _applyLibrary(silent) {
       const ups = SS.libraryUpgrades(SS.masteredWords(this.profile).length);
       const fresh = [];
       ups.forEach((u) => {
         if (this.applied[u.id]) return;
         this.applied[u.id] = true;
         this.root.classList.add('has-' + u.id);
         if (DECOR[u.id]) this.$decor.insertAdjacentHTML('beforeend', DECOR[u.id]);
         if (!silent) fresh.push(u);
       });
       return fresh;
     }
 
     // ── The queue ──────────────────────────────────────────────────────────
 
     _resetDesk() {
       this.order = null;
       this.$boxes.innerHTML = ''; this.$boxes.className = 'ss-boxes';
       this.$slip.className = 'ss-slip'; this.$slipTitle.innerHTML = '';
       this.$cart.innerHTML = ''; this.$cart.className = 'ss-cart'; this.$cart.parentNode.classList.remove('choosing');
       this.$bookOut.innerHTML = ''; this.$bookOut.className = 'ss-book-out';
       this.$stamp.className = 'ss-stamp';
       this.$finger.className = 'ss-finger';
       this.setPrompt('');
     }
 
     async showQueue() {
       this.busy = true; this.state = 'arrive';
       this._resetDesk();
       if (SS.shouldIntroduce(this.profile)) {
         const g = SS.introduceNext(this.profile);
         this.save();
         this.todaySounds.push(g);
         await this.showNewSound(g);
       }
       const queue = SS.buildQueue(this.profile, this.now(), Math.random, 3);
       if (root.__SS_FORCE_MODE__) queue.forEach((q) => { if (this.profile.words[q.word.w] && this.audio.hasWord(q.word.w)) q.mode = root.__SS_FORCE_MODE__; });
       // Returns need a recording of the word (the patron has to say it).
       queue.forEach((q) => { if (q.mode === 'return' && !this.audio.hasWord(q.word.w)) q.mode = 'read'; });
       this.queue = queue;
       this.sel = 0;
       queue.forEach((q) => this.audio.preloadWord(q.word.w));
       this._renderQueue(true);
       await sleep(900);
       this.state = 'queue'; this.busy = false;
       this.setPrompt('Who is next? <kbd>←</kbd> <kbd>→</kbd> then <kbd>Enter</kbd>');
       await this.audio.speak(LINES.queue);
       if (this.state === 'queue') this._sayWish();
     }
 
     _renderQueue(fresh) {
       this.$queue.innerHTML = this.queue.map((q, i) => {
         const t = q.topic;
         return '<div class="ss-patron' + (i === this.sel ? ' sel' : '') + (fresh ? ' in' : '') + '" style="--c:' + q.patron.color + ';animation-delay:' + (i * 0.15) + 's">' +
           '<div class="ss-sign-card" style="border-color:' + t.color + '">' + img(t.art) + '<span>' + esc(t.name) + '</span></div>' +
           (q.mode === 'return' ? '<div class="ss-holding">' + img(q.word.art) + '</div>' : '') +
           '<div class="ss-patron-body">' + img(q.patron.art) + '</div>' +
           '<div class="ss-patron-name">' + esc(q.patron.name) + '</div><span class="ss-num">' + (i + 1) + '</span></div>';
       }).join('');
     }
 
     _sayWish() {
       const q = this.queue[this.sel]; if (!q) return;
       const line = q.mode === 'return' ? pick(LINES.returning)
         : q.topic.id === 'any' ? pick(LINES.wantAny) : pick(LINES.want).replace('{t}', q.topic.name);
       this.audio.cancel();
       this.audio.speak(q.patron.name + ' says: ' + line, q.patron.voice);
     }
 
     _keyQueue(k) {
       if (this.busy) return;
       const n = this.queue.length;
       if (!n) { this.showQueue(); return; }
       if (k === 'ArrowLeft' || k === 'ArrowUp')    { this.sel = (this.sel + n - 1) % n; this._renderQueue(); this.audio.tick(); this._sayWish(); }
       if (k === 'ArrowRight' || k === 'ArrowDown') { this.sel = (this.sel + 1) % n; this._renderQueue(); this.audio.tick(); this._sayWish(); }
       if (/^[1-9]$/.test(k) && +k <= n) { this.sel = +k - 1; this._renderQueue(); this.callPatron(); }
       if (k === 'Enter' || k === ' ') this.callPatron();
     }
 
     async callPatron() {
       const q = this.queue[this.sel];
       if (!q) return;
       this.busy = true; this.state = 'arrive';
       this.audio.cancel();
       SS.recordTopic(this.profile, q.topic.id);
       this.save();
       this.order = {
         word: q.word, mode: q.mode, review: q.review, topic: q.topic, patron: q.patron,
         idx: 0, buffer: '', missed: false, boxMissed: false, wrongPicks: 0,
         units: SS.phonemeUnits(q.word), graphemes: SS.graphemes(q.word),
       };
       const els = Array.from(this.$queue.children);
       els.forEach((el, i) => el.classList.add(i === this.sel ? 'called' : 'wait'));
       this.setPrompt('');
       await sleep(500);
       this.$queue.innerHTML = '';
       await this.arrive();
     }
 
     async showNewSound(g) {
       this.state = 'newsound';
       const ps = SS.graphemePhonemes(g);
       const example = SS.availableWords(this.profile.introduced).find((w) => SS.graphemes(w).map(SS.baseGrapheme).indexOf(g) >= 0 && this.audio.hasWord(w.w))
         || SS.availableWords(this.profile.introduced).find((w) => SS.graphemes(w).map(SS.baseGrapheme).indexOf(g) >= 0);
       this._panel('<h2>A new sound!</h2><div class="ss-big-letter">' + g + '</div>' +
         (example ? '<p>like in <b>' + example.w + '</b> ' + img(example.art) + '</p>' : '') + '<p><kbd>Enter</kbd> to keep going</p>');
       this.audio.sparkle();
       await this.audio.speak('A new sound! This one says');
       for (let rep = 0; rep < 2; rep++) {
         let t = 0;
         ps.forEach((p) => { t += this.audio.playPhoneme(p, { delay: t, len: 0.7 }) + 0.05; });
         await sleep(t * 1000 + 500);
       }
       if (example) {
         await this.audio.speak('Like in');
         await this.audio.playSegmented(SS.phonemeUnits(example), { gap: 0.25, len: 0.35 });
         await this.audio.playWord(example.w);
       }
       await new Promise((resolve) => {
         this._continue = resolve;
         if (TEST) resolve();
         else setTimeout(() => { if (this._continue === resolve) { this._continue = null; resolve(); } }, 9000);
       });
       this.$overlay.hidden = true;
     }
 
     // ── Serving one patron ─────────────────────────────────────────────────
 
     _renderCustomer() {
       const c = this.order.patron;
       this.$custBody.innerHTML = img(c.art);
       this.$custName.textContent = c.name;
       this.$custName.style.background = c.color;
       this.$bubble.className = 'ss-bubble'; this.$bubble.innerHTML = '';
     }
 
     // Build the sound boxes once per book; _updateBoxes() keeps their classes in
     // step so a stamped tile stays stamped (re-rendering would replay its drop).
     _renderBoxes() {
       const o = this.order;
       this.$boxes.innerHTML = o.graphemes.map((g, i) =>
         '<div class="ss-box' + (g.length > 1 ? ' wide' : '') + '" data-i="' + i + '" style="--c:' + BOX_COLORS[i % BOX_COLORS.length] + '">' + esc(g) + '</div>').join('');
       this._updateBoxes();
     }
     _updateBoxes() {
       const o = this.order;
       Array.from(this.$boxes.children).forEach((b, i) => {
         const g = o.graphemes[i];
         b.classList.toggle('done', i < o.idx);
         b.classList.toggle('next', i === o.idx);
         b.classList.toggle('hidden-letter', o.mode === 'return' && i >= o.idx);
         if (i === o.idx && o.buffer) b.innerHTML = '<span class="ss-partial">' + esc(o.buffer) + '</span>' + esc(g.slice(o.buffer.length));
         else b.textContent = g;
       });
     }
 
     async arrive() {
       const o = this.order, c = o.patron;
       this._renderCustomer();
       this.$customer.classList.remove('in', 'out', 'happy', 'puzzled');
       void this.$customer.offsetWidth;   // restart the walk-in transition
       this.$customer.classList.add('in');
       this.$boxes.innerHTML = '';
       await sleep(900);
       const hello = pick(LINES.hello) + (o.review ? ' ' + pick(LINES.again) : '');
       await this.audio.speak(hello, c.voice);
       if (o.mode === 'read') {
         this.$bubble.innerHTML = img(o.topic.art);
         this.$bubble.classList.add('show');
         await this.audio.speak(o.topic.id === 'any' ? pick(LINES.wantAny) : pick(LINES.want).replace('{t}', o.topic.name), c.voice);
         this.$slipTitle.innerHTML = 'Request';
         this._renderBoxes();
         this.$slip.classList.add('show');
         this.audio.pageFlip();
         await this.audio.speak(pick(LINES.slip), c.voice);
         this.setPrompt(LINES.instrRead);
         this.audio.speak(LINES.instrRead);
       } else {
         this.$bubble.innerHTML = img(o.word.art);
         this.$bubble.classList.add('show');
         await this.audio.speak(pick(LINES.returning), c.voice);
         await this.audio.playWord(o.word.w);
         this.$slipTitle.innerHTML = 'Return card';
         this._renderBoxes();
         this.$slip.classList.add('show');
         this.audio.pageFlip();
         this.setPrompt(LINES.instrHear);
         this.audio.speak(LINES.instrHear);
       }
       this.state = 'read'; this.busy = false;
     }
 
     // Replay the demonstration for the current box.
     hint() {
       if (this.busy) return;
       const o = this.order;
       this.audio.cancel();
       if (o.mode === 'return') {
         this.audio.playWord(o.word.w).then(() => this.audio.playSegmented(o.units, { gap: 0.3, onUnit: (i) => this._flashBox(i) }));
       } else {
         this._flashBox(o.idx);
         let t = 0;
         o.units[o.idx].forEach((p) => { t += this.audio.playPhoneme(p, { delay: t, len: 0.45 }) + 0.04; });
       }
     }
 
     _flashBox(i, ms) {
       const b = this.$boxes.querySelector('[data-i="' + i + '"]');
       if (!b) return;
       b.classList.add('speaking');
       if (this.order.mode === 'return') b.classList.add('reveal');
       setTimeout(() => b.classList.remove('speaking', 'reveal'), T(ms || 650));
     }
 
     typeLetter(ch) {
       if (this.busy) return;
       const o = this.order;
       const expected = o.graphemes[o.idx];
       const attempt = o.buffer + ch;
       if (expected.indexOf(attempt) === 0) {
         o.buffer = attempt;
         if (attempt === expected) this._acceptGrapheme();
         else { this._updateBoxes(); this.audio.tick(); }
       } else {
         this._wrongKey();
       }
     }
 
     _acceptGrapheme() {
       const o = this.order;
       SS.recordGrapheme(this.profile, o.graphemes[o.idx], !o.boxMissed);
       o.boxMissed = false;
       const unit = o.units[o.idx];
       let t = 0;
       unit.forEach((p) => { t += this.audio.playPhoneme(p, { delay: t, len: 0.4 }) + 0.03; });
       this.audio.stampLetter();
       o.idx += 1; o.buffer = '';
       this._updateBoxes();
       const box = this.$boxes.querySelector('[data-i="' + (o.idx - 1) + '"]');
       if (box) { box.classList.add('stamped'); box.classList.add('reveal'); }
       this.$stamp.classList.remove('press'); void this.$stamp.offsetWidth; this.$stamp.classList.add('press');
       if (o.idx >= o.graphemes.length) this._wordComplete();
     }
 
     async _wordComplete() {
       const o = this.order;
       this.state = 'blend'; this.busy = false;     // SPACE works straight away; the prompt just follows
       this.$slip.classList.add('ready');
       await sleep(450);
       if (this.state !== 'blend') return;
       this.setPrompt(o.mode === 'read' ? 'Press <kbd>space</kbd> to read it!' : 'Press <kbd>space</kbd> to shelve it!');
       this.audio.speak(o.mode === 'read' ? LINES.readIt : LINES.shelveIt);
     }
 
     async _wrongKey() {
       const o = this.order;
       o.missed = true;
       if (!o.boxMissed) { o.boxMissed = true; SS.recordGrapheme(this.profile, o.graphemes[o.idx], false); }
       o.buffer = '';
       this._updateBoxes();
       this.busy = true;
       this.audio.cancel();
       this.audio.wrong();
       this.$slip.classList.remove('wobble'); void this.$slip.offsetWidth; this.$slip.classList.add('wobble');
       const box = this.$boxes.querySelector('[data-i="' + o.idx + '"]');
       if (box) { box.classList.add('hint'); setTimeout(() => box.classList.remove('hint'), T(1000)); }
       if (o.mode === 'read') {
         await this.audio.speak('This one says');
         this._flashBox(o.idx, 900);
         let t = 0;
         o.units[o.idx].forEach((p) => { t += this.audio.playPhoneme(p, { delay: t, len: 0.6 }) + 0.04; });
         await sleep(t * 1000 + 200);
       } else {
         await this.audio.speak('Listen again.');
         await this.audio.playWord(o.word.w);
         await this.audio.playSegmented(o.units, { gap: 0.35, onUnit: (i) => this._flashBox(i) });
         await this.audio.speak('Which sound comes next?');
       }
       this.busy = false;
     }
 
     // SPACE: sound the title out. The finger slides under each box as its
     // sound plays; each pass is faster and closer until the boxes touch.
     async soundOut() {
       if (this.busy) return;
       const o = this.order;
       this.busy = true; this.state = 'sounding';
       this.setPrompt('');
       this.$slip.classList.remove('ready');
       this.$slip.classList.add('reading');
       this.$finger.classList.add('show');
       const boxes = Array.from(this.$boxes.children);
       await this.audio.blend(o.units, (ev) => {
         if (ev.kind === 'pass') { this.$boxes.className = 'ss-boxes pass' + ev.pass; this._moveFinger(boxes[0]); }
         if (ev.kind === 'phoneme') {
           const x = boxes[ev.unit];
           if (x) { x.classList.add('speaking', 'reveal'); setTimeout(() => x.classList.remove('speaking'), T(ev.len * 1000)); this._moveFinger(x); }
         }
         if (ev.kind === 'done') {
           this.$boxes.classList.add('fused');
           boxes.forEach((x) => x.classList.add('done', 'reveal'));
           this.$finger.classList.remove('show');
           this.audio.sparkle();
           this.fx('✨', 46, 58); this.fx('✨', 54, 56);
         }
       });
       this.$slip.classList.remove('reading');
       await sleep(400);
       if (o.mode === 'read') this.choose(); else this.shelve();
     }
 
     _moveFinger(box) {
       if (!box) return;
       const r = box.getBoundingClientRect(), s = this.$slip.getBoundingClientRect();
       if (!s.width) return;
       this.$finger.style.left = ((r.left + r.width / 2 - s.left) / s.width * 100) + '%';
     }
 
     // Which book on the cart matches what was just read?
     choose() {
       const o = this.order;
       const cards = [o.word].concat(SS.distractors(o.word, this.profile, Math.random));
       for (let i = cards.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [cards[i], cards[j]] = [cards[j], cards[i]]; }
       o.cards = cards; this.sel = 0;
       this._renderCards();
       this.$cart.classList.add('show');
       this.$cart.parentNode.classList.add('choosing');
       this.audio.slide();
       this.setPrompt('Which book is it?');
       this.audio.speak(LINES.choose);
       this.state = 'choose'; this.busy = false;
     }
     _renderCards() {
       this.$cart.innerHTML = this.order.cards.map((w, i) => '<div class="ss-book' + (i === this.sel ? ' sel' : '') + '" data-w="' + w.w + '" style="--c:' + BOX_COLORS[SS.hashStr(w.w) % BOX_COLORS.length] + '">' +
         '<div class="ss-cover">' + img(w.art) + '</div><span class="ss-num">' + (i + 1) + '</span></div>').join('');
     }
     _keyChoose(k) {
       if (this.busy) return;
       const n = this.order.cards.length;
       if (k === 'ArrowLeft' || k === 'ArrowUp')    { this.sel = (this.sel + n - 1) % n; this._renderCards(); this.audio.tick(); }
       if (k === 'ArrowRight' || k === 'ArrowDown') { this.sel = (this.sel + 1) % n; this._renderCards(); this.audio.tick(); }
       if (/^[1-9]$/.test(k) && +k <= n) { this.sel = +k - 1; this._renderCards(); this._confirmChoice(); }
       if (k === 'Enter' || k === ' ') this._confirmChoice();
     }
     async _confirmChoice() {
       const o = this.order, chosen = o.cards[this.sel];
       this.busy = true;
       const cardEls = Array.from(this.$cart.children);
       if (chosen.w === o.word.w) {
         cardEls[this.sel].classList.add('yes');
         this.audio.ding();
         await sleep(450);
         this.checkout();
         return;
       }
       o.missed = true; o.wrongPicks += 1;
       cardEls[this.sel].classList.add('no');
       this.audio.wrong();
       this.$customer.classList.remove('puzzled'); void this.$customer.offsetWidth; this.$customer.classList.add('puzzled');
       await this.audio.speak(pick(LINES.wrongBook) + ' That one is about a ' + chosen.w + '.', o.patron.voice);
       if (o.wrongPicks === 2 && o.cards.length > 2) {
         // Take the wrong book away so the next try is between two.
         o.cards = o.cards.filter((c) => c.w !== chosen.w);
         this.sel = 0;
         this._renderCards();
         await this.audio.speak('Let me take that one away.', o.patron.voice);
       } else {
         cardEls[this.sel].classList.remove('no');
       }
       await this.audio.speak('Read it again.');
       this.$finger.classList.add('show');
       const boxes = Array.from(this.$boxes.children);
       await this.audio.playSegmented(o.units, { gap: 0.1, len: 0.25, onUnit: (i) => { this._flashBox(i, 300); this._moveFinger(boxes[i]); } });
       this.$finger.classList.remove('show');
       if (o.wrongPicks >= 3) {
         // No fail state: after three tries the word is given and the book pointed out.
         await this.audio.speak('It says');
         await this.audio.playWord(o.word.w);
         const right = o.cards.findIndex((c) => c.w === o.word.w);
         this.sel = right; this._renderCards();
         this.$cart.children[right].classList.add('point');
       }
       this.busy = false;
     }
 
     // Read mode success: stamp the book and hand it over.
     async checkout() {
       const o = this.order;
       this.state = 'stamp'; this.busy = true;
       this.setPrompt('');
       const right = o.cards.findIndex((c) => c.w === o.word.w);
       const book = this.$cart.children[right];
       this.$cart.classList.add('picked');
       Array.from(this.$cart.children).forEach((b, i) => { if (i !== right) b.classList.add('gone'); });
       this.$boxes.querySelectorAll('.ss-box').forEach((b) => b.classList.add('done', 'reveal'));
       await sleep(350);
       // The stamp comes down on the cover.
       this.$stamp.classList.add('over');
       await sleep(350);
       this.$stamp.classList.add('slam');
       this.audio.bigStamp();
       if (book) book.classList.add('stamped');
       this.root.classList.remove('shake'); void this.root.offsetWidth; this.root.classList.add('shake');
       await sleep(500);
       this.$stamp.classList.remove('over', 'slam');
       await this.audio.speak('Checked out!');
       if (book) book.classList.add('handed');
       this.audio.whoosh();
       await sleep(600);
       this.$bubble.innerHTML = img(o.word.art);
       this.$customer.classList.add('happy');
       await this.audio.speak('Yes! ' + o.word.w + '! ' + pick(LINES.happy), o.patron.voice);
       this.serve();
     }
 
     // Return mode success: the book flies back to its shelf.
     async shelve() {
       const o = this.order;
       this.state = 'stamp'; this.busy = true;
       this.$bookOut.innerHTML = '<div class="ss-book stamped" style="--c:' + BOX_COLORS[SS.hashStr(o.word.w) % BOX_COLORS.length] + '"><div class="ss-cover">' + img(o.word.art) + '</div></div>';
       this.$bookOut.classList.add('show');
       this.$stamp.classList.add('over');
       await sleep(350);
       this.$stamp.classList.add('slam');
       this.audio.bigStamp();
       await sleep(450);
       this.$stamp.classList.remove('over', 'slam');
       this.$bookOut.classList.add('fly');
       this.audio.whoosh();
       await sleep(700);
       this.$customer.classList.add('happy');
       await this.audio.speak('Back on the shelf! ' + pick(LINES.happy), o.patron.voice);
       this.serve();
     }
 
     async serve() {
       const o = this.order, p = this.profile;
       this.state = 'serve'; this.busy = true;
       this.audio.fanfare();
       this.fx('⭐', 68, 40); this.fx('❤️', 74, 44); this.fx('⭐', 62, 42);
 
       const wasMastered = SS.isMastered(SS.wordRecord(p, o.word.w));
       const rec = SS.recordOrder(p, o.word.w, !o.missed, this.now());
       this.booksToday += 1;
       this.todayWords.push(o.word.w);
       this.save();
       this._hud();
 
       if (!wasMastered && SS.isMastered(rec)) {
         this.toast('📚 ' + esc(o.word.w) + ' is on your shelf!');
         this.audio.sparkle();
         await this.audio.speak('A new book for your shelf!');
       }
       const fresh = this._applyLibrary(false);
       for (const u of fresh) {
         this.toast('🎉 The library got ' + u.label + '!');
         this.audio.fanfare();
         await this.audio.speak('The library got ' + u.label + '!');
         await sleep(600);
       }
       this.$customer.classList.remove('in'); this.$customer.classList.add('out');
       this.$bubble.classList.remove('show');
       await sleep(800);
       if (this.booksToday >= SS.BOOKS_PER_DAY) this.dayEnd();
       else this.showQueue();
     }
 
     async dayEnd() {
       this.state = 'dayend'; this.busy = false;
       this.root.classList.add('ss-dusk');
       this._resetDesk();
       const pics = this.todayWords.map((w) => '<span class="ss-day-book">' + img(SS.WORD_BY_NAME[w].art) + '<i>' + esc(w) + '</i></span>').join('');
       const sounds = this.todaySounds.length ? '<p>New sounds: <b>' + this.todaySounds.join(', ') + '</b></p>' : '';
       this._panel('<h2>Closing time!</h2><div class="ss-summary">' + pics + '</div>' + sounds +
         '<p>' + SS.masteredWords(this.profile).length + ' books on your shelf</p>' +
         '<p><kbd>Enter</kbd> open the library again · <kbd>⌫</kbd> change librarian</p>');
       this.audio.fanfare();
       await this.audio.speak('The library is closed for today. Great reading, ' + this.profile.name + '! Press enter to open again, or take a break.');
     }
 
     newDay() {
       this.$overlay.hidden = true;
       this.root.classList.remove('ss-dusk');
       this.booksToday = 0; this.todayWords = []; this.todaySounds = [];
       this._hud();
       this.showQueue();
     }
   }
 
   document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById('game-container');
     root.__SS_GAME__ = new StoryStamp(container);
   });
   root.StoryStamp = StoryStamp;
 }(window));