✦

); const ScoreBar = ({ label, value, color }) => (

{label} {value ?? 0}/100

); const renderScenarioView = () => (

⚔️

The Rhetoric Ring

Sharpen Your Powers of Persuasion

{scenario?.opponent?.emoji || '🎓'}

{scenario?.opponent?.name || 'Unknown Opponent'}

{scenario?.opponent?.title || 'Opponent'}

"{scenario?.opponent?.desc || 'A formidable opponent.'}"

Your Objective

{scenario?.goal || 'Negotiate successfully.'}

Context

{scenario?.context || 'A formal negotiation setting.'}

Setting

{scenario?.setting || 'A formal office.'}

{isMultiplayer && (memberList || []).length > 1 && (

Fellow Scholars Present

{(memberList || []).map(m => (

openProfile && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', background: `${colors.navy}60`, borderRadius: 20, cursor: 'pointer', border: `1px solid ${colors.gold}30` }}>

{!m.avatarUrl && '👤'}

{m.displayName || 'Scholar'}

))}

)} {(appData?.history ?? []).length > 0 && (

📜 Past Encounters

{(appData?.history ?? []).slice(-3).reverse().map((h, i) => (

{h?._user?.displayName || 'Scholar'} vs {h?.scenario || 'Opponent'} {h?.outcome || 'Unknown'} — {h?.overall ?? 0}/100

))}

)}

); const renderDuelView = () => (

Verbal Duel

vs {scenario?.opponent?.name || 'Opponent'}

Turn {turnCount}/8 {turnCount >= 3 && ( )}

{(messages ?? []).map((msg, i) => { const isUser = msg?.role === 'user'; const isAnimating = animatingMessage === i; return (

{isUser ? (msg?.author || 'You') : (scenario?.opponent?.name || 'Opponent')}

{msg?.text || ''}

); })} {isThinking && (

{scenario?.opponent?.name || 'Opponent'}

composing a reply ✒️

)} {turnCount >= 7 && !isThinking && (

The negotiation draws to its natural close. Consider concluding to receive your assessment.

)}

{ e.preventDefault(); handleSubmit(); }} style={{ display: 'flex', gap: 10 }}> setUserInput(e.target.value)} placeholder="Present your argument..." disabled={isThinking} style={{ flex: 1, height: 48, fontSize: 16, padding: '0 16px', borderRadius: 12, border: `1px solid ${colors.gold}40`, background: `${colors.forest}40`, color: colors.parchment, fontFamily: fonts.serif, outline: 'none' }} />

); const renderReviewView = () => { const outcome = scores?.outcome || 'Under Review'; const isVictory = outcome === 'Victory'; const isDefeat = outcome === 'Defeat'; return (

{isVictory ? '🏆' : isDefeat ? '📕' : '⚖️'}

The Archivist's Review

A scholarly assessment of your rhetorical performance

{outcome}

{scores?.overall ?? 0} /100

Overall Score

Rhetorical Analysis

✦ Masterful Assertions

{(scores?.masterfulAssertions ?? ['Your case was presented.']).map((a, i) => (

✦ {a}

))}

✧ Fallen Logic

{(scores?.fallenLogic ?? ['Consider strengthening your evidence.']).map((a, i) => (

✧ {a}

))}

"{scores?.summary || 'A notable encounter worthy of the archives.'}"

{scores?.advice && (

📝 Counsel: {scores.advice}

)}

); }; const renderNewScenarioSheet = () => (

{ if (e.target === e.currentTarget) setShowNewScenario(false); }}>

Craft a New Scenario

Choose Your Opponent

{(PERSONAS || []).map((p, i) => { const isSelected = editScenario?.opponent?.name === p.name; return (

setEditScenario({ ...editScenario, opponent: p })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: 12, background: isSelected ? `${colors.navy}15` : 'transparent', border: `1px solid ${isSelected ? colors.gold : colors.brown + '30'}`, cursor: 'pointer', transition: 'all 0.2s' }}>

{p.emoji}

{p.name}

{p.title}

); })}

Your Objective

setEditScenario({ ...editScenario, goal: e.target.value })}
            placeholder="What do you wish to achieve?"
            style={{
              width: '100%', minHeight: 80, fontSize: 16, padding: 14, borderRadius: 12,
              border: `1px solid ${colors.brown}40`, background: 'rgba(255,255,255,0.6)',
              fontFamily: fonts.serif, color: colors.darkText, resize: 'vertical',
              outline: 'none', boxSizing: 'border-box'
            }}
          />
        </div>

<div style={{ marginBottom: 16 }}>
          <label style={{ fontFamily: fonts.serif, fontSize: 11, textTransform: 'uppercase', letterSpacing: '2px', color: colors.gold, fontWeight: 700, display: 'block', marginBottom: 8 }}>Context</label>
          <textarea
            value={editScenario?.context || ''}
            onChange={(e) => setEditScenario({ ...editScenario, context: e.target.value })}
            placeholder="Background details for this negotiation..."
            style={{
              width: '100%', minHeight: 80, fontSize: 16, padding: 14, borderRadius: 12,
              border: `1px solid ${colors.brown}40`, background: 'rgba(255,255,255,0.6)',
              fontFamily: fonts.serif, color: colors.darkText, resize: 'vertical',
              outline: 'none', boxSizing: 'border-box'
            }}
          />
        </div>

<div style={{ marginBottom: 20 }}>
          <label style={{ fontFamily: fonts.serif, fontSize: 11, textTransform: 'uppercase', letterSpacing: '2px', color: colors.gold, fontWeight: 700, display: 'block', marginBottom: 8 }}>Setting</label>
          <input
            value={editScenario?.setting || ''}
            onChange={(e) => setEditScenario({ ...editScenario, setting: e.target.value })}
            placeholder="Where does this take place?"
            style={{
              width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12,
              border: `1px solid ${colors.brown}40`, background: 'rgba(255,255,255,0.6)',
              fontFamily: fonts.serif, color: colors.darkText,
              outline: 'none', boxSizing: 'border-box'
            }}
          />
        </div>

<button
          onClick={saveNewScenario}
          onPointerDown={() => setPressedBtn('save')}
          onPointerUp={() => setPressedBtn(null)}
          onPointerLeave={() => setPressedBtn(null)}
          style={{
            width: '100%', minHeight: 52, borderRadius: 14,
            background: `linear-gradient(135deg, ${colors.burgundy}, ${colors.navy})`,
            color: colors.cream, border: `1px solid ${colors.gold}60`,
            fontFamily: fonts.display, fontSize: 17, fontWeight: 700, letterSpacing: '0.5px',
            cursor: 'pointer',
            opacity: pressedBtn === 'save' ? 0.8 : 1,
            transform: pressedBtn === 'save' ? 'scale(0.98)' : 'scale(1)',
            transition: 'all 0.1s',
            boxShadow: `0 4px 16px ${colors.shadow}`
          }}
        >
          Set the Stage ⚔️
        </button>
      </div>
    </div>
  );

return (
    <div style={{
      minHeight: '100dvh',
      display: 'flex',
      flexDirection: 'column',
      background: `linear-gradient(180deg, ${colors.bg}, #0f0f0a)`,
      paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)',
      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)',
      maxWidth: 480,
      margin: '0 auto',
      width: '100%',
      boxSizing: 'border-box',
      color: colors.parchment,
      fontFamily: fonts.serif
    }}>
      <style>{`
        @keyframes fadeSlideIn {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }
        input::placeholder, textarea::placeholder {
          color: #8B7355;
          font-style: italic;
        }
      `}</style>

{view === 'scenario' && renderScenarioView()}
      {view === 'duel' && renderDuelView()}
      {view === 'review' && renderReviewView()}

{view !== 'duel' && (
        <div style={{ flexShrink: 0, paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {view === 'scenario' && (
            <button
              onClick={startDuel}
              onPointerDown={() => setPressedBtn('start')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              style={{
                width: '100%', minHeight: 56, borderRadius: 14,
                background: `linear-gradient(135deg, ${colors.burgundy}, ${colors.gold})`,
                color: colors.cream, border: `1px solid ${colors.gold}`,
                fontFamily: fonts.display, fontSize: 18, fontWeight: 700, letterSpacing: '1px',
                cursor: 'pointer',
                opacity: pressedBtn === 'start' ? 0.85 : 1,
                transform: pressedBtn === 'start' ? 'scale(0.98)' : 'scale(1)',
                transition: 'all 0.15s',
                boxShadow: `0 6px 24px ${colors.burgundy}80`
              }}
            >
              ⚔️ Start Duel
            </button>
          )}
          {view === 'review' && (
            <button
              onClick={startDuel}
              onPointerDown={() => setPressedBtn('retry')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              style={{
                width: '100%', minHeight: 52, borderRadius: 14,
                background: `linear-gradient(135deg, ${colors.burgundy}, ${colors.gold})`,
                color: colors.cream, border: `1px solid ${colors.gold}`,
                fontFamily: fonts.display, fontSize: 17, fontWeight: 700, letterSpacing: '0.5px',
                cursor: 'pointer',
                opacity: pressedBtn === 'retry' ? 0.85 : 1,
                transform: pressedBtn === 'retry' ? 'scale(0.98)' : 'scale(1)',
                transition: 'all 0.15s',
                boxShadow: `0 4px 16px ${colors.burgundy}60`
              }}
            >
              🔄 Retry This Duel
            </button>
          )}
          <div style={{ display: 'flex', gap: 10 }}>
            <button
              onClick={() => { setEditScenario({ ...scenario }); setShowNewScenario(true); }}
              onPointerDown={() => setPressedBtn('new')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              style={{
                flex: 1, minHeight: 48, borderRadius: 12,
                background: `${colors.forest}60`, color: colors.parchment,
                border: `1px solid ${colors.gold}40`,
                fontFamily: fonts.serif, fontSize: 15, fontWeight: 600,
                cursor: 'pointer',
                opacity: pressedBtn === 'new' ? 0.7 : 1,
                transform: pressedBtn === 'new' ? 'scale(0.97)' : 'scale(1)',
                transition: 'all 0.1s'
              }}
            >
              ✏️ Edit Scenario
            </button>
            <button
              onClick={share}
              onPointerDown={() => setPressedBtn('share')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              style={{
                flex: 1, minHeight: 48, borderRadius: 12,
                background: `${colors.navy}60`, color: colors.parchment,
                border: `1px solid ${colors.gold}40`,
                fontFamily: fonts.serif, fontSize: 15, fontWeight: 600,
                cursor: 'pointer',
                opacity: pressedBtn === 'share' ? 0.7 : 1,
                transform: pressedBtn === 'share' ? 'scale(0.97)' : 'scale(1)',
                transition: 'all 0.1s'
              }}
            >
              📤 Share
            </button>
          </div>
        </div>
      )}

{showNewScenario && renderNewScenarioSheet()}
    </div>
  );
}
)}}</article></body></html>