1943 lines
72 KiB
JavaScript
1943 lines
72 KiB
JavaScript
// SparkVault — Frontend Application Logic
|
||
// Pipeline Board, Rich Workbench, 64-Card Creative Whack Pack & Nano Banana 2.1 Mockup Studio
|
||
|
||
const state = {
|
||
ideas: [],
|
||
stats: { total: 0, statusCounts: {}, totalMockups: 0, totalWhacks: 0, tags: [] },
|
||
whackCards: [],
|
||
whackSuits: {},
|
||
currentView: "board",
|
||
gridStatusFilter: "all",
|
||
filters: {
|
||
search: "",
|
||
category: "all",
|
||
tag: "all",
|
||
hasMockup: false,
|
||
sort: "score"
|
||
},
|
||
// Whack Studio state
|
||
whackSubmode: "collider",
|
||
colliderCard: null,
|
||
colliderIdea: null,
|
||
spreadCards: [],
|
||
deckSuitFilter: "all",
|
||
deckSearch: "",
|
||
// Quick Banner Whack Card
|
||
quickBannerCard: null,
|
||
// Review & Arena state
|
||
reviewMode: "arena",
|
||
triageQueue: [],
|
||
triageIndex: 0,
|
||
arenaPair: [],
|
||
// Active Drawer Idea
|
||
activeIdeaId: null,
|
||
activeIdea: null,
|
||
drawerTab: "details",
|
||
drawerWhackCard: null,
|
||
// Nano Banana Studio state
|
||
nbGarmentColor: "#F5E8D3",
|
||
nbGarmentColorName: "Vintage Cream",
|
||
nbEditParentMockup: null,
|
||
uploadedOverlayImage: null,
|
||
settings: {
|
||
hasApiKey: false,
|
||
apiKeySource: "none",
|
||
maskedKey: "",
|
||
nanoBananaModel: "gemini-nano-banana-2.1"
|
||
}
|
||
};
|
||
|
||
const CATEGORY_LABELS = {
|
||
creative: "🎨 Creative / Merch",
|
||
project: "🛠️ Project / App",
|
||
spark: "⚡ Quick Spark",
|
||
research: "🔬 Research"
|
||
};
|
||
|
||
const NEXT_STAGE_MAP = {
|
||
spark: "exploring",
|
||
exploring: "building",
|
||
building: "shipped",
|
||
shipped: "shipped",
|
||
archived: "spark"
|
||
};
|
||
|
||
function escapeHtml(str) {
|
||
return String(str ?? "")
|
||
.replace(/&/g, "&")
|
||
.replace(/</g, "<")
|
||
.replace(/>/g, ">")
|
||
.replace(/"/g, """);
|
||
}
|
||
|
||
function renderSimpleMarkdown(md) {
|
||
if (!md) return '<p class="muted-label">No notes yet.</p>';
|
||
const lines = String(md).split("\n");
|
||
const html = lines
|
||
.map((line) => {
|
||
const trimmed = line.trim();
|
||
if (trimmed.startsWith("### ")) return `<h4>${escapeHtml(trimmed.slice(4))}</h4>`;
|
||
if (trimmed.startsWith("## ")) return `<h3>${escapeHtml(trimmed.slice(3))}</h3>`;
|
||
if (trimmed.startsWith("# ")) return `<h2>${escapeHtml(trimmed.slice(2))}</h2>`;
|
||
if (trimmed.startsWith("- ")) return `<li>${formatInlineMd(trimmed.slice(2))}</li>`;
|
||
if (!trimmed) return "<br/>";
|
||
return `<p>${formatInlineMd(trimmed)}</p>`;
|
||
})
|
||
.join("");
|
||
return html;
|
||
}
|
||
|
||
function formatInlineMd(text) {
|
||
return escapeHtml(text)
|
||
.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
|
||
.replace(/\*(.+?)\*/g, "<em>$1</em>")
|
||
.replace(/`(.+?)`/g, "<code>$1</code>");
|
||
}
|
||
|
||
function showToast(message) {
|
||
const container = document.getElementById("toast-container");
|
||
const el = document.createElement("div");
|
||
el.className = "toast";
|
||
el.textContent = message;
|
||
container.appendChild(el);
|
||
setTimeout(() => el.remove(), 3400);
|
||
}
|
||
|
||
async function apiFetch(url, options = {}) {
|
||
const res = await fetch(url, {
|
||
headers: { "Content-Type": "application/json", ...(options.headers || {}) },
|
||
...options
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
const err = new Error(data.error || `Request failed (${res.status})`);
|
||
err.code = data.code;
|
||
throw err;
|
||
}
|
||
return data;
|
||
}
|
||
|
||
// --- INITIALIZATION ---
|
||
async function initApp() {
|
||
bindGlobalEvents();
|
||
await Promise.all([loadSettings(), loadWhackCatalog(), loadIdeas()]);
|
||
renderCompositorCanvas();
|
||
}
|
||
|
||
async function loadSettings() {
|
||
try {
|
||
const data = await apiFetch("/api/settings");
|
||
state.settings = data;
|
||
const dot = document.getElementById("api-key-status-dot");
|
||
if (dot) {
|
||
dot.classList.toggle("online", Boolean(data.hasApiKey));
|
||
}
|
||
const keyStatus = document.getElementById("settings-key-status");
|
||
if (keyStatus) {
|
||
keyStatus.textContent = data.hasApiKey
|
||
? `Active key configured (${data.apiKeySource}: ${data.maskedKey})`
|
||
: "No key stored yet — paste your Gemini API key to enable live Nano Banana 2.1 generation.";
|
||
}
|
||
const modelSel = document.getElementById("settings-model-select");
|
||
if (modelSel && data.nanoBananaModel) {
|
||
modelSel.value = data.nanoBananaModel;
|
||
}
|
||
} catch (err) {
|
||
console.warn("Failed to load settings:", err);
|
||
}
|
||
}
|
||
|
||
async function loadWhackCatalog() {
|
||
const data = await apiFetch("/api/whack-cards");
|
||
state.whackCards = data.cards || [];
|
||
state.whackSuits = data.suits || {};
|
||
populateWhackTwistSelect();
|
||
renderDeckBrowser();
|
||
}
|
||
|
||
function populateWhackTwistSelect() {
|
||
const sel = document.getElementById("nb-whack-twist-select");
|
||
if (!sel) return;
|
||
sel.innerHTML = `<option value="">None (Direct Concept)</option>` +
|
||
state.whackCards
|
||
.map((c) => `<option value="${c.number}">#${c.number} [${c.suitLabel}] ${escapeHtml(c.title)}</option>`)
|
||
.join("");
|
||
}
|
||
|
||
async function loadIdeas() {
|
||
const params = new URLSearchParams();
|
||
if (state.filters.search) params.set("search", state.filters.search);
|
||
if (state.filters.category !== "all") params.set("category", state.filters.category);
|
||
if (state.filters.tag !== "all") params.set("tag", state.filters.tag);
|
||
if (state.filters.hasMockup) params.set("hasMockup", "true");
|
||
params.set("sort", state.filters.sort);
|
||
|
||
const data = await apiFetch(`/api/ideas?${params.toString()}`);
|
||
state.ideas = data.ideas || [];
|
||
state.stats = data.stats || state.stats;
|
||
|
||
updateFilterTagOptions();
|
||
document.getElementById("stat-mockups-count").textContent = state.stats.totalMockups || 0;
|
||
|
||
renderKanbanBoard();
|
||
renderExplorerGrid();
|
||
populateColliderIdeaSelect();
|
||
|
||
if (state.activeIdeaId) {
|
||
const refreshed = state.ideas.find((i) => i.id === state.activeIdeaId);
|
||
if (refreshed) {
|
||
state.activeIdea = refreshed;
|
||
renderDrawerContent();
|
||
}
|
||
}
|
||
}
|
||
|
||
function updateFilterTagOptions() {
|
||
const sel = document.getElementById("filter-tag");
|
||
if (!sel) return;
|
||
const current = state.filters.tag;
|
||
const optionsHtml =
|
||
`<option value="all">All #Tags</option>` +
|
||
(state.stats.tags || [])
|
||
.map((t) => `<option value="${escapeHtml(t.name)}">#${escapeHtml(t.name)} (${t.count})</option>`)
|
||
.join("");
|
||
sel.innerHTML = optionsHtml;
|
||
if ([...sel.options].some((o) => o.value === current)) {
|
||
sel.value = current;
|
||
}
|
||
}
|
||
|
||
// --- RENDER KANBAN BOARD ---
|
||
function renderKanbanBoard() {
|
||
const statuses = ["spark", "exploring", "building", "shipped", "archived"];
|
||
for (const st of statuses) {
|
||
const colEl = document.getElementById(`col-${st}`);
|
||
const countEl = document.getElementById(`count-${st}`);
|
||
const mcountEl = document.getElementById(`mcount-${st}`);
|
||
const list = state.ideas.filter((i) => i.status === st);
|
||
if (countEl) countEl.textContent = list.length;
|
||
if (mcountEl) mcountEl.textContent = list.length;
|
||
if (!colEl) continue;
|
||
|
||
if (list.length === 0) {
|
||
colEl.innerHTML = `<div class="muted-label" style="padding:0.75rem;text-align:center;">Drop ideas here</div>`;
|
||
continue;
|
||
}
|
||
|
||
colEl.innerHTML = list.map((idea) => renderIdeaCardHtml(idea)).join("");
|
||
bindIdeaCardEvents(colEl);
|
||
}
|
||
}
|
||
|
||
function renderIdeaCardHtml(idea) {
|
||
const checklistTotal = idea.checklist?.length || 0;
|
||
const checklistDone = (idea.checklist || []).filter((c) => c.done).length;
|
||
const whackCount = idea.whack_history?.length || 0;
|
||
const nextStage = NEXT_STAGE_MAP[idea.status];
|
||
|
||
return `
|
||
<article
|
||
class="idea-card ${idea.pinned ? "pinned" : ""}"
|
||
draggable="true"
|
||
data-idea-id="${idea.id}"
|
||
>
|
||
${
|
||
idea.cover_mockup_url
|
||
? `<img src="${escapeHtml(idea.cover_mockup_url)}" alt="${escapeHtml(idea.title)}" class="idea-card-mockup-thumb" loading="lazy" />`
|
||
: ""
|
||
}
|
||
<div class="idea-card-top">
|
||
<span class="cat-badge">${CATEGORY_LABELS[idea.category] || idea.category}</span>
|
||
<span class="score-pill" title="Composite Priority Score">⚡ ${idea.composite_score}</span>
|
||
</div>
|
||
<h3 class="idea-card-title">${idea.pinned ? "📌 " : ""}${escapeHtml(idea.title)}</h3>
|
||
${idea.elevator_pitch ? `<p class="idea-card-pitch">${escapeHtml(idea.elevator_pitch)}</p>` : ""}
|
||
${
|
||
idea.tags.length > 0
|
||
? `<div class="idea-card-tags">${idea.tags.map((t) => `<span class="tag-chip">#${escapeHtml(t)}</span>`).join("")}</div>`
|
||
: ""
|
||
}
|
||
<div class="idea-card-footer">
|
||
<div>
|
||
<span title="Excitement">🔥${idea.rating_excitement}</span>
|
||
${checklistTotal > 0 ? `<span> • ☑️ ${checklistDone}/${checklistTotal}</span>` : ""}
|
||
${whackCount > 0 ? `<span title="Whack Pack reflections"> • 🃏${whackCount}</span>` : ""}
|
||
${idea.mockups.length > 0 ? `<span title="Visual Mockups"> • 🍌${idea.mockups.length}</span>` : ""}
|
||
</div>
|
||
<div class="card-quick-actions">
|
||
<button type="button" class="icon-btn btn-card-mockup" data-idea-id="${idea.id}" title="Open in Nano Banana Mockup Studio">🍌</button>
|
||
<button type="button" class="icon-btn btn-card-whack" data-idea-id="${idea.id}" title="Draw a Whack Card for this Idea">🃏</button>
|
||
${
|
||
idea.status !== "shipped"
|
||
? `<button type="button" class="icon-btn btn-card-advance" data-idea-id="${idea.id}" data-next="${nextStage}" title="Advance to ${nextStage}">→</button>`
|
||
: ""
|
||
}
|
||
</div>
|
||
</div>
|
||
</article>
|
||
`;
|
||
}
|
||
|
||
function bindIdeaCardEvents(container) {
|
||
container.querySelectorAll(".idea-card").forEach((cardEl) => {
|
||
const id = Number(cardEl.dataset.ideaId);
|
||
|
||
cardEl.addEventListener("click", (e) => {
|
||
if (e.target.closest("button")) return;
|
||
openIdeaDrawer(id, "details");
|
||
});
|
||
|
||
cardEl.addEventListener("dragstart", (e) => {
|
||
e.dataTransfer.setData("text/plain", String(id));
|
||
});
|
||
});
|
||
|
||
container.querySelectorAll(".btn-card-mockup").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
openIdeaDrawer(Number(btn.dataset.ideaId), "mockup");
|
||
});
|
||
});
|
||
|
||
container.querySelectorAll(".btn-card-whack").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
openIdeaDrawer(Number(btn.dataset.ideaId), "whack");
|
||
});
|
||
});
|
||
|
||
container.querySelectorAll(".btn-card-advance").forEach((btn) => {
|
||
btn.addEventListener("click", async (e) => {
|
||
e.stopPropagation();
|
||
const id = Number(btn.dataset.ideaId);
|
||
const next = btn.dataset.next;
|
||
await apiFetch(`/api/ideas/${id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ status: next })
|
||
});
|
||
showToast(`Moved idea to ${next.toUpperCase()}`);
|
||
await loadIdeas();
|
||
});
|
||
});
|
||
}
|
||
|
||
// --- RENDER EXPLORER GRID ---
|
||
function renderExplorerGrid() {
|
||
const container = document.getElementById("explorer-grid");
|
||
if (!container) return;
|
||
let items = state.ideas;
|
||
if (state.gridStatusFilter !== "all") {
|
||
items = items.filter((i) => i.status === state.gridStatusFilter);
|
||
}
|
||
if (items.length === 0) {
|
||
container.innerHTML = `<div class="muted-label" style="padding:2rem;">No matching ideas found. Capture a spark above!</div>`;
|
||
return;
|
||
}
|
||
container.innerHTML = items.map((idea) => renderIdeaCardHtml(idea)).join("");
|
||
bindIdeaCardEvents(container);
|
||
}
|
||
|
||
// --- CREATIVE WHACK PACK STUDIO ---
|
||
function populateColliderIdeaSelect() {
|
||
const sel = document.getElementById("collider-idea-select");
|
||
if (!sel) return;
|
||
const active = state.ideas.filter((i) => i.status !== "archived");
|
||
const currentVal = sel.value;
|
||
sel.innerHTML =
|
||
`<option value="">🎲 Random Active Idea</option>` +
|
||
active.map((i) => `<option value="${i.id}">[${i.status.toUpperCase()}] ${escapeHtml(i.title)}</option>`).join("");
|
||
if (currentVal && [...sel.options].some((o) => o.value === currentVal)) {
|
||
sel.value = currentVal;
|
||
}
|
||
}
|
||
|
||
async function dealIdeaCollider({ forceRandomIdea = false } = {}) {
|
||
const suit = document.getElementById("collider-suit-select")?.value || "";
|
||
const selectedIdeaId = forceRandomIdea ? "" : document.getElementById("collider-idea-select")?.value || "";
|
||
|
||
const params = new URLSearchParams({ mode: "collider" });
|
||
if (suit) params.set("suit", suit);
|
||
if (selectedIdeaId) params.set("ideaId", selectedIdeaId);
|
||
|
||
const data = await apiFetch(`/api/whack-cards/draw?${params.toString()}`);
|
||
state.colliderCard = data.card;
|
||
state.colliderIdea = data.idea;
|
||
renderColliderStage();
|
||
}
|
||
|
||
function renderColliderStage() {
|
||
const stage = document.getElementById("collider-stage");
|
||
if (!stage || !state.colliderCard) return;
|
||
|
||
const card = state.colliderCard;
|
||
const idea = state.colliderIdea;
|
||
|
||
stage.innerHTML = `
|
||
<div class="whack-card-showcase">
|
||
<div style="margin-bottom:0.5rem;display:flex;justify-content:space-between;align-items:center;">
|
||
<span class="suit-pill suit-${card.suit}">${card.suitLabel} • Card #${card.number}</span>
|
||
<button type="button" class="btn btn-ghost btn-xs" id="btn-zoom-collider-card">🔍 Zoom Card</button>
|
||
</div>
|
||
<img
|
||
src="${escapeHtml(card.imageUrl)}"
|
||
alt="${escapeHtml(card.title)}"
|
||
class="whack-card-scan"
|
||
id="img-collider-card"
|
||
/>
|
||
<h3 style="margin-top:0.65rem;font-size:1rem;">${escapeHtml(card.title)}</h3>
|
||
<p class="muted-label" style="margin-top:0.2rem;">${escapeHtml(card.roleDescription)}</p>
|
||
</div>
|
||
|
||
<div class="collider-workbench">
|
||
<div>
|
||
<span class="muted-label">COLLIDING WITH YOUR IDEA:</span>
|
||
${
|
||
idea
|
||
? `<h3 style="font-size:1.2rem;margin-top:0.2rem;">${escapeHtml(idea.title)} <span class="score-pill">Stage: ${idea.status.toUpperCase()}</span></h3>
|
||
<p class="muted-label" style="margin-top:0.2rem;">${escapeHtml(idea.elevator_pitch || "No elevator pitch yet.")}</p>`
|
||
: `<h3 style="font-size:1.1rem;">Freeform Brainstorm (No active idea selected)</h3>`
|
||
}
|
||
</div>
|
||
|
||
<div class="prompt-callout">
|
||
<div class="muted-label">GUIDING WHACK QUESTION (CARD #${card.number}):</div>
|
||
<strong style="font-size:1.05rem;color:var(--accent-primary);">${escapeHtml(card.promptQuestion)}</strong>
|
||
</div>
|
||
|
||
<div class="field-group">
|
||
<label for="collider-reflection-input">How does "${escapeHtml(card.title)}" transform or advance this idea?</label>
|
||
<textarea
|
||
id="collider-reflection-input"
|
||
rows="4"
|
||
class="textarea-input"
|
||
placeholder="Write your breakthrough angle, visual twist, feature reversal, or next step..."
|
||
></textarea>
|
||
</div>
|
||
|
||
<div style="display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center;">
|
||
${
|
||
idea
|
||
? `<label class="filter-checkbox">
|
||
<input type="checkbox" id="collider-add-checklist" checked />
|
||
<span>Also add as Action Checklist step</span>
|
||
</label>
|
||
<button type="button" id="btn-save-collider-whack" class="btn btn-primary">
|
||
💾 Log Breakthrough to Idea
|
||
</button>
|
||
<button type="button" id="btn-collider-to-mockup" class="btn btn-secondary">
|
||
🍌 Visualize This Twist in Nano Banana Studio
|
||
</button>`
|
||
: ""
|
||
}
|
||
<button type="button" id="btn-spawn-from-collider" class="btn btn-ghost">
|
||
✨ Spawn Brand-New Idea from Card #${card.number}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById("img-collider-card")?.addEventListener("click", () => openCardLightbox(card));
|
||
document.getElementById("btn-zoom-collider-card")?.addEventListener("click", () => openCardLightbox(card));
|
||
|
||
document.getElementById("btn-save-collider-whack")?.addEventListener("click", async () => {
|
||
const reflection = document.getElementById("collider-reflection-input")?.value.trim();
|
||
if (!reflection) {
|
||
showToast("Write a quick reflection or breakthrough first!");
|
||
return;
|
||
}
|
||
const addChecklistItem = document.getElementById("collider-add-checklist")?.checked;
|
||
await apiFetch(`/api/ideas/${idea.id}/whack`, {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
cardNumber: card.number,
|
||
reflection,
|
||
addChecklistItem
|
||
})
|
||
});
|
||
showToast(`Logged Card #${card.number} breakthrough onto "${idea.title}"!`);
|
||
document.getElementById("collider-reflection-input").value = "";
|
||
await Promise.all([loadIdeas(), loadWhackCatalog()]);
|
||
});
|
||
|
||
document.getElementById("btn-collider-to-mockup")?.addEventListener("click", async () => {
|
||
const reflection = document.getElementById("collider-reflection-input")?.value.trim();
|
||
await openIdeaDrawer(idea.id, "mockup");
|
||
const twistSel = document.getElementById("nb-whack-twist-select");
|
||
if (twistSel) twistSel.value = String(card.number);
|
||
const promptEl = document.getElementById("nb-prompt-input");
|
||
if (promptEl) {
|
||
promptEl.value = reflection
|
||
? `${idea.title} — ${reflection} (Inspired by Card #${card.number}: ${card.title})`
|
||
: `${idea.title} — reimagined using "${card.title}": ${card.promptQuestion}`;
|
||
}
|
||
});
|
||
|
||
document.getElementById("btn-spawn-from-collider")?.addEventListener("click", async () => {
|
||
const reflection = document.getElementById("collider-reflection-input")?.value.trim();
|
||
const title = reflection
|
||
? reflection.split("\n")[0].slice(0, 90)
|
||
: `Spark from Card #${card.number}: ${card.title}`;
|
||
const created = await apiFetch("/api/ideas", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
title,
|
||
elevator_pitch: `Inspired by Creative Whack Pack Card #${card.number} (${card.title}): ${card.promptQuestion}`,
|
||
inspired_by_card: card.number,
|
||
tags: ["whack-spark", card.suit]
|
||
})
|
||
});
|
||
showToast(`Created new Spark: "${created.idea.title}"`);
|
||
await Promise.all([loadIdeas(), loadWhackCatalog()]);
|
||
openIdeaDrawer(created.idea.id, "details");
|
||
});
|
||
}
|
||
|
||
async function dealFourRoleSpread() {
|
||
const data = await apiFetch("/api/whack-cards/draw?mode=spread");
|
||
state.spreadCards = data.cards || [];
|
||
const grid = document.getElementById("spread-grid");
|
||
if (!grid) return;
|
||
|
||
grid.innerHTML = state.spreadCards
|
||
.map(
|
||
(card) => `
|
||
<div class="whack-card-showcase">
|
||
<div style="margin-bottom:0.45rem;">
|
||
<span class="suit-pill suit-${card.suit}">${card.suitLabel} (#${card.number})</span>
|
||
</div>
|
||
<img src="${escapeHtml(card.imageUrl)}" alt="${escapeHtml(card.title)}" class="whack-card-scan" data-card-num="${card.number}" />
|
||
<h4 style="margin-top:0.55rem;">${escapeHtml(card.title)}</h4>
|
||
<p style="font-size:0.82rem;color:var(--accent-primary);margin-top:0.3rem;font-weight:600;">${escapeHtml(card.promptQuestion)}</p>
|
||
<div style="margin-top:0.65rem;display:flex;gap:0.4rem;justify-content:center;">
|
||
<button type="button" class="btn btn-ghost btn-xs btn-spread-collide" data-card-num="${card.number}">⚡ Use in Collider</button>
|
||
<button type="button" class="btn btn-primary btn-xs btn-spread-spawn" data-card-num="${card.number}">✨ Spawn Idea</button>
|
||
</div>
|
||
</div>
|
||
`
|
||
)
|
||
.join("");
|
||
|
||
grid.querySelectorAll("img[data-card-num]").forEach((img) => {
|
||
img.addEventListener("click", () => {
|
||
const c = state.whackCards.find((x) => x.number === Number(img.dataset.cardNum));
|
||
if (c) openCardLightbox(c);
|
||
});
|
||
});
|
||
|
||
grid.querySelectorAll(".btn-spread-collide").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
const c = state.whackCards.find((x) => x.number === Number(btn.dataset.cardNum));
|
||
if (!c) return;
|
||
state.colliderCard = c;
|
||
if (!state.colliderIdea && state.ideas.length > 0) {
|
||
state.colliderIdea = state.ideas[0];
|
||
}
|
||
switchWhackSubmode("collider");
|
||
renderColliderStage();
|
||
});
|
||
});
|
||
|
||
grid.querySelectorAll(".btn-spread-spawn").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
const c = state.whackCards.find((x) => x.number === Number(btn.dataset.cardNum));
|
||
if (c) showQuickWhackBanner(c);
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderDeckBrowser() {
|
||
const grid = document.getElementById("deck-cards-grid");
|
||
if (!grid) return;
|
||
|
||
let list = state.whackCards;
|
||
if (state.deckSuitFilter !== "all") {
|
||
list = list.filter((c) => c.suit === state.deckSuitFilter);
|
||
}
|
||
if (state.deckSearch.trim()) {
|
||
const q = state.deckSearch.trim().toLowerCase();
|
||
list = list.filter(
|
||
(c) =>
|
||
c.title.toLowerCase().includes(q) ||
|
||
c.promptQuestion.toLowerCase().includes(q) ||
|
||
String(c.number) === q
|
||
);
|
||
}
|
||
|
||
grid.innerHTML = list
|
||
.map(
|
||
(card) => `
|
||
<div class="deck-card-item">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||
<span class="suit-pill suit-${card.suit}">#${card.number} ${card.suitLabel}</span>
|
||
${card.usageCount > 0 ? `<span class="tag-chip">Used ${card.usageCount}x</span>` : ""}
|
||
</div>
|
||
<img src="${escapeHtml(card.imageUrl)}" alt="${escapeHtml(card.title)}" loading="lazy" data-card-num="${card.number}" />
|
||
<strong style="font-size:0.86rem;">${escapeHtml(card.title)}</strong>
|
||
<p class="muted-label" style="font-size:0.75rem;flex:1;">${escapeHtml(card.promptQuestion)}</p>
|
||
<div style="display:flex;gap:0.35rem;">
|
||
<button type="button" class="btn btn-ghost btn-xs btn-deck-collide" data-card-num="${card.number}" style="flex:1;">⚡ Collide</button>
|
||
<button type="button" class="btn btn-primary btn-xs btn-deck-spark" data-card-num="${card.number}" style="flex:1;">✨ Spark</button>
|
||
</div>
|
||
</div>
|
||
`
|
||
)
|
||
.join("");
|
||
|
||
grid.querySelectorAll("img[data-card-num]").forEach((img) => {
|
||
img.addEventListener("click", () => {
|
||
const c = state.whackCards.find((x) => x.number === Number(img.dataset.cardNum));
|
||
if (c) openCardLightbox(c);
|
||
});
|
||
});
|
||
|
||
grid.querySelectorAll(".btn-deck-collide").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
const c = state.whackCards.find((x) => x.number === Number(btn.dataset.cardNum));
|
||
if (!c) return;
|
||
state.colliderCard = c;
|
||
if (!state.colliderIdea && state.ideas.length > 0) {
|
||
state.colliderIdea = state.ideas[0];
|
||
}
|
||
switchWhackSubmode("collider");
|
||
renderColliderStage();
|
||
});
|
||
});
|
||
|
||
grid.querySelectorAll(".btn-deck-spark").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
const c = state.whackCards.find((x) => x.number === Number(btn.dataset.cardNum));
|
||
if (c) showQuickWhackBanner(c);
|
||
});
|
||
});
|
||
}
|
||
|
||
// --- REVIEW & HEAD-TO-HEAD ARENA ---
|
||
async function loadReviewSession() {
|
||
const data = await apiFetch("/api/review/next");
|
||
state.triageQueue = data.triageQueue || [];
|
||
state.triageIndex = 0;
|
||
state.arenaPair = data.arenaPair || [];
|
||
renderArenaStage();
|
||
renderTriageStage();
|
||
}
|
||
|
||
function renderArenaStage() {
|
||
const container = document.getElementById("arena-stage");
|
||
if (!container) return;
|
||
|
||
if (state.arenaPair.length < 2) {
|
||
container.innerHTML = `<div class="muted-label" style="padding:2rem;">Need at least 2 active ideas for Head-to-Head Arena. Capture more sparks above!</div>`;
|
||
return;
|
||
}
|
||
|
||
const [left, right] = state.arenaPair;
|
||
container.innerHTML = `
|
||
${renderArenaFighterHtml(left, right.id, "left")}
|
||
<div class="arena-vs-badge">VS</div>
|
||
${renderArenaFighterHtml(right, left.id, "right")}
|
||
`;
|
||
|
||
container.querySelectorAll(".btn-arena-win").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
const winnerId = Number(btn.dataset.winner);
|
||
const loserId = Number(btn.dataset.loser);
|
||
const res = await apiFetch("/api/review/arena", {
|
||
method: "POST",
|
||
body: JSON.stringify({ winnerId, loserId })
|
||
});
|
||
showToast(`🏆 "${res.winner.title}" wins the round! (Score: ${res.winner.composite_score})`);
|
||
await Promise.all([loadIdeas(), loadReviewSession()]);
|
||
});
|
||
});
|
||
|
||
container.querySelectorAll(".btn-arena-open").forEach((btn) => {
|
||
btn.addEventListener("click", () => openIdeaDrawer(Number(btn.dataset.id), "details"));
|
||
});
|
||
}
|
||
|
||
function renderArenaFighterHtml(idea, opponentId) {
|
||
return `
|
||
<div class="arena-fighter">
|
||
<div>
|
||
<div class="idea-card-top" style="margin-bottom:0.5rem;">
|
||
<span class="cat-badge">${CATEGORY_LABELS[idea.category] || idea.category}</span>
|
||
<span class="score-pill">⚡ Score ${idea.composite_score} • 🏆 ${idea.arena_wins}W</span>
|
||
</div>
|
||
${
|
||
idea.cover_mockup_url
|
||
? `<img src="${escapeHtml(idea.cover_mockup_url)}" alt="${escapeHtml(idea.title)}" class="idea-card-mockup-thumb" style="height:210px;margin-bottom:0.75rem;" />`
|
||
: ""
|
||
}
|
||
<h3 style="font-size:1.2rem;margin-bottom:0.35rem;">${escapeHtml(idea.title)}</h3>
|
||
<p style="color:var(--text-secondary);font-size:0.9rem;margin-bottom:0.65rem;">
|
||
${escapeHtml(idea.elevator_pitch || idea.notes_markdown.slice(0, 140) || "No description yet.")}
|
||
</p>
|
||
<div class="idea-card-tags">
|
||
${idea.tags.map((t) => `<span class="tag-chip">#${escapeHtml(t)}</span>`).join("")}
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:0.5rem;margin-top:0.75rem;">
|
||
<button type="button" class="btn btn-primary btn-arena-win" style="flex:1;" data-winner="${idea.id}" data-loser="${opponentId}">
|
||
🔥 This Excites Me More
|
||
</button>
|
||
<button type="button" class="btn btn-ghost btn-sm btn-arena-open" data-id="${idea.id}">
|
||
Inspect
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderTriageStage() {
|
||
const container = document.getElementById("triage-stage");
|
||
if (!container) return;
|
||
|
||
const item = state.triageQueue[state.triageIndex];
|
||
if (!item) {
|
||
container.innerHTML = `<div class="triage-card"><h3>🎉 All Caught Up!</h3><p class="muted-label">You've reviewed every active idea in the triage queue.</p></div>`;
|
||
return;
|
||
}
|
||
|
||
const nextStage = NEXT_STAGE_MAP[item.status];
|
||
container.innerHTML = `
|
||
<div class="triage-card">
|
||
<div class="idea-card-top">
|
||
<span class="cat-badge">Stage: ${item.status.toUpperCase()} • ${CATEGORY_LABELS[item.category] || item.category}</span>
|
||
<span class="muted-label">Card ${state.triageIndex + 1} of ${state.triageQueue.length}</span>
|
||
</div>
|
||
${
|
||
item.cover_mockup_url
|
||
? `<img src="${escapeHtml(item.cover_mockup_url)}" alt="${escapeHtml(item.title)}" class="idea-card-mockup-thumb" style="height:220px;" />`
|
||
: ""
|
||
}
|
||
<h3 style="font-size:1.35rem;">${escapeHtml(item.title)}</h3>
|
||
<p style="color:var(--text-secondary);">${escapeHtml(item.elevator_pitch || "No elevator pitch yet — open Workbench or deal a Whack card to flesh it out.")}</p>
|
||
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;padding-top:0.5rem;">
|
||
<button type="button" class="btn btn-primary" id="btn-triage-promote">🚀 Promote to ${nextStage.toUpperCase()}</button>
|
||
<button type="button" class="btn btn-secondary" id="btn-triage-mockup">🍌 Mock Up Image</button>
|
||
<button type="button" class="btn btn-ghost" id="btn-triage-whack">🃏 Whack It</button>
|
||
<button type="button" class="btn btn-ghost" id="btn-triage-keep">✓ Keep & Next</button>
|
||
<button type="button" class="btn btn-danger-ghost" id="btn-triage-archive">📦 Archive</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById("btn-triage-promote")?.addEventListener("click", async () => {
|
||
await apiFetch(`/api/ideas/${item.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ status: nextStage, last_reviewed_at: new Date().toISOString() })
|
||
});
|
||
showToast(`Promoted "${item.title}" to ${nextStage.toUpperCase()}`);
|
||
state.triageIndex++;
|
||
await loadIdeas();
|
||
renderTriageStage();
|
||
});
|
||
|
||
document.getElementById("btn-triage-mockup")?.addEventListener("click", () => {
|
||
openIdeaDrawer(item.id, "mockup");
|
||
});
|
||
|
||
document.getElementById("btn-triage-whack")?.addEventListener("click", () => {
|
||
openIdeaDrawer(item.id, "whack");
|
||
});
|
||
|
||
document.getElementById("btn-triage-keep")?.addEventListener("click", async () => {
|
||
await apiFetch(`/api/ideas/${item.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ last_reviewed_at: new Date().toISOString() })
|
||
});
|
||
state.triageIndex++;
|
||
renderTriageStage();
|
||
});
|
||
|
||
document.getElementById("btn-triage-archive")?.addEventListener("click", async () => {
|
||
await apiFetch(`/api/ideas/${item.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ status: "archived", last_reviewed_at: new Date().toISOString() })
|
||
});
|
||
showToast(`Archived "${item.title}"`);
|
||
state.triageIndex++;
|
||
await loadIdeas();
|
||
renderTriageStage();
|
||
});
|
||
}
|
||
|
||
// --- SLIDE-OVER RICH WORKBENCH & NANO BANANA STUDIO ---
|
||
async function openIdeaDrawer(id, initialTab = "details") {
|
||
const data = await apiFetch(`/api/ideas/${id}`);
|
||
state.activeIdeaId = id;
|
||
state.activeIdea = data.idea;
|
||
state.nbEditParentMockup = null;
|
||
|
||
document.getElementById("drawer-backdrop").classList.remove("hidden");
|
||
document.getElementById("idea-drawer").classList.remove("hidden");
|
||
|
||
switchDrawerTab(initialTab);
|
||
renderDrawerContent();
|
||
|
||
// Pre-populate compositor text from idea title
|
||
const topInput = document.getElementById("comp-top-text");
|
||
const bottomInput = document.getElementById("comp-bottom-text");
|
||
if (topInput && !topInput.value) {
|
||
topInput.value = state.activeIdea.title.slice(0, 26).toUpperCase();
|
||
}
|
||
if (bottomInput && !bottomInput.value) {
|
||
bottomInput.value = state.activeIdea.tags[0] ? `#${state.activeIdea.tags[0].toUpperCase()}` : "SPARKVAULT STUDIO";
|
||
}
|
||
renderCompositorCanvas();
|
||
|
||
if (initialTab === "whack" && !state.drawerWhackCard) {
|
||
await drawCardForActiveIdea();
|
||
}
|
||
}
|
||
|
||
function closeIdeaDrawer() {
|
||
state.activeIdeaId = null;
|
||
state.activeIdea = null;
|
||
document.getElementById("drawer-backdrop").classList.add("hidden");
|
||
document.getElementById("idea-drawer").classList.add("hidden");
|
||
}
|
||
|
||
function switchDrawerTab(tabName) {
|
||
state.drawerTab = tabName;
|
||
document.querySelectorAll(".drawer-tab").forEach((btn) => {
|
||
btn.classList.toggle("active", btn.dataset.drawerTab === tabName);
|
||
});
|
||
["details", "mockup", "whack"].forEach((t) => {
|
||
const panel = document.getElementById(`drawer-tab-${t}`);
|
||
if (panel) panel.classList.toggle("hidden", t !== tabName);
|
||
});
|
||
if (tabName === "mockup") {
|
||
renderCompositorCanvas();
|
||
}
|
||
}
|
||
|
||
function renderDrawerContent() {
|
||
const idea = state.activeIdea;
|
||
if (!idea) return;
|
||
|
||
document.getElementById("drawer-title-input").value = idea.title;
|
||
document.getElementById("drawer-status-select").value = idea.status;
|
||
document.getElementById("drawer-category-select").value = idea.category;
|
||
document.getElementById("drawer-pin-btn").textContent = idea.pinned ? "📌 Pinned" : "📌 Pin";
|
||
document.getElementById("drawer-score-badge").textContent = `⚡ Score: ${idea.composite_score}`;
|
||
document.getElementById("drawer-pitch-input").value = idea.elevator_pitch || "";
|
||
document.getElementById("drawer-notes-input").value = idea.notes_markdown || "";
|
||
document.getElementById("drawer-notes-preview").innerHTML = renderSimpleMarkdown(idea.notes_markdown);
|
||
|
||
// Sliders
|
||
document.getElementById("slider-excitement").value = idea.rating_excitement;
|
||
document.getElementById("val-excitement").textContent = idea.rating_excitement;
|
||
document.getElementById("slider-impact").value = idea.rating_impact;
|
||
document.getElementById("val-impact").textContent = idea.rating_impact;
|
||
document.getElementById("slider-ease").value = idea.rating_ease;
|
||
document.getElementById("val-ease").textContent = idea.rating_ease;
|
||
|
||
// Counts
|
||
document.getElementById("drawer-mockup-count").textContent = idea.mockups.length;
|
||
document.getElementById("drawer-whack-count").textContent = idea.whack_history.length;
|
||
|
||
// Tags
|
||
const tagsEl = document.getElementById("drawer-tags-list");
|
||
tagsEl.innerHTML = idea.tags
|
||
.map(
|
||
(t) =>
|
||
`<span class="tag-removable">#${escapeHtml(t)} <button type="button" data-remove-tag="${escapeHtml(t)}">✕</button></span>`
|
||
)
|
||
.join("");
|
||
tagsEl.querySelectorAll("button[data-remove-tag]").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
const nextTags = idea.tags.filter((x) => x !== btn.dataset.removeTag);
|
||
await saveActiveIdeaPatch({ tags: nextTags });
|
||
});
|
||
});
|
||
|
||
// Checklist
|
||
const chkContainer = document.getElementById("drawer-checklist-items");
|
||
const doneCount = idea.checklist.filter((c) => c.done).length;
|
||
document.getElementById("drawer-checklist-progress").textContent = `${doneCount}/${idea.checklist.length} completed`;
|
||
chkContainer.innerHTML = idea.checklist
|
||
.map(
|
||
(item) => `
|
||
<div class="checklist-row ${item.done ? "done" : ""}">
|
||
<label style="display:flex;align-items:center;gap:0.5rem;flex:1;cursor:pointer;">
|
||
<input type="checkbox" data-chk-id="${escapeHtml(item.id)}" ${item.done ? "checked" : ""} />
|
||
<span>${escapeHtml(item.text)}</span>
|
||
</label>
|
||
<button type="button" class="btn btn-ghost btn-xs" data-del-chk="${escapeHtml(item.id)}">✕</button>
|
||
</div>
|
||
`
|
||
)
|
||
.join("");
|
||
|
||
chkContainer.querySelectorAll("input[data-chk-id]").forEach((cb) => {
|
||
cb.addEventListener("change", async () => {
|
||
const next = idea.checklist.map((c) => (c.id === cb.dataset.chkId ? { ...c, done: cb.checked } : c));
|
||
await saveActiveIdeaPatch({ checklist: next });
|
||
});
|
||
});
|
||
|
||
chkContainer.querySelectorAll("button[data-del-chk]").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
const next = idea.checklist.filter((c) => c.id !== btn.dataset.delChk);
|
||
await saveActiveIdeaPatch({ checklist: next });
|
||
});
|
||
});
|
||
|
||
// Pros & Cons
|
||
renderBulletList("drawer-pros-list", idea.pros, "pros");
|
||
renderBulletList("drawer-cons-list", idea.cons, "cons");
|
||
|
||
// Links
|
||
const linksEl = document.getElementById("drawer-links-list");
|
||
linksEl.innerHTML = idea.links
|
||
.map(
|
||
(l) => `
|
||
<div class="checklist-row">
|
||
<a href="${escapeHtml(l.url)}" target="_blank" rel="noopener noreferrer" style="color:var(--accent-primary);">${escapeHtml(l.title || l.url)}</a>
|
||
<button type="button" class="btn btn-ghost btn-xs" data-del-link="${escapeHtml(l.id)}">✕</button>
|
||
</div>
|
||
`
|
||
)
|
||
.join("");
|
||
linksEl.querySelectorAll("button[data-del-link]").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
const next = idea.links.filter((l) => l.id !== btn.dataset.delLink);
|
||
await saveActiveIdeaPatch({ links: next });
|
||
});
|
||
});
|
||
|
||
// Mockup Gallery
|
||
renderDrawerMockupGallery(idea);
|
||
|
||
// Whack History
|
||
renderDrawerWhackHistory(idea);
|
||
}
|
||
|
||
function renderBulletList(elementId, items, fieldName) {
|
||
const ul = document.getElementById(elementId);
|
||
if (!ul) return;
|
||
ul.innerHTML = items
|
||
.map(
|
||
(txt, idx) => `
|
||
<li>
|
||
<span>${escapeHtml(txt)}</span>
|
||
<button type="button" class="btn btn-ghost btn-xs" data-del-idx="${idx}">✕</button>
|
||
</li>
|
||
`
|
||
)
|
||
.join("");
|
||
ul.querySelectorAll("button[data-del-idx]").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
const idx = Number(btn.dataset.delIdx);
|
||
const next = items.filter((_, i) => i !== idx);
|
||
await saveActiveIdeaPatch({ [fieldName]: next });
|
||
});
|
||
});
|
||
}
|
||
|
||
async function saveActiveIdeaPatch(patch) {
|
||
if (!state.activeIdeaId) return;
|
||
const res = await apiFetch(`/api/ideas/${state.activeIdeaId}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify(patch)
|
||
});
|
||
state.activeIdea = res.idea;
|
||
await loadIdeas();
|
||
}
|
||
|
||
// --- NANO BANANA MOCKUP GALLERY & ITERATIVE EDITING ---
|
||
function renderDrawerMockupGallery(idea) {
|
||
const container = document.getElementById("drawer-mockup-gallery");
|
||
if (!container) return;
|
||
|
||
if (!idea.mockups || idea.mockups.length === 0) {
|
||
container.innerHTML = `<p class="muted-label">No mockups saved for this idea yet. Generate one with 🍌 Nano Banana 2.1 or save a layout from the T-Shirt Compositor!</p>`;
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = idea.mockups
|
||
.map((m) => {
|
||
const isCover = idea.cover_mockup_url === m.imageUrl;
|
||
return `
|
||
<div class="mockup-gallery-card ${isCover ? "is-cover" : ""}">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||
<strong style="font-size:0.82rem;">${escapeHtml(m.title)}</strong>
|
||
<span class="tag-chip">${escapeHtml(m.modelUsed || "mockup")}</span>
|
||
</div>
|
||
<img src="${escapeHtml(m.imageUrl)}" alt="${escapeHtml(m.title)}" data-zoom-url="${escapeHtml(m.imageUrl)}" />
|
||
${m.editInstruction ? `<small class="muted-label">Edited: "${escapeHtml(m.editInstruction)}"</small>` : ""}
|
||
<div class="mockup-gallery-actions">
|
||
<button type="button" class="btn btn-primary btn-xs btn-mk-refine" data-mk-id="${escapeHtml(m.id)}">
|
||
🍌 Refine with Nano Banana
|
||
</button>
|
||
<button type="button" class="btn btn-ghost btn-xs btn-mk-load-canvas" data-mk-url="${escapeHtml(m.imageUrl)}">
|
||
👕 Place on Tee Canvas
|
||
</button>
|
||
${
|
||
!isCover
|
||
? `<button type="button" class="btn btn-ghost btn-xs btn-mk-set-cover" data-mk-id="${escapeHtml(m.id)}">⭐ Set Cover</button>`
|
||
: `<span class="tag-chip" style="color:var(--accent-primary);">★ Active Cover</span>`
|
||
}
|
||
<a href="${escapeHtml(m.imageUrl)}" download class="btn btn-ghost btn-xs">⬇️</a>
|
||
<button type="button" class="btn btn-danger-ghost btn-xs btn-mk-delete" data-mk-id="${escapeHtml(m.id)}">🗑️</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
})
|
||
.join("");
|
||
|
||
container.querySelectorAll("img[data-zoom-url]").forEach((img) => {
|
||
img.addEventListener("click", () => {
|
||
openImageLightbox(img.dataset.zoomUrl, img.alt);
|
||
});
|
||
});
|
||
|
||
container.querySelectorAll(".btn-mk-refine").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
const mk = idea.mockups.find((x) => x.id === btn.dataset.mkId);
|
||
if (!mk) return;
|
||
state.nbEditParentMockup = mk;
|
||
document.getElementById("nb-edit-mode-box").classList.remove("hidden");
|
||
document.getElementById("nb-edit-target-label").textContent = mk.title;
|
||
document.getElementById("nb-edit-instruction-input").focus();
|
||
showToast(`Iterative Edit Mode enabled for "${mk.title}"`);
|
||
});
|
||
});
|
||
|
||
container.querySelectorAll(".btn-mk-load-canvas").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
const img = new Image();
|
||
img.crossOrigin = "anonymous";
|
||
img.onload = () => {
|
||
state.uploadedOverlayImage = img;
|
||
renderCompositorCanvas();
|
||
showToast("Loaded artwork onto the Interactive T-Shirt Canvas!");
|
||
};
|
||
img.src = btn.dataset.mkUrl;
|
||
});
|
||
});
|
||
|
||
container.querySelectorAll(".btn-mk-set-cover").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
await apiFetch(`/api/ideas/${idea.id}/mockups/${btn.dataset.mkId}/cover`, { method: "PATCH" });
|
||
showToast("Updated card cover thumbnail!");
|
||
await loadIdeas();
|
||
});
|
||
});
|
||
|
||
container.querySelectorAll(".btn-mk-delete").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
await apiFetch(`/api/ideas/${idea.id}/mockups/${btn.dataset.mkId}`, { method: "DELETE" });
|
||
showToast("Deleted mockup variation");
|
||
await loadIdeas();
|
||
});
|
||
});
|
||
}
|
||
|
||
// --- INTERACTIVE HTML5 CANVAS T-SHIRT & PRODUCT COMPOSITOR ---
|
||
function renderCompositorCanvas() {
|
||
const canvas = document.getElementById("mockup-compositor-canvas");
|
||
if (!canvas) return;
|
||
const ctx = canvas.getContext("2d");
|
||
const W = canvas.width;
|
||
const H = canvas.height;
|
||
|
||
const surface = document.getElementById("comp-surface-select")?.value || "tshirt";
|
||
const placement = document.getElementById("comp-placement-select")?.value || "center-chest";
|
||
const emblem = document.getElementById("comp-emblem-select")?.value || "mountains";
|
||
const topText = (document.getElementById("comp-top-text")?.value || "HIGH ALTITUDE CLUB").toUpperCase();
|
||
const bottomText = (document.getElementById("comp-bottom-text")?.value || "EST. 1984 • COLORADO").toUpperCase();
|
||
const inkColor = document.getElementById("comp-ink-color")?.value || "#BC4921";
|
||
const garmentHex = state.nbGarmentColor || "#F5E8D3";
|
||
|
||
// Studio background
|
||
const bgGrad = ctx.createRadialGradient(W / 2, H / 2, 60, W / 2, H / 2, W * 0.65);
|
||
bgGrad.addColorStop(0, "#232938");
|
||
bgGrad.addColorStop(1, "#11141c");
|
||
ctx.fillStyle = bgGrad;
|
||
ctx.fillRect(0, 0, W, H);
|
||
|
||
if (surface === "tshirt") {
|
||
drawTShirtSilhouette(ctx, W, H, garmentHex);
|
||
} else if (surface === "sticker") {
|
||
drawStickerSurface(ctx, W, H, garmentHex);
|
||
} else {
|
||
drawPosterSurface(ctx, W, H, garmentHex);
|
||
}
|
||
|
||
// Determine artwork bounding zone based on placement
|
||
let artX = W / 2;
|
||
let artY = H * 0.44;
|
||
let artScale = 1.0;
|
||
|
||
if (surface === "tshirt") {
|
||
if (placement === "left-chest") {
|
||
artX = W * 0.61; // Viewer's right = wearer's left chest pocket zone
|
||
artY = H * 0.36;
|
||
artScale = 0.46;
|
||
} else if (placement === "oversized") {
|
||
artX = W / 2;
|
||
artY = H * 0.46;
|
||
artScale = 1.22;
|
||
}
|
||
}
|
||
|
||
ctx.save();
|
||
ctx.translate(artX, artY);
|
||
ctx.scale(artScale, artScale);
|
||
|
||
// Draw optional uploaded or selected image
|
||
if (state.uploadedOverlayImage) {
|
||
const img = state.uploadedOverlayImage;
|
||
const maxDim = 210;
|
||
const ratio = Math.min(maxDim / img.width, maxDim / img.height);
|
||
const dw = img.width * ratio;
|
||
const dh = img.height * ratio;
|
||
ctx.drawImage(img, -dw / 2, -dh / 2 - 10, dw, dh);
|
||
} else if (emblem !== "none") {
|
||
drawVectorEmblem(ctx, emblem, inkColor);
|
||
}
|
||
|
||
// Draw Screenprint Typography
|
||
ctx.fillStyle = inkColor;
|
||
ctx.textAlign = "center";
|
||
|
||
if (topText) {
|
||
ctx.font = "900 26px Georgia, serif";
|
||
ctx.fillText(topText, 0, -96);
|
||
}
|
||
if (bottomText) {
|
||
ctx.font = "700 16px 'Courier New', monospace";
|
||
ctx.fillText(bottomText, 0, 108);
|
||
}
|
||
|
||
// Decorative vintage rule lines
|
||
ctx.strokeStyle = inkColor;
|
||
ctx.lineWidth = 2.5;
|
||
ctx.beginPath();
|
||
ctx.moveTo(-110, 82);
|
||
ctx.lineTo(110, 82);
|
||
ctx.stroke();
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
function drawTShirtSilhouette(ctx, W, H, garmentHex) {
|
||
ctx.save();
|
||
ctx.shadowColor = "rgba(0, 0, 0, 0.55)";
|
||
ctx.shadowBlur = 32;
|
||
ctx.shadowOffsetY = 14;
|
||
|
||
// Classic Crewneck Tee Vector Path
|
||
ctx.beginPath();
|
||
ctx.moveTo(225, 95); // Left shoulder neck
|
||
ctx.quadraticCurveTo(340, 132, 455, 95); // Collar front curve
|
||
ctx.lineTo(545, 130); // Right shoulder
|
||
ctx.lineTo(625, 255); // Right outer sleeve
|
||
ctx.lineTo(545, 305); // Right sleeve hem
|
||
ctx.lineTo(500, 235); // Right armpit
|
||
ctx.lineTo(500, 595); // Right torso hem
|
||
ctx.lineTo(180, 595); // Bottom hem
|
||
ctx.lineTo(180, 235); // Left armpit
|
||
ctx.lineTo(135, 305); // Left sleeve hem
|
||
ctx.lineTo(55, 255); // Left outer sleeve
|
||
ctx.lineTo(135, 130); // Left shoulder
|
||
ctx.closePath();
|
||
|
||
ctx.fillStyle = garmentHex;
|
||
ctx.fill();
|
||
|
||
// Collar rib & subtle fabric shading
|
||
ctx.shadowColor = "transparent";
|
||
ctx.strokeStyle = "rgba(0,0,0,0.18)";
|
||
ctx.lineWidth = 3;
|
||
ctx.stroke();
|
||
|
||
// Back neck interior shadow
|
||
ctx.beginPath();
|
||
ctx.moveTo(228, 96);
|
||
ctx.quadraticCurveTo(340, 114, 452, 96);
|
||
ctx.quadraticCurveTo(340, 136, 228, 96);
|
||
ctx.fillStyle = "rgba(0,0,0,0.14)";
|
||
ctx.fill();
|
||
|
||
// Ribbed collar seam
|
||
ctx.beginPath();
|
||
ctx.moveTo(215, 102);
|
||
ctx.quadraticCurveTo(340, 148, 465, 102);
|
||
ctx.strokeStyle = "rgba(0,0,0,0.15)";
|
||
ctx.lineWidth = 4;
|
||
ctx.stroke();
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
function drawStickerSurface(ctx, W, H, fillHex) {
|
||
ctx.save();
|
||
ctx.shadowColor = "rgba(0,0,0,0.6)";
|
||
ctx.shadowBlur = 28;
|
||
// White die-cut vinyl border
|
||
ctx.beginPath();
|
||
ctx.arc(W / 2, H * 0.45, 215, 0, Math.PI * 2);
|
||
ctx.fillStyle = "#ffffff";
|
||
ctx.fill();
|
||
|
||
ctx.shadowColor = "transparent";
|
||
ctx.beginPath();
|
||
ctx.arc(W / 2, H * 0.45, 198, 0, Math.PI * 2);
|
||
ctx.fillStyle = fillHex;
|
||
ctx.fill();
|
||
ctx.lineWidth = 4;
|
||
ctx.strokeStyle = "#222";
|
||
ctx.stroke();
|
||
ctx.restore();
|
||
}
|
||
|
||
function drawPosterSurface(ctx, W, H, fillHex) {
|
||
ctx.save();
|
||
ctx.shadowColor = "rgba(0,0,0,0.6)";
|
||
ctx.shadowBlur = 30;
|
||
ctx.fillStyle = "#1c1917";
|
||
ctx.fillRect(145, 65, 390, 540);
|
||
ctx.shadowColor = "transparent";
|
||
ctx.fillStyle = fillHex;
|
||
ctx.fillRect(165, 85, 350, 500);
|
||
ctx.restore();
|
||
}
|
||
|
||
function drawVectorEmblem(ctx, emblem, inkColor) {
|
||
ctx.save();
|
||
ctx.strokeStyle = inkColor;
|
||
ctx.fillStyle = inkColor;
|
||
ctx.lineWidth = 4;
|
||
|
||
// Outer badge ring
|
||
ctx.beginPath();
|
||
ctx.arc(0, -8, 72, 0, Math.PI * 2);
|
||
ctx.stroke();
|
||
|
||
if (emblem === "mountains") {
|
||
// Sun
|
||
ctx.beginPath();
|
||
ctx.arc(22, -36, 14, 0, Math.PI * 2);
|
||
ctx.fillStyle = "#EFA51C";
|
||
ctx.fill();
|
||
// Peaks
|
||
ctx.fillStyle = inkColor;
|
||
ctx.beginPath();
|
||
ctx.moveTo(-56, 36);
|
||
ctx.lineTo(-12, -32);
|
||
ctx.lineTo(18, 12);
|
||
ctx.lineTo(36, -14);
|
||
ctx.lineTo(58, 36);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
} else if (emblem === "espresso") {
|
||
// Cup body
|
||
ctx.beginPath();
|
||
ctx.roundRect(-34, -18, 62, 44, [4, 4, 24, 24]);
|
||
ctx.fill();
|
||
// Handle
|
||
ctx.beginPath();
|
||
ctx.arc(30, 2, 12, -Math.PI / 2, Math.PI / 2);
|
||
ctx.stroke();
|
||
// Steam waves
|
||
ctx.beginPath();
|
||
ctx.moveTo(-14, -28);
|
||
ctx.quadraticCurveTo(-20, -42, -10, -52);
|
||
ctx.moveTo(6, -28);
|
||
ctx.quadraticCurveTo(0, -42, 10, -52);
|
||
ctx.stroke();
|
||
} else if (emblem === "lightbulb") {
|
||
ctx.beginPath();
|
||
ctx.arc(0, -22, 28, 0, Math.PI * 2);
|
||
ctx.fillStyle = "#EFA51C";
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.fillStyle = inkColor;
|
||
ctx.fillRect(-14, 6, 28, 16);
|
||
} else if (emblem === "compass") {
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, -54);
|
||
ctx.lineTo(14, -14);
|
||
ctx.lineTo(54, 0);
|
||
ctx.lineTo(14, 14);
|
||
ctx.lineTo(0, 54);
|
||
ctx.lineTo(-14, 14);
|
||
ctx.lineTo(-54, 0);
|
||
ctx.lineTo(-14, -14);
|
||
ctx.closePath();
|
||
ctx.stroke();
|
||
} else if (emblem === "lightning") {
|
||
ctx.beginPath();
|
||
ctx.moveTo(8, -52);
|
||
ctx.lineTo(-24, -4);
|
||
ctx.lineTo(4, -4);
|
||
ctx.lineTo(-12, 44);
|
||
ctx.lineTo(28, -12);
|
||
ctx.lineTo(0, -12);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
}
|
||
ctx.restore();
|
||
}
|
||
|
||
// --- WHACK THIS IDEA DRAWER TAB ---
|
||
async function drawCardForActiveIdea() {
|
||
if (!state.activeIdea) return;
|
||
const suit = document.getElementById("drawer-whack-suit-select")?.value || "";
|
||
const params = new URLSearchParams();
|
||
if (suit) params.set("suit", suit);
|
||
else params.set("status", state.activeIdea.status);
|
||
|
||
const data = await apiFetch(`/api/whack-cards/draw?${params.toString()}`);
|
||
state.drawerWhackCard = data.card;
|
||
renderDrawerActiveWhackStage();
|
||
}
|
||
|
||
function renderDrawerActiveWhackStage() {
|
||
const container = document.getElementById("drawer-active-whack-stage");
|
||
const card = state.drawerWhackCard;
|
||
const idea = state.activeIdea;
|
||
if (!container || !card || !idea) return;
|
||
|
||
container.innerHTML = `
|
||
<div class="collider-stage" style="margin-top:0.5rem;">
|
||
<div class="whack-card-showcase">
|
||
<span class="suit-pill suit-${card.suit}">#${card.number} • ${card.suitLabel}</span>
|
||
<img src="${escapeHtml(card.imageUrl)}" alt="${escapeHtml(card.title)}" class="whack-card-scan" style="margin-top:0.5rem;" id="drawer-whack-card-img" />
|
||
</div>
|
||
<div class="collider-workbench">
|
||
<h4>Card #${card.number}: ${escapeHtml(card.title)}</h4>
|
||
<div class="prompt-callout">
|
||
<strong>${escapeHtml(card.promptQuestion)}</strong>
|
||
</div>
|
||
<div class="field-group">
|
||
<label for="drawer-whack-reflection">Your Breakthrough / Answer for "${escapeHtml(idea.title)}"</label>
|
||
<textarea id="drawer-whack-reflection" rows="4" class="textarea-input" placeholder="How can you apply this card to advance your idea?"></textarea>
|
||
</div>
|
||
<label class="filter-checkbox">
|
||
<input type="checkbox" id="drawer-whack-add-chk" checked />
|
||
<span>Also add to Action Checklist</span>
|
||
</label>
|
||
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
|
||
<button type="button" id="btn-drawer-save-whack" class="btn btn-primary btn-sm">💾 Save Breakthrough</button>
|
||
<button type="button" id="btn-drawer-whack-to-nb" class="btn btn-secondary btn-sm">🍌 Send Twist to Nano Banana Mockup Studio</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById("drawer-whack-card-img")?.addEventListener("click", () => openCardLightbox(card));
|
||
|
||
document.getElementById("btn-drawer-save-whack")?.addEventListener("click", async () => {
|
||
const reflection = document.getElementById("drawer-whack-reflection")?.value.trim();
|
||
if (!reflection) {
|
||
showToast("Enter a reflection first!");
|
||
return;
|
||
}
|
||
const addChecklistItem = document.getElementById("drawer-whack-add-chk")?.checked;
|
||
const res = await apiFetch(`/api/ideas/${idea.id}/whack`, {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
cardNumber: card.number,
|
||
reflection,
|
||
addChecklistItem
|
||
})
|
||
});
|
||
state.activeIdea = res.idea;
|
||
showToast(`Saved Card #${card.number} breakthrough!`);
|
||
await Promise.all([loadIdeas(), loadWhackCatalog()]);
|
||
});
|
||
|
||
document.getElementById("btn-drawer-whack-to-nb")?.addEventListener("click", () => {
|
||
const reflection = document.getElementById("drawer-whack-reflection")?.value.trim();
|
||
switchDrawerTab("mockup");
|
||
const twistSel = document.getElementById("nb-whack-twist-select");
|
||
if (twistSel) twistSel.value = String(card.number);
|
||
const promptEl = document.getElementById("nb-prompt-input");
|
||
if (promptEl) {
|
||
promptEl.value = reflection
|
||
? `${idea.title} — ${reflection}`
|
||
: `${idea.title} (${idea.elevator_pitch || ""}) with twist from "${card.title}"`;
|
||
}
|
||
});
|
||
}
|
||
|
||
function renderDrawerWhackHistory(idea) {
|
||
const listEl = document.getElementById("drawer-whack-history-list");
|
||
if (!listEl) return;
|
||
if (!idea.whack_history || idea.whack_history.length === 0) {
|
||
listEl.innerHTML = `<p class="muted-label">No Whack Pack cards applied to this idea yet.</p>`;
|
||
return;
|
||
}
|
||
listEl.innerHTML = idea.whack_history
|
||
.map(
|
||
(w) => `
|
||
<div class="whack-log-item">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem;">
|
||
<span class="suit-pill suit-${w.suit || "explorer"}">Card #${w.cardNumber}: ${escapeHtml(w.cardTitle)}</span>
|
||
<span class="muted-label">${new Date(w.createdAt).toLocaleDateString()}</span>
|
||
</div>
|
||
<p style="font-size:0.88rem;">${escapeHtml(w.reflection)}</p>
|
||
</div>
|
||
`
|
||
)
|
||
.join("");
|
||
}
|
||
|
||
// --- QUICK WHACK BANNER & LIGHTBOX ---
|
||
function showQuickWhackBanner(card) {
|
||
state.quickBannerCard = card;
|
||
const banner = document.getElementById("quick-whack-banner");
|
||
banner.classList.remove("hidden");
|
||
document.getElementById("qwb-card-img").src = card.imageUrl;
|
||
const badge = document.getElementById("qwb-suit-badge");
|
||
badge.textContent = `${card.suitLabel} #${card.number}`;
|
||
badge.className = `suit-pill suit-${card.suit}`;
|
||
document.getElementById("qwb-card-title").textContent = card.title;
|
||
document.getElementById("qwb-card-question").textContent = card.promptQuestion;
|
||
}
|
||
|
||
function openCardLightbox(card) {
|
||
const modal = document.getElementById("lightbox-modal");
|
||
modal.classList.remove("hidden");
|
||
document.getElementById("lightbox-title").textContent = `Card #${card.number}: ${card.title} (${card.suitLabel})`;
|
||
document.getElementById("lightbox-img").src = card.imageUrl;
|
||
document.getElementById("lightbox-meta").innerHTML = `
|
||
<div class="prompt-callout">
|
||
<strong>${escapeHtml(card.promptQuestion)}</strong>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function openImageLightbox(url, title = "Mockup Preview") {
|
||
const modal = document.getElementById("lightbox-modal");
|
||
modal.classList.remove("hidden");
|
||
document.getElementById("lightbox-title").textContent = title;
|
||
document.getElementById("lightbox-img").src = url;
|
||
document.getElementById("lightbox-meta").innerHTML = "";
|
||
}
|
||
|
||
function switchWhackSubmode(mode) {
|
||
state.whackSubmode = mode;
|
||
document.querySelectorAll("[data-whack-mode]").forEach((btn) => {
|
||
btn.classList.toggle("active", btn.dataset.whackMode === mode);
|
||
});
|
||
["collider", "spread", "browser"].forEach((m) => {
|
||
document.getElementById(`whack-submode-${m}`)?.classList.toggle("hidden", m !== mode);
|
||
});
|
||
}
|
||
|
||
// --- GLOBAL EVENT BINDINGS ---
|
||
function bindGlobalEvents() {
|
||
// Keyboard shortcuts: Ctrl+K for Quick Capture, Esc to close modals/drawer
|
||
window.addEventListener("keydown", (e) => {
|
||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
|
||
e.preventDefault();
|
||
document.getElementById("quick-capture-input")?.focus();
|
||
} else if (e.key === "Escape") {
|
||
document.getElementById("lightbox-modal")?.classList.add("hidden");
|
||
document.getElementById("settings-modal")?.classList.add("hidden");
|
||
closeIdeaDrawer();
|
||
}
|
||
});
|
||
|
||
// Quick Capture Form
|
||
document.getElementById("quick-capture-form")?.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
const input = document.getElementById("quick-capture-input");
|
||
const category = document.getElementById("quick-capture-category").value;
|
||
const raw = input.value.trim();
|
||
if (!raw) return;
|
||
|
||
const payload = { title: raw, category };
|
||
if (state.quickBannerCard) {
|
||
payload.inspired_by_card = state.quickBannerCard.number;
|
||
payload.elevator_pitch = `Sparked by Card #${state.quickBannerCard.number} (${state.quickBannerCard.title})`;
|
||
}
|
||
|
||
const res = await apiFetch("/api/ideas", {
|
||
method: "POST",
|
||
body: JSON.stringify(payload)
|
||
});
|
||
input.value = "";
|
||
showToast(`✨ Captured "${res.idea.title}" in Spark!`);
|
||
await Promise.all([loadIdeas(), loadWhackCatalog()]);
|
||
});
|
||
|
||
// Quick Whack Prompt button
|
||
document.getElementById("btn-quick-whack-prompt")?.addEventListener("click", async () => {
|
||
const data = await apiFetch("/api/whack-cards/draw");
|
||
if (data.card) showQuickWhackBanner(data.card);
|
||
});
|
||
|
||
document.getElementById("btn-qwb-redraw")?.addEventListener("click", async () => {
|
||
const data = await apiFetch("/api/whack-cards/draw");
|
||
if (data.card) showQuickWhackBanner(data.card);
|
||
});
|
||
|
||
document.getElementById("btn-qwb-close")?.addEventListener("click", () => {
|
||
state.quickBannerCard = null;
|
||
document.getElementById("quick-whack-banner").classList.add("hidden");
|
||
});
|
||
|
||
document.getElementById("btn-qwb-use")?.addEventListener("click", () => {
|
||
const input = document.getElementById("quick-capture-input");
|
||
if (input && state.quickBannerCard) {
|
||
input.placeholder = `Idea inspired by #${state.quickBannerCard.number} (${state.quickBannerCard.title})...`;
|
||
input.focus();
|
||
}
|
||
});
|
||
|
||
document.getElementById("qwb-card-img")?.addEventListener("click", () => {
|
||
if (state.quickBannerCard) openCardLightbox(state.quickBannerCard);
|
||
});
|
||
|
||
// Theme Toggle
|
||
document.getElementById("btn-theme-toggle")?.addEventListener("click", () => {
|
||
const html = document.documentElement;
|
||
const next = html.getAttribute("data-theme") === "dark" ? "paper" : "dark";
|
||
html.setAttribute("data-theme", next);
|
||
document.getElementById("btn-theme-toggle").textContent = next === "dark" ? "☀️ Theme" : "🌙 Theme";
|
||
});
|
||
|
||
// Export Dropdown
|
||
document.getElementById("btn-export-menu")?.addEventListener("click", () => {
|
||
document.getElementById("export-dropdown-menu")?.classList.toggle("hidden");
|
||
});
|
||
|
||
// Main View Tabs
|
||
document.querySelectorAll(".view-tab").forEach((tab) => {
|
||
tab.addEventListener("click", async () => {
|
||
const view = tab.dataset.view;
|
||
state.currentView = view;
|
||
document.querySelectorAll(".view-tab").forEach((t) => t.classList.toggle("active", t === tab));
|
||
["board", "grid", "whack", "review"].forEach((v) => {
|
||
document.getElementById(`view-${v}`)?.classList.toggle("hidden", v !== view);
|
||
});
|
||
if (view === "whack" && !state.colliderCard) {
|
||
await dealIdeaCollider();
|
||
}
|
||
if (view === "review") {
|
||
await loadReviewSession();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Global Filters
|
||
document.getElementById("btn-mobile-filter-toggle")?.addEventListener("click", () => {
|
||
const bar = document.getElementById("global-filter-bar");
|
||
bar?.classList.toggle("mobile-filters-open");
|
||
});
|
||
|
||
document.querySelectorAll("#mobile-stage-switcher .stage-tab").forEach((tab) => {
|
||
tab.addEventListener("click", () => {
|
||
const stage = tab.dataset.mobileStage;
|
||
document.querySelectorAll("#mobile-stage-switcher .stage-tab").forEach((t) =>
|
||
t.classList.toggle("active", t === tab)
|
||
);
|
||
document.getElementById("kanban-board")?.setAttribute("data-mobile-active-stage", stage);
|
||
});
|
||
});
|
||
|
||
document.getElementById("filter-search")?.addEventListener("input", (e) => {
|
||
state.filters.search = e.target.value;
|
||
loadIdeas();
|
||
});
|
||
document.getElementById("filter-category")?.addEventListener("change", (e) => {
|
||
state.filters.category = e.target.value;
|
||
loadIdeas();
|
||
});
|
||
document.getElementById("filter-tag")?.addEventListener("change", (e) => {
|
||
state.filters.tag = e.target.value;
|
||
loadIdeas();
|
||
});
|
||
document.getElementById("filter-has-mockup")?.addEventListener("change", (e) => {
|
||
state.filters.hasMockup = e.target.checked;
|
||
loadIdeas();
|
||
});
|
||
document.getElementById("filter-sort")?.addEventListener("change", (e) => {
|
||
state.filters.sort = e.target.value;
|
||
loadIdeas();
|
||
});
|
||
|
||
// Kanban Drag & Drop
|
||
document.querySelectorAll(".kanban-dropzone").forEach((zone) => {
|
||
zone.addEventListener("dragover", (e) => {
|
||
e.preventDefault();
|
||
zone.classList.add("drag-over");
|
||
});
|
||
zone.addEventListener("dragleave", () => zone.classList.remove("drag-over"));
|
||
zone.addEventListener("drop", async (e) => {
|
||
e.preventDefault();
|
||
zone.classList.remove("drag-over");
|
||
const ideaId = Number(e.dataTransfer.getData("text/plain"));
|
||
const targetStatus = zone.dataset.status;
|
||
if (!ideaId || !targetStatus) return;
|
||
await apiFetch(`/api/ideas/${ideaId}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ status: targetStatus })
|
||
});
|
||
showToast(`Moved idea to ${targetStatus.toUpperCase()}`);
|
||
await loadIdeas();
|
||
});
|
||
});
|
||
|
||
// Explorer Grid Status Pills
|
||
document.querySelectorAll("#grid-status-pills .pill-btn").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
state.gridStatusFilter = btn.dataset.status;
|
||
document.querySelectorAll("#grid-status-pills .pill-btn").forEach((b) => b.classList.toggle("active", b === btn));
|
||
renderExplorerGrid();
|
||
});
|
||
});
|
||
|
||
document.getElementById("btn-new-idea-modal")?.addEventListener("click", async () => {
|
||
const res = await apiFetch("/api/ideas", {
|
||
method: "POST",
|
||
body: JSON.stringify({ title: "New Concept Spark", category: "creative" })
|
||
});
|
||
await loadIdeas();
|
||
openIdeaDrawer(res.idea.id, "details");
|
||
});
|
||
|
||
// Whack Studio Sub-mode Tabs
|
||
document.querySelectorAll("[data-whack-mode]").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
const mode = btn.dataset.whackMode;
|
||
switchWhackSubmode(mode);
|
||
if (mode === "spread" && state.spreadCards.length === 0) {
|
||
await dealFourRoleSpread();
|
||
}
|
||
});
|
||
});
|
||
|
||
document.getElementById("btn-deal-collider")?.addEventListener("click", () => dealIdeaCollider({ forceRandomIdea: false }));
|
||
document.getElementById("btn-collider-random-both")?.addEventListener("click", () => dealIdeaCollider({ forceRandomIdea: true }));
|
||
document.getElementById("btn-deal-spread")?.addEventListener("click", () => dealFourRoleSpread());
|
||
|
||
document.querySelectorAll("#deck-suit-filters .pill-btn").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
state.deckSuitFilter = btn.dataset.suit;
|
||
document.querySelectorAll("#deck-suit-filters .pill-btn").forEach((b) => b.classList.toggle("active", b === btn));
|
||
renderDeckBrowser();
|
||
});
|
||
});
|
||
|
||
document.getElementById("deck-search-input")?.addEventListener("input", (e) => {
|
||
state.deckSearch = e.target.value;
|
||
renderDeckBrowser();
|
||
});
|
||
|
||
// Review Mode Tabs
|
||
document.querySelectorAll("[data-review-mode]").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
const mode = btn.dataset.reviewMode;
|
||
state.reviewMode = mode;
|
||
document.querySelectorAll("[data-review-mode]").forEach((b) => b.classList.toggle("active", b === btn));
|
||
document.getElementById("review-submode-arena")?.classList.toggle("hidden", mode !== "arena");
|
||
document.getElementById("review-submode-triage")?.classList.toggle("hidden", mode !== "triage");
|
||
});
|
||
});
|
||
|
||
document.getElementById("btn-skip-arena")?.addEventListener("click", () => loadReviewSession());
|
||
|
||
// Drawer Events
|
||
document.getElementById("drawer-backdrop")?.addEventListener("click", closeIdeaDrawer);
|
||
document.getElementById("drawer-close-btn")?.addEventListener("click", closeIdeaDrawer);
|
||
|
||
document.querySelectorAll(".drawer-tab").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
const tab = btn.dataset.drawerTab;
|
||
switchDrawerTab(tab);
|
||
if (tab === "whack" && !state.drawerWhackCard) {
|
||
await drawCardForActiveIdea();
|
||
}
|
||
});
|
||
});
|
||
|
||
document.getElementById("drawer-title-input")?.addEventListener("change", (e) => {
|
||
saveActiveIdeaPatch({ title: e.target.value });
|
||
});
|
||
document.getElementById("drawer-status-select")?.addEventListener("change", (e) => {
|
||
saveActiveIdeaPatch({ status: e.target.value });
|
||
});
|
||
document.getElementById("drawer-category-select")?.addEventListener("change", (e) => {
|
||
saveActiveIdeaPatch({ category: e.target.value });
|
||
});
|
||
document.getElementById("drawer-pin-btn")?.addEventListener("click", () => {
|
||
if (!state.activeIdea) return;
|
||
saveActiveIdeaPatch({ pinned: !state.activeIdea.pinned });
|
||
});
|
||
document.getElementById("drawer-delete-btn")?.addEventListener("click", async () => {
|
||
if (!state.activeIdeaId) return;
|
||
await apiFetch(`/api/ideas/${state.activeIdeaId}`, { method: "DELETE" });
|
||
showToast("Idea deleted");
|
||
closeIdeaDrawer();
|
||
await loadIdeas();
|
||
});
|
||
|
||
document.getElementById("drawer-pitch-input")?.addEventListener("change", (e) => {
|
||
saveActiveIdeaPatch({ elevator_pitch: e.target.value });
|
||
});
|
||
document.getElementById("drawer-notes-input")?.addEventListener("change", (e) => {
|
||
saveActiveIdeaPatch({ notes_markdown: e.target.value });
|
||
});
|
||
|
||
document.getElementById("btn-toggle-md-preview")?.addEventListener("click", () => {
|
||
const textarea = document.getElementById("drawer-notes-input");
|
||
const preview = document.getElementById("drawer-notes-preview");
|
||
preview.innerHTML = renderSimpleMarkdown(textarea.value);
|
||
textarea.classList.toggle("hidden");
|
||
preview.classList.toggle("hidden");
|
||
});
|
||
|
||
["excitement", "impact", "ease"].forEach((metric) => {
|
||
const slider = document.getElementById(`slider-${metric}`);
|
||
slider?.addEventListener("input", (e) => {
|
||
document.getElementById(`val-${metric}`).textContent = e.target.value;
|
||
});
|
||
slider?.addEventListener("change", (e) => {
|
||
saveActiveIdeaPatch({ [`rating_${metric}`]: Number(e.target.value) });
|
||
});
|
||
});
|
||
|
||
document.getElementById("drawer-add-tag-form")?.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
if (!state.activeIdea) return;
|
||
const input = document.getElementById("drawer-new-tag-input");
|
||
const val = input.value.replace(/^#/, "").trim().toLowerCase();
|
||
if (!val) return;
|
||
input.value = "";
|
||
const next = Array.from(new Set([...state.activeIdea.tags, val]));
|
||
await saveActiveIdeaPatch({ tags: next });
|
||
});
|
||
|
||
document.getElementById("drawer-add-checklist-form")?.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
if (!state.activeIdea) return;
|
||
const input = document.getElementById("drawer-new-checklist-input");
|
||
const text = input.value.trim();
|
||
if (!text) return;
|
||
input.value = "";
|
||
const next = [...state.activeIdea.checklist, { id: `chk-${Date.now()}`, text, done: false }];
|
||
await saveActiveIdeaPatch({ checklist: next });
|
||
});
|
||
|
||
document.getElementById("drawer-add-pro-form")?.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
if (!state.activeIdea) return;
|
||
const input = document.getElementById("drawer-new-pro-input");
|
||
const text = input.value.trim();
|
||
if (!text) return;
|
||
input.value = "";
|
||
await saveActiveIdeaPatch({ pros: [...state.activeIdea.pros, text] });
|
||
});
|
||
|
||
document.getElementById("drawer-add-con-form")?.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
if (!state.activeIdea) return;
|
||
const input = document.getElementById("drawer-new-con-input");
|
||
const text = input.value.trim();
|
||
if (!text) return;
|
||
input.value = "";
|
||
await saveActiveIdeaPatch({ cons: [...state.activeIdea.cons, text] });
|
||
});
|
||
|
||
document.getElementById("drawer-add-link-form")?.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
if (!state.activeIdea) return;
|
||
const titleEl = document.getElementById("drawer-link-title");
|
||
const urlEl = document.getElementById("drawer-link-url");
|
||
if (!urlEl.value.trim()) return;
|
||
const next = [
|
||
...state.activeIdea.links,
|
||
{ id: `lnk-${Date.now()}`, title: titleEl.value.trim() || urlEl.value.trim(), url: urlEl.value.trim() }
|
||
];
|
||
titleEl.value = "";
|
||
urlEl.value = "";
|
||
await saveActiveIdeaPatch({ links: next });
|
||
});
|
||
|
||
// --- NANO BANANA MOCKUP STUDIO EVENTS ---
|
||
document.querySelectorAll("#nb-color-swatches .color-swatch").forEach((sw) => {
|
||
sw.addEventListener("click", () => {
|
||
document.querySelectorAll("#nb-color-swatches .color-swatch").forEach((s) => s.classList.remove("active"));
|
||
sw.classList.add("active");
|
||
state.nbGarmentColor = sw.dataset.color;
|
||
state.nbGarmentColorName = sw.dataset.name;
|
||
document.getElementById("nb-selected-color-label").textContent = `${sw.dataset.name} (${sw.dataset.color})`;
|
||
renderCompositorCanvas();
|
||
});
|
||
});
|
||
|
||
document.getElementById("btn-studio-auto-prompt")?.addEventListener("click", () => {
|
||
if (!state.activeIdea) return;
|
||
const idea = state.activeIdea;
|
||
const twistNum = document.getElementById("nb-whack-twist-select")?.value;
|
||
const twistCard = twistNum ? state.whackCards.find((c) => c.number === Number(twistNum)) : null;
|
||
|
||
let built = `${idea.title}`;
|
||
if (idea.elevator_pitch) built += ` — ${idea.elevator_pitch}`;
|
||
if (twistCard) {
|
||
built += `. Creative twist from Card #${twistCard.number} (${twistCard.title}): ${twistCard.promptQuestion}`;
|
||
}
|
||
document.getElementById("nb-prompt-input").value = built;
|
||
});
|
||
|
||
document.getElementById("btn-nb-clear-edit")?.addEventListener("click", () => {
|
||
state.nbEditParentMockup = null;
|
||
document.getElementById("nb-edit-mode-box").classList.add("hidden");
|
||
document.getElementById("nb-edit-instruction-input").value = "";
|
||
});
|
||
|
||
document.getElementById("btn-generate-nano-banana")?.addEventListener("click", async () => {
|
||
if (!state.activeIdeaId) return;
|
||
const btn = document.getElementById("btn-generate-nano-banana");
|
||
const statusLabel = document.getElementById("nb-generation-status");
|
||
const template = document.getElementById("nb-template-select").value;
|
||
const whackCardNumber = document.getElementById("nb-whack-twist-select").value;
|
||
const prompt = document.getElementById("nb-prompt-input").value.trim();
|
||
const editInstruction = document.getElementById("nb-edit-instruction-input").value.trim();
|
||
|
||
btn.disabled = true;
|
||
statusLabel.textContent = "🎨 Generating high-res AI mockup via OpenAI Codex (takes ~15–25s)...";
|
||
|
||
try {
|
||
const res = await apiFetch(`/api/ideas/${state.activeIdeaId}/mockups/nano-banana`, {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
template,
|
||
garmentColor: state.nbGarmentColor,
|
||
garmentColorName: state.nbGarmentColorName,
|
||
whackCardNumber: whackCardNumber ? Number(whackCardNumber) : null,
|
||
prompt,
|
||
editInstruction: state.nbEditParentMockup ? editInstruction : "",
|
||
parentMockupId: state.nbEditParentMockup ? state.nbEditParentMockup.id : null
|
||
})
|
||
});
|
||
state.activeIdea = res.idea;
|
||
state.nbEditParentMockup = null;
|
||
document.getElementById("nb-edit-mode-box").classList.add("hidden");
|
||
document.getElementById("nb-edit-instruction-input").value = "";
|
||
statusLabel.textContent = "✓ Saved new Nano Banana mockup to gallery!";
|
||
showToast("🍌 Nano Banana 2.1 generated & saved your mockup!");
|
||
await loadIdeas();
|
||
} catch (err) {
|
||
statusLabel.textContent = `⚠️ ${err.message}`;
|
||
if (err.code === "MISSING_API_KEY") {
|
||
document.getElementById("settings-modal")?.classList.remove("hidden");
|
||
} else {
|
||
showToast(err.message);
|
||
}
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
});
|
||
|
||
// Compositor controls
|
||
["comp-surface-select", "comp-placement-select", "comp-emblem-select", "comp-top-text", "comp-bottom-text", "comp-ink-color"].forEach((id) => {
|
||
const el = document.getElementById(id);
|
||
el?.addEventListener("input", renderCompositorCanvas);
|
||
el?.addEventListener("change", renderCompositorCanvas);
|
||
});
|
||
|
||
document.getElementById("comp-upload-art")?.addEventListener("change", (e) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = (ev) => {
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
state.uploadedOverlayImage = img;
|
||
renderCompositorCanvas();
|
||
};
|
||
img.src = ev.target.result;
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
|
||
document.getElementById("btn-clear-uploaded-art")?.addEventListener("click", () => {
|
||
state.uploadedOverlayImage = null;
|
||
const fileEl = document.getElementById("comp-upload-art");
|
||
if (fileEl) fileEl.value = "";
|
||
renderCompositorCanvas();
|
||
});
|
||
|
||
document.getElementById("btn-save-canvas-mockup")?.addEventListener("click", async () => {
|
||
if (!state.activeIdeaId) return;
|
||
const canvas = document.getElementById("mockup-compositor-canvas");
|
||
const imageDataUrl = canvas.toDataURL("image/png");
|
||
const surface = document.getElementById("comp-surface-select").value;
|
||
const placement = document.getElementById("comp-placement-select").value;
|
||
const topText = document.getElementById("comp-top-text").value;
|
||
const bottomText = document.getElementById("comp-bottom-text").value;
|
||
|
||
const res = await apiFetch(`/api/ideas/${state.activeIdeaId}/mockups/canvas`, {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
title: `${state.nbGarmentColorName} ${surface === "tshirt" ? "Tee" : surface} (${placement})`,
|
||
template: surface === "tshirt" ? (placement === "left-chest" ? "tshirt-left-chest" : "tshirt-front") : surface,
|
||
garmentColor: state.nbGarmentColor,
|
||
garmentColorName: state.nbGarmentColorName,
|
||
placement,
|
||
topText,
|
||
bottomText,
|
||
imageDataUrl
|
||
})
|
||
});
|
||
state.activeIdea = res.idea;
|
||
showToast("📸 Saved T-Shirt / Product Mockup to Idea Gallery!");
|
||
await loadIdeas();
|
||
});
|
||
|
||
document.getElementById("btn-download-canvas-png")?.addEventListener("click", () => {
|
||
const canvas = document.getElementById("mockup-compositor-canvas");
|
||
const link = document.createElement("a");
|
||
link.download = `sparkvault-mockup-${Date.now()}.png`;
|
||
link.href = canvas.toDataURL("image/png");
|
||
link.click();
|
||
});
|
||
|
||
// Drawer Whack Card button
|
||
document.getElementById("btn-drawer-draw-whack")?.addEventListener("click", drawCardForActiveIdea);
|
||
|
||
// Settings Modal
|
||
document.getElementById("btn-open-settings")?.addEventListener("click", () => {
|
||
document.getElementById("settings-modal")?.classList.remove("hidden");
|
||
});
|
||
document.getElementById("btn-close-settings")?.addEventListener("click", () => {
|
||
document.getElementById("settings-modal")?.classList.add("hidden");
|
||
});
|
||
document.getElementById("btn-cancel-settings")?.addEventListener("click", () => {
|
||
document.getElementById("settings-modal")?.classList.add("hidden");
|
||
});
|
||
|
||
document.getElementById("settings-form")?.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
const keyInput = document.getElementById("settings-api-key");
|
||
const modelSel = document.getElementById("settings-model-select");
|
||
const payload = { nanoBananaModel: modelSel.value };
|
||
if (keyInput.value.trim()) {
|
||
payload.geminiApiKey = keyInput.value.trim();
|
||
}
|
||
await apiFetch("/api/settings", {
|
||
method: "PUT",
|
||
body: JSON.stringify(payload)
|
||
});
|
||
keyInput.value = "";
|
||
document.getElementById("settings-modal")?.classList.add("hidden");
|
||
showToast("🍌 Saved Nano Banana 2.1 settings!");
|
||
await loadSettings();
|
||
});
|
||
|
||
// Lightbox Close
|
||
document.getElementById("btn-close-lightbox")?.addEventListener("click", () => {
|
||
document.getElementById("lightbox-modal")?.classList.add("hidden");
|
||
});
|
||
}
|
||
|
||
initApp();
|