{/* HEADER */}

UTS Explorer

{(filteredPins || []).length} spots on map

{/* Member avatars */}

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

m.handle && openProfile(m.handle)} style={{ width: 30, height: 30, borderRadius: '50%', border: '2px solid #0D1B2A', marginLeft: i > 0 ? -8 : 0, background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : 'linear-gradient(135deg, #00A86B, #00D4AA)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, cursor: 'pointer', zIndex: 4 - i, }}> {!m.avatarUrl && {(m.displayName || '?')[0]}}

))} {(memberList || []).length > 4 && (

+{(memberList || []).length - 4}

)}

{/* MAP AREA */}

{/* Map grid background */}

{(GRID_LINES || []).map((line, i) => (

))} {/* Roads */} {(ROADS || []).map((road, i) => { const isHorizontal = Math.abs(road.y2 - road.y1) < Math.abs(road.x2 - road.x1); const sx = Math.min(road.x1, road.x2) * mapZoom; const sy = Math.min(road.y1, road.y2) * mapZoom; const w = Math.abs(road.x2 - road.x1) * mapZoom; const h = Math.abs(road.y2 - road.y1) * mapZoom; return (

{road.name}

); })} {/* Building blocks */} {[ { x: -80, y: -40, w: 50, h: 35, label: 'Building 1', color: 'rgba(0,168,107,0.12)' }, { x: -20, y: -45, w: 60, h: 40, label: 'UTS Central', color: 'rgba(0,212,170,0.12)' }, { x: 50, y: -30, w: 45, h: 30, label: 'Building 11', color: 'rgba(0,168,107,0.08)' }, { x: -60, y: 20, w: 55, h: 35, label: 'Engineering', color: 'rgba(0,168,107,0.1)' }, { x: 20, y: 30, w: 50, h: 40, label: 'Library', color: 'rgba(0,212,170,0.1)' }, { x: -40, y: 70, w: 70, h: 25, label: 'Alumni Green', color: 'rgba(0,168,107,0.06)' }, ].map((bld, i) => (

{bld.label}

))}

{/* PINS */} {(filteredPins || []).map((pin) => { const pos = latLngToPixel(pin.lat, pin.lng); const mapRect = mapRef.current?.getBoundingClientRect(); const centerX = mapRect ? mapRect.width / 2 : 200; const centerY = mapRect ? mapRect.height / 2 : 300; const screenX = centerX + pos.x; const screenY = centerY + pos.y; const isDropping = dropAnimation === pin.id; const color = pin.isSuggested ? CATEGORY_COLORS.suggested : (CATEGORY_COLORS[pin.category] || CATEGORY_COLORS.other); const creator = getCreatorInfo(pin); return (

handlePinClick(pin)} style={{ position: 'absolute', left: screenX - 20, top: screenY - 44, width: 40, zIndex: selectedPin?.id === pin.id ? 50 : 10, cursor: 'pointer', transition: isDropping ? 'none' : 'transform 0.3s ease, opacity 0.3s ease', transform: isDropping ? 'translateY(-30px) scale(1.3)' : (pin.dimmed ? 'scale(0.85)' : 'scale(1)'), opacity: pin.dimmed ? 0.55 : 1, animation: isDropping ? 'none' : undefined, }} > {/* Pin marker */}

{pin.isSuggested ? (pin.emoji || '⭐') : getCategoryEmoji(pin.category)}

{/* Pin label */}

{pin.name}

{/* Creator avatar for user pins */} {!pin.isSuggested && creator.avatar && (

)} {/* Ripple effect on drop */} {isDropping && (

)}

); })} {/* Drop pin indicator */} {addPinPosition && showAddForm && (() => { const pos = latLngToPixel(addPinPosition.lat, addPinPosition.lng); const mapRect = mapRef.current?.getBoundingClientRect(); const cx = mapRect ? mapRect.width / 2 : 200; const cy = mapRect ? mapRect.height / 2 : 300; return (

📍

); })()} {/* Zoom controls */}

{[{ fn: handleZoomIn, label: '+' }, { fn: handleZoomOut, label: '−' }].map((btn, i) => ( ))}

{/* Center marker */}

{/* CATEGORY FILTERS */}

{(CATEGORIES || []).map(cat => { const isActive = activeFilter === cat.key; return ( ); })}

{/* ADD PIN FAB */} {/* SELECTED PIN DETAIL CARD (Bottom Sheet) */} {selectedPin && (

setSelectedPin(null)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', }} />

{/* Handle */}

{/* Category badge */}

{selectedPin.isSuggested ? (selectedPin.emoji || '⭐') : getCategoryEmoji(selectedPin.category)} {selectedPin.isSuggested ? 'UTS Suggested' : ((CATEGORIES || []).find(c => c.key === selectedPin.category)?.label || 'Spot')}

{/* Pin name */}

{selectedPin.name}

{/* Note */} {selectedPin.note && (

{selectedPin.note}

)} {/* Creator info */} {(() => { const creator = getCreatorInfo(selectedPin); return (

!selectedPin.isSuggested && creator.handle && openProfile(creator.handle)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderRadius: 14, background: 'rgba(0,168,107,0.06)', border: '1px solid rgba(0,168,107,0.1)', cursor: !selectedPin.isSuggested && creator.handle ? 'pointer' : 'default', }}> {creator.avatar ? (

) : (

{selectedPin.isSuggested ? 🏫 : 👤}

)}

{creator.name}

{(selectedPin._timestamp || selectedPin.createdAt) && !selectedPin.isSuggested && (

{formatTime(selectedPin._timestamp || selectedPin.createdAt)}

)}

); })()} {/* Close button */}

)} {/* ADD PIN FORM (Bottom Sheet) */} {showAddForm && (

{ setShowAddForm(false); setAddPinPosition(null); }} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', }} />

{/* Handle */}

📍 Drop a Pin

{addPinPosition ? 'Pin location selected on map' : 'Random spot near UTS campus'}

{/* Name input */} setNewPin({ ...newPin, name: e.target.value })} placeholder="Name this spot..." style={{ width: '100%', height: 48, fontSize: 16, padding: '0 16px', borderRadius: 12, background: 'rgba(27,40,56,0.8)', border: '1.5px solid rgba(0,168,107,0.2)', color: '#fff', outline: 'none', marginBottom: 12, boxSizing: 'border-box', fontFamily: 'inherit', }} onFocus={(e) => e.target.style.borderColor = '#00D4AA'} onBlur={(e) => e.target.style.borderColor = 'rgba(0,168,107,0.2)'} /> {/* Category picker */}

{(CATEGORIES || []).filter(c => c.key !== 'all').map(cat => { const isActive = newPin.category === cat.key; return ( ); })}

{/* Note input */}

setNewPin({ ...newPin, note: e.target.value })}
              placeholder="Add a quick note (optional)..."
              rows={2}
              style={{
                width: '100%', fontSize: 16,
                padding: '12px 16px', borderRadius: 12,
                background: 'rgba(27,40,56,0.8)',
                border: '1.5px solid rgba(0,168,107,0.2)',
                color: '#fff', outline: 'none', resize: 'none',
                marginBottom: 16, boxSizing: 'border-box',
                fontFamily: 'inherit',
              }}
              onFocus={(e) => e.target.style.borderColor = '#00D4AA'}
              onBlur={(e) => e.target.style.borderColor = 'rgba(0,168,107,0.2)'}
            />

{/* Submit button */}
            <button
              onClick={handleAddPin}
              disabled={!newPin.name.trim()}
              style={{
                width: '100%', minHeight: 52, borderRadius: 14,
                background: newPin.name.trim() ? 'linear-gradient(135deg, #00A86B 0%, #00D4AA 100%)' : 'rgba(27,40,56,0.6)',
                border: 'none',
                color: newPin.name.trim() ? '#fff' : 'rgba(224,231,238,0.3)',
                fontSize: 16, fontWeight: 700, cursor: newPin.name.trim() ? 'pointer' : 'default',
                boxShadow: newPin.name.trim() ? '0 4px 20px rgba(0,168,107,0.4)' : 'none',
                transition: 'all 0.2s ease',
                fontFamily: 'inherit',
              }}
            >
              📍 Drop Pin
            </button>
          </div>
        </div>
      )}

{/* TOAST */}
      {toast && (
        <div style={{
          position: 'fixed',
          top: 'calc(env(safe-area-inset-top, 20px) + 70px)',
          left: '50%', transform: 'translateX(-50%)',
          background: 'rgba(0,168,107,0.95)',
          backdropFilter: 'blur(12px)',
          padding: '10px 20px',
          borderRadius: 20,
          display: 'flex', alignItems: 'center', gap: 8,
          boxShadow: '0 4px 20px rgba(0,168,107,0.4)',
          zIndex: 300,
          animation: 'toastIn 0.3s ease-out',
        }}>
          <span style={{ fontSize: 18 }}>{toast.emoji}</span>
          <span style={{ fontSize: 14, fontWeight: 600, color: '#fff' }}>{toast.message}</span>
        </div>
      )}

{/* HINT */}
      <div style={{
        paddingBottom: 'env(safe-area-inset-bottom, 20px)',
        paddingLeft: 'max(env(safe-area-inset-left, 0px), 16px)',
        paddingRight: 'max(env(safe-area-inset-right, 0px), 16px)',
        paddingTop: 8, paddingBottom: 12,
        background: 'rgba(13,27,42,0.95)',
        borderTop: '1px solid rgba(0,168,107,0.08)',
        textAlign: 'center',
        flexShrink: 0,
      }}>
        <p style={{ fontSize: 12, color: 'rgba(224,231,238,0.35)', margin: 0, fontWeight: 500 }}>
          Long-press map to drop pin · Tap pins to explore · Drag to pan
        </p>
      </div>

{/* CSS Animations */}
      <style>{`
        @keyframes slideUp {
          from { transform: translateY(100%); }
          to { transform: translateY(0); }
        }
        @keyframes toastIn {
          from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.95); }
          to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        }
        @keyframes ripple {
          0% { transform: scale(0.5); opacity: 0.6; }
          100% { transform: scale(2.5); opacity: 0; }
        }
        @keyframes pulse {
          0%, 100% { transform: scale(1); opacity: 0.7; }
          50% { transform: scale(1.15); opacity: 1; }
        }
        * { -webkit-tap-highlight-color: transparent; }
        input::placeholder, textarea::placeholder { color: rgba(224,231,238,0.3); }
      `}</style>
    </div>
  );
}</article></body></html>