// Íþróttir framundan — main app (full-bleed, Option B "Studio" direction) // Features: // • Theme toggle (sun/moon) + persisted to localStorage // • Subject-based favorites (team · sport · gender granularity) via popover // • "Uppáhalds" filter chip // • Mock Gmail login (saved to localStorage) // • Station wordmark badges (placeholder — not real brand assets) // • Smoother filled sport icons const LS = { fav: 'if_v2_favorites', theme: 'if_v2_theme', user: 'if_v2_user', }; function readLS(k, fallback) { try { const v = localStorage.getItem(k); return v == null ? fallback : JSON.parse(v); } catch { return fallback; } } function writeLS(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} } // Resolve which logo URL to show for a given station, theme, and user-uploaded // logos blob. Backwards-compatible with the v1 shape (a bare string per station // from when only one upload slot existed) — those are treated as the "forDark" // variant since the original modal only made sense for white logos on dark bg. function resolveLogoUrl(station, userEntry, theme) { const want = theme === 'light' ? 'forLight' : 'forDark'; const userObj = typeof userEntry === 'string' ? { forDark: userEntry } : (userEntry || {}); return userObj[want] || (station.defaultLogos && station.defaultLogos[want]) || null; } // ── Station wordmark / logo ── // If a `logoUrl` (resolved image URL) is provided, render the actual image. // Otherwise fall back to the styled wordmark badge so the prototype still // reads at a glance. function StationLogo({ station, size = 'sm', logoUrl, isDark = false }) { const dims = size === 'lg' ? { h: 32, padX: 14, font: 13, imgH: 26 } : { h: 22, padX: 9, font: 10.5, imgH: 18 }; // Real logo path — transparent container, image fills. if (logoUrl) { const scale = station.logoScale || 1; // Default logos are black SVGs. Invert to white on dark backgrounds. // User-uploaded logos (data: URLs) keep their original colours. const needsInvert = isDark && !logoUrl.startsWith('data:'); return ( {station.name} ); } const baseStyle = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: dims.h, padding: `0 ${dims.padX}px`, borderRadius: 5, background: station.bg, color: station.fg, fontSize: dims.font, lineHeight: 1, fontWeight: 700, letterSpacing: '-0.01em', whiteSpace: 'nowrap', flexShrink: 0, fontFamily: '"Inter", system-ui, sans-serif', }; const m = station.mark; let inner; if (m.kind === 'serif') { inner = {m.text} ; } else if (m.kind === 'stack') { inner = ( {m.top} {m.bot} ); } else if (m.kind === 'thin') { inner = {m.text}; } else if (m.kind === 'italic') { inner = {m.text}; } else if (m.kind === 'mono') { inner = {m.text}; } else { inner = {station.name}; } return {inner}; } // ── Star popover — subject picker ──────────────────────────────────────────── function StarPopover({ event, follows, toggleFollow, onClose, anchor }) { const ref = React.useRef(null); React.useEffect(() => { const close = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); }; setTimeout(() => document.addEventListener('mousedown', close), 0); return () => document.removeEventListener('mousedown', close); }, [onClose]); const rect = anchor ? anchor.getBoundingClientRect() : null; const top = rect ? rect.bottom + 8 : 0; const right = rect ? Math.max(8, window.innerWidth - rect.right) : 0; return (
Bæta við uppáhalds
{event.subjects.map(sub => { const on = follows.has(sub.key); return ( ); })}
Þú færð allt sem þú fylgir sjálfkrafa í Uppáhalds.
); } // ── Login mock modal ──────────────────────────────────────────────────────── function LoginModal({ onClose, onLogin }) { return (
e.stopPropagation()} style={{ width: 380, background: 'var(--if-card)', borderRadius: 16, padding: 28, border: '1px solid var(--if-hair)', boxShadow: '0 30px 80px rgba(0,0,0,0.35)', color: 'var(--if-fg)', }}>
ÍF
Skráðu þig inn til að halda í uppáhaldsleikina þína
Þú færð sömu uppáhaldslið og keppnir á öllum tækjum. Sýnishorn — engin raunveruleg innskráning.
); } // ── Sport icon (monoline outline) ── function SportIcon({ id, size = 22, strokeWidth = 1.5 }) { return ; } // ── Logo settings modal ── // Two upload slots per station, one per theme. The 'forDark' slot is the white // logo (for use on dark backgrounds); the 'forLight' slot is the dark logo (for // use on light backgrounds). Legacy single-string entries from earlier versions // migrate to `forDark` on first edit. Persists as data URLs in localStorage. function LogoSettings({ stations, logos, setLogos, onClose }) { // Normalize an entry to an object so the two slots can be edited independently. const entryFor = (st) => { const raw = logos[st.id]; return typeof raw === 'string' ? { forDark: raw } : (raw || {}); }; const handleFile = (stationId, variant, file) => { if (!file) return; const reader = new FileReader(); reader.onload = () => { const cur = logos[stationId]; const obj = typeof cur === 'string' ? { forDark: cur } : (cur || {}); setLogos({ ...logos, [stationId]: { ...obj, [variant]: reader.result } }); }; reader.readAsDataURL(file); }; const clearVariant = (stationId, variant) => { const cur = logos[stationId]; const obj = typeof cur === 'string' ? { forDark: cur } : (cur || {}); const next = { ...obj }; delete next[variant]; const out = { ...logos }; if (Object.keys(next).length === 0) delete out[stationId]; else out[stationId] = next; setLogos(out); }; return (
e.stopPropagation()} style={{ width: 640, maxHeight: '88vh', overflowY: 'auto', background: 'var(--if-card)', borderRadius: 16, padding: 28, border: '1px solid var(--if-hair)', boxShadow: '0 30px 80px rgba(0,0,0,0.35)', color: 'var(--if-fg)', }}>
Merki stöðvanna
Hver stöð getur haft tvær útgáfur af merkinu — ein fyrir dökkt útlit (ljöst merki) og ein fyrir ljóst útlit (dökkt merki). Merkin birtast sjálfkrafa eftir þema. Vistað í vafranum.
{stations.map((st) => { const entry = entryFor(st); const defD = st.defaultLogos && st.defaultLogos.forDark; const defL = st.defaultLogos && st.defaultLogos.forLight; return (
{st.name}
handleFile(st.id, 'forDark', file)} onClear={entry.forDark ? () => clearVariant(st.id, 'forDark') : null} /> handleFile(st.id, 'forLight', file)} onClear={entry.forLight ? () => clearVariant(st.id, 'forLight') : null} />
); })}
); } // One upload slot inside the LogoSettings modal. function LogoSlot({ label, hint, bg, url, isCustom, onUpload, onClear }) { const inputRef = React.useRef(null); return (
{label}
{isCustom && (
Eigið
)}
{url ? ( ) : (
Engin mynd
)}
{hint}
onUpload(e.target.files && e.target.files[0])} /> {onClear && ( )}
); } // ── Ad slot ── // Placeholder for pulsmedia.is integration. Renders a dashed-border box at the // exact ad size with a clear label so you can see how the listed sizes fit // into the layout. Swap the children for a real