{/* Header */}

common ground

Your Idea Garden 🌿

UNSW Community • {(memberList || []).length} gardener{(memberList || []).length > 1 ? 's' : ''}

{/* Interactive Garden Canvas */}

tap to explore 🌸

{(gardenElements || []).map((el, i) => (

handleGardenTap(el)} style={{ position: 'absolute', left: `${el?.x ?? 50}%`, top: `${el?.y ?? 50}%`, fontSize: 24 * (el?.size ?? 1), cursor: 'pointer', transform: animPulse === el?.id ? 'scale(1.5) rotate(10deg)' : 'scale(1)', transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)', animation: `sway ${2 + (i % 3)}s ease-in-out infinite alternate`, filter: animPulse === el?.id ? 'drop-shadow(0 0 8px rgba(196,136,58,0.5))' : 'none', userSelect: 'none' }} > {el?.emoji ?? '🌸'}

))} {newBloom && (

{newBloom?.emoji ?? '✨'}

)}

{/* Contribution Score */}

Contribution Score

{totalScore}

{[['✏️', 'Clarity', score?.clarity ?? 0], ['🎨', 'Creative', score?.creativity ?? 0], ['🤝', 'Team', score?.teamwork ?? 0]].map(([emoji, label, val], i) => (

{emoji}

{val}

{label}

))}

{/* Room Cards */}

{(rooms || []).map((room, i) => (

{ setActiveRoom(room?.id); setActivePrompt(null); }} style={{ ...cardStyle, display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', borderLeft: `4px solid ${room?.color ?? '#8B5E3C'}`, opacity: mounted ? 1 : 0, transform: mounted ? 'translateX(0)' : 'translateX(-20px)', transition: `all 0.5s cubic-bezier(0.4, 0, 0.2, 1) ${0.4 + i * 0.08}s` }} onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'} onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} >

{room?.emoji ?? '📌'}

{room?.name ?? 'Room'}

{room?.seeds ?? 0} seeds planted · {room?.blooms ?? 0} in bloom

{(room?.prompts ?? []).length} prompts →

))}

{/* Members strip */} {(memberList || []).length > 0 && (

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

0 ? -8 : 0 }}> {(m?.displayName ?? '?')[0]}

))} {(memberList || []).length} gardener{(memberList || []).length > 1 ? 's' : ''}

)}

); } // ROOM VIEW if (activeRoom && !activePrompt) { const room = currentRoom ?? rooms[0] ?? defaultData.rooms[0]; const prompts = room?.prompts ?? []; const roomContribs = (contributions || []).filter(c => (prompts || []).some(p => p?.id === c?.promptId)); return (

{/* Back + Header */}

{ setActiveRoom(null); setActivePrompt(null); }} style={{ ...btnBase, padding: '8px 14px', background: 'rgba(139,94,60,0.1)', color: '#8B5E3C', fontSize: 14 }} >← Garden

{room?.emoji ?? '📌'} {room?.name ?? 'Room'}

{(roomContribs || []).length} contributions made

{/* Room Garden Mini-Canvas */}

{room?.name ?? 'Room'} garden — {room?.blooms ?? 0} blooms

{(gardenElements || []).filter((_, i) => i % 2 === ((rooms || []).indexOf(room) % 2)).map((el, i) => (

{el?.emoji ?? '🌸'}

))}

{/* Prompts */}

{(prompts || []).map((prompt, i) => { const pType = prompt?.type ?? 'mission'; const typeEmoji = { poll: '📊', sketch: '✏️', voice: '🎙️', mission: '🎯' }[pType] ?? '📋'; return (

setActivePrompt(prompt?.id)} style={{ ...cardStyle, cursor: 'pointer', borderLeft: `3px solid ${room?.color ?? '#8B5E3C'}`, animation: `fadeSlide 0.4s ease ${i * 0.1}s both` }} onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'} onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} >

{typeEmoji}

{prompt?.text ?? 'Explore this prompt'}

{pType} · tap to contribute →

); })}

); } // PROMPT / CRAFTING STUDIO VIEW if (activeRoom && activePrompt) { const room = currentRoom ?? rooms[0]; const prompt = currentPrompt ?? (room?.prompts ?? [])[0] ?? { id: 'unknown', text: 'Explore this idea', type: 'mission', votes: {} }; const pType = prompt?.type ?? 'mission'; const votes = prompt?.votes ?? {}; const voteEntries = Object.entries(votes || {}); const totalVotes = (voteEntries || []).reduce((s, [, v]) => s + (v ?? 0), 0); const promptContribs = (contributions || []).filter(c => c?.promptId === prompt?.id); const snippets = ['🏡 Community hub', '♻️ Reuse system', '📱 App solution', '🤝 Volunteer network', '📚 Education push', '🌱 Green initiative']; return (

{/* Header */}

setActivePrompt(null)} style={{ ...btnBase, padding: '8px 14px', background: 'rgba(139,94,60,0.1)', color: '#8B5E3C', fontSize: 14 }} >← Back

Crafting Studio

{room?.emoji ?? '📌'} {room?.name ?? 'Room'}

⭐ {totalScore}

{/* Prompt Card */}

{prompt?.text ?? 'Share your thoughts'}

{{ poll: '📊 Cast your vote', sketch: '✏️ Sketch your idea', voice: '🎙️ Share your voice', mission: '🎯 Mini-mission' }[pType] ?? '📋 Contribute'}

{/* POLL TYPE */} {pType === 'poll' && (voteEntries || []).length > 0 && (

{(voteEntries || []).map(([option, count], i) => { const pct = totalVotes > 0 ? Math.round(((count ?? 0) / totalVotes) * 100) : 0; return (

handleVote(prompt?.id, option)} style={{ ...cardStyle, cursor: 'pointer', position: 'relative', overflow: 'hidden', padding: '14px 16px', animation: `fadeSlide 0.4s ease ${i * 0.1}s both` }} onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'} onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} >

{option} {pct}%

); })}

{totalVotes} votes cast · tap to vote

)} {/* MISSION / SKETCH / VOICE TYPE */} {(pType === 'mission' || pType === 'sketch' || pType === 'voice') && ( <> {/* Solution Snippets */}

Solution Snippets — tap to add 🌿

{(snippets || []).map((s, i) => (

setInputText(prev => prev ? prev + ' + ' + s : s)} style={{ background: 'rgba(139,94,60,0.08)', border: '1px dashed rgba(139,94,60,0.25)', borderRadius: 20, padding: '8px 14px', fontSize: 13, cursor: 'pointer', transition: 'all 0.2s ease', animation: `fadeSlide 0.3s ease ${i * 0.05}s both` }} onMouseDown={e => e.currentTarget.style.transform = 'scale(0.93)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'} onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} >{s}

))}

{/* Input area */}

setInputText(e.target.value)}
                  placeholder={pType === 'sketch' ? 'Describe your sketch idea...' : pType === 'voice' ? 'Jot down your voice note thoughts...' : 'Share your solution or idea...'}
                  style={{
                    width: '100%',
                    minHeight: 100,
                    border: '1.5px dashed rgba(139,94,60,0.2)',
                    borderRadius: 12,
                    padding: 14,
                    fontSize: 15,
                    fontFamily: "'Georgia', serif",
                    background: 'rgba(253,246,236,0.5)',
                    color: '#4A3728',
                    resize: 'vertical',
                    outline: 'none',
                    boxSizing: 'border-box',
                    lineHeight: 1.6
                  }}
                />
                <div
                  onClick={() => handleSubmitContribution(prompt?.id, pType)}
                  style={{
                    ...btnBase,
                    marginTop: 10,
                    width: '100%',
                    background: inputText.trim() ? 'linear-gradient(135deg, #5B7C4F, #7BA06E)' : 'rgba(139,94,60,0.1)',
                    color: inputText.trim() ? '#fff' : '#A0785A',
                    fontWeight: 'bold',
                    fontSize: 16,
                    textAlign: 'center'
                  }}
                >
                  {pType === 'voice' ? '🎙️ Save Voice Note' : pType === 'sketch' ? '✏️ Plant this Sketch' : '🌱 Plant this Idea'}
                </div>
              </div>

{/* Past contributions */}
              {(promptContribs || []).length > 0 && (
                <div style={{ ...cardStyle, padding: '12px 14px' }}>
                  <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: 1.5, color: '#8B7355', marginBottom: 8 }}>
                    Your Planted Ideas 🌸
                  </div>
                  {(promptContribs || []).slice(-3).reverse().map((c, i) => (
                    <div key={c?.id ?? i} style={{
                      padding: '8px 12px',
                      background: 'rgba(91,124,79,0.06)',
                      borderRadius: 10,
                      marginBottom: 6,
                      fontSize: 14,
                      fontStyle: 'italic',
                      color: '#5B7C4F',
                      borderLeft: '3px solid rgba(91,124,79,0.3)'
                    }}>
                      {c?.text ?? 'A planted idea'}
                    </div>
                  ))}
                </div>
              )}
            </>
          )}
        </div>

{newBloom && (
          <div style={{
            position: 'fixed',
            top: '40%',
            left: '50%',
            fontSize: 64,
            pointerEvents: 'none',
            animation: 'bloomIn 1.5s ease-out forwards',
            zIndex: 100
          }}>
            {newBloom?.emoji ?? '✨'}
          </div>
        )}
      </div>
    );
  }

// Fallback
  return <div style={baseStyle}><div style={{ textAlign: 'center', paddingTop: 100, fontSize: 24 }}>🌿 Loading your garden...</div></div>;
}</article></body></html>