@bongos/core 1.25.17 → 1.25.18

package/modules/public-landing/public/assets/guide-hall.js

@@ -0,0 +1,164 @@
+/* assets/guide-hall.js — THE START-A-PROJECT GUIDE, plain (task 1005276, goal 1000106).
+
+   The same conversation as the game scene (guide-scene.js), presented plainly for a
+   visitor who does not want the game: one panel (#guideHall in index.html), who said
+   what as a list, the count of messages left in words, the plan under the talk, and the
+   one closing action, "Sign up and get started". Same server, same caps, same plan, same
+   hand-off: everything but the look is assets/guide-core.js, which both share.
+
+   Which one a visitor sees: the doors open the game unless this browser picked the plain
+   one before (guide-core.js VIEW_KEY). "Use the simple version" in the game and "Use the
+   game version" here swap them with the chat as it stands.
+
+   No innerHTML; no motion (the waiting line is words), so reduced motion changes nothing.
+   boot() runs under a DOM stub in tests/landing_guide_hall.mjs. */
+(function (factory) {
+  'use strict';
+  var core = typeof module === 'object' && module.exports ? require('./guide-core.js') : window.GuideCore;
+  var api = factory(core);
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    window.GuideHall = api;
+    api.boot(window, document);
+  }
+})(function (core) {
+  'use strict';
+
+  var COPY = core.COPY;
+
+  function boot(win, doc) {
+    var panel = doc.getElementById('guideHall');
+    if (!panel || !core.guideOn(win.__MODULES__)) return;
+    var ctl = core.controller(win, doc);
+    if (!ctl) return;
+    var $ = function (name) { return panel.querySelector('[data-gh="' + name + '"]'); };
+    var log = $('log'), err = $('err'), form = $('form'), text = $('text'), hp = $('website');
+    var send = $('send'), end = $('end'), go = $('go'), left = $('left'), body = $('body');
+    var plan = $('plan'), planBody = $('plan-body'), saved = $('saved');
+    var makePlan = $('make-plan'), againPlan = $('plan-again'), game = $('switch');
+
+    function el(tag, cls, txt) {
+      var e = doc.createElement(tag);
+      if (cls) e.className = cls;
+      if (txt != null) e.textContent = txt;
+      return e;
+    }
+    function clear(node) { while (node.firstChild) node.removeChild(node.firstChild); }
+    function line(role, who, words) {
+      var li = el('li', 'gh__msg gh__msg--' + role);
+      if (who) li.appendChild(el('span', 'gh__who', who));
+      li.appendChild(el('p', 'gh__words', words));
+      return li;
+    }
+
+    function paintLog(state) {
+      clear(log);
+      state.messages.forEach(function (m) {
+        log.appendChild(line(m.role, m.role === 'note' ? '' : m.role === 'guide' ? 'Guide' : 'You', m.text));
+      });
+      if (state.phase === 'starting' || state.phase === 'sending') log.appendChild(line('wait', 'Guide', COPY.waitTalk + '…'));
+      if (state.phase === 'planning') log.appendChild(line('wait', 'Guide', COPY.waitPlan + '…'));
+      if (state.phase === 'fallback') log.appendChild(line('guide', 'Guide', state.fallback));
+    }
+
+    function paintCount(state) {
+      var limits = ctl.limits();
+      var total = state.total || (limits && limits.max_messages) || 0;
+      var shown = state.phase !== 'fallback' && state.phase !== 'starting' && total > 0;
+      left.hidden = !shown;
+      if (shown) left.textContent = COPY.left(state.left, total);
+    }
+
+    // the plan sits under the talk once there is one to show or to wait for
+    function paintPlan(state) {
+      clear(planBody);
+      var p = state.plan;
+      plan.hidden = !p && state.phase !== 'planning' && state.phase !== 'ended';
+      if (!p) {
+        planBody.appendChild(el('p', 'gh__planwait', COPY.planWait(state.phase)));
+      } else {
+        if (p.summary) planBody.appendChild(el('p', 'gh__plansum', p.summary));
+        p.sections.forEach(function (s) {
+          if (s.heading) planBody.appendChild(el('h4', 'gh__planh4', s.heading));
+          var ul = el('ul', 'gh__planlist');
+          s.items.forEach(function (t) { ul.appendChild(el('li', null, t)); });
+          planBody.appendChild(ul);
+        });
+        if (p.note) planBody.appendChild(el('p', 'gh__plannote', p.note));
+      }
+      saved.textContent = state.saved;
+      saved.hidden = !state.saved || state.phase === 'fallback';
+    }
+
+    function paint(state) {
+      panel.setAttribute('data-phase', state.phase);
+      paintLog(state);
+      paintCount(state);
+      paintPlan(state);
+      var talking = state.phase === 'chat' || state.phase === 'sending' || state.phase === 'starting';
+      form.hidden = !talking;
+      end.hidden = talking;
+      text.disabled = state.phase !== 'chat';
+      send.disabled = state.phase !== 'chat';
+      makePlan.hidden = !(state.phase === 'chat' && state.sent > 0);
+      againPlan.hidden = !(state.phase === 'ended' && !state.plan && state.conv);
+      go.hidden = state.phase === 'planning';
+      text.maxLength = state.maxChars;
+      err.hidden = !state.error;
+      err.textContent = state.error;
+      go.textContent = state.phase === 'fallback' ? 'Start a project' : state.next;
+      if (state.restore && !text.value) text.value = state.restore;
+      // keep the newest line in view; once the plan is in, start at its heading
+      if (state.plan && state.phase === 'ended') body.scrollTop = plan.offsetTop || 0;
+      else body.scrollTop = body.scrollHeight;
+    }
+
+    function focusables() {
+      return Array.prototype.filter.call(
+        panel.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]):not([tabindex="-1"])'),
+        function (n) { return n.offsetParent !== null; });
+    }
+    function focusFirst() {
+      if (panel.hidden) return;
+      var target = !text.disabled && !form.hidden ? text : (!end.hidden && !go.hidden ? go : $('close'));
+      try { target.focus(); } catch (e) { /* not focusable yet */ }
+    }
+
+    ctl.addView('hall', {
+      show: function () {
+        game.hidden = !ctl.has('game');
+        panel.hidden = false;
+        doc.documentElement.classList.add('gd-open');
+      },
+      hide: function () {
+        panel.hidden = true;
+        doc.documentElement.classList.remove('gd-open');
+      },
+      paint: paint,
+      focusFirst: focusFirst,
+      website: function () { return hp.value; },
+    });
+
+    function submit() {
+      if (ctl.state().phase !== 'chat') return;
+      var words = text.value.trim();
+      if (words) text.value = '';
+      ctl.send(words);
+    }
+    form.addEventListener('submit', function (e) { e.preventDefault(); submit(); });
+    text.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); submit(); }
+    });
+    makePlan.addEventListener('click', ctl.askPlan);
+    againPlan.addEventListener('click', ctl.askPlan);
+    $('close').addEventListener('click', ctl.close);
+    game.addEventListener('click', function () { ctl.switchTo('game'); });
+    panel.addEventListener('click', function (e) { if (e.target === panel) ctl.close(); });
+    panel.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') { e.preventDefault(); ctl.close(); return; }
+      if (e.key === 'Tab') core.trapTab(doc, focusables(), e);
+    });
+  }
+
+  return { boot: boot };
+});

package/modules/public-landing/public/assets/guide-scene.css

@@ -167,6 +167,15 @@ html.gd-open, html.gd-open body { overflow: hidden; }
   color: var(--gd-ice); font-size: var(--ds-text-md); text-decoration: underline; text-underline-offset: 3px;
 }
 .gd__skip:hover { color: var(--ink); }
+/* Use the simple version: the plain twin of this scene (guide-hall.css, task 1005276), same chat */
+.gd__switch {
+  margin-left: auto; display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0;
+  background: transparent; border: 0; cursor: pointer;
+  color: var(--gd-ice); font: inherit; font-size: var(--ds-text-md); text-decoration: underline; text-underline-offset: 3px;
+}
+.gd__switch:hover { color: var(--ink); }
+.gd__switch[hidden] { display: none; }
+.gd__switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
 
 /* what you press: cut, in the name voice. The primary is the one accent bar. */
 .gd__send, .gd__go, .gd__planbtn {