📡

SCANNING

{Math.round(scanProgress)}%

); } if (view === 'reveal') { return (

{noVibes ? (

🌀

NO VIBES FOUND

) : ( <>

RESULT

🍽️

{pickedSpot?.name}

{pickedDistance != null && (

{pickedDistance < 1 ? (pickedDistance * 5280).toFixed(0) + ' FT' : pickedDistance.toFixed(1) + ' MI'} AWAY

)}

); } return (

GRUB
FINDER

{(memberList || []).slice(0, 3).map((m) => (

m.handle && openProfile(m.handle)} style={{ width: 40, height: 40, border: `3px solid ${black}`, background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : grey, boxShadow: '2px 2px 0 #000', cursor: m.handle ? 'pointer' : 'default' }} /> ))}

{locationStatus}

{(spots || []).some(s => !s.isDemo) ? 'OUR SPOTS' : 'DEMO LIST'}

{(spots || []).length}

{(spots || []).map((spot, idx) => (

{spot._user?.profileImageUrl ? (

spot._user?.handle && openProfile(spot._user.handle)} style={{ width: 32, height: 32, border: `2px solid ${black}`, marginRight: 12, cursor: spot._user?.handle ? 'pointer' : 'default', background: grey, objectFit: 'cover' }} alt="" /> ) : ( {String(idx + 1).padStart(2, '0')} )}

{spot.name}

{spot._user && !spot.isDemo &&

BY {(spot._user.displayName || 'GUEST').toUpperCase()}

}

))} {(history || []).length > 0 && (

RECENT ROLLS

{(history || []).map(entry => (

entry._user?.handle && openProfile(entry._user.handle)} style={{ width: 32, height: 32, border: `2px solid ${black}`, cursor: entry._user?.handle ? 'pointer' : 'default', background: entry._user?.profileImageUrl ? `url(${entry._user.profileImageUrl}) center/cover` : grey }} />

{entry._user?.displayName || 'Guest'} rolled {entry.spotName}

))}

)} {showAddPanel && (

PASTE LIST

setInputText(e.target.value)} placeholder="One spot per line..." style={{ width: '100%', minHeight: 120, border: `3px solid ${black}`, padding: 12, fontFamily: mono, fontSize: 16, boxSizing: 'border-box', marginBottom: 12 }} />
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={handleAddSpots} style={{ flex: 1, background: primary, border: `3px solid ${black}`, padding: 12, fontWeight: 900, boxShadow: '3px 3px 0 #000', cursor: 'pointer' }}>ADD ALL</button>
              <button onClick={() => setShowAddPanel(false)} style={{ background: white, border: `3px solid ${black}`, padding: 12, fontWeight: 900, boxShadow: '3px 3px 0 #000', cursor: 'pointer' }}>CANCEL</button>
            </div>
          </div>
        )}
      </div>

<div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: white, borderTop: `6px solid ${black}`, padding: '24px 16px calc(env(safe-area-inset-bottom, 20px) + 16px) 16px', zIndex: 100 }}>
        <div style={{ maxWidth: 468, margin: '0 auto' }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
            <input value={singleInput} onChange={(e) => setSingleInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && (handleAddSingle(singleInput), setSingleInput(''))} placeholder="Quick add..." style={{ flex: 1, height: 54, border: `4px solid ${black}`, padding: '0 16px', fontFamily: mono, fontSize: 18, fontWeight: 900, boxShadow: '3px 3px 0 #000' }} />
            <button onClick={() => singleInput.trim() ? (handleAddSingle(singleInput), setSingleInput('')) : setShowAddPanel(!showAddPanel)} style={{ background: accent, border: `4px solid ${black}`, padding: '0 20px', fontWeight: 900, boxShadow: '3px 3px 0 #000', cursor: 'pointer' }}>{singleInput.trim() ? 'ADD' : 'PASTE'}</button>
          </div>
          <button onClick={handleFindVibe} disabled={(spots || []).length === 0} style={{ width: '100%', height: 70, background: (spots || []).length === 0 ? grey : primary, border: `4px solid ${black}`, fontSize: 24, fontWeight: 900, textTransform: 'uppercase', boxShadow: (spots || []).length === 0 ? 'none' : brutalShadowLarge, cursor: (spots || []).length === 0 ? 'not-allowed' : 'pointer', transform: 'translateY(0)', transition: 'transform 0.1s' }}>🎯 FIND THE VIBE</button>
        </div>
      </div>
    </div>
  );
}</article></body></html>