Updated

hubzilla/addon/scn01/view/js/scn01.js

@@ -1,13 +1,141 @@
-/* scn01 — Vital Signs — v0.1.0 */
+/* scn01 — Scenarios — v0.3.0 */
 (function () {
     'use strict';
 
-    function initDirectory() {
-        // TODO: Bootstrap tab init if needed beyond data-bs-toggle
-    }
+    var MAX_PINNED = 5;
 
     function init() {
-        initDirectory();
+        var dataEl = document.getElementById('scn01-data');
+        if (!dataEl) return;
+
+        var data;
+        try {
+            data = JSON.parse(dataEl.textContent);
+        } catch (e) {
+            return;
+        }
+
+        var scenarios = data.scenarios || [];
+        if (!scenarios.length) return;
+
+        var cardEl    = document.getElementById('scn01-card');
+        var pinnedEl  = document.getElementById('scn01-pinned');
+        var prevBtn   = document.getElementById('scn01-prev');
+        var nextBtn   = document.getElementById('scn01-next');
+        var fieldsEl  = document.getElementById('scn01-pinned-fields');
+
+        var index = 0;
+        var pinned = []; // array of scenario ids, in pin order
+
+        function findScenario(id) {
+            for (var i = 0; i < scenarios.length; i++) {
+                if (scenarios[i].id === id) return scenarios[i];
+            }
+            return null;
+        }
+
+        function renderCard() {
+            if (!cardEl) return;
+            var s = scenarios[index];
+            var isPinned = pinned.indexOf(s.id) !== -1;
+            var atMax = pinned.length >= MAX_PINNED && !isPinned;
+
+            cardEl.innerHTML = '';
+
+            var category = document.createElement('div');
+            category.className = 'scn01-category';
+            category.textContent = s.category;
+            cardEl.appendChild(category);
+
+            var text = document.createElement('p');
+            text.className = 'scn01-text';
+            text.textContent = s.text;
+            cardEl.appendChild(text);
+
+            var btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'btn btn-sm ' + (isPinned ? 'btn-secondary' : 'btn-outline-primary');
+            btn.textContent = isPinned ? 'Selected — click to remove' : 'This is similar to my situation';
+            btn.disabled = atMax;
+            btn.addEventListener('click', function () {
+                togglePin(s.id);
+            });
+            cardEl.appendChild(btn);
+
+            var counter = document.createElement('div');
+            counter.className = 'scn01-counter small text-muted';
+            counter.textContent = (index + 1) + ' / ' + scenarios.length;
+            cardEl.appendChild(counter);
+        }
+
+        function renderPinned() {
+            if (!pinnedEl) return;
+            pinnedEl.innerHTML = '';
+
+            if (!pinned.length) {
+                pinnedEl.style.display = 'none';
+            } else {
+                pinnedEl.style.display = '';
+                var label = document.createElement('div');
+                label.className = 'scn01-pinned-label small text-muted';
+                label.textContent = 'Selected (' + pinned.length + '/' + MAX_PINNED + '):';
+                pinnedEl.appendChild(label);
+
+                pinned.forEach(function (id) {
+                    var s = findScenario(id);
+                    if (!s) return;
+                    var chip = document.createElement('span');
+                    chip.className = 'scn01-pin-chip';
+                    chip.textContent = s.category;
+                    chip.title = s.text;
+                    chip.addEventListener('click', function () {
+                        togglePin(id);
+                    });
+                    pinnedEl.appendChild(chip);
+                });
+            }
+        }
+
+        function renderFields() {
+            if (!fieldsEl) return;
+            fieldsEl.innerHTML = '';
+            pinned.forEach(function (id) {
+                var input = document.createElement('input');
+                input.type = 'hidden';
+                input.name = 'pinned_scenario_ids[]';
+                input.value = id;
+                fieldsEl.appendChild(input);
+            });
+        }
+
+        function togglePin(id) {
+            var pos = pinned.indexOf(id);
+            if (pos !== -1) {
+                pinned.splice(pos, 1);
+            } else if (pinned.length < MAX_PINNED) {
+                pinned.push(id);
+            }
+            renderPinned();
+            renderFields();
+            renderCard();
+        }
+
+        if (prevBtn) {
+            prevBtn.addEventListener('click', function () {
+                index = (index - 1 + scenarios.length) % scenarios.length;
+                renderCard();
+            });
+        }
+        if (nextBtn) {
+            nextBtn.addEventListener('click', function () {
+                index = (index + 1) % scenarios.length;
+                renderCard();
+            });
+        }
+
+        renderCard();
+        renderPinned();
+        renderFields();
     }
 
     document.addEventListener('DOMContentLoaded', init);