// screens-drops.jsx — Limited-edition game-specific merch drops. // // Exposes: // DropToast — slide-down notification announcing an active drop // DropHeroCard — large product hero card for Watch tab + Home // DropDetailScreen — full-screen drop detail (image, story, size, buy) // DropPlaceholder — CSS placeholder when imagePath fails to load // // Drops come from the tenant's `DROPS` array (set by applyTenantToData). // ───────────────────────────────────────────────────────────────────── // DropPlaceholder — used when imagePath is missing or fails. Shows a // branded gradient tile with the product emoji centered. Intentional so // missing images don't look broken before user provides the assets. // ───────────────────────────────────────────────────────────────────── function DropPlaceholder({ drop, size = 'lg' }) { const accent = drop.accent || WVU.gold; const px = size === 'sm' ? 40 : (size === 'md' ? 64 : 112); return (
{drop.emoji || '\u{1F455}'}
); } // Helper: smart drop image with onError → placeholder fallback function DropImage({ drop, size = 'lg', objectPosition = 'center' }) { const [ok, setOk] = React.useState(true); return (
{ok && drop.imagePath ? ( {drop.title} setOk(false)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition, }} /> ) : ( )}
); } // ───────────────────────────────────────────────────────────────────── // DROP TOAST — slide-down notification when a drop unlocks // Props: // drop: drop config to feature // onTap: () => void — opens the drop detail // onClose: () => void // visible: bool (controls render) // Auto-dismisses after 7 seconds. // ───────────────────────────────────────────────────────────────────── function DropToast({ drop, onTap, onClose, visible }) { React.useEffect(() => { if (!visible) return; const t = setTimeout(() => onClose && onClose(), 7000); return () => clearTimeout(t); }, [visible, onClose]); if (!visible || !drop) return null; const accent = drop.accent || WVU.gold; const pctLeft = Math.round((drop.stockLeft / drop.stockTotal) * 100); return (
{ e.stopPropagation(); onTap && onTap(); }} style={{ position: 'relative', overflow: 'hidden', pointerEvents: 'auto', cursor: 'pointer', background: `linear-gradient(135deg, ${accent} 0%, ${_darkenColor(accent, 0.35)} 100%)`, borderRadius: 16, border: '0.5px solid rgba(255,255,255,0.18)', boxShadow: `0 18px 42px rgba(0,0,0,0.55)`, display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', }} > {/* Live-drop pulse */}
🔥 Limited Drop Unlocked
{drop.title}
Only {drop.stockLeft}/{drop.stockTotal} left · ends at final whistle
); } // ───────────────────────────────────────────────────────────────────── // DROP HERO CARD — featured card used in: // * Game Day Watch tab (above multi-angle grid) // * Home (after Live Now) // * Game Day Rewards tab (in the section) // Variants: 'full' (big bleed image), 'compact' (smaller for Home) // ───────────────────────────────────────────────────────────────────── function DropHeroCard({ drop, onTap, variant = 'full' }) { if (!drop) return null; const accent = drop.accent || WVU.gold; const pctLeft = drop.stockLeft / drop.stockTotal; // Heights: full = 220 (Home), compact = 168, small = 132 (Game Day — ~25% smaller) const h = variant === 'small' ? 132 : (variant === 'compact' ? 168 : 220); return (
{/* Product image (full bleed) */}
{/* Gradient overlay so text reads */}
{/* Top kicker: 🔥 Limited Drop badge */}
🔥 Limited Drop
{/* Scarcity counter top-right */}
{drop.stockLeft} / {drop.stockTotal}
{/* Title + moment + price */}
{drop.title}
{variant !== 'small' && (
{drop.moment}
)}
Drop · ${drop.price}
{pctLeft < 0.3 ? 'SELLING FAST ·' : ''} {Math.round(pctLeft * 100)}% left
{/* Bottom scarcity bar */}
); } // ───────────────────────────────────────────────────────────────────── // DROP DETAIL SCREEN — full-screen drop page // Props: // drop: drop config // onClose: () => void // onBuy: (size) => void — fires when user taps Add to cart // ───────────────────────────────────────────────────────────────────── function DropDetailScreen({ drop, onClose, onBuy }) { if (!drop) return null; const accent = drop.accent || WVU.gold; const pctLeft = drop.stockLeft / drop.stockTotal; const [selectedSize, setSelectedSize] = React.useState(drop.defaultSize || (drop.sizes && drop.sizes[0])); const [buyState, setBuyState] = React.useState('idle'); // 'idle' | 'adding' | 'added' const handleBuy = () => { if (buyState !== 'idle') return; setBuyState('adding'); setTimeout(() => { setBuyState('added'); if (onBuy) onBuy(selectedSize); }, 600); }; return (
{/* ─── Hero (product image) ─── */}
{/* Top fade so close + chip read */}
{/* Close button */} {/* 🔥 Drop chip */}
🔥 Limited Drop
{/* ─── Sticky scarcity strip ─── */}
{pctLeft < 0.3 ? 'Selling fast' : 'In stock'}
{drop.stockLeft}/{drop.stockTotal}
{/* ─── Title + price ─── */}
{drop.sub || 'Limited Edition'}
{drop.title}
${drop.price}
{/* ─── The Moment ─── */}
The Moment
{drop.moment}
{drop.story}
{/* ─── Size selector ─── */}
Size · {drop.sizes && drop.sizes.length > 1 ? 'pick yours' : 'one size'}
{(drop.sizes || ['L']).map(sz => { const on = sz === selectedSize; return ( ); })}
{/* ─── Shipping + reward note ─── */}
Earn 50 pts on this drop
Ships in 7 days · free for season-ticket members
{/* ─── Sticky buy CTA ─── */}
); } // hex helpers function _darkenColor(hex, t) { const h = (hex || '#000').replace('#', ''); const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16); const r = ((n >> 16) & 255) * (1 - t); const g = ((n >> 8) & 255) * (1 - t); const b = ((n) & 255) * (1 - t); return '#' + [r, g, b].map(v => Math.round(v).toString(16).padStart(2, '0')).join(''); } function _lighten(hex, t) { const h = (hex || '#000').replace('#', ''); const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16); const r = ((n >> 16) & 255) + (255 - ((n >> 16) & 255)) * t; const g = ((n >> 8) & 255) + (255 - ((n >> 8) & 255)) * t; const b = ((n) & 255) + (255 - ((n) & 255)) * t; return '#' + [r, g, b].map(v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join(''); } Object.assign(window, { DropToast, DropHeroCard, DropDetailScreen, DropPlaceholder, DropImage });