RHYME ROYALE

Underground Poetry Slam

{/* Active Members Bar */}

Poets in Cypher: {(memberList || []).map((m) => ( ))}

{/* Live Slam Prompt Card */}

🔥 BATTLE TOPIC

"{currentPrompt}"

{/* Navigation Tabs (Arena vs Crown Leaderboard) */}

{/* MAIN BODY: ARENA TAB */} {activeTab === 'arena' && (

{/* Verse Writer Section */}

✍️ Drop Your Rhyme = 4 ? '#00ffcc' : '#64748b' }}> {lineCount} lines ({(verseText || []).length} chars)

setVerseText(e.target.value)}
                placeholder={`Drop 4 sharp lines on "${currentPrompt}"...\n\nLine 1...\nLine 2...`}
                rows={4}
                style={{
                  width: '100%',
                  boxSizing: 'border-box',
                  backgroundColor: '#0c0d14',
                  color: '#00ffcc',
                  border: '1px solid rgba(0, 255, 204, 0.3)',
                  borderRadius: 10,
                  padding: 12,
                  fontSize: 15,
                  fontFamily: "'Courier New', Courier, monospace",
                  lineHeight: 1.5,
                  outline: 'none',
                  resize: 'none',
                  marginBottom: 10
                }}
              />

{/* AI Rhyme Assist suggestions list */}
              {(aiRhymes || []).length > 0 && (
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
                  <span style={{ fontSize: 11, color: '#94a3b8', fontFamily: 'sans-serif', alignSelf: 'center' }}>Rhymes:</span>
                  {(aiRhymes || []).map((word, i) => (
                    <button
                      key={i}
                      onClick={() => setVerseText((prev) => prev + ' ' + word)}
                      style={{
                        background: 'rgba(0, 255, 204, 0.1)',
                        border: '1px solid #00ffcc',
                        color: '#00ffcc',
                        borderRadius: 12,
                        padding: '2px 8px',
                        fontSize: 12,
                        cursor: 'pointer'
                      }}
                    >
                      +{word}
                    </button>
                  ))}
                </div>
              )}

{/* Writer Actions Bar */}
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', fontFamily: 'sans-serif' }}>
                <button
                  onClick={handleSubmitVerse}
                  disabled={!verseText.trim()}
                  style={{
                    flex: 1,
                    minHeight: 48,
                    borderRadius: 12,
                    background: verseText.trim() ? '#00ffcc' : '#1e293b',
                    color: verseText.trim() ? '#0c0d14' : '#64748b',
                    border: 'none',
                    fontSize: 15,
                    fontWeight: 900,
                    cursor: verseText.trim() ? 'pointer' : 'not-allowed',
                    boxShadow: verseText.trim() ? '0 0 15px rgba(0,255,204,0.3)' : 'none'
                  }}
                >
                  🔥 SPIT VERSE
                </button>

{typeof ai === 'function' && (
                  <button
                    onClick={handleRhymeAssist}
                    disabled={isAiGenerating || !verseText.trim()}
                    style={{
                      minHeight: 48,
                      padding: '0 12px',
                      borderRadius: 12,
                      background: 'rgba(255, 255, 255, 0.05)',
                      border: '1px solid rgba(255, 255, 255, 0.15)',
                      color: '#e2e8f0',
                      fontSize: 13,
                      fontWeight: 700,
                      cursor: 'pointer'
                    }}
                  >
                    ✨ Rhyme Assist
                  </button>
                )}

<button
                  onClick={handleBotChallenge}
                  disabled={isAiGenerating}
                  style={{
                    minHeight: 48,
                    padding: '0 12px',
                    borderRadius: 12,
                    background: 'rgba(255, 0, 85, 0.1)',
                    border: '1px solid rgba(ff, 0, 85, 0.3)',
                    color: '#ff0055',
                    fontSize: 13,
                    fontWeight: 700,
                    cursor: 'pointer'
                  }}
                >
                  🤖 AI Rival Drop
                </button>
              </div>
            </div>

{/* Verses Stream Feed */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              justify: 'space-between',
              marginBottom: 10,
              fontFamily: 'sans-serif'
            }}>
              <span style={{ fontSize: 12, color: '#94a3b8', fontWeight: 700 }}>
                THE CYPHER FEED ({(displayedVerses || []).length})
              </span>
              <div style={{ display: 'flex', gap: 6 }}>
                <button
                  onClick={() => setFilterMode('hot')}
                  style={{
                    background: filterMode === 'hot' ? 'rgba(255,0,85,0.2)' : 'transparent',
                    border: filterMode === 'hot' ? '1px solid #ff0055' : '1px solid rgba(255,255,255,0.1)',
                    color: filterMode === 'hot' ? '#ff0055' : '#94a3b8',
                    borderRadius: 12,
                    padding: '4px 10px',
                    fontSize: 11,
                    fontWeight: 700,
                    cursor: 'pointer'
                  }}
                >
                  🔥 Hot Votes
                </button>
                <button
                  onClick={() => setFilterMode('latest')}
                  style={{
                    background: filterMode === 'latest' ? 'rgba(0,255,204,0.2)' : 'transparent',
                    border: filterMode === 'latest' ? '1px solid #00ffcc' : '1px solid rgba(255,255,255,0.1)',
                    color: filterMode === 'latest' ? '#00ffcc' : '#94a3b8',
                    borderRadius: 12,
                    padding: '4px 10px',
                    fontSize: 11,
                    fontWeight: 700,
                    cursor: 'pointer'
                  }}
                >
                  ⚡ Fresh Drops
                </button>
              </div>
            </div>

{/* Empty State */}
            {(displayedVerses || []).length === 0 ? (
              <div style={{
                textAlign: 'center',
                padding: '40px 20px',
                background: '#121422',
                borderRadius: 16,
                border: '1px dashed rgba(255,255,255,0.1)',
                fontFamily: 'sans-serif'
              }}>
                <div style={{ fontSize: 48, marginBottom: 12 }}>🎤</div>
                <h3 style={{ fontSize: 16, fontWeight: 700, margin: '0 0 6px', color: '#f8fafc' }}>The Stage is Empty</h3>
                <p style={{ fontSize: 13, color: '#94a3b8', margin: 0, lineHeight: 1.4 }}>
                  Drop the first 4-line verse above or tap <strong>"AI Rival Drop"</strong> to trigger the first poet in the cypher!
                </p>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {(displayedVerses || []).map((verse) => {
                  const isTopRanked = verse.id === topVerseId && (verse.score || 0) > 0;
                  const hasUserVoted = verse.voters?.[user?.id || 'anon_user'];

return (
                    <div
                      key={verse.id}
                      style={{
                        background: '#131524',
                        borderRadius: 16,
                        padding: 16,
                        border: isTopRanked
                          ? '1px solid #ffd700'
                          : '1px solid rgba(255, 255, 255, 0.08)',
                        boxShadow: isTopRanked ? '0 0 15px rgba(255, 215, 0, 0.15)' : 'none',
                        position: 'relative'
                      }}
                    >
                      {/* Top crown badge for #1 leader */}
                      {isTopRanked && (
                        <div style={{
                          position: 'absolute',
                          top: -10,
                          right: 16,
                          background: '#ffd700',
                          color: '#0c0d14',
                          fontSize: 11,
                          fontWeight: 900,
                          padding: '2px 10px',
                          borderRadius: 10,
                          letterSpacing: 0.5,
                          boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
                          fontFamily: 'sans-serif'
                        }}>
                          👑 #1 RHYME KING
                        </div>
                      )}

{/* Author Header */}
                      <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        marginBottom: 12,
                        fontFamily: 'sans-serif'
                      }}>
                        <button
                          onClick={() => verse._user?.handle && openProfile(verse._user.handle)}
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: 10,
                            background: 'none',
                            border: 'none',
                            color: '#f1f5f9',
                            padding: 0,
                            cursor: 'pointer',
                            textAlign: 'left'
                          }}
                        >
                          {verse._user?.profileImageUrl ? (
                            <img
                              src={verse._user.profileImageUrl}
                              alt={verse._user?.displayName || 'Author'}
                              style={{ width: 34, height: 34, borderRadius: 17, objectFit: 'cover' }}
                              onError={(e) => { e.currentTarget.style.display = 'none'; }}
                            />
                          ) : (
                            <div style={{
                              width: 34,
                              height: 34,
                              borderRadius: 17,
                              background: '#22263d',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              fontSize: 16
                            }}>
                              ✍️
                            </div>
                          )}
                          <div>
                            <div style={{ fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
                              {verse._user?.displayName || 'Anonymous Poet'}
                            </div>
                            <div style={{ fontSize: 11, color: '#64748b' }}>
                              @{verse._user?.handle || 'mc'}
                            </div>
                          </div>
                        </button>

{verse._user?.handle && verse._user?.handle !== user?.handle && (
                          <button
                            onClick={() => startChat(verse._user.handle)}
                            style={{
                              minHeight: 32,
                              padding: '0 10px',
                              borderRadius: 12,
                              background: 'rgba(255,255,255,0.06)',
                              border: '1px solid rgba(255,255,255,0.1)',
                              color: '#cbd5e1',
                              fontSize: 12,
                              cursor: 'pointer'
                            }}
                          >
                            💬 Chat
                          </button>
                        )}
                      </div>

{/* Verse Lines */}
                      <div style={{
                        background: '#090a10',
                        borderRadius: 12,
                        padding: 14,
                        borderLeft: '3px solid #00ffcc',
                        marginBottom: 12,
                        lineHeight: 1.6,
                        fontSize: 15,
                        color: '#f8fafc',
                        whiteSpace: 'pre-wrap'
                      }}>
                        {verse.text || (verse.lines || []).join('\n')}
                      </div>

{/* Reaction Bar */}
                      <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        paddingTop: 4,
                        fontFamily: 'sans-serif'
                      }}>
                        <div style={{ display: 'flex', gap: 6 }}>
                          <button
                            onClick={(e) => handleVote(verse.id, 'fire', e)}
                            style={{
                              minHeight: 36,
                              padding: '0 10px',
                              borderRadius: 18,
                              background: hasUserVoted === 'fire' ? 'rgba(255, 0, 85, 0.25)' : '#1a1d30',
                              border: hasUserVoted === 'fire' ? '1px solid #ff0055' : '1px solid transparent',
                              color: '#e2e8f0',
                              fontSize: 13,
                              fontWeight: 700,
                              display: 'flex',
                              alignItems: 'center',
                              gap: 4,
                              cursor: 'pointer'
                            }}
                          >
                            🔥 {verse.reactions?.fire || 0}
                          </button>

<button
                            onClick={(e) => handleVote(verse.id, 'skull', e)}
                            style={{
                              minHeight: 36,
                              padding: '0 10px',
                              borderRadius: 18,
                              background: hasUserVoted === 'skull' ? 'rgba(168, 85, 247, 0.25)' : '#1a1d30',
                              border: hasUserVoted === 'skull' ? '1px solid #a855f7' : '1px solid transparent',
                              color: '#e2e8f0',
                              fontSize: 13,
                              fontWeight: 700,
                              display: 'flex',
                              alignItems: 'center',
                              gap: 4,
                              cursor: 'pointer'
                            }}
                          >
                            💀 {verse.reactions?.skull || 0}
                          </button>

<button
                            onClick={(e) => handleVote(verse.id, 'chill', e)}
                            style={{
                              minHeight: 36,
                              padding: '0 10px',
                              borderRadius: 18,
                              background: hasUserVoted === 'chill' ? 'rgba(0, 255, 204, 0.25)' : '#1a1d30',
                              border: hasUserVoted === 'chill' ? '1px solid #00ffcc' : '1px solid transparent',
                              color: '#e2e8f0',
                              fontSize: 13,
                              fontWeight: 700,
                              display: 'flex',
                              alignItems: 'center',
                              gap: 4,
                              cursor: 'pointer'
                            }}
                          >
                            🧊 {verse.reactions?.chill || 0}
                          </button>
                        </div>

<div style={{
                          fontSize: 13,
                          fontWeight: 800,
                          color: (verse.score || 0) > 0 ? '#ffd700' : '#64748b'
                        }}>
                          {verse.score || 0} pts
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}

{/* MAIN BODY: LEADERBOARD TAB */}
        {activeTab === 'leaderboard' && (
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', fontFamily: 'sans-serif' }}>
            <div style={{
              background: '#131524',
              borderRadius: 16,
              padding: 16,
              border: '1px solid rgba(255,215,0,0.2)',
              marginBottom: 16
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                <span style={{ fontSize: 28 }}>🏆</span>
                <div>
                  <h2 style={{ fontSize: 18, fontWeight: 900, margin: 0, color: '#ffd700' }}>CYPHER CROWN STANDINGS</h2>
                  <span style={{ fontSize: 12, color: '#94a3b8' }}>Ranked by heat points & battle reactions</span>
                </div>
              </div>

{(leaderboard || []).length === 0 ? (
                <div style={{ textAlign: 'center', padding: '30px 0', color: '#64748b', fontSize: 14 }}>
                  No rankings yet! Drop a verse and vote in the Cypher.
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {(leaderboard || []).map((entry, rank) => (
                    <div
                      key={entry._user?.id || rank}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        padding: 12,
                        borderRadius: 12,
                        background: rank === 0 ? 'rgba(255, 215, 0, 0.1)' : '#0c0d14',
                        border: rank === 0 ? '1px solid #ffd700' : '1px solid rgba(255,255,255,0.05)'
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                        <div style={{
                          width: 28,
                          height: 28,
                          borderRadius: 14,
                          background: rank === 0 ? '#ffd700' : rank === 1 ? '#e2e8f0' : rank === 2 ? '#cd7f32' : '#22263d',
                          color: rank < 3 ? '#0c0d14' : '#f1f5f9',
                          fontWeight: 900,
                          fontSize: 13,
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center'
                        }}>
                          {rank === 0 ? '👑' : rank + 1}
                        </div>
                        <div>
                          <button
                            onClick={() => entry._user?.handle && openProfile(entry._user.handle)}
                            style={{
                              background: 'none',
                              border: 'none',
                              color: '#f8fafc',
                              fontSize: 14,
                              fontWeight: 700,
                              padding: 0,
                              cursor: 'pointer',
                              textAlign: 'left'
                            }}
                          >
                            {entry._user?.displayName || 'Poet'}
                          </button>
                          <div style={{ fontSize: 11, color: '#64748b' }}>
                            {entry.verseCount} verse{entry.verseCount > 1 ? 's' : ''} dropped
                          </div>
                        </div>
                      </div>

<div style={{ textAlign: 'right' }}>
                        <div style={{ fontSize: 15, fontWeight: 900, color: '#ffd700' }}>
                          {entry.totalScore} pts
                        </div>
                        <div style={{ fontSize: 11, color: '#ff0055' }}>
                          🔥 {entry.fires} fires
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>