+
+
+ Movement Dashboard
+Click a tile to explore the spectrum of views without losing your place.
+
+
+
+ Share Your Stance
+Log a perspective to shift the consensus in true Top Gato fashion.
+No subjects yet. Add one below to ignite the debate.
'; + return; + } + + dashboardEl.innerHTML = ''; + + state.subjects.forEach((subject, index) => { + const tile = document.createElement('article'); + tile.className = 'tile'; + tile.tabIndex = 0; + tile.setAttribute('role', 'listitem'); + tile.dataset.slug = subject.slug; + + const title = document.createElement('h3'); + title.className = 'tile__title'; + title.textContent = subject.title; + tile.appendChild(title); + + const meta = document.createElement('div'); + meta.className = 'tile__meta'; + meta.innerHTML = `${subject.totalViews} voice${subject.totalViews === 1 ? '' : 's'}`; + if (subject.consensus) { + const consensusSpan = document.createElement('span'); + consensusSpan.className = 'tile__consensus'; + consensusSpan.textContent = `${subject.consensus} • ${subject.consensusPercent}%`; + meta.appendChild(consensusSpan); + } + tile.appendChild(meta); + + const stanceWrap = document.createElement('div'); + stanceWrap.className = 'tile__stances'; + subject.stances.forEach((stance, stanceIndex) => { + const badge = document.createElement('span'); + badge.className = 'badge'; + badge.style.color = stanceColors[stanceIndex % stanceColors.length]; + badge.innerHTML = `${stance.stance} (${stance.count})`; + stanceWrap.appendChild(badge); + }); + tile.appendChild(stanceWrap); + + tile.addEventListener('click', () => showDetail(subject.slug)); + tile.addEventListener('keypress', (event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + showDetail(subject.slug); + } + }); + + dashboardEl.appendChild(tile); + + if (!state.selectedSlug && index === 0) { + showDetail(subject.slug); + } + }); +} + +function renderSubjectOptions() { + subjectOptions.innerHTML = ''; + state.subjects.forEach((subject) => { + const option = document.createElement('option'); + option.value = subject.title; + option.dataset.slug = subject.slug; + option.label = subject.title; + subjectOptions.appendChild(option); + }); +} + +function renderDetail(detail) { + if (!detail) { + detailEl.innerHTML = `Select a topic tile to see what the pride thinks.
+${detail.description || 'No description yet. Add one when you log a view.'}
+${detail.totalViews} total voice${detail.totalViews === 1 ? '' : 's'} logged.
+ ${detail.consensus ? `Consensus: ${detail.consensus} (${detail.consensusPercent}% of views)
` : 'No consensus yet.
'} +No contributions yet. Be the first mover.
'} +Unable to load detail. ${error.message}
`; + } +} + +async function loadSubjects() { + try { + const data = await fetchJSON('/api/subjects'); + state.subjects = data.subjects || []; + renderDashboard(); + renderSubjectOptions(); + } catch (error) { + dashboardEl.innerHTML = `Failed to load dashboard data. ${error.message}
`; + } +} + +async function submitView(event) { + event.preventDefault(); + formMessage.textContent = 'Sending your perspective to the hub...'; + + const subjectTitle = subjectInput.value.trim(); + const subjectSlug = slugInput.value.trim().toLowerCase(); + const subjectDescription = descriptionInput.value.trim(); + const stance = stanceInput.value.trim(); + const userHandle = handleInput.value.trim(); + const confidence = Number(confidenceInput.value); + + if (!subjectTitle || !subjectSlug || !stance || !userHandle) { + formMessage.textContent = 'Please fill in the required fields.'; + return; + } + + try { + const detail = await fetchJSON('/api/views', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + subjectSlug, + subjectTitle, + subjectDescription, + stance, + userHandle, + confidence + }) + }); + + formMessage.textContent = 'Your view is live. Top Gato salutes you!'; + formEl.reset(); + confidenceInput.value = 50; + confidenceValue.textContent = '50'; + + await loadSubjects(); + renderDetail(detail); + } catch (error) { + formMessage.textContent = `Something went wrong: ${error.message}`; + } +} + +function handleSubjectInput() { + const title = subjectInput.value; + if (!title) { + return; + } + const existing = Array.from(subjectOptions.options).find((option) => option.value === title); + if (existing) { + slugInput.value = existing.dataset.slug || slugify(title); + } else { + slugInput.value = slugify(title); + } +} + +confidenceInput.addEventListener('input', () => { + confidenceValue.textContent = confidenceInput.value; +}); + +subjectInput.addEventListener('input', handleSubjectInput); +formEl.addEventListener('submit', submitView); + +document.addEventListener('DOMContentLoaded', () => { + handleSubjectInput(); + loadSubjects(); +}); diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..0d52886 --- /dev/null +++ b/public/index.html @@ -0,0 +1,98 @@ + + + + + ++ A living dashboard for the movement that champions total economic freedom and fearless speech. Discover where + the community stands, and add your voice to the Top Gato consensus engine. +
+Click a tile to explore the spectrum of views without losing your place.
+Log a perspective to shift the consensus in true Top Gato fashion.
+