Deploy Karate Wiener (kimodo kata maker)

tabs/whoami.drawer.html

@@ -1,7 +1,11 @@
 <aside id="kimodo-whoami-drawer" class="kimodo-drawer" aria-label="Who is Karate Wiener">
 
-  <!-- Hero portrait (src set by whoami.tab.js from the dataset). -->
-  <img id="kimodo-whoami-hero-img" class="kimodo-whoami-hero-img" alt="Karate Wiener" />
+  <!-- Hero portrait + a play/stop button (right of the picture) for the welcome voice.
+       src + wiring set by whoami.tab.js from the dataset. -->
+  <div class="kimodo-whoami-herorow">
+    <img id="kimodo-whoami-hero-img" class="kimodo-whoami-hero-img" alt="Karate Wiener" />
+    <button id="kimodo-whoami-wspeak" class="kw-speak kimodo-whoami-wspeak" type="button" aria-label="Play welcome"></button>
+  </div>
 
   <p class="kimodo-whoami-lead">Welcome, my student.</p>
 

tabs/whoami.tab.css

@@ -45,13 +45,15 @@
 }
 
 /* Who Am I panel content */
-/* Hero portrait of Karate Wiener. */
+/* Hero portrait of Karate Wiener + the welcome play/stop button to its right. */
+.kimodo-whoami-herorow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 12px; }
 .kimodo-whoami-hero-img {
-  display: block; width: 70%; max-width: 240px; margin: 4px auto 12px;
+  display: block; width: 56%; max-width: 200px; margin: 0;
   border-radius: 14px; border: 1px solid #5a3a7a;
   background: linear-gradient(135deg, #2a1840 0%, #3a1d52 50%, #122a4a 100%);
   box-shadow: 0 6px 18px rgba(0,0,0,0.45);
 }
+.kimodo-whoami-wspeak { flex: 0 0 auto; align-self: center; width: 44px; height: 44px; font-size: 16px; }
 .kimodo-whoami-lead { font-size: 15px; font-weight: 600; color: #ffe6fb; margin: 8px 0; line-height: 1.45; }
 /* Swipable testimonial strip: horizontal scroll-snap, tap a panel to open the lightbox. */
 .kimodo-whoami-gallery {
@@ -80,6 +82,14 @@
   background: rgba(40,24,64,0.9); color: #ffe6fb; border: 1px solid #c065e0; font-size: 20px;
   line-height: 1; cursor: pointer; display: grid; place-items: center;
 }
+/* Prev / next arrows (also swipe on touch). */
+.kimodo-whoami-lightbox .kimodo-whoami-lbnav {
+  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
+  background: rgba(40,24,64,0.85); color: #ffe6fb; border: 1px solid #7c5cdc; font-size: 26px; line-height: 1;
+  cursor: pointer; display: grid; place-items: center;
+}
+.kimodo-whoami-lightbox .kw-prev { left: 12px; }
+.kimodo-whoami-lightbox .kw-next { right: 12px; }
 
 /* ---- Chat trigger button (end of the panel) ---- */
 .kimodo-whoami-chatbtn {

tabs/whoami.tab.js

@@ -1,6 +1,5 @@
-// WHO AM I tab — info on Karate Wiener, and tutorial STEP 1: the rail tab pulses
-// (vaporwave) on first start to invite the user in, stops once they open it, and can be
-// re-armed from the account drawer's "Restart tutorial" (kimodo-tutorial-restart event).
+// WHO AM I tab — info on Karate Wiener, voiced welcome + testimonial gallery + a chat
+// modal. Tutorial STEP 1: the rail tab pulses on first start until opened.
 (function () {
   var TKEY = 'kimodoTutorial';
   function load() { try { return JSON.parse(localStorage.getItem(TKEY) || '{}') || {}; } catch (e) { return {}; } }
@@ -8,35 +7,34 @@
   function tab() { return document.getElementById('kimodo-whoami-toggle'); }
   function setPulse(on) { var t = tab(); if (t) t.classList.toggle('kimodo-whoami-pulse', !!on); }
   function seen() { return !!load().whoamiSeen; }
-
-  // Pulse the tab until the user has opened it once (step 1 of the tutorial).
   function applyState() { setPulse(!seen()); }
+  function markSeen() { var o = load(); if (!o.whoamiSeen) { o.whoamiSeen = true; save(o); } setPulse(false); }
 
-  function markSeen() {
-    var o = load();
-    if (!o.whoamiSeen) { o.whoamiSeen = true; save(o); }
-    setPulse(false);
-  }
-
-  // ---- Hero portrait + swipable testimonial gallery (hosted in the dataset) ----
   function whoamiBase() {
     var b = (typeof DATASET_BASE !== 'undefined' && DATASET_BASE) ? DATASET_BASE : '';
     return b + '/viewer/whoami/';
   }
   var TESTIMONIALS = 4;
   var built = false;
+  var galleryImages = [];   // testimonial srcs (lightbox swipes through these)
+  var welcomeBtn = null;    // the welcome speak/stop button (right of the hero image)
+
   function buildWhoami() {
     if (built) return;
     var base = whoamiBase();
     var hero = document.getElementById('kimodo-whoami-hero-img');
     if (hero && !hero.getAttribute('src')) hero.src = base + 'weiner.webp';
+    welcomeBtn = document.getElementById('kimodo-whoami-wspeak');
+    if (welcomeBtn && !welcomeBtn._wired) { welcomeBtn._wired = true; wireSpeak(welcomeBtn, '', false, base + 'wiener-welcome.wav'); }
     var gal = document.getElementById('kimodo-whoami-gallery');
     if (gal && !gal.childNodes.length) {
+      galleryImages = [];
       for (var i = 1; i <= TESTIMONIALS; i++) {
         var src = base + 'testimonial-' + i + '.webp';
+        galleryImages.push(src);
         var img = document.createElement('img');
         img.src = src; img.alt = 'Student testimonial ' + i; img.loading = 'lazy';
-        img.addEventListener('click', (function (s) { return function () { openLightbox(s); }; })(src));
+        img.addEventListener('click', (function (idx) { return function () { openLightbox(idx); }; })(i - 1));
         gal.appendChild(img);
       }
     }
@@ -47,32 +45,82 @@
       if (av && !av.getAttribute('src')) av.src = base + 'wiener-meditate.webp';
       chatBtn.addEventListener('click', openChat);
     }
-    ensureWelcome();
     built = true;
   }
-  // Wiener greets the student out loud when they open WHO AM I. Mirrors the intro sound: a
-  // PRELOADED <audio> element (created early, buffering in the background) so play() in the
-  // tab-tap gesture fires instantly — iOS blocks playing a brand-new, not-yet-fetched audio.
-  var welcomeAudio = null;
-  function ensureWelcome() {
-    if (welcomeAudio) return welcomeAudio;
-    var base = whoamiBase(); if (!base) return null;
-    welcomeAudio = document.createElement('audio');
-    welcomeAudio.preload = 'auto'; welcomeAudio.setAttribute('playsinline', '');
-    welcomeAudio.src = base + 'wiener-welcome.wav';
-    welcomeAudio.style.display = 'none';
-    document.body.appendChild(welcomeAudio);
-    try { welcomeAudio.load(); } catch (e) {}
-    return welcomeAudio;
+
+  // ---- Shared voice player ---------------------------------------------------
+  // ONE <audio> element for every voice (welcome + chat). iOS only auto-plays audio that
+  // was first started inside a user gesture; reusing a single element that a gesture-play
+  // (the welcome on tab tap / the chat-intro on open) has "unlocked" lets later replies
+  // auto-play without their own gesture. Only one voice plays at a time.
+  var voiceEl = null, curBtn = null;
+  function voiceElement() {
+    if (voiceEl) return voiceEl;
+    voiceEl = document.createElement('audio');
+    voiceEl.setAttribute('playsinline', ''); voiceEl.style.display = 'none';
+    document.body.appendChild(voiceEl);
+    voiceEl.addEventListener('ended', function () { if (curBtn && curBtn._set) curBtn._set('idle'); curBtn = null; });
+    return voiceEl;
+  }
+  function playVoice(src, btn) {
+    var a = voiceElement();
+    if (curBtn && curBtn !== btn && curBtn._set) curBtn._set('idle');   // switch: reset the previous button
+    curBtn = btn;
+    try { a.src = src; a.currentTime = 0; } catch (e) {}
+    var pr = a.play();
+    if (pr && pr.then) pr.then(function () { if (btn._set) btn._set('playing'); }).catch(function () { if (btn._set) btn._set('idle'); });
+    else if (btn._set) btn._set('playing');
   }
-  function playWelcome() {
-    var a = ensureWelcome(); if (!a) return;
-    try { a.currentTime = 0; var pr = a.play(); if (pr && pr.catch) pr.catch(function () {}); } catch (e) {}
+  function stopVoice() {
+    var a = voiceElement();
+    try { a.pause(); a.currentTime = 0; } catch (e) {}
+    if (curBtn && curBtn._set) curBtn._set('idle');
+    curBtn = null;
+  }
+
+  // wiener-speak shares ONE hidden gradio trigger/result → serialize so concurrent TTS
+  // requests never cross (a message playing another's audio).
+  var speakQueue = [], speakActive = false;
+  function enqueueSpeak(text, cb) { speakQueue.push({ text: text, cb: cb }); pumpSpeak(); }
+  function pumpSpeak() {
+    if (speakActive || !speakQueue.length) return;
+    speakActive = true;
+    var job = speakQueue.shift();
+    wienerTrigger('wiener-speak', { text: job.text }, 120000, function (r) {
+      speakActive = false;
+      try { job.cb(r); } finally { pumpSpeak(); }
+    });
+  }
+  // Icon speak button: ▶ play / ■ stop, spinner while the voice loads. `fixedUrl` voices it
+  // from a static file (welcome / chat-intro — no TTS). Plays the moment it's ready; the
+  // cached src means replays are instant and always play THIS message's audio.
+  function wireSpeak(btn, text, autostart, fixedUrl) {
+    var src = fixedUrl || null;
+    btn._set = function (state) {
+      btn.dataset.state = state;
+      btn.innerHTML = state === 'loading' ? '<span class="kw-ld" aria-label="loading"></span>' : (state === 'playing' ? '■' : '▶');
+      btn.title = state === 'loading' ? 'loading voice…' : (state === 'playing' ? 'stop' : 'play voice');
+      btn.classList.toggle('loading', state === 'loading');
+      btn.classList.toggle('playing', state === 'playing');
+    };
+    btn._play = function () {
+      if (src) { playVoice(src, btn); return; }
+      btn._set('loading');
+      enqueueSpeak(text, function (r) {
+        if (r && r.ok && r.audio) { src = r.audio; playVoice(src, btn); }
+        else btn._set('idle');   // failed → ▶ (tap to retry)
+      });
+    };
+    btn.addEventListener('click', function () {
+      var s = btn.dataset.state;
+      if (s === 'loading') return;
+      if (s === 'playing') { stopVoice(); return; }
+      btn._play();
+    });
+    if (autostart) btn._play(); else btn._set('idle');
   }
 
   // ---- Chat with Karate Wiener (phone-messaging modal) ----------------------
-  // Text reply via the #wiener-chat-* bridge; voice is on-demand per message via the 🔊
-  // speak button (#wiener-speak-*). Both are hidden gradio triggers (mirror voteKata).
   var chatHistory = [];
   var modal = null, msgsEl = null, textEl = null, sendBtn = null, chatBusy = false;
   function wienerTrigger(prefix, payloadObj, timeoutMs, cb) {
@@ -111,6 +159,8 @@
     sendBtn = modal.querySelector('#kw-chat-send');
     modal.querySelector('.kw-chat-close').addEventListener('click', closeChat);
     modal.addEventListener('click', function (e) { if (e.target === modal) closeChat(); });
+    // Don't let taps inside the modal reach the document handler that closes the drawer.
+    modal.addEventListener('pointerdown', function (e) { e.stopPropagation(); });
     sendBtn.addEventListener('click', sendMessage);
     textEl.addEventListener('keydown', function (e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
     textEl.addEventListener('input', autoGrow);
@@ -119,11 +169,11 @@
   function openChat() {
     buildModal();
     modal.classList.add('open');
-    // Opening the chat takes over from the panel welcome voice (don't talk over each other).
-    if (welcomeAudio) { try { welcomeAudio.pause(); } catch (e) {} }
     // First message uses the fixed chat-intro recording (no TTS — it's always the same, so
-    // we save generation cost) and plays it right away.
+    // we save generation cost). Playing it here (inside the chat-button tap) unlocks the
+    // shared voice element, so later replies can auto-play without their own gesture.
     if (!chatHistory.length) addWiener('Welcome, my student. Ask me anything — karate, the spirit, or the law. Osu!', true, whoamiBase() + 'chat-intro.wav');
+    else stopVoice();
     setTimeout(function () { if (textEl) textEl.focus(); }, 80);
   }
   function closeChat() { if (modal) modal.classList.remove('open'); }
@@ -133,69 +183,17 @@
     row.appendChild(b); msgsEl.appendChild(row); scrollBottom();
     chatHistory.push({ role: 'user', content: text });
   }
-  // Wiener message: avatar, the bubble, then a small play/stop ICON to the right of the
-  // message. `autospeak` (true) loads + plays the voice at once. `fixedUrl` voices the
-  // message from a static file (the greeting) instead of generating TTS.
+  // Wiener message: avatar, bubble, then the play/stop ICON to the right of the message.
   function addWiener(text, autospeak, fixedUrl) {
     var row = document.createElement('div'); row.className = 'kw-msg kw-wiener';
     var av = document.createElement('img'); av.className = 'kw-msgav'; av.src = whoamiBase() + 'wiener-meditate.webp'; av.alt = '';
     var spk = document.createElement('button'); spk.type = 'button'; spk.className = 'kw-speak';
     var b = document.createElement('div'); b.className = 'kw-bubble'; b.textContent = text;
-    row.appendChild(av); row.appendChild(b); row.appendChild(spk);   // avatar → bubble → speak (right of the message)
+    row.appendChild(av); row.appendChild(b); row.appendChild(spk);
     msgsEl.appendChild(row); scrollBottom();
     chatHistory.push({ role: 'wiener', content: text });
     wireSpeak(spk, text, autospeak !== false, fixedUrl);
   }
-  // wiener-speak shares ONE hidden gradio trigger/result, so concurrent requests would
-  // cross (a message could play another message's audio). Serialize them: one TTS in flight
-  // at a time, each tagged to its own button via the callback — never the shared textbox race.
-  var speakQueue = [], speakActive = false;
-  function enqueueSpeak(text, cb) { speakQueue.push({ text: text, cb: cb }); pumpSpeak(); }
-  function pumpSpeak() {
-    if (speakActive || !speakQueue.length) return;
-    speakActive = true;
-    var job = speakQueue.shift();
-    wienerTrigger('wiener-speak', { text: job.text }, 120000, function (r) {
-      speakActive = false;
-      try { job.cb(r); } finally { pumpSpeak(); }
-    });
-  }
-  // Icon speak button: ▶ play / ■ stop, with a spinner while the voice loads/buffers. The
-  // voice (fixed file or generated TTS) plays the moment it's ready; tap ■ to stop, ▶ to
-  // replay the cached audio. Each button owns its own `audio`, so it always plays ITS text.
-  function wireSpeak(btn, text, autostart, fixedUrl) {
-    var audio = null;
-    function set(state) {
-      btn.dataset.state = state;
-      btn.innerHTML = state === 'loading' ? '<span class="kw-ld" aria-label="loading"></span>' : (state === 'playing' ? '■' : '▶');
-      btn.title = state === 'loading' ? 'loading voice…' : (state === 'playing' ? 'stop' : 'play voice');
-      btn.classList.toggle('loading', state === 'loading');
-      btn.classList.toggle('playing', state === 'playing');
-    }
-    function startPlay(src) {
-      audio = new Audio(src);
-      audio.addEventListener('ended', function () { set('idle'); });
-      var pr = audio.play();
-      if (pr && pr.then) pr.then(function () { set('playing'); }).catch(function () { set('idle'); });
-      else set('playing');
-    }
-    function load() {
-      set('loading');                       // spinner while buffering / generating
-      if (fixedUrl) { startPlay(fixedUrl); return; }   // static greeting voice — no TTS
-      enqueueSpeak(text, function (r) {
-        if (r && r.ok && r.audio) startPlay(r.audio);
-        else set('idle');                   // failed → ▶ (tap to retry)
-      });
-    }
-    btn.addEventListener('click', function () {
-      var s = btn.dataset.state;
-      if (s === 'loading') return;
-      if (s === 'playing') { try { audio.pause(); audio.currentTime = 0; } catch (e) {} set('idle'); return; }
-      if (audio) { try { audio.currentTime = 0; var pr = audio.play(); if (pr && pr.catch) pr.catch(function () {}); set('playing'); } catch (e) {} }
-      else load();   // first manual play, or retry after a failed auto-load
-    });
-    if (autostart) load(); else set('idle');
-  }
   function sendMessage() {
     if (chatBusy || !textEl) return;
     var text = (textEl.value || '').trim();
@@ -209,64 +207,80 @@
     wienerTrigger('wiener-chat', { history: hist, message: text }, 120000, function (r) {
       if (typing.parentNode) typing.parentNode.removeChild(typing);
       chatBusy = false; if (sendBtn) sendBtn.disabled = false;
-      if (r && r.ok && r.reply) addWiener(r.reply, true);          // auto-load + speak the reply
+      if (r && r.ok && r.reply) addWiener(r.reply, true);
       else addWiener('The path is quiet right now, my student. Ask me again. Osu!', true);
     });
   }
 
-  // Full-screen lightbox (one shared element at <body> level). Tap anywhere to close.
-  var lb = null;
+  // ---- Testimonial lightbox (swipable) --------------------------------------
+  var lb = null, lbImg = null, lbIdx = 0;
   function ensureLightbox() {
     if (lb) return lb;
     lb = document.createElement('div'); lb.className = 'kimodo-whoami-lightbox';
-    var img = document.createElement('img'); img.className = 'kimodo-whoami-lbimg'; img.alt = 'Testimonial';
+    lbImg = document.createElement('img'); lbImg.className = 'kimodo-whoami-lbimg'; lbImg.alt = 'Testimonial';
     var close = document.createElement('button'); close.type = 'button'; close.className = 'kimodo-whoami-lbclose'; close.setAttribute('aria-label', 'Close'); close.textContent = '✕';
-    lb.appendChild(img); lb.appendChild(close);
-    lb.addEventListener('click', closeLightbox);
+    var prev = document.createElement('button'); prev.type = 'button'; prev.className = 'kimodo-whoami-lbnav kw-prev'; prev.setAttribute('aria-label', 'Previous'); prev.textContent = '‹';
+    var next = document.createElement('button'); next.type = 'button'; next.className = 'kimodo-whoami-lbnav kw-next'; next.setAttribute('aria-label', 'Next'); next.textContent = '›';
+    lb.appendChild(lbImg); lb.appendChild(close); lb.appendChild(prev); lb.appendChild(next);
     document.body.appendChild(lb);
+    // Keep clicks/taps inside the lightbox from reaching the document handler that dismisses
+    // the WHO AM I drawer — closing the lightbox must leave the tab open.
+    lb.addEventListener('pointerdown', function (e) { e.stopPropagation(); });
+    lb.addEventListener('click', function (e) { if (e.target === lb) closeLightbox(); });   // backdrop only
+    close.addEventListener('click', function (e) { e.stopPropagation(); closeLightbox(); });
+    prev.addEventListener('click', function (e) { e.stopPropagation(); showLb(lbIdx - 1); });
+    next.addEventListener('click', function (e) { e.stopPropagation(); showLb(lbIdx + 1); });
+    // Swipe left/right to move between testimonials.
+    var sx = 0, sy = 0;
+    lb.addEventListener('touchstart', function (e) { var t = e.changedTouches[0]; sx = t.clientX; sy = t.clientY; }, { passive: true });
+    lb.addEventListener('touchend', function (e) { var t = e.changedTouches[0]; var dx = t.clientX - sx, dy = t.clientY - sy; if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) showLb(lbIdx + (dx < 0 ? 1 : -1)); }, { passive: true });
     return lb;
   }
-  function openLightbox(src) {
-    var el = ensureLightbox();
-    el.querySelector('.kimodo-whoami-lbimg').src = src;
-    el.classList.add('open');
+  function showLb(idx) {
+    if (!galleryImages.length) return;
+    lbIdx = (idx + galleryImages.length) % galleryImages.length;   // wrap around
+    ensureLightbox(); lbImg.src = galleryImages[lbIdx];
   }
+  function openLightbox(idx) { ensureLightbox(); showLb(idx || 0); lb.classList.add('open'); }
   function closeLightbox() { if (lb) lb.classList.remove('open'); }
-  window.addEventListener('keydown', function (e) { if (e.key === 'Escape') { closeLightbox(); if (typeof closeChat === 'function') closeChat(); } });
 
-  // Opening the WHO AM I drawer completes step 1 + builds the hero/gallery (lazily, so
-  // DATASET_BASE is resolved by the time it runs).
+  window.addEventListener('keydown', function (e) {
+    var lbOpen = lb && lb.classList.contains('open');
+    if (e.key === 'Escape') { closeLightbox(); closeChat(); }
+    else if (lbOpen && e.key === 'ArrowLeft') showLb(lbIdx - 1);
+    else if (lbOpen && e.key === 'ArrowRight') showLb(lbIdx + 1);
+  });
+
+  // Opening the WHO AM I drawer completes step 1, builds the panel, and plays the welcome
+  // voice (inside the tab-tap gesture, so it actually auto-plays + unlocks the voice element).
   window.addEventListener('kimodo-drawer-open', function (e) {
-    if (e.detail === 'kimodo-whoami-drawer') { markSeen(); buildWhoami(); playWelcome(); }
+    if (e.detail === 'kimodo-whoami-drawer') { markSeen(); buildWhoami(); if (welcomeBtn) welcomeBtn._play(); }
   });
 
   // Restart the tutorial (from the account drawer): re-arm step 1's pulse.
   window.addEventListener('kimodo-tutorial-restart', function () {
-    var o = load(); o.whoamiSeen = false; save(o);
-    setPulse(true);
+    var o = load(); o.whoamiSeen = false; save(o); setPulse(true);
   });
 
-  // Don't start the first-run pulse until the intro TITLE overlay has finished. The intro
-  // (#kw-title-overlay) is added just after this script and REMOVED from the DOM when it
-  // ends; it covers the whole screen meanwhile. So: wait until it has appeared and gone,
-  // or — if no intro exists (no audio asset) — proceed after a short grace window.
+  // Don't start the first-run pulse until the intro TITLE overlay has finished.
   function gateInitialPulse() {
     var present = function () { return !!document.getElementById('kw-title-overlay'); };
     var sawIntro = present();
     var iv = setInterval(function () {
-      if (present()) { sawIntro = true; return; }   // intro still on screen
-      if (sawIntro) { clearInterval(iv); applyState(); }   // appeared then gone = intro done
+      if (present()) { sawIntro = true; return; }
+      if (sawIntro) { clearInterval(iv); applyState(); }
     }, 250);
-    // No intro showed up within the grace window => nothing to wait for.
     setTimeout(function () { if (!sawIntro && !present()) { clearInterval(iv); applyState(); } }, 1300);
-    // Hard safety: never wait forever.
     setTimeout(function () { clearInterval(iv); applyState(); }, 15000);
   }
   gateInitialPulse();
-  // Pre-buffer the welcome voice (preloaded <audio>) + warm the chat-intro file cache once
-  // DATASET_BASE is ready, so the first WHO AM I tap / chat open plays instantly.
+  // Warm the voice file caches once DATASET_BASE is ready so the first welcome / chat-intro
+  // plays instantly.
   setTimeout(function () {
-    ensureWelcome();
-    try { var a = document.createElement('audio'); a.preload = 'auto'; a.src = whoamiBase() + 'chat-intro.wav'; a.style.display = 'none'; document.body.appendChild(a); a.load(); } catch (e) {}
+    try {
+      ['wiener-welcome.wav', 'chat-intro.wav'].forEach(function (f) {
+        var a = document.createElement('audio'); a.preload = 'auto'; a.src = whoamiBase() + f; a.style.display = 'none'; document.body.appendChild(a); a.load();
+      });
+    } catch (e) {}
   }, 1500);
 })();