Training: section pills; /plays member page (three plays + Qualified Start) with the member's own link in the scripts

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-10 07:06:19 -05:00
parent f785016cb5
commit 16a9f76f50
5 changed files with 199 additions and 2 deletions
@@ -292,8 +292,18 @@
      const el = $('trainingList'); if (!el) return;
      const items = r.items || [];
      if (!items.length) { el.innerHTML = '<p class="muted small">Training materials are being added. Check back soon.</p>'; return; }
+      // section pills at the top: one per group, plus All; the active pill filters the list
+      const groups = [...new Set(items.map(it => it.group).filter(Boolean))];
+      const pills = $('trainingPills');
+      const want = loadTraining.filter || 'all';
+      if (pills) {
+        pills.hidden = groups.length < 2;
+        pills.innerHTML = ['all', ...groups].map(g => '<button type="button" class="chip-t' + ((g === want) ? ' on' : '') + '" data-tg="' + esc(g) + '">' + esc(g === 'all' ? 'All' : g) + '</button>').join('');
+        pills.querySelectorAll('[data-tg]').forEach(b => b.addEventListener('click', () => { loadTraining.filter = b.dataset.tg; loadTraining(); }));
+      }
+      const shown = want === 'all' ? items : items.filter(it => it.group === want);
      let lastGroup = null;
-      el.innerHTML = items.map(it => {
+      el.innerHTML = shown.map(it => {
        // optional section header: entries carry a `group`; a header renders when it changes
        let head = '';
        if (it.group && it.group !== lastGroup) { lastGroup = it.group; head = '<h3 class="tr-group" style="margin:26px 0 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)">' + esc(it.group) + '</h3>'; }
@@ -0,0 +1,12 @@
+// Team-building plays page: members only, and the scripts carry the member's own link.
+(async function () {
+  try { await IAP.renderNav('training'); } catch (e) {}
+  let me = null;
+  try { me = await (await fetch('/api/me')).json(); } catch (e) {}
+  const signedIn = !!(me && me.signedIn && me.email);
+  document.getElementById('gate').style.display = signedIn ? 'none' : 'block';
+  document.getElementById('body').style.display = signedIn ? 'block' : 'none';
+  if (!signedIn) return;
+  const tok = me.username || me.refCode || me.memberId;
+  if (tok) document.querySelectorAll('[data-link]').forEach(el => { el.textContent = location.origin + '/join/' + tok; });
+})();