// map-iso.jsx — REAL GPS map (Leaflet + dark tiles) for the Las Vegas Strip. // Toggle: My Boys (real friends) vs Fantasy Roster (drafted pros). // Markers sit on actual lat/lng of each casino. Crew chat panel for nudging pros. const { useState: uS_iso, useMemo: uM_iso, useEffect: uE_iso, useRef: uR_iso } = React; // ───── Real-world coordinates ───────────────────────────────────────────── const CASINO_COORDS = { 'Resorts World': [36.1369, -115.1671], 'Wynn': [36.1267, -115.1668], 'Venetian': [36.1213, -115.1693], 'Horseshoe': [36.1143, -115.1739], 'Paris': [36.1126, -115.1707], 'Bellagio': [36.1126, -115.1767], 'Cosmopolitan': [36.1101, -115.1750], 'Aria': [36.1075, -115.1764], 'MGM': [36.1023, -115.1697], 'Orleans': [36.1015, -115.2106], }; const YOU_COORDS = [36.1101, -115.1750]; // at Cosmo function venueKey(s) { if (!s) return null; const lower = String(s).toLowerCase(); for (const k of Object.keys(CASINO_COORDS)) { if (lower.includes(k.toLowerCase())) return k; } return null; } // ───── Main map component ───────────────────────────────────────────────── function IsoStripMap({ tournaments, friends, onZoomIn, onPin }) { const [layer, setLayer] = uS_iso('boys'); // 'boys' | 'fantasy' const [selected, setSelected] = uS_iso(null); const [chatOpen, setChatOpen] = uS_iso(false); const [messages, setMessages] = uS_iso([ { who: 'You', avatar: 'AH', text: "Phil busted #54 L8. Throwing him in $1k Mystery if he wants.", ts: '2:08 PM' }, { who: 'Phil H.', avatar: 'PH', text: "tilted but in. $1k buyin?", ts: '2:11 PM', isRoster: true }, { who: 'Kyle', avatar: '◆', text: "Phil on a soft Mystery field = +60 POY EV. Send it.", ts: '2:12 PM', isCoach: true }, ]); const fantasy = window.APP_DATA.fantasy.myLeague; const roster = fantasy.myRoster; // Build people list for the active layer const people = uM_iso(() => { if (layer === 'fantasy') { return roster.map(r => ({ kind: 'fantasy', id: r.id, name: r.name, handle: r.handle, status: r.status, chips: r.chips, avg: r.avg, pts: r.pts, avatar: r.avatar, venue: venueKey(r.venue), where: r.where, table: r.table, lastEvent: r.lastEvent, })); } return friends.map(f => ({ kind: 'friend', id: f.id, name: f.name, handle: f.handle, status: f.status, chips: f.chips, avg: f.avg, avatar: f.name.slice(0,2).toUpperCase(), venue: venueKey((f.where || '').split(' · ')[1] || f.where), where: f.where, table: f.table, lastSeen: f.lastSeen, lastResult: f.lastResult, })); }, [layer, friends]); const peopleByVenue = uM_iso(() => { const m = {}; people.forEach(p => { if (p.venue) (m[p.venue] = m[p.venue] || []).push(p); }); return m; }, [people]); const eventsByVenue = uM_iso(() => { const m = {}; tournaments.forEach(t => { const v = t.casino === 'Venetian Poker' ? 'Venetian' : t.casino; (m[v] = m[v] || []).push(t); }); return m; }, [tournaments]); const alive = people.filter(p => p.status === 'alive').length; const busted = people.filter(p => p.status === 'busted').length; // ── Leaflet setup ─────────────────────────────────────────────────────── const mapDivRef = uR_iso(null); const mapRef = uR_iso(null); const markerLayerRef = uR_iso(null); uE_iso(() => { if (!mapDivRef.current || mapRef.current) return; if (!window.L) return; const L = window.L; const map = L.map(mapDivRef.current, { center: [36.117, -115.174], zoom: 14, zoomControl: false, attributionControl: false, scrollWheelZoom: false, doubleClickZoom: true, touchZoom: true, dragging: true, }); // Dark tiles — CartoDB dark_matter (no API key) L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { maxZoom: 19, subdomains: 'abcd', }).addTo(map); L.control.zoom({ position: 'bottomright' }).addTo(map); markerLayerRef.current = L.layerGroup().addTo(map); mapRef.current = map; // Force resize after mount setTimeout(() => map.invalidateSize(), 100); // Felt-green tint that fades in past street level const updateFeltTint = () => { const z = map.getZoom(); const t = Math.max(0, Math.min(1, (z - 14.5) / 2.5)); if (mapDivRef.current) { mapDivRef.current.style.setProperty('--lr-felt', t.toFixed(2)); } }; map.on('zoom', updateFeltTint); updateFeltTint(); return () => { map.remove(); mapRef.current = null; }; }, []); // ── Render markers when data/layer changes ───────────────────────────── uE_iso(() => { if (!mapRef.current || !markerLayerRef.current || !window.L) return; const L = window.L; const group = markerLayerRef.current; group.clearLayers(); // YOU marker — pulsing blue dot const youIcon = L.divIcon({ className: 'lr-you-icon', html: `
YOU
`, iconSize: [60, 60], iconAnchor: [30, 30], }); L.marker(YOU_COORDS, { icon: youIcon, interactive: false }).addTo(group); // Casino markers — gold ◆ chip for venues with events, simple label otherwise Object.entries(CASINO_COORDS).forEach(([name, coords]) => { const events = eventsByVenue[name] || []; const ppl = peopleByVenue[name] || []; const isWSOP = name === 'Horseshoe'; const evCount = events.length; // Pick the soonest-closing event for the countdown ring const soonest = events .filter(e => e.regClose && (e.regClose.getTime() - Date.now()) > 0) .sort((a, b) => a.regClose.getTime() - b.regClose.getTime())[0]; const minsLeft = soonest ? Math.max(0, Math.floor((soonest.regClose.getTime() - Date.now()) / 60000)) : null; // 90-minute reg window → percent remaining for the ring const pct = minsLeft != null ? Math.max(0, Math.min(1, minsLeft / 90)) : 0; const closing = minsLeft != null && minsLeft < 15; // Heat plume strength: any alive friend at a deep run (>1.5× avg) = full heat const heatAlive = ppl.filter(p => p.status === 'alive'); const deepRatio = Math.max(0, ...heatAlive.map(p => p.avg ? (p.chips / p.avg) : 1)); const heat = isWSOP ? 1 : Math.min(1, Math.max(0, (deepRatio - 1) * 1.4)); const ringSvg = soonest ? ` ${minsLeft}m ` : ''; const html = ` ${heat > 0 ? `
` : ''}
${isWSOP ? '◆ WSOP' : name.toUpperCase()}
${evCount ? `
♠ ${evCount}
` : ''}
${ringSvg}`; const venueIcon = L.divIcon({ className: 'lr-venue-icon', html, iconSize: [110, 70], iconAnchor: [55, 35], }); const m = L.marker(coords, { icon: venueIcon }); if (isWSOP) m.on('click', () => onZoomIn && onZoomIn()); m.addTo(group); }); // People markers — clustered per venue, fanned out Object.entries(peopleByVenue).forEach(([name, ppl]) => { const base = CASINO_COORDS[name]; if (!base) return; ppl.forEach((p, i) => { // Fan out around the casino const total = ppl.length; const angle = total === 1 ? -Math.PI / 2 : (Math.PI * 2 * i) / total - Math.PI / 2; const radius = 0.00065; // ~70m const lat = base[0] + Math.sin(angle) * radius * 0.7 + 0.0009; const lng = base[1] + Math.cos(angle) * radius; const stateColor = p.status === 'alive' ? '#3aa168' : p.status === 'busted' ? '#d63b32' : p.status === 'on_break' ? '#c98a1a' : '#7a8295'; const metric = layer === 'fantasy' ? (p.pts != null ? `${p.pts}pt` : '') : (p.status === 'alive' && p.chips ? `${(p.chips/1000).toFixed(0)}k` : ''); const isSel = selected && selected.id === p.id; const pulse = p.status === 'alive' ? `
` : ''; const html = `
${pulse}
${p.avatar}
${metric ? `
${metric}
` : ''}
`; const icon = L.divIcon({ className: 'lr-pin-icon', html, iconSize: [44, 56], iconAnchor: [22, 56], }); const m = L.marker([lat, lng], { icon, zIndexOffset: 100 }); m.on('click', () => setSelected(prev => prev && prev.id === p.id ? null : p)); m.addTo(group); }); }); }, [layer, peopleByVenue, eventsByVenue, selected, onZoomIn]); const sendMsg = (text, target) => { if (!text || !text.trim()) return; const finalText = target ? text.replace('{name}', target.name.split(' ')[0]) : text; setMessages(m => [...m, { who: 'You', avatar: 'AH', text: finalText, ts: 'now', target: target && target.id }]); if (target) { setTimeout(() => setMessages(m => [...m, { who: target.name, avatar: target.avatar, text: pickReply(target), ts: 'now', isRoster: true, }]), 1400); setTimeout(() => setMessages(m => [...m, { who: 'Kyle', avatar: '◆', text: doyleTakeFor(target), ts: 'now', isCoach: true, }]), 2800); } }; return (
{/* CSS for markers */} {/* TOP-LEFT HUD: toggle + status banner */}
{[ { k: 'boys', label: '● My Boys' }, { k: 'fantasy', label: '◆ Fantasy' }, ].map(opt => ( ))}
{layer === 'fantasy' ? ( <>
◆ DEGEN SUNDAYS · #{fantasy.myRank}/{fantasy.teams}
{fantasy.points} pts · {alive} alive · {busted} out
LEADER {fantasy.leader.points} · GAP −{fantasy.leader.points - fantasy.points}
) : ( <>
● MY BOYS · LIVE GPS
{alive} alive · {tournaments.length} events
)}
{/* TOP-RIGHT: chat toggle (fantasy mode) */} {layer === 'fantasy' && ( )} {/* Selected person card */} {selected && !chatOpen && ( setSelected(null)} onNudge={() => setChatOpen(true)}/> )} {/* Crew chat */} {chatOpen && layer === 'fantasy' && ( setChatOpen(false)}/> )}
); } // ───── Selected person card ────────────────────────────────────────────── function PersonCard({ p, layer, onClose, onNudge }) { const stateColor = p.status === 'alive' ? '#3aa168' : p.status === 'busted' ? '#d63b32' : p.status === 'on_break' ? '#c98a1a' : '#7a8295'; return (
{p.avatar}
{p.name}
{layer === 'fantasy' && p.pts != null && (
{p.pts} POY pts
)}
{p.status} {p.where ? `· ${p.where}` : ''}{p.table ? ` · ${p.table}` : ''}
{p.status === 'alive' && p.chips ? (
p.avg ? '#3aa168' : '#d63b32', fontWeight: 700 }}> {(p.chips/1000).toFixed(1)}k {p.avg ? / avg {(p.avg/1000).toFixed(1)}k : null}
) : null} {p.lastEvent && (
{p.lastEvent}
)} {p.lastResult && (
{p.lastResult}
)} {layer === 'fantasy' ? (
) : (
)}
); } // ───── Crew chat panel ──────────────────────────────────────────────────── function CrewChat({ roster, messages, onSend, onClose }) { const [draft, setDraft] = uS_iso(''); const [target, setTarget] = uS_iso(null); const scrollRef = uR_iso(null); uE_iso(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages.length]); const bustedOrIdle = roster.find(r => r.status === 'busted') || roster.find(r => r.status === 'inactive'); const suggestions = []; if (bustedOrIdle) { suggestions.push({ who: bustedOrIdle, text: `Yo {name}, $1k Mystery at Horseshoe closes in 38m. Get back in. +60 POY easy.`, }); } const onBreak = roster.find(r => r.status === 'on_break'); if (onBreak) { suggestions.push({ who: onBreak, text: `{name} when you're back from break — push for chip lead. Top 10 finish locks +120 POY.`, }); } if (!suggestions.length) { suggestions.push({ who: roster[0], text: `Yo {name}, run good. We're chasing Coach K's Crushers — every cash counts.`, }); } const send = (text, who) => { onSend(text, who); setDraft(''); setTarget(null); }; return (
◆ DEGEN SUNDAYS · CREW CHAT
You + {roster.length} roster · Coach Kyle
{roster.map(r => { const c = r.status === 'alive' ? '#3aa168' : r.status === 'busted' ? '#d63b32' : r.status === 'on_break' ? '#c98a1a' : '#7a8295'; const sel = target && target.id === r.id; return ( ); })}
{messages.map((m, i) => { const isMe = m.who === 'You'; const isCoach = m.isCoach; return (
{m.avatar}
{m.who.toUpperCase()} · {m.ts}
{m.text}
); })}
◆ DOYLE SUGGESTS
{suggestions.map((s, i) => ( ))}
{target && (
→ DM TO {target.name.toUpperCase()}
)}
setDraft(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') send(draft, target); }} placeholder={target ? `Nudge ${target.name.split(' ')[0]}…` : 'Message the crew…'} style={{ flex: 1, padding: '8px 10px', border: '1px solid rgba(255,255,255,0.15)', fontFamily: 'var(--font-system)', fontSize: 13, background: 'rgba(0,0,0,0.3)', color: '#fff', outline: 'none', }}/>
); } function pickReply(target) { const replies = { alive: ["copy. running it back.", "ya I see it. crushing here tho.", "after this orbit."], busted: ["fuck it. heading over.", "give me 10. cab incoming.", "in. on tilt but in."], on_break: ["k. back from break in 5.", "noted. let me re-rack.", "send the link."], inactive: ["alright alright. registering.", "yeah I been sleeping. on my way.", "fine. let's run it."], }; const bucket = replies[target.status] || replies.alive; return bucket[Math.floor(Math.random() * bucket.length)]; } function doyleTakeFor(target) { if (target.status === 'busted') return `${target.name.split(' ')[0]} re-entering tilt — keep him on lower-variance bullets. No $5k Mixed.`; if (target.status === 'inactive') return `${target.name.split(' ')[0]} skipped 3 events this week. We need volume.`; if (target.status === 'on_break') return `Tell ${target.name.split(' ')[0]} to eat protein. Post-break ROI tanks when hungry.`; return `${target.name.split(' ')[0]} above chip avg — let them cook.`; } Object.assign(window, { IsoStripMap });