{ e.stopPropagation(); setSelectedTreasure(t); }} style={{ position: 'absolute', left: (t.x || 0) * mapScale + mapOffset.x - 18, top: (t.y || 0) * mapScale + mapOffset.y - 36, width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: t.found ? 28 : 24, transform: `scale(${scale})`, filter: t.found ? 'none' : `drop-shadow(0 0 ${glow}px #FFD700)`, cursor: 'pointer', zIndex: isSelected ? 100 : 10, transition: 'transform 0.3s ease', userSelect: 'none', WebkitUserSelect: 'none', }} > {t.found ? ( 🏆 ) : ( 📍 )} {t.photoUrl && !t.found && (

{ e.currentTarget.style.display = 'none'; }} /> )} {isSelected && (

)}

{t.isDemo ? 'Demo' : ''}

); }; const renderRipples = () => (ripples || []).map(r => (

)); const renderCelebrations = () => (celebrations || []).map(c => (

{(goldParticles || []).map((p, i) => (

{p.emoji}

))}

)); const mapDecorations = useMemo(() => { const items = []; const decorEmojis = ['🌲', '🌳', '🏔️', '🌊', '🏝️', '⛵', '🦜', '🐚', '🗿', '🏰', '⚓', '🧭']; for (let i = 0; i < 15; i++) { items.push({ emoji: decorEmojis[i % (decorEmojis || []).length], x: 20 + (i * 97) % 360, y: 30 + (i * 73) % 380, size: 16 + (i % 4) * 4, opacity: 0.25 + (i % 3) * 0.1 }); } return items; }, []); const cssAnim = ` @keyframes rippleAnim { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } } @keyframes coinBurst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.4); } 50% { box-shadow: 0 0 20px rgba(255,215,0,0.8); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes crossFade { 0% { opacity: 0; transform: scale(2) rotate(45deg); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(0.8) rotate(45deg); } } `; return (

{/* Header */}

Treasure Map

{totalFound}/{totalTreasures} treasures found

{/* Activity / Crew Panel */} {showActivity && (

{/* Crew Members */}

👥 Crew Members ({(memberList || []).length})

{(memberList || []).map((m, i) => { const activity = memberActivity?.[m?.id]; const isActive = activity?.lastActiveAt && (Date.now() - activity.lastActiveAt < 120000); return (

m?.handle && openProfile(m.handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, cursor: m?.handle ? 'pointer' : 'default', minWidth: 56, flexShrink: 0, }} >

{!m?.avatarUrl && 👤}

{isActive &&

}

{m?.displayName || m?.name || 'Explorer'}

{m?.role === 'owner' &&

⭐ Owner

}

); })}

{/* Recent Treasure Activity */}

📜 Recent Activity

{(() => { const sorted = [...(treasures || [])].filter(t => t?._user).sort((a, b) => (b?._timestamp || 0) - (a?._timestamp || 0)).slice(0, 8); if ((sorted || []).length === 0) return

No activity yet. Hide a treasure to get started!

; return (sorted || []).map((t, i) => (

{ setSelectedTreasure(t); setShowActivity(false); }} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < (sorted || []).length - 1 ? '1px solid rgba(201,185,122,0.3)' : 'none', cursor: 'pointer', }}>

{ e.stopPropagation(); t?._user?.handle && openProfile(t._user.handle); }} style={{ width: 32, height: 32, borderRadius: '50%', flexShrink: 0, background: t?._user?.profileImageUrl ? `url(${t._user.profileImageUrl}) center/cover` : '#8D6E63', border: '2px solid #C9B97A', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#FFF', cursor: t?._user?.handle ? 'pointer' : 'default', }} > {!t?._user?.profileImageUrl && 👤}

{t?._user?.displayName || 'Explorer'} hid {t?.name || 'a treasure'}

{t?._timestamp ? (() => { const diff = Date.now() - t._timestamp; if (diff < 60000) return 'just now'; if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago'; if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago'; return Math.floor(diff / 86400000) + 'd ago'; })() : ''}

{t?.found ? '🏆' : '📍'}

)); })()}

)} {/* Map Area */}

setDragging(false)} onPointerCancel={() => setDragging(false)} onClick={handleMapTap} style={{ flex: 1, position: 'relative', overflow: 'hidden', background: mapBg, cursor: placementMode ? 'crosshair' : (dragging ? 'grabbing' : 'grab'), touchAction: 'none', userSelect: 'none', WebkitUserSelect: 'none', }} > {/* Map grid lines for parchment feel */} {/* Compass rose */}

🧭

{/* Map decorations */} {(mapDecorations || []).map((d, i) => (

{d.emoji}

))} {/* Dotted path between treasures */} {/* Treasure pins */} {(treasures || []).map(t => renderPin(t))} {/* Ripple animations */} {renderRipples()} {/* Celebration particles */} {renderCelebrations()} {/* Placement mode crosshair overlay */} {placementMode && (

✕ Tap to place your treasure!

)}

{/* Bottom Controls */}

{/* Treasure Detail Bottom Sheet */} {selectedTreasure && !showCreateModal && (

{/* Drag handle */}

{selectedTreasure.found ? '🏆' : '📍'}

{selectedTreasure.isDemo && Demo} {selectedTreasure.name}

selectedTreasure?._user?.handle && openProfile(selectedTreasure._user.handle)} style={{ fontSize: 12, color: '#8D6E63', cursor: selectedTreasure?._user?.handle ? 'pointer' : 'default', display: 'flex', alignItems: 'center', gap: 4 }} > {selectedTreasure?._user?.profileImageUrl && (

{ e.currentTarget.style.display = 'none'; }} /> )} Hidden by {selectedTreasure?._user?.displayName || 'Unknown'}

{selectedTreasure.photoUrl && ( Treasure photo

{ e.currentTarget.style.display = 'none'; }} /> )}

{selectedTreasure.clue}

{/* Shared Clue Board */}

Clue Board ({(selectedTreasure.clues || []).length})

{(selectedTreasure.clues || []).length === 0 && (

No extra clues yet. Be the first to add one!

)} {(selectedTreasure.clues || []).map((c, i) => (

{c.author}

{c.text}

))}

{/* Add clue input */}

setNewClueText(e.target.value)} placeholder="Add a clue or hint..." style={{ flex: 1, height: 44, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '2px solid #C9B97A', background: '#FFF', fontFamily: 'inherit', color: '#3E2723', outline: 'none', boxSizing: 'border-box', }} onKeyDown={(e) => { if (e.key === 'Enter') addClueToTreasure(selectedTreasure.id); }} />

{/* Mark as found button */} {!selectedTreasure.found && ( )} {selectedTreasure.found && (

✨ Treasure Found!

)}

)} {/* Create Treasure Bottom Sheet */} {showCreateModal && (

Hide a Treasure

Treasure Name * setNewName(e.target.value)} placeholder="e.g. The Hidden Sapphire" style={{ width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '2px solid #C9B97A', background: '#FFF', fontFamily: 'inherit', color: '#3E2723', outline: 'none', boxSizing: 'border-box', }} />

Cryptic Clue

setNewClue(e.target.value)}
              placeholder="Write a mysterious clue for treasure hunters..."
              rows={3}
              style={{
                width: '100%',
                fontSize: 16,
                padding: '12px 14px',
                borderRadius: 12,
                border: '2px solid #C9B97A',
                background: '#FFF',
                fontFamily: 'inherit',
                color: '#3E2723',
                outline: 'none',
                resize: 'none',
                boxSizing: 'border-box',
              }}
            />
          </div>

<div style={{ marginBottom: 16 }}>
            <label style={{ fontSize: 13, fontWeight: 700, color: '#8D6E63', display: 'block', marginBottom: 4 }}>Photo Hint (optional)</label>
            {newPhoto ? (
              <div style={{ position: 'relative', display: 'inline-block' }}>
                <img
                  src={newPhoto}
                  alt="Treasure hint"
                  style={{ width: 100, height: 100, objectFit: 'cover', borderRadius: 12, border: '2px solid #C9B97A' }}
                  onError={(e) => { e.currentTarget.style.display = 'none'; }}
                />
                <button
                  onClick={() => { setNewPhoto(null); setNewPhotoAssetId(null); }}
                  style={{
                    position: 'absolute', top: -8, right: -8,
                    width: 24, height: 24, borderRadius: '50%',
                    background: '#FF6B6B', border: 'none', color: '#FFF',
                    fontSize: 14, cursor: 'pointer',
                    display: 'flex', alignItems: 'center', justifyContent: 'center'
                  }}
                >
                  ✕
                </button>
              </div>
            ) : (
              <button
                onClick={handleUploadPhoto}
                disabled={uploading}
                style={{
                  height: 48,
                  borderRadius: 12,
                  border: '2px dashed #C9B97A',
                  background: 'rgba(255,215,0,0.08)',
                  color: '#8D6E63',
                  fontSize: 15,
                  fontWeight: 600,
                  fontFamily: 'inherit',
                  cursor: uploading ? 'wait' : 'pointer',
                  padding: '0 16px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                }}
              >
                <span style={{ fontSize: 20 }}>📷</span>
                {uploading ? 'Uploading...' : 'Add Photo'}
              </button>
            )}
          </div>

<button
            onClick={addTreasure}
            disabled={!newName.trim()}
            style={{
              width: '100%',
              minHeight: 52,
              borderRadius: 16,
              border: 'none',
              background: newName.trim() ? 'linear-gradient(135deg, #FFD700 0%, #FFA000 100%)' : '#D7CCC8',
              color: newName.trim() ? '#3E2723' : '#A1887F',
              fontSize: 17,
              fontWeight: 700,
              fontFamily: 'inherit',
              cursor: newName.trim() ? 'pointer' : 'not-allowed',
              boxShadow: newName.trim() ? '0 4px 16px rgba(255,215,0,0.4)' : 'none',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 8,
            }}
          >
            <span style={{ fontSize: 20 }}>🗺️</span> Bury This Treasure
          </button>
        </div>
      )}

{/* Overlay backdrop for modals */}
      {(selectedTreasure || showCreateModal) && (
        <div
          onClick={() => { setSelectedTreasure(null); setShowCreateModal(false); setNewName(''); setNewClue(''); setNewPhoto(null); }}
          style={{
            position: 'fixed',
            top: 0, left: 0, right: 0, bottom: 0,
            background: 'rgba(62,39,35,0.3)',
            zIndex: 350,
          }}
        />
      )}
    </div>
  );
}</article></body></html>

🗺️Treasure Map

{selectedTreasure.isDemo && Demo} {selectedTreasure.name}

✨Hide a Treasure

Treasure Map

Hide a Treasure