File size: 5,797 Bytes
0e23a69 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | const formatMoney = (n) =>
n >= 1e6 ? `$${(n / 1e6).toFixed(2)}M`
: n >= 1e3 ? `$${(n / 1e3).toFixed(1)}K`
: `$${n?.toFixed(0) ?? 0}`
const OUTCOME_MAP = {
ipo: { ascii: '[IPO]', title: 'IPO_SUCCESS', cls: 'ipo' },
acquisition: { ascii: '[ACQ]', title: 'ACQUIRED', cls: 'acquisition' },
runway_exhausted: { ascii: '[DEAD]', title: 'BANKRUPTCY', cls: 'bankruptcy' },
finished_10: { ascii: '[DONE]', title: 'EPISODE_COMPLETE', cls: 'default' },
}
const DIVIDER = '================================================'
export default function EndScreen({ obs, onReplay }) {
if (!obs) return null
const { state } = obs
const reason = state?.done_reason ?? 'finished_10'
const { ascii, title, cls } = OUTCOME_MAP[reason] ?? OUTCOME_MAP['finished_10']
const history = state?.history ?? []
const roundsWon = history.filter(h => h.agent_won_vote).length
return (
<div className="end-overlay">
<div className="end-modal">
{/* ASCII banner */}
<div className="end-icon" style={{ fontSize: '1.5rem', fontWeight: 700, letterSpacing: '0.1em' }}>
{ascii}
</div>
<div className="end-title">{title}</div>
<span className={`end-reason ${cls}`}>{reason.replace(/_/g, '_')}</span>
<div style={{ color: 'var(--muted)', fontSize: '0.6rem', marginBottom: '0.875rem', letterSpacing: '0.05em' }}>
{DIVIDER}
</div>
<div className="end-stats">
<div className="end-stat">
<div className="es-label">PROFIT_SCORE</div>
<div className="es-value" style={{ color: 'var(--primary)', textShadow: 'var(--glow)' }}>
{(state?.profitability_score ?? 0).toFixed(1)}
</div>
</div>
<div className="end-stat">
<div className="es-label">REVENUE</div>
<div className="es-value">{formatMoney(state?.revenue ?? 0)}</div>
</div>
<div className="end-stat">
<div className="es-label">RUNWAY</div>
<div className="es-value">{(state?.runway_months ?? 0).toFixed(1)}mo</div>
</div>
<div className="end-stat">
<div className="es-label">ROUNDS_WON</div>
<div className="es-value" style={{ color: 'var(--primary)', textShadow: 'var(--glow)' }}>
{roundsWon}/{history.length}
</div>
</div>
<div className="end-stat">
<div className="es-label">MORALE</div>
<div className="es-value">{Math.round((state?.team_morale ?? 0) * 100)}%</div>
</div>
<div className="end-stat">
<div className="es-label">REG_RISK</div>
<div className="es-value">{Math.round((state?.regulatory_risk ?? 0) * 100)}%</div>
</div>
</div>
{history.length > 0 && (
<div style={{ marginBottom: '1rem', maxHeight: '180px', overflowY: 'auto' }}>
<div style={{
fontSize: '0.58rem', textTransform: 'uppercase', letterSpacing: '0.1em',
color: 'var(--text-secondary)', marginBottom: '0.4rem'
}}>
// round_log
</div>
{history.map((h) => (
<div key={h.round} style={{
display: 'flex', justifyContent: 'space-between',
fontSize: '0.65rem', color: 'var(--text-secondary)',
padding: '0.2rem 0',
borderBottom: '1px solid var(--border-dim)'
}}>
<span style={{ color: 'var(--secondary)', textShadow: 'var(--amber-glow)', minWidth: '28px' }}>
R{String(h.round).padStart(2,'0')}
</span>
<span style={{
flex: 1, marginLeft: '0.6rem',
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
textTransform: 'uppercase', letterSpacing: '0.03em',
fontSize: '0.6rem'
}}>
{(h.event_title ?? '').split('—').slice(-1)[0]?.trim()}
</span>
<span style={{
marginLeft: '0.5rem', flexShrink: 0, fontSize: '0.6rem',
color: h.agent_won_vote ? 'var(--primary)' : 'var(--error)',
textShadow: h.agent_won_vote ? 'var(--glow-sm)' : 'none'
}}>
{h.agent_won_vote ? '[OK]' : '[X]'} {(h.agent_decision ?? '').replace(/_/g, '_')}
</span>
</div>
))}
</div>
)}
<button className="replay-btn" onClick={onReplay}>
↺ RUN_NEW_EPISODE
</button>
</div>
</div>
)
}
|