// Mobile app — SportZone (iPhone layout) // Production adaptation of the design handoff. // Fetches live data from /api/events — same backend as the desktop app. // Shares data.js and components.jsx with the desktop layout. const { StationLogo, SportIcon, resolveLogoUrl, readLS, writeLS, LS } = window.IF_COMPS; function MobileApp({ dark, onThemeChange }) { const D = window.IF_DATA; const isDark = dark; // ── state ────────────────────────────────────────────────────────────────── const [date, setDate] = React.useState(0); // offset: -1=yesterday, 0=today, 1=tomorrow … const [selectedSports, setSelectedSportsRaw] = React.useState(() => new Set()); const setSelectedSports = (n) => setSelectedSportsRaw(new Set(n)); const [stations, setStations] = React.useState(D.stations.map((s) => s.id)); const [follows, setFollowsRaw] = React.useState(() => new Set(readLS(LS.fav, []))); const [logos] = React.useState(() => readLS(LS.logos, {})); const [sportPickerOpen, setSportPickerOpen] = React.useState(false); const [datePickerOpen, setDatePickerOpen] = React.useState(false); const [starSheetFor, setStarSheetFor] = React.useState(null); const [searchOpen, setSearchOpen] = React.useState(false); const [search, setSearch] = React.useState(''); // ── API fetch ─────────────────────────────────────────────────────────────── const [events, setEvents] = React.useState([]); const [loadingEvents, setLoadingEvents] = React.useState(true); React.useEffect(() => { const d = D.dates.find((d) => d.offset === date); if (!d) return; setLoadingEvents(true); setEvents([]); const doFetch = (showLoader) => { if (showLoader) { setLoadingEvents(true); setEvents([]); } return fetch(`/api/events?date=${d.isoDate}`) .then((r) => r.json()) .then((data) => { setEvents(data.events || []); setLoadingEvents(false); }) .catch(() => setLoadingEvents(false)); }; doFetch(true); // Auto-refresh today's events every 5 minutes so live → done transitions // are reflected without requiring a manual page reload. let timer = null; if (date === 0) { timer = setInterval(() => doFetch(false), 5 * 60 * 1000); } return () => { if (timer) clearInterval(timer); }; }, [date]); // Persist favorites React.useEffect(() => writeLS(LS.fav, [...follows]), [follows]); // ── helpers ───────────────────────────────────────────────────────────────── const toggleFollow = (key) => { const n = new Set(follows); n.has(key) ? n.delete(key) : n.add(key); setFollowsRaw(new Set(n)); }; const toggleSport = (id) => { if (id === 'all') { setSelectedSports(new Set()); return; } const next = new Set(selectedSports); next.has(id) ? next.delete(id) : next.add(id); setSelectedSports(next); }; const toggleStation = (id) => { setStations((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]); }; const sportObj = (id) => D.sports.find((s) => s.id === id) || D.sports[2]; // fallback to fb const stationObj = (id) => D.stations.find((s) => s.id === id); const isStarred = (ev) => (ev.subjects || []).some((s) => follows.has(s.key)); const logoFor = (st) => resolveLogoUrl(st, logos[st.id], isDark ? 'dark' : 'light'); // ── filtering + sorting ───────────────────────────────────────────────────── const favActive = selectedSports.has('fav'); const sportIds = [...selectedSports].filter((s) => s !== 'fav'); const filtered = events .filter((e) => stations.includes(e.station)) .filter((e) => !favActive || isStarred(e)) .filter((e) => sportIds.length === 0 || sportIds.includes(e.sport)) .filter((e) => { if (!search) return true; const q = search.toLowerCase(); const hay = [e.title, e.sub, e.comp, ...(e.subjects || []).map((s) => s.label)] .join(' ').toLowerCase(); return hay.includes(q); }); const live = filtered.filter((e) => e.status === 'live'); const upcoming = [...filtered.filter((e) => e.status === 'upcoming')] .sort((a, b) => a.time.localeCompare(b.time)); const done = [...filtered.filter((e) => e.status === 'done')] .sort((a, b) => a.time.localeCompare(b.time)); // ── palette ───────────────────────────────────────────────────────────────── const pal = isDark ? { bg: '#08080A', fg: '#F4F4F5', card: '#121215', card2: '#1A1A1E', hair: '#202024', hair2: '#2C2C30', muted: '#7B7B82', accent: '#C8FF3D', accentFg: '#0A0A0B', accentSoft: 'rgba(200,255,61,0.13)', liveAccent: '#FF3B47', liveSoft: 'rgba(255,59,71,0.16)', } : { bg: '#FFFFFF', fg: '#0A0A0B', card: '#FAFAF8', card2: '#FFFFFF', hair: '#E7E5E1', hair2: '#D8D6D1', muted: '#76736C', accent: '#F26419', accentFg: '#FFFFFF', accentSoft: 'rgba(242,100,25,0.13)', liveAccent: '#E63946', liveSoft: 'rgba(230,57,70,0.13)', }; const visibleDates = D.dates.filter((d) => d.offset >= -1 && d.offset <= 3); const isToday = date === 0; return (
{/* ── HEADER ───────────────────────────────────────────────────────────── */}
SportZone window.location.reload()} style={{ height: 22, width: 'auto', display: 'block', cursor: 'pointer' }} />
{/* ── SEARCH ───────────────────────────────────────────────────────────── */} {searchOpen && (
setSearch(e.target.value)} onKeyDown={(e) => { if (e.key === 'Escape') { setSearch(''); setSearchOpen(false); } }} style={{ flex: 1, padding: '10px 12px', borderRadius: 8, border: `1px solid ${pal.hair2}`, background: pal.bg, color: pal.fg, fontSize: 14, fontFamily: 'inherit', outline: 'none', }} />
)} {/* ── DATE STRIP ───────────────────────────────────────────────────────── */}
{visibleDates.map((d) => { const active = d.offset === date; return ( ); })}
{/* ── SPORT FILTER ─────────────────────────────────────────────────────── */}
{D.sports.filter((s) => s.id === 'all' || s.id === 'fav').map((sp) => ( 0} count={follows.size} onClick={() => toggleSport(sp.id)} /> ))}
{/* ── STATION FILTER ───────────────────────────────────────────────────── */}
{D.stations.map((st) => { const active = stations.includes(st.id); return ( ); })}
{/* ── EVENT LIST ───────────────────────────────────────────────────────── */}
{loadingEvents && (
Sæki dagskrá…
)} {!loadingEvents && live.length > 0 && ( <> {live.map((ev) => ( setStarSheetFor(ev.id)} /> ))} )} {!loadingEvents && upcoming.length > 0 && ( <> {upcoming.map((ev) => ( setStarSheetFor(ev.id)} /> ))} )} {!loadingEvents && done.length > 0 && ( <> {done.map((ev) => ( setStarSheetFor(ev.id)} /> ))} )} {!loadingEvents && filtered.length === 0 && (
Engir viðburðir passa við valið.
)}
{/* ── BOTTOM SHEETS (position: fixed — cover full viewport) ────────────── */} {datePickerOpen && ( { setDate(o); setDatePickerOpen(false); }} onClose={() => setDatePickerOpen(false)} /> )} {sportPickerOpen && ( setSelectedSports(new Set([...selectedSports].filter((s) => s === 'fav')))} onClose={() => setSportPickerOpen(false)} /> )} {starSheetFor && (() => { const ev = events.find((e) => e.id === starSheetFor); return ev ? ( setStarSheetFor(null)} /> ) : null; })()}
); } // ── Shared style helpers ────────────────────────────────────────────────────── const mIconBtn = (pal) => ({ width: 38, height: 38, borderRadius: 10, background: pal.card, border: `1px solid ${pal.hair}`, color: pal.fg, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, fontFamily: 'inherit', }); // ── MSportChip ─────────────────────────────────────────────────────────────── function MSportChip({ sp, pal, active, showCount, count, onClick }) { const isFav = sp.id === 'fav'; return ( ); } // ── MSectionHeader ──────────────────────────────────────────────────────────── function MSectionHeader({ pal, label, count, live, muted }) { return (
{live && ( )} {label} {count}
); } // ── MEventCard ──────────────────────────────────────────────────────────────── function MEventCard({ ev, D, pal, live, done, stationObj, sportObj, isStarred, logoFor, follows, onStarTap }) { const st = stationObj(ev.station); const sp = sportObj(ev.sport); const starred = isStarred(ev); const matchedSubs = (ev.subjects || []).filter((s) => follows.has(s.key)); return (
{/* time row */}
{ev.time} {live ? ( LIVE ) : ( {D.countdown(ev.time, ev.status)} )} til {ev.endTime}
{/* meta: sport icon + sport · competition */}
{sp ? sp.name : ev.sport}{ev.comp ? ` · ${ev.comp}` : ''}
{ev.title}
{ev.sub && (
{ev.sub}
)} {/* bottom: station + followed subjects */}
{st && } {matchedSubs.length > 0 && ( <> · Þú fylgir {matchedSubs[0].label}{matchedSubs.length > 1 ? ` +${matchedSubs.length - 1}` : ''} )}
); } // ── MDatePicker (bottom sheet) ──────────────────────────────────────────────── function MDatePicker({ D, pal, date, onPick, onClose }) { return (
e.stopPropagation()} style={{ width: '100%', background: pal.card, borderTopLeftRadius: 18, borderTopRightRadius: 18, padding: '18px 16px 32px', borderTop: `1px solid ${pal.hair}`, boxShadow: '0 -8px 30px rgba(0,0,0,0.18)', }}>
Veldu dagsetningu
{D.dates.map((d) => { const active = d.offset === date; return ( ); })}
); } // ── MSportPicker (bottom sheet) ─────────────────────────────────────────────── function MSportPicker({ D, pal, selectedSports, toggle, clearAll, onClose }) { const sports = D.sports.filter((s) => s.id !== 'all' && s.id !== 'fav'); const sel = [...selectedSports].filter((s) => s !== 'fav'); return (
e.stopPropagation()} style={{ width: '100%', maxHeight: '80vh', overflowY: 'auto', background: pal.card, borderTopLeftRadius: 18, borderTopRightRadius: 18, padding: '18px 16px 32px', borderTop: `1px solid ${pal.hair}`, boxShadow: '0 -8px 30px rgba(0,0,0,0.18)', }}>
Veldu íþróttir
{sel.length > 0 && ( )}
Veldu eina eða fleiri íþróttir til að sía listann.
{sports.map((sp) => { const active = selectedSports.has(sp.id); return ( ); })}
); } // ── MSubjectPicker (bottom sheet) ───────────────────────────────────────────── function MSubjectPicker({ event, follows, toggleFollow, pal, onClose }) { return (
e.stopPropagation()} style={{ width: '100%', maxHeight: '78vh', overflowY: 'auto', background: pal.card, borderTopLeftRadius: 18, borderTopRightRadius: 18, padding: '18px 16px 32px', borderTop: `1px solid ${pal.hair}`, boxShadow: '0 -8px 30px rgba(0,0,0,0.18)', color: pal.fg, }}>
Bæta við uppáhalds
{event.title}
{(event.subjects || []).length === 0 && (
Engir þátttakendur skráðir fyrir þennan viðburð.
)}
{(event.subjects || []).map((sub) => { const on = follows.has(sub.key); return ( ); })}
); } window.MobileApp = MobileApp;