const { useState, useEffect, useMemo, useRef } = React; /* ---------- Icons ---------- */ const Icon = { search: (p) => , bag: (p) => , heart: (p) => , plus: (p) => , close: (p) => , sort: (p) => , arrow: (p) => , chev: (p) => }; /* ---------- Hero decorative sprinkles ---------- */ function Sprinkles() { const sprinkles = useMemo(() => { const cols = ['#C04A5B', '#6B8B3D', '#4A55A0', '#C68A1E', '#7A5FA0', '#1A1612']; return Array.from({ length: 22 }, (_, i) => ({ top: 5 + Math.random() * 90, left: 5 + Math.random() * 90, rot: Math.random() * 180, col: cols[i % cols.length] })); }, []); return <>{sprinkles.map((s, i) => )}; } /* ---------- Cone illustration ---------- */ function ConeArt() { return ( ); } /* ---------- Nav Dropdown ---------- */ function NavDropdown({ label, items }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); const timerRef = React.useRef(null); function handleMouseEnter() {clearTimeout(timerRef.current);setOpen(true);} function handleMouseLeave() {timerRef.current = setTimeout(() => setOpen(false), 120);} return (
{open &&
{items.map((item) => {item.label} )}
}
); } /* ---------- Hero ---------- */ function Hero({ count, todayDate, store, setStore }) { return (

Dagens is

Vores udvalg skifter med sæson, vejr og humør. Her er de smage, vi har fremstillet i dag - alle på økologisk jerseymælk fra Thise.

); } /* ---------- Store toggle ---------- */ const STORE_ICONS = { algade: , havnens: }; function StoreToggle({ value, onChange }) { const i = STORES.findIndex((s) => s.key === value); return (
{STORES.map((s) => )}
); } /* ---------- Filter / Search bar ---------- */ function FilterBar({ filter, setFilter, counts }) { return (
{FILTERS.map((f) => )}
); } /* ---------- Scoop face (cartoon expression overlay) ---------- */ function ScoopFace({ kind = 'happy' }) { // Faces are drawn on a 100x100 viewBox centered on the scoop. // Stroke uses currentColor; parent sets it via CSS. const base = { fill: 'none', stroke: 'currentColor', strokeWidth: 3.2, strokeLinecap: 'round', strokeLinejoin: 'round' }; const cheekFill = 'rgba(244,166,176,0.55)'; const tongueFill = '#E85A6B'; switch (kind) { case 'tongue': // open mouth + tongue out (like cookie dough reference) return ( ); case 'sleepy': // eyes closed, content half-smile (like matcha reference) return ( ); case 'wink': return ( ); case 'wow': // surprised o-mouth return ( ); case 'cool': // little smirk, half-lid eyes return ( ); case 'love': // hearts for eyes return ( ); case 'happy': default: return ( ); } } /* ---------- Flavor card ---------- */ function FlavorCard({ f, scoopStyle, onOpen }) { const visibleTags = f.tags.filter((t) => TAG_META[t]).slice(0, 2); return (
onOpen(f)} tabIndex="0" onKeyDown={(e) => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();onOpen(f);}}} role="button" aria-label={`See more about ${f.name}`}>
{f.img ? {f.name} :
}
{visibleTags.map((t) => {TAG_META[t].label} )}
{f.sold &&
Sold out today
}

{f.name}

{f.desc}

); } /* ---------- Flavor modal ---------- */ function FlavorModal({ flavor, scoopStyle, onClose }) { // Lock body scroll useEffect(() => { if (!flavor) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const onKey = (e) => {if (e.key === 'Escape') onClose();}; window.addEventListener('keydown', onKey); return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); }; }, [flavor, onClose]); // Sprinkle burst const burst = useMemo(() => { if (!flavor) return []; const cols = ['#C04A5B', '#6B8B3D', '#4A55A0', '#C68A1E', '#7A5FA0', '#F2A6B0']; return Array.from({ length: 28 }, (_, i) => ({ x: 50 + (Math.random() - 0.5) * 60, y: 50 + (Math.random() - 0.5) * 60, tx: (Math.random() - 0.5) * 420, ty: (Math.random() - 0.5) * 420 - 60, r: Math.random() * 360, d: Math.random() * 0.15, col: cols[i % cols.length] })); }, [flavor && flavor.id]); if (!flavor) return null; const f = flavor; const allTags = f.tags.filter((t) => TAG_META[t]); return (
e.stopPropagation()}>
{/* Visual side */}
{burst.map((s, i) => )}
{f.img ? {f.name} :
}
{allTags.map((t) => {TAG_META[t].label} )}
{/* Info side */}

{f.name}

{f.long || f.desc}

In every scoop

    {f.ingredients && f.ingredients.map((ing, i) =>
  • {ing}
    • )}

Allergens

{f.allergens && f.allergens.length > 0 ? f.allergens.map((a, i) => {a}) : None of the usual suspects}
); } /* Lighten a CSS color string for highlight */ function lighten(c) { // Simple: just return white-ish gradient stop. The deep color anchors it. return 'rgba(255,255,255,0.65)'; } /* ---------- Cart drawer ---------- */ function CartDrawer({ open, onClose, items, setItems }) { const total = items.reduce((a, i) => a + i.price * i.qty, 0); const updateQty = (id, d) => { setItems(items.map((i) => i.id === id ? { ...i, qty: Math.max(0, i.qty + d) } : i).filter((i) => i.qty > 0)); }; return ( <>
); } /* ---------- Footer ---------- */ const SITE_FOOTER_HTML = ``; function Footer() { return
; } /* ---------- Main App ---------- */ function App() { const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "scoopStyle": "solid", "density": "comfortable", "showSoldOut": true } /*EDITMODE-END*/); const [filter, setFilter] = useState('all'); const [store, setStore] = useState('algade'); const [openFlavor, setOpenFlavor] = useState(null); const [cart, setCart] = useState([]); const [cartOpen, setCartOpen] = useState(false); const [favs, setFavs] = useState(new Set()); const bagRef = useRef(); // Read the admin's daily selection + catalog overrides. const [adminPicks, setAdminPicks] = useState(() => { try { const raw = localStorage.getItem('rs_daily_picks'); return raw ? JSON.parse(raw) : null; } catch (_) {return null;} }); const [liveCatalog, setLiveCatalog] = useState(() => getLiveCatalog()); useEffect(() => { const refreshCatalog = () => setLiveCatalog(getLiveCatalog()); const refreshPicks = () => { try { const raw = localStorage.getItem('rs_daily_picks'); setAdminPicks(raw ? JSON.parse(raw) : null); } catch (_) {} }; const onStorage = (e) => { if (e.key === 'rs_daily_picks') refreshPicks(); if (e.key === 'rs_catalog') refreshCatalog(); }; window.addEventListener('storage', onStorage); window.addEventListener('catalogchange', refreshCatalog); return () => { window.removeEventListener('storage', onStorage); window.removeEventListener('catalogchange', refreshCatalog); }; }, []); const counts = useMemo(() => { const c = { all: liveCatalog.length }; FILTERS.forEach((f) => { if (f.key === 'all') return; c[f.key] = liveCatalog.filter((x) => x.tags.includes(f.key)).length; }); return c; }, [liveCatalog]); const filtered = useMemo(() => { // Both shops draw from the full kitchen catalog. The admin's daily picks // determine which subset is live at each shop today. let r = liveCatalog; if (adminPicks && adminPicks[store]) { const allowed = new Set(adminPicks[store]); r = r.filter((f) => allowed.has(f.id)); // Preserve admin-chosen ordering for this store const ix = new Map(adminPicks[store].map((id, i) => [id, i])); r = [...r].sort((a, b) => (ix.get(a.id) ?? 1e9) - (ix.get(b.id) ?? 1e9)); } else if (!t.showSoldOut) { r = r.filter((f) => !f.sold); } if (filter !== 'all') r = r.filter((f) => f.tags.includes(filter)); return r; }, [filter, store, t.showSoldOut, adminPicks, liveCatalog]); const toggleFav = (id) => { setFavs((prev) => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; }); }; const onAdd = (f, fromRect) => { // fly animation if (bagRef.current && fromRect) { const bagRect = bagRef.current.getBoundingClientRect(); const dx = bagRect.left + bagRect.width / 2 - (fromRect.left + fromRect.width / 2); const dy = bagRect.top + bagRect.height / 2 - (fromRect.top + fromRect.height / 2); const el = document.createElement('div'); el.className = 'fly-puff'; el.style.left = fromRect.left + fromRect.width / 2 - 20 + 'px'; el.style.top = fromRect.top + fromRect.height / 2 - 20 + 'px'; el.style.background = `radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), ${f.color} 60%, ${f.deep})`; el.style.setProperty('--fly-to', `translate(${dx}px, ${dy}px)`); document.body.appendChild(el); setTimeout(() => el.remove(), 1000); } setCart((prev) => { const ex = prev.find((i) => i.id === f.id); if (ex) return prev.map((i) => i.id === f.id ? { ...i, qty: i.qty + 1 } : i); return [...prev, { id: f.id, name: f.name, color: f.color, deep: f.deep, price: f.price, qty: 1 }]; }); }; const cartCount = cart.reduce((a, i) => a + i.qty, 0); const today = new Date().toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' }); return ( <> {/* Nav */} !f.sold).length} todayDate={today} store={store} setStore={setStore} /> {/* FilterBar removed */}
{filtered.length === 0 ?
Nothing matched.

Try a different flavor — or come back tomorrow. The menu changes daily.

: filtered.map((f) => )}