36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import type { GameView } from '../types'
|
|
|
|
export function GameOver({ view, onLeave }: { view: GameView; onLeave: () => void }) {
|
|
const winner = view.winnerSeat >= 0 ? view.players[view.winnerSeat] : null
|
|
const youWon = view.winnerSeat === view.youSeat
|
|
|
|
return (
|
|
<div className="gameover">
|
|
<div className="gameover-emoji" aria-hidden>
|
|
{winner ? (youWon ? '🎉' : '💀') : '🤝'}
|
|
</div>
|
|
<h1 className="gameover-title">
|
|
{winner ? (youWon ? 'You win!' : `${winner.name} wins!`) : "It's a tie!"}
|
|
</h1>
|
|
<div className="gameover-scores">
|
|
{[...view.players]
|
|
.sort((a, b) => b.trophies - a.trophies)
|
|
.map((p) => (
|
|
<div key={p.id} className={`score-line ${p.seat === view.youSeat ? 'is-you' : ''}`}>
|
|
<span className="score-name">
|
|
{p.name}
|
|
{p.seat === view.youSeat ? ' (you)' : ''}
|
|
</span>
|
|
<span className="score-trophies">
|
|
{'🏆'.repeat(p.trophies) || '—'} <strong>{p.trophies}</strong>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button className="btn btn-primary btn-big" onClick={onLeave}>
|
|
Back to the den
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|