Spark Map

{(memberList || []).length > 1 ? `${memberList.length} thinkers` : 'Solo'}

{/* 🗺️ SPARK CANVAS */}

{/* SVG LAYER */} {/* NODES LAYER */} {(nodes || []).map(node => (

{ e.stopPropagation(); setSelectedNodeId(selectedNodeId === node.id ? null : node.id); }} style={{ position: 'absolute', left: `${node.x}%`, top: `${node.y}%`, transform: `translate(-50%, -50%) scale(${node.bloom ? 1.2 : 1})`, transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)', zIndex: selectedNodeId === node.id ? 20 : 10, cursor: 'pointer', maxWidth: 160 }} > {/* LANTERN GLOW BACKGROUND */}

{/* Text */} {node.text} {/* Author Tag */} {node.type !== 'root' && (

{getAvatar(node)} {node.authorName}

)} {/* Tassel decoration for visual flair */}

{/* Actions Popup when selected */} {selectedNodeId === node.id && (

)}

))}

{/* 🧧 RED ENVELOPE INPUT MODAL */} {isInputOpen && (

{/* Handle */}

{selectedNodeId ? 'Adding to the conversation...' : 'Start a new spark'}

setIncognito(!incognito)} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: THEME.paper, opacity: incognito ? 1 : 0.6, cursor: 'pointer' }} > {incognito ? '🎭 Hidden' : '👤 Visible'}

setInputText(e.target.value)}
            placeholder={selectedNodeId ? "Yes, and..." : "What's on your mind?"}
            style={{
              width: '100%',
              height: 80,
              background: THEME.paper,
              border: 'none',
              borderRadius: 12,
              padding: 16,
              fontSize: 16,
              color: THEME.plum,
              marginBottom: 16,
              resize: 'none',
              fontFamily: 'inherit'
            }}
            autoFocus
          />

<div style={{ display: 'flex', gap: 12 }}>
            <div style={{ display: 'flex', gap: 8, flex: 1 }}>
              {['idea', 'remix', 'side-quest'].map(type => (
                <button 
                  key={type}
                  onClick={() => setInputType(type)}
                  style={{
                    flex: 1,
                    padding: '8px 0',
                    borderRadius: 8,
                    border: `1px solid ${inputType === type ? THEME.gold : 'transparent'}`,
                    background: inputType === type ? 'rgba(255,215,0,0.2)' : 'rgba(0,0,0,0.1)',
                    color: THEME.paper,
                    fontSize: 12
                  }}
                >
                  {type === 'idea' ? '💡 Idea' : type === 'remix' ? '🔄 Remix' : '🐇 Quest'}
                </button>
              ))}
            </div>
            <button 
              onClick={handleAddNode}
              style={{
                background: THEME.gold,
                color: THEME.red,
                border: 'none',
                borderRadius: 12,
                padding: '0 24px',
                fontWeight: 'bold',
                fontSize: 16
              }}
            >
              Bloom
            </button>
          </div>
        </div>
      )}

{/* 📜 BOTTOM PROMPT & CONTROLS (Only visible when input is closed) */}
      {!isInputOpen && (
        <div style={{
          position: 'fixed',
          bottom: 'max(env(safe-area-inset-bottom, 20px), 20px)',
          left: 16, right: 16,
          display: 'flex',
          flexDirection: 'column',
          gap: 12,
          pointerEvents: 'none'
        }}>
          {/* Prompt Card */}
          <div style={{
            background: THEME.paper,
            padding: 12,
            borderRadius: 12,
            boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            pointerEvents: 'auto',
            borderLeft: `4px solid ${THEME.crimson}`
          }}>
            <span style={{ fontSize: 24 }}>🧧</span>
            <div>
              <div style={{ fontSize: 10, color: THEME.crimson, fontWeight: 'bold', textTransform: 'uppercase' }}>Daily Prompt</div>
              <div style={{ fontSize: 14, color: THEME.plum }}>What's a tradition you want to invent?</div>
            </div>
          </div>

{/* Toolbar */}
          <div style={{ display: 'flex', justifyContent: 'space-between', pointerEvents: 'auto' }}>
            <button onClick={() => setTapPosition({x: 50, y: 50}) || setIsInputOpen(true)} style={{ 
              background: THEME.crimson, color: THEME.gold,
              border: `1px solid ${THEME.gold}`, borderRadius: '50%',
              width: 56, height: 56, fontSize: 24,
              boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
              ➕
            </button>
            
            <button onClick={share} style={{ 
              background: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)',
              color: THEME.paper, border: '1px solid rgba(255,255,255,0.2)',
              borderRadius: 20, padding: '0 20px', height: 56,
              fontWeight: 'bold',
              display: 'flex', alignItems: 'center', gap: 8
            }}>
              <span>Share Map</span>
              <span style={{ fontSize: 18 }}>📤</span>
            </button>
          </div>
        </div>
      )}

{/* 🎉 CONFETTI OVERLAY */}
      {showConfetti && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 200,
          pointerEvents: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column',
          background: 'rgba(0,0,0,0.7)',
          animation: 'fadeIn 0.5s ease'
        }}>
          <div style={{ fontSize: 60, marginBottom: 20 }}>🪙 ✨ 🏮</div>
          <h2 style={{ color: THEME.gold, textShadow: `0 2px 0 ${THEME.red}` }}>Time's Up!</h2>
          <p style={{ color: THEME.paper }}>Beautiful thinking.</p>
        </div>
      )}

{/* GLOBAL STYLES FOR ANIMATIONS */}
      <style>{`
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
      `}</style>
    </div>
  );
}</article></body></html>