/* global window, React */ // Swipe stack + cards + favorite picker const { useState, useEffect, useRef, useCallback, useMemo } = React; const { OrnamentBall, CollectionBackdrop, Ticker, FloatingSticker } = window.KechHero; // ---------- Ghost stack โ€” visualises remaining cards behind ---------- function GhostStack({ remaining, collection, cardStyle, visibleLive }) { // remaining = total cards left including the live ones on top. // We render up to 6 ghost layers behind the live cards, scaled by how many remain. const behind = Math.max(0, remaining - visibleLive); // Skip ghost layers for small collections โ€” the visible stack already conveys depth, // and empty dummy cards look like phantom entries. if (behind < 3) return null; const layers = Math.min(6, behind); if (layers <= 0) return null; // Ghost color: white-ish so it always pops against any collection bg. const ghostBg = collection.bg === '#191414' ? '#3a3232' : 'var(--kech-white)'; const radius = cardStyle === 'polaroid' ? 8 : cardStyle === 'trading' ? 14 : 24; return ( <> {Array.from({ length: layers }).map((_, k) => { // k=0 is the layer closest to the live cards; k=layers-1 is deepest. const depth = k + visibleLive; // overall stack depth const offsetY = depth * 14; const offsetX = (depth % 2 ? -1 : 1) * (6 + depth * 3); const scale = 1 - depth * 0.035; const rot = depth % 2 ? -4 : 4; const op = Math.max(0.55, 1 - k * 0.06); const isDeepest = k === layers - 1; return ( ); })} ); } // ---------- Fire burst โ€” short celebratory blast over the card ----- function FireBurst({ trigger }) { const [bursts, setBursts] = useState([]); useEffect(() => { if (!trigger) return; const id = trigger; // ~28 small flames in two concentric rings + sparks, tightly clustered on the card const items = []; const ring = (count, baseDist, sizeRange, jitter) => { for (let i = 0; i < count; i++) { const angle = i / count * Math.PI * 2 + (Math.random() * jitter - jitter / 2); const dist = baseDist + (Math.random() * 30 - 15); items.push({ i: items.length, dx: Math.cos(angle) * dist, dy: Math.sin(angle) * dist - 8, delay: Math.random() * 120, rot: (Math.random() * 80 - 40).toFixed(1), size: sizeRange[0] + Math.round(Math.random() * (sizeRange[1] - sizeRange[0])), kind: '๐Ÿ”ฅ' }); } }; ring(14, 70, [16, 24], 0.35); // inner ring of mini flames ring(10, 130, [14, 20], 0.5); // outer ring even smaller // sparkles on top for (let s = 0; s < 6; s++) { const angle = Math.random() * Math.PI * 2; const dist = 50 + Math.random() * 90; items.push({ i: items.length, dx: Math.cos(angle) * dist, dy: Math.sin(angle) * dist - 10, delay: 80 + Math.random() * 200, rot: (Math.random() * 90 - 45).toFixed(1), size: 14 + Math.round(Math.random() * 8), kind: 'โœจ' }); } setBursts([{ id, items }]); const t = setTimeout(() => { setBursts((prev) => prev.filter((b) => b.id !== id)); }, 1800); return () => clearTimeout(t); }, [trigger]); if (bursts.length === 0) return null; return ( ); } // ---------- Stamp overlays -------------------------------------------- function Stamp({ kind, opacity }) { const map = { right: { text: 'jaaa', color: 'var(--kech-aqua)', rot: -10, side: 'left' }, left: { text: 'nee', color: 'var(--kech-fuchsia)', rot: 8, side: 'right' }, up: { text: '๐Ÿ”ฅ fire', color: 'var(--kech-fuchsia)', rot: -4, side: 'top' } }; const cfg = map[kind]; if (!cfg) return null; const positionStyle = { left: { top: 24, left: 22 }, right: { top: 24, right: 22 }, top: { top: 14, left: '50%', transform: `translateX(-50%) rotate(${cfg.rot}deg)` } }[cfg.side]; return (
{cfg.text}
); } // ---------- The card itself (3 visual styles) ------------------------- function CardArt({ design, collection, style, compact = false }) { // style: 'sticker' | 'polaroid' | 'trading' // compact: smaller text + tighter padding for grid tiles const captionSize = compact ? 14 : 22; if (style === 'polaroid') { return (
{collection.id} ยท {String(design.no).padStart(2, '0')}
{design.caption}
); } if (style === 'trading') { return (
{/* Top bar */}
{collection.name}
#{String(design.no).padStart(2, '0')}/10
{/* Art */}
{/* Caption */}
{design.caption}
); } // 'sticker' default โ€” bold brand card return (
{design.caption}
); } // ---------- Swipe card (drag) ---------------------------------------- function SwipeCard({ design, collection, isTop, stackIndex, cardStyle, onSwipe, onIgnite, forceExit }) { const ref = useRef(null); const [drag, setDrag] = useState({ x: 0, y: 0, dragging: false }); const [exit, setExit] = useState(null); // 'left'|'right'|'up'|null const stateRef = useRef({ startX: 0, startY: 0, sx: 0, sy: 0, captured: false, pid: null }); // External programmatic exit (from action buttons / keyboard) useEffect(() => { if (forceExit && !exit) { setExit(forceExit.dir); } }, [forceExit, exit]); // pointer drag handlers โ€” stable listeners, not torn down on every drag tick useEffect(() => { if (!isTop) return; const el = ref.current; if (!el) return; const s = stateRef.current; const onDown = (e) => { if (exit) return; s.pid = e.pointerId; try {el.setPointerCapture(s.pid);} catch {} s.captured = true; s.startX = e.clientX;s.startY = e.clientY; s.sx = 0;s.sy = 0; setDrag({ x: 0, y: 0, dragging: true }); e.preventDefault(); }; const onMove = (e) => { if (!s.captured) return; setDrag({ x: e.clientX - s.startX, y: e.clientY - s.startY, dragging: true }); }; const onUp = (e) => { if (!s.captured) return; s.captured = false; try {el.releasePointerCapture(s.pid);} catch {} const dx = e.clientX - s.startX; const dy = e.clientY - s.startY; if (dy < -110) { if (onIgnite) onIgnite('up'); setExit('up'); setTimeout(() => onSwipe('up'), 280); } else if (dx > 130) { setExit('right'); setTimeout(() => onSwipe('right'), 280); } else if (dx < -130) { setExit('left'); setTimeout(() => onSwipe('left'), 280); } else { setDrag({ x: 0, y: 0, dragging: false }); } }; el.addEventListener('pointerdown', onDown); window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); window.addEventListener('pointercancel', onUp); return () => { el.removeEventListener('pointerdown', onDown); window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); window.removeEventListener('pointercancel', onUp); }; }, [isTop, exit, onSwipe, onIgnite]); // computed transform const exitT = exit === 'left' ? 'translate(-700px, 80px) rotate(-22deg)' : exit === 'right' ? 'translate(700px, 80px) rotate(22deg)' : exit === 'up' ? 'translate(700px, -120px) rotate(22deg)' : null; const stackOffsetY = stackIndex * 14; const stackOffsetX = stackIndex === 0 ? 0 : (stackIndex % 2 ? -1 : 1) * (6 + stackIndex * 3); const stackScale = 1 - stackIndex * 0.035; const stackRot = stackIndex === 0 ? 0 : stackIndex % 2 ? -4 : 4; const transform = exitT ? exitT : `translate(${drag.x + stackOffsetX}px, ${drag.y + stackOffsetY}px) rotate(${drag.x * 0.06}deg) scale(${stackScale}) rotate(${stackRot}deg)`; const rawLikeOp = Math.min(1, Math.max(0, (drag.x - 30) / 100)); const rawNopeOp = Math.min(1, Math.max(0, (-drag.x - 30) / 100)); const fireOp = Math.min(1, Math.max(0, (-drag.y - 40) / 100)); // Fire wins over jaaa/nee โ€” once the user is also pulling up, hide the side stamps const fireSuppress = fireOp > 0.05 ? 1 - Math.min(1, fireOp * 4) : 1; const likeOp = rawLikeOp * fireSuppress; const nopeOp = rawNopeOp * fireSuppress; return (
{/* Direction-aware aura โ€” subtle but visible glow behind the card */} {isTop && ); } // ---------- Action button (bottom bar) ------------------------------- function ActionButton({ kind, onClick, disabled }) { const map = { undo: { icon: 'โ†บ', label: 'undo', size: 50, bg: 'var(--kech-white)', fg: 'var(--kech-black)' }, nope: { icon: 'โœ•', label: 'nee', size: 64, bg: 'var(--kech-white)', fg: 'var(--kech-fuchsia)' }, fire: { icon: '๐Ÿ”ฅ', label: 'fire', size: 56, bg: 'var(--kech-fuchsia)', fg: 'var(--kech-black)' }, like: { icon: 'โ™ฅ', label: 'ja', size: 64, bg: 'var(--kech-aqua)', fg: 'var(--kech-black)' } }; const cfg = map[kind]; return ( ); } // ---------- Swipe stack --------------------------------------------- function SwipeStack({ collection, designs, cardStyle, onComplete, collectionIndex, totalCollections }) { const [idx, setIdx] = useState(0); const [history, setHistory] = useState([]); const [liked, setLiked] = useState([]); const [disliked, setDisliked] = useState([]); const [fireBurst, setFireBurst] = useState(0); // increments to retrigger animation const [buttonExit, setButtonExit] = useState(null); // {dir, key} โ€” programmatic card exit const committedRef = React.useRef(new Set()); // dedupe across rapid double-fires const commitSwipe = useCallback((dir) => { const d = designs[idx]; if (!d) return; if (committedRef.current.has(d.id)) return; // already counted this card committedRef.current.add(d.id); const tagged = { ...d, _collection: collection }; if (window.KechDB) window.KechDB.recordSwipe(collection.id, d.id, dir); setHistory((h) => [...h, { design: d, dir }]); if (dir === 'right' || dir === 'up') { setLiked((l) => l.some((x) => x.id === tagged.id) ? l : [...l, tagged]); } else if (dir === 'left') { setDisliked((l) => l.some((x) => x.id === tagged.id) ? l : [...l, tagged]); } const next = idx + 1; setIdx(next); setButtonExit(null); if (next >= designs.length) { const finalLiked = dir === 'right' || dir === 'up' ? [...liked, tagged] : liked; const finalDisliked = dir === 'left' ? [...disliked, tagged] : disliked; setTimeout(() => onComplete(finalLiked, finalDisliked), 320); } }, [designs, idx, liked, disliked, onComplete, collection]); // Used both by drag (immediate) and buttons (with animated fly-out) const swipe = useCallback((dir) => { commitSwipe(dir); }, [commitSwipe]); const buttonSwipe = useCallback((dir) => { if (buttonExit) return; if (idx >= designs.length) return; if (dir === 'up') { // Fire flow: ignite first, let flames burn over the still-visible card, // THEN fly the card away (flames are still tailing off, so they exit together) setFireBurst((n) => n + 1); setTimeout(() => { setButtonExit({ dir, key: idx }); setTimeout(() => commitSwipe(dir), 520); }, 750); } else { setButtonExit({ dir, key: idx }); setTimeout(() => commitSwipe(dir), 300); } }, [buttonExit, idx, designs.length, commitSwipe]); const undo = useCallback(() => { if (history.length === 0) return; const last = history[history.length - 1]; setHistory((h) => h.slice(0, -1)); setIdx((i) => Math.max(0, i - 1)); committedRef.current.delete(last.design.id); if (last.dir === 'right' || last.dir === 'up') { setLiked((l) => l.filter((x) => x.id !== last.design.id)); } else if (last.dir === 'left') { setDisliked((l) => l.filter((x) => x.id !== last.design.id)); } }, [history]); // keyboard useEffect(() => { const onKey = (e) => { if (idx >= designs.length) return; if (e.key === 'ArrowRight') buttonSwipe('right');else if (e.key === 'ArrowLeft') buttonSwipe('left');else if (e.key === 'ArrowUp') buttonSwipe('up');else if (e.key === 'z' || e.key === 'Z') undo(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [idx, designs.length, buttonSwipe, undo]); const visible = designs.slice(idx, idx + 3); const isOnDarkCol = collection.bg === '#191414'; return (
{/* Tagline */}

{collection.name}

{collection.tagline}
{/* Card stack */}
{visible.map((d, i) => { if (dir === 'up') setFireBurst((n) => n + 1); }} forceExit={i === 0 ? buttonExit : null} /> )}
{/* Action bar */}
buttonSwipe('left')} /> buttonSwipe('right')} /> buttonSwipe('up')} />
); } window.KechSwipe = { SwipeStack, CardArt };