The Wanderer

UNSW • Est. 2024

{/* Solo/Multiplayer Indicator */}

{isMultiplayer ? `Online: ${members?.length || 1}` : 'Solo Mode'}

{/* 🗺️ MAP AREA */}

{/* World Map Silhouette (SVG) */} {/* 📍 PINS */} {(pins || []).map(pin => (

{ e.stopPropagation(); setSelectedPinId(pin.id); }} style={{ position: 'absolute', left: `${pin.x}%`, top: `${pin.y}%`, transform: 'translate(-50%, -50%)', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center' }} > {/* The Pin */}

📍

{/* Shoe Nod Badge */} {(pin.shoes ?? 0) > 0 && (

{pin.shoes} 👠

)} {/* Multiplayer Avatar (Tiny) */} {isMultiplayer && pin._user?.avatarUrl && ( User

)}

))} {/* Creating Indicator */} {isCreating && createPos && (

📍

)}

Tap empty space to leave an echo • Tap pin to listen

{/* 🃏 ART DECO CARD (BOTTOM SHEET) - VIEW MODE */} {selectedPin && (

{selectedPin.title}

{selectedPin._user?.displayName} • {new Date(selectedPin.createdAt || Date.now()).toLocaleDateString()}

{/* Art Deco decorative corner */}

"{selectedPin.content}"

{/* Interaction Area */}

setResponse(e.target.value)} placeholder={selectedPin.type === 'puzzle' ? 'Enter solution...' : 'Add your reflection...'} style={{ flex: 1, background: 'transparent', border: 'none', borderBottom: '1px solid #666', color: 'white', fontSize: 16, padding: '8px 0', borderRadius: 0 }} />

{/* Footer Actions */}

{isMultiplayer && selectedPin._user?.handle && ( )}

)} {/* 📝 CREATE MODE (BOTTOM SHEET) */} {isCreating && (

New Echo

setNewEcho({ ...newEcho, title: e.target.value })} style={{ background: 'rgba(255,255,255,0.05)', border: 'none', padding: 12, borderRadius: 4, color: 'white', fontSize: 16 }} />

setNewEcho({ ...newEcho, content: e.target.value })}
              style={{ 
                background: 'rgba(255,255,255,0.05)', border: 'none', 
                padding: 12, borderRadius: 4, color: 'white', fontSize: 16,
                minHeight: 80, resize: 'none'
              }}
            />

<div style={{ display: 'flex', gap: 12 }}>
               {['thought', 'puzzle'].map(type => (
                 <button
                   key={type}
                   onClick={() => setNewEcho({ ...newEcho, type })}
                   style={{
                     flex: 1, padding: 10,
                     background: newEcho.type === type ? THEME.primary : 'transparent',
                     color: newEcho.type === type ? 'black' : THEME.textDim,
                     border: `1px solid ${THEME.primary}`,
                     borderRadius: 4, textTransform: 'uppercase', fontSize: 12, fontWeight: 'bold'
                   }}
                 >
                   {type}
                 </button>
               ))}
            </div>

<div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
              <button 
                onClick={() => { setIsCreating(false); setCreatePos(null); }}
                style={{ flex: 1, background: 'transparent', border: 'none', color: THEME.textDim, padding: 12 }}
              >
                Cancel
              </button>
              <button 
                onClick={createPin}
                style={{ 
                  flex: 1, background: THEME.primary, border: 'none', color: 'black',
                  padding: 12, borderRadius: 4, fontWeight: 'bold', fontSize: 16
                }}
              >
                Drop Pin
              </button>
            </div>
          </div>
        </div>
      )}