first prototype
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid var(--gold);
|
||||
border-radius: var(--radius);
|
||||
background: rgb(26 22 64 / 95%);
|
||||
box-shadow: 0 0 24px rgb(255 209 102 / 20%);
|
||||
}
|
||||
|
||||
.question {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.option {
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
min-height: 1.2em;
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { Observation } from '../../api/types'
|
||||
import { Button } from '../../components/Button/Button'
|
||||
import { legalBids } from '../../util/cards'
|
||||
import styles from './BidPanel.module.css'
|
||||
|
||||
interface BidPanelProps {
|
||||
observation: Observation
|
||||
onBid: (value: number) => void
|
||||
}
|
||||
|
||||
export function BidPanel({ observation, onBid }: BidPanelProps) {
|
||||
const allowed = legalBids(observation.legal_actions)
|
||||
const options = Array.from({ length: observation.round_number + 1 }, (_, value) => value)
|
||||
const forbidden = options.filter((value) => !allowed.has(value))
|
||||
const knownBids = observation.bids.filter((bid): bid is number => bid !== null)
|
||||
const sum = knownBids.reduce((total, bid) => total + bid, 0)
|
||||
|
||||
return (
|
||||
<div className={styles.panel}>
|
||||
<p className={styles.question}>How many tricks will you take?</p>
|
||||
<div className={styles.options}>
|
||||
{options.map((value) => (
|
||||
<Button
|
||||
key={value}
|
||||
variant={allowed.has(value) ? 'secondary' : 'ghost'}
|
||||
className={styles.option}
|
||||
disabled={!allowed.has(value)}
|
||||
onClick={() => onBid(value)}
|
||||
>
|
||||
{value}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<p className={styles.hint}>
|
||||
{!observation.options.hidden_bids &&
|
||||
`Bids so far: ${sum} for ${observation.round_number} trick${observation.round_number > 1 ? 's' : ''}. `}
|
||||
{forbidden.length > 0 && `Not-equal rule: you may not bid ${forbidden.join(', ')}.`}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
margin: 0;
|
||||
color: var(--gold);
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ranking {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.winner {
|
||||
border: 1px solid var(--gold);
|
||||
background: rgb(255 209 102 / 10%);
|
||||
}
|
||||
|
||||
.place {
|
||||
width: 24px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import type { LobbyPlayer, Observation } from '../../api/types'
|
||||
import { Button } from '../../components/Button/Button'
|
||||
import styles from './GameOver.module.css'
|
||||
|
||||
interface GameOverProps {
|
||||
observation: Observation
|
||||
players: LobbyPlayer[]
|
||||
isHost: boolean
|
||||
onShowScores: () => void
|
||||
onBackToLobby: () => void
|
||||
onLeave: () => void
|
||||
}
|
||||
|
||||
export function GameOver({ observation, players, isHost, onShowScores, onBackToLobby, onLeave }: GameOverProps) {
|
||||
const ranking = observation.scores
|
||||
.map((score, seat) => ({ seat, score }))
|
||||
.sort((a, b) => b.score - a.score)
|
||||
const winners = new Set(observation.winners)
|
||||
const youWon = winners.has(observation.player)
|
||||
|
||||
return (
|
||||
<div className={styles.content}>
|
||||
<p className={styles.headline}>{youWon ? 'You win! ✦' : `${players[ranking[0].seat]?.name ?? 'Someone'} wins!`}</p>
|
||||
<ol className={styles.ranking}>
|
||||
{ranking.map(({ seat, score }, index) => (
|
||||
<li key={seat} className={`${styles.row} ${winners.has(seat) ? styles.winner : ''}`}>
|
||||
<span className={styles.place}>{index + 1}.</span>
|
||||
<span className={styles.name}>
|
||||
{players[seat]?.name ?? `Player ${seat + 1}`}
|
||||
{seat === observation.player && <span className={styles.muted}> (you)</span>}
|
||||
</span>
|
||||
<span className={styles.score}>{score}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className={styles.actions}>
|
||||
<Button variant="ghost" onClick={onShowScores}>
|
||||
Scoreboard
|
||||
</Button>
|
||||
<Button variant="danger" onClick={onLeave}>
|
||||
Leave
|
||||
</Button>
|
||||
{isHost ? (
|
||||
<Button onClick={onBackToLobby}>Back to lobby</Button>
|
||||
) : (
|
||||
<span className={styles.muted}>The host can start a new game.</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: min(1200px, 100%);
|
||||
min-height: 100dvh;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.topBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.roundInfo {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.round {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code {
|
||||
color: var(--text-muted);
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.topActions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.opponents {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.table {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
min-height: 250px;
|
||||
padding: 24px;
|
||||
border: 1px solid rgb(255 255 255 / 6%);
|
||||
border-radius: 28px;
|
||||
background:
|
||||
radial-gradient(ellipse at center, rgb(47 164 108 / 18%), transparent 70%),
|
||||
rgb(10 8 26 / 55%);
|
||||
box-shadow: inset 0 0 60px rgb(0 0 0 / 40%);
|
||||
}
|
||||
|
||||
.trump {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
max-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.noTrump {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 72px;
|
||||
aspect-ratio: 5 / 7.4;
|
||||
border: 2px dashed rgb(255 255 255 / 15%);
|
||||
border-radius: 9px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.trumpLabel {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: var(--suit-red);
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: var(--suit-yellow);
|
||||
}
|
||||
|
||||
.green {
|
||||
color: var(--suit-green);
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: var(--suit-blue);
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statusActive {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.me {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.myRow {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.confirmText {
|
||||
margin: 0 0 16px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.confirmActions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.table {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.trump {
|
||||
position: static;
|
||||
flex-direction: row;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.myRow {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import { useState } from 'react'
|
||||
import type { GameView, Lobby, RoundResult, TrickResult } from '../../api/types'
|
||||
import type { WizardActions } from '../../api/useWizard'
|
||||
import { Button } from '../../components/Button/Button'
|
||||
import { Modal } from '../../components/Modal/Modal'
|
||||
import { PlayingCard } from '../../components/PlayingCard/PlayingCard'
|
||||
import { SUIT_NAMES } from '../../util/cards'
|
||||
import { BidPanel } from './BidPanel'
|
||||
import { GameOver } from './GameOver'
|
||||
import styles from './GameScreen.module.css'
|
||||
import { Hand } from './Hand'
|
||||
import { PlayerSeat } from './PlayerSeat'
|
||||
import { RoundSummary } from './RoundSummary'
|
||||
import { Scoreboard } from './Scoreboard'
|
||||
import { TrickArea } from './TrickArea'
|
||||
import { TrumpPicker } from './TrumpPicker'
|
||||
|
||||
interface GameScreenProps {
|
||||
lobby: Lobby
|
||||
game: GameView
|
||||
playerId: string
|
||||
completedTrick: TrickResult | null
|
||||
completedRound: RoundResult | null
|
||||
actions: WizardActions
|
||||
}
|
||||
|
||||
export function GameScreen({ lobby, game, playerId, completedTrick, completedRound, actions }: GameScreenProps) {
|
||||
const [showScores, setShowScores] = useState(false)
|
||||
const [confirmLeave, setConfirmLeave] = useState(false)
|
||||
|
||||
const obs = game.observation
|
||||
const you = game.you ?? obs.player
|
||||
const players = lobby.players
|
||||
const isHost = lobby.host_id === playerId
|
||||
const myTurn = obs.current_player === you && obs.phase !== 'finished'
|
||||
const name = (seat: number | null) => (seat === null ? '' : (players[seat]?.name ?? `Player ${seat + 1}`))
|
||||
// Opponents in play order, starting with the player after you.
|
||||
const opponents = Array.from({ length: obs.num_players - 1 }, (_, index) => (you + 1 + index) % obs.num_players)
|
||||
|
||||
let status: string
|
||||
switch (obs.phase) {
|
||||
case 'trump_selection':
|
||||
status = myTurn ? 'Choose the trump suit' : `${name(obs.current_player)} is choosing the trump suit…`
|
||||
break
|
||||
case 'bidding':
|
||||
status = myTurn ? 'Your turn to bid' : `Waiting for ${name(obs.current_player)} to bid…`
|
||||
break
|
||||
case 'playing':
|
||||
status = myTurn ? 'Your turn — play a card' : `${name(obs.current_player)} is playing…`
|
||||
break
|
||||
default:
|
||||
status = 'Game over'
|
||||
}
|
||||
|
||||
let trumpText = 'No trump this round'
|
||||
if (obs.trump_suit) trumpText = `Trump: ${SUIT_NAMES[obs.trump_suit]}`
|
||||
else if (obs.phase === 'trump_selection') trumpText = 'Wizard turned up — dealer chooses'
|
||||
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<header className={styles.topBar}>
|
||||
<div className={styles.roundInfo}>
|
||||
<span className={styles.round}>
|
||||
Round {obs.round_number}
|
||||
<span className={styles.muted}> / {obs.total_rounds}</span>
|
||||
</span>
|
||||
<span className={styles.code}>Lobby {lobby.code}</span>
|
||||
</div>
|
||||
<div className={styles.topActions}>
|
||||
<Button size="sm" variant="secondary" onClick={() => setShowScores(true)}>
|
||||
Scoreboard
|
||||
</Button>
|
||||
<Button size="sm" variant="danger" onClick={() => setConfirmLeave(true)}>
|
||||
Leave
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className={styles.opponents}>
|
||||
{opponents.map((seat) => (
|
||||
<PlayerSeat key={seat} observation={obs} seat={seat} player={players[seat]} />
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className={styles.table}>
|
||||
<div className={styles.trump}>
|
||||
{obs.trump_card ? <PlayingCard card={obs.trump_card} size="md" /> : <div className={styles.noTrump}>—</div>}
|
||||
<span className={`${styles.trumpLabel} ${obs.trump_suit ? styles[obs.trump_suit] : ''}`}>{trumpText}</span>
|
||||
</div>
|
||||
<TrickArea observation={obs} players={players} completedTrick={completedTrick} />
|
||||
</section>
|
||||
|
||||
<p className={`${styles.status} ${myTurn ? styles.statusActive : ''}`} aria-live="polite">
|
||||
{status}
|
||||
</p>
|
||||
|
||||
<section className={styles.me}>
|
||||
{myTurn && obs.phase === 'bidding' && <BidPanel observation={obs} onBid={(value) => actions.play({ type: 'bid', value })} />}
|
||||
{myTurn && obs.phase === 'trump_selection' && (
|
||||
<TrumpPicker onChoose={(suit) => actions.play({ type: 'trump', suit })} />
|
||||
)}
|
||||
<div className={styles.myRow}>
|
||||
<PlayerSeat observation={obs} seat={you} player={players[you]} isYou showHand={false} />
|
||||
<Hand observation={obs} onPlay={(card) => actions.play({ type: 'play', card })} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{completedRound && obs.phase !== 'finished' && <RoundSummary result={completedRound} players={players} />}
|
||||
|
||||
{showScores && (
|
||||
<Modal title="Scoreboard" wide onClose={() => setShowScores(false)}>
|
||||
<Scoreboard observation={obs} players={players} />
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{obs.phase === 'finished' && !showScores && (
|
||||
<Modal title="Game over">
|
||||
<GameOver
|
||||
observation={obs}
|
||||
players={players}
|
||||
isHost={isHost}
|
||||
onShowScores={() => setShowScores(true)}
|
||||
onBackToLobby={actions.returnToLobby}
|
||||
onLeave={actions.leaveLobby}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{confirmLeave && (
|
||||
<Modal title="Leave the game?" onClose={() => setConfirmLeave(false)}>
|
||||
<p className={styles.confirmText}>
|
||||
{obs.phase === 'finished'
|
||||
? 'You will return to the start page.'
|
||||
: 'An AI player will take over your seat for the rest of the game.'}
|
||||
</p>
|
||||
<div className={styles.confirmActions}>
|
||||
<Button variant="secondary" onClick={() => setConfirmLeave(false)}>
|
||||
Stay
|
||||
</Button>
|
||||
<Button variant="danger" onClick={actions.leaveLobby}>
|
||||
Leave game
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.hand {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.slot {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Overlap the cards on narrow screens so larger hands still fit. */
|
||||
@media (max-width: 720px) {
|
||||
.hand {
|
||||
gap: 4px 0;
|
||||
}
|
||||
|
||||
.slot + .slot {
|
||||
margin-left: -26px;
|
||||
}
|
||||
|
||||
.slot:hover {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { Observation } from '../../api/types'
|
||||
import { PlayingCard } from '../../components/PlayingCard/PlayingCard'
|
||||
import { legalCardIds, sortHand } from '../../util/cards'
|
||||
import styles from './Hand.module.css'
|
||||
|
||||
interface HandProps {
|
||||
observation: Observation
|
||||
onPlay: (cardId: number) => void
|
||||
}
|
||||
|
||||
export function Hand({ observation, onPlay }: HandProps) {
|
||||
const canPlay = observation.phase === 'playing' && observation.current_player === observation.player
|
||||
const legal = legalCardIds(observation.legal_actions)
|
||||
const cards = sortHand(observation.hand, observation.trump_suit)
|
||||
|
||||
return (
|
||||
<div className={styles.hand} data-count={cards.length}>
|
||||
{cards.map((card) => (
|
||||
<div key={card.id} className={styles.slot}>
|
||||
<PlayingCard
|
||||
card={card}
|
||||
size="lg"
|
||||
onClick={canPlay ? () => onPlay(card.id) : undefined}
|
||||
dimmed={canPlay && !legal.has(card.id)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
.seat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 150px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgb(26 22 64 / 85%);
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgb(255 209 102 / 35%);
|
||||
}
|
||||
|
||||
.you {
|
||||
background: rgb(35 29 82 / 90%);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.chip {
|
||||
flex: none;
|
||||
padding: 1px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgb(255 209 102 / 18%);
|
||||
color: var(--gold);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ai {
|
||||
background: rgb(139 108 255 / 22%);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.offline {
|
||||
background: rgb(255 107 122 / 15%);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tricks {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.onTarget {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.over {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.hand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.hand > * + * {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-left: 6px !important;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import type { LobbyPlayer, Observation } from '../../api/types'
|
||||
import { CardBack } from '../../components/PlayingCard/PlayingCard'
|
||||
import styles from './PlayerSeat.module.css'
|
||||
|
||||
const MAX_BACKS = 8
|
||||
|
||||
interface PlayerSeatProps {
|
||||
observation: Observation
|
||||
seat: number
|
||||
player: LobbyPlayer | undefined
|
||||
isYou?: boolean
|
||||
showHand?: boolean
|
||||
}
|
||||
|
||||
export function PlayerSeat({ observation, seat, player, isYou, showHand = true }: PlayerSeatProps) {
|
||||
const isTurn = observation.current_player === seat && observation.phase !== 'finished'
|
||||
const bid = observation.bids[seat]
|
||||
const tricks = observation.tricks_won[seat]
|
||||
const handSize = observation.hand_sizes[seat]
|
||||
|
||||
let bidText = '–'
|
||||
if (bid !== null) bidText = String(bid)
|
||||
else if (observation.has_bid[seat]) bidText = '?'
|
||||
|
||||
const onTarget = bid !== null && observation.phase === 'playing' && tricks === bid
|
||||
const over = bid !== null && tricks > bid
|
||||
|
||||
return (
|
||||
<div className={`${styles.seat} ${isTurn ? styles.active : ''} ${isYou ? styles.you : ''}`}>
|
||||
<div className={styles.header}>
|
||||
<span className={styles.name} title={player?.name}>
|
||||
{player?.name ?? `Player ${seat + 1}`}
|
||||
{isYou && <span className={styles.muted}> (you)</span>}
|
||||
</span>
|
||||
{player?.is_ai && <span className={`${styles.chip} ${styles.ai}`}>AI</span>}
|
||||
{observation.dealer === seat && <span className={styles.chip} title="Dealer">D</span>}
|
||||
{player && !player.connected && <span className={`${styles.chip} ${styles.offline}`}>offline</span>}
|
||||
</div>
|
||||
|
||||
<div className={styles.stats}>
|
||||
<div className={styles.stat}>
|
||||
<span className={styles.label}>Score</span>
|
||||
<span className={styles.score}>{observation.scores[seat]}</span>
|
||||
</div>
|
||||
<div className={styles.stat}>
|
||||
<span className={styles.label}>Tricks / Bid</span>
|
||||
<span className={`${styles.tricks} ${onTarget ? styles.onTarget : ''} ${over ? styles.over : ''}`}>
|
||||
{tricks} / {bidText}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showHand && (
|
||||
<div className={styles.hand} aria-label={`${handSize} cards in hand`}>
|
||||
{Array.from({ length: Math.min(handSize, MAX_BACKS) }, (_, index) => (
|
||||
<CardBack key={index} size="sm" />
|
||||
))}
|
||||
{handSize > MAX_BACKS && <span className={styles.more}>+{handSize - MAX_BACKS}</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
.summary {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
right: 16px;
|
||||
z-index: 30;
|
||||
width: 240px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgb(26 22 64 / 96%);
|
||||
box-shadow: var(--shadow);
|
||||
animation: pop 0.25s ease-out;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.plus {
|
||||
width: 44px;
|
||||
color: var(--success);
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.minus {
|
||||
width: 44px;
|
||||
color: var(--danger);
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.summary {
|
||||
top: auto;
|
||||
right: 50%;
|
||||
bottom: 16px;
|
||||
transform: translateX(50%);
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { LobbyPlayer, RoundResult } from '../../api/types'
|
||||
import styles from './RoundSummary.module.css'
|
||||
|
||||
interface RoundSummaryProps {
|
||||
result: RoundResult
|
||||
players: LobbyPlayer[]
|
||||
}
|
||||
|
||||
export function RoundSummary({ result, players }: RoundSummaryProps) {
|
||||
return (
|
||||
<div className={styles.summary} role="status">
|
||||
<p className={styles.title}>Round {result.round_number} complete</p>
|
||||
<ul className={styles.list}>
|
||||
{result.score_changes.map((change, seat) => (
|
||||
<li key={seat} className={styles.row}>
|
||||
<span className={styles.name}>{players[seat]?.name ?? `Player ${seat + 1}`}</span>
|
||||
<span className={styles.detail}>
|
||||
{result.tricks[seat]}/{result.bids[seat]}
|
||||
</span>
|
||||
<span className={change >= 0 ? styles.plus : styles.minus}>{change >= 0 ? `+${change}` : change}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
.wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.round {
|
||||
width: 60px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.me {
|
||||
background: rgb(139 108 255 / 10%);
|
||||
}
|
||||
|
||||
.table th.me {
|
||||
color: var(--text);
|
||||
background: #262057;
|
||||
}
|
||||
|
||||
.total {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.change {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.minus {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin-left: 6px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.current td {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.legend {
|
||||
margin: 10px 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import type { LobbyPlayer, Observation } from '../../api/types'
|
||||
import styles from './Scoreboard.module.css'
|
||||
|
||||
interface ScoreboardProps {
|
||||
observation: Observation
|
||||
players: LobbyPlayer[]
|
||||
}
|
||||
|
||||
/** The "block of truth": bids, tricks and scores of every round. */
|
||||
export function Scoreboard({ observation, players }: ScoreboardProps) {
|
||||
const seats = Array.from({ length: observation.num_players }, (_, seat) => seat)
|
||||
const inProgress = observation.phase !== 'finished'
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={styles.round}>Round</th>
|
||||
{seats.map((seat) => (
|
||||
<th key={seat} className={seat === observation.player ? styles.me : ''}>
|
||||
{players[seat]?.name ?? `Player ${seat + 1}`}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{observation.round_history.map((result) => (
|
||||
<tr key={result.round_number}>
|
||||
<td className={styles.round}>{result.round_number}</td>
|
||||
{seats.map((seat) => {
|
||||
const change = result.score_changes[seat]
|
||||
return (
|
||||
<td key={seat} className={seat === observation.player ? styles.me : ''}>
|
||||
<span className={styles.total}>{result.scores[seat]}</span>
|
||||
<span className={`${styles.change} ${change >= 0 ? styles.plus : styles.minus}`}>
|
||||
{change >= 0 ? `+${change}` : change}
|
||||
</span>
|
||||
<span className={styles.detail}>
|
||||
{result.tricks[seat]}/{result.bids[seat]}
|
||||
</span>
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
{inProgress && (
|
||||
<tr className={styles.current}>
|
||||
<td className={styles.round}>{observation.round_number}</td>
|
||||
{seats.map((seat) => (
|
||||
<td key={seat} className={seat === observation.player ? styles.me : ''}>
|
||||
<span className={styles.detail}>
|
||||
{observation.tricks_won[seat]}/
|
||||
{observation.bids[seat] ?? (observation.has_bid[seat] ? '?' : '–')}
|
||||
</span>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<p className={styles.legend}>Cells show total score, change and tricks/bid.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
.area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: 160px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.slot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.enter {
|
||||
animation: deal-in 0.25s ease-out;
|
||||
}
|
||||
|
||||
.owner {
|
||||
max-width: 96px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.winner {
|
||||
color: var(--gold);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 88px;
|
||||
aspect-ratio: 5 / 7.4;
|
||||
border: 2px dashed rgb(255 255 255 / 12%);
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
min-height: 1.4em;
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes deal-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(24px) scale(0.9);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { LobbyPlayer, Observation, PlayedCard, TrickResult } from '../../api/types'
|
||||
import { PlayingCard } from '../../components/PlayingCard/PlayingCard'
|
||||
import styles from './TrickArea.module.css'
|
||||
|
||||
interface TrickAreaProps {
|
||||
observation: Observation
|
||||
players: LobbyPlayer[]
|
||||
completedTrick: TrickResult | null
|
||||
}
|
||||
|
||||
export function TrickArea({ observation, players, completedTrick }: TrickAreaProps) {
|
||||
const current = observation.current_trick
|
||||
// Right after a trick is complete the table is already empty; keep showing
|
||||
// the finished trick for a moment so everyone sees who won it.
|
||||
const showCompleted = current.length === 0 && completedTrick !== null
|
||||
const cards: PlayedCard[] = showCompleted ? completedTrick.cards : current
|
||||
const winner = showCompleted ? completedTrick.winner : null
|
||||
const name = (seat: number) => players[seat]?.name ?? `Player ${seat + 1}`
|
||||
|
||||
let caption = ''
|
||||
if (showCompleted) caption = `${name(completedTrick.winner)} wins the trick`
|
||||
else if (observation.phase === 'playing' && current.length === 0)
|
||||
caption = `Trick ${observation.trick_number} of ${observation.round_number}`
|
||||
|
||||
return (
|
||||
<div className={styles.area}>
|
||||
<div className={styles.cards}>
|
||||
{cards.map((played, index) => (
|
||||
<div
|
||||
key={played.card.id}
|
||||
className={`${styles.slot} ${showCompleted ? '' : styles.enter}`}
|
||||
style={{ zIndex: index }}
|
||||
>
|
||||
<PlayingCard card={played.card} size="lg" highlighted={played.player === winner} />
|
||||
<span className={`${styles.owner} ${played.player === winner ? styles.winner : ''}`}>
|
||||
{name(played.player)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{cards.length === 0 && <div className={styles.placeholder} />}
|
||||
</div>
|
||||
<p className={styles.caption}>{caption}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid var(--gold);
|
||||
border-radius: var(--radius);
|
||||
background: rgb(26 22 64 / 95%);
|
||||
}
|
||||
|
||||
.question {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.suits {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.suit {
|
||||
min-width: 88px;
|
||||
padding: 10px 14px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, filter 0.15s;
|
||||
}
|
||||
|
||||
.suit:hover {
|
||||
filter: brightness(1.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.red {
|
||||
background: var(--suit-red);
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: var(--suit-yellow);
|
||||
color: #2b2200;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: var(--suit-green);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: var(--suit-blue);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { Suit } from '../../api/types'
|
||||
import { SUIT_NAMES, SUITS } from '../../util/cards'
|
||||
import styles from './TrumpPicker.module.css'
|
||||
|
||||
interface TrumpPickerProps {
|
||||
onChoose: (suit: Suit) => void
|
||||
}
|
||||
|
||||
export function TrumpPicker({ onChoose }: TrumpPickerProps) {
|
||||
return (
|
||||
<div className={styles.panel}>
|
||||
<p className={styles.question}>A wizard was turned up — choose the trump suit.</p>
|
||||
<div className={styles.suits}>
|
||||
{SUITS.map((suit) => (
|
||||
<button key={suit} type="button" className={`${styles.suit} ${styles[suit]}`} onClick={() => onChoose(suit)}>
|
||||
{SUIT_NAMES[suit]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
min-height: 100dvh;
|
||||
padding: 48px 16px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: clamp(48px, 10vw, 84px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
background: linear-gradient(180deg, #fff, #c9b8ff);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.star {
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 24px rgb(255 209 102 / 60%);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
max-width: 440px;
|
||||
margin: 8px auto 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: min(400px, 100%);
|
||||
padding: 24px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
background: rgb(26 22 64 / 80%);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 11px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-sunken);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgb(139 108 255 / 25%);
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 8px 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.divider::before,
|
||||
.divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.joinRow {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: ui-monospace, monospace;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import type { WizardActions } from '../../api/useWizard'
|
||||
import { Button } from '../../components/Button/Button'
|
||||
import styles from './HomeScreen.module.css'
|
||||
|
||||
const NAME_KEY = 'wizard.name'
|
||||
const MAX_NAME_LENGTH = 20
|
||||
|
||||
function initialName(): string {
|
||||
try {
|
||||
return localStorage.getItem(NAME_KEY) ?? ''
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
function initialCode(): string {
|
||||
return new URLSearchParams(window.location.search).get('lobby')?.toUpperCase() ?? ''
|
||||
}
|
||||
|
||||
interface HomeScreenProps {
|
||||
connected: boolean
|
||||
actions: WizardActions
|
||||
}
|
||||
|
||||
export function HomeScreen({ connected, actions }: HomeScreenProps) {
|
||||
const [name, setName] = useState(initialName)
|
||||
const [code, setCode] = useState(initialCode)
|
||||
const trimmedName = name.trim()
|
||||
const trimmedCode = code.trim()
|
||||
|
||||
const rememberName = () => {
|
||||
try {
|
||||
localStorage.setItem(NAME_KEY, trimmedName)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
const create = () => {
|
||||
rememberName()
|
||||
actions.createLobby(trimmedName)
|
||||
}
|
||||
|
||||
const join = (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
rememberName()
|
||||
actions.joinLobby(trimmedCode, trimmedName)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<section className={styles.hero}>
|
||||
<h1 className={styles.title}>
|
||||
<span className={styles.star}>✦</span> Wizard
|
||||
</h1>
|
||||
<p className={styles.subtitle}>
|
||||
Predict your tricks exactly — play the classic card game with friends or AI wizards.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.panel}>
|
||||
<label className={styles.label} htmlFor="player-name">
|
||||
Your name
|
||||
</label>
|
||||
<input
|
||||
id="player-name"
|
||||
className={styles.input}
|
||||
value={name}
|
||||
maxLength={MAX_NAME_LENGTH}
|
||||
placeholder="e.g. Merlin"
|
||||
autoComplete="nickname"
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
/>
|
||||
|
||||
<Button size="lg" className={styles.full} disabled={!connected || !trimmedName} onClick={create}>
|
||||
Create lobby
|
||||
</Button>
|
||||
|
||||
<div className={styles.divider}>
|
||||
<span>or join a lobby</span>
|
||||
</div>
|
||||
|
||||
<form className={styles.joinRow} onSubmit={join}>
|
||||
<input
|
||||
className={`${styles.input} ${styles.code}`}
|
||||
value={code}
|
||||
maxLength={12}
|
||||
placeholder="LOBBY CODE"
|
||||
aria-label="Lobby code"
|
||||
onChange={(event) => setCode(event.target.value.toUpperCase())}
|
||||
/>
|
||||
<Button type="submit" variant="secondary" disabled={!connected || !trimmedName || trimmedCode.length < 4}>
|
||||
Join
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<footer className={styles.footer}>3–6 players · 60 cards · 4 wizards · 4 jesters</footer>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: min(640px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 48px 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 20px 24px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
background: rgb(26 22 64 / 80%);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.codeRow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 6px 0 12px;
|
||||
}
|
||||
|
||||
.code {
|
||||
padding: 8px 20px;
|
||||
border: 1px dashed var(--accent);
|
||||
border-radius: 12px;
|
||||
background: var(--bg-sunken);
|
||||
color: var(--gold);
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: clamp(32px, 8vw, 48px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.25em;
|
||||
text-indent: 0.25em;
|
||||
}
|
||||
|
||||
.copyRow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 12px 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin: 0 0 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.sectionHeader .heading {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.players {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.player {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 48px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.empty {
|
||||
border: 1px dashed var(--border);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.avatar[data-ai='true'] {
|
||||
background: linear-gradient(135deg, #3b1f9e, #8b6cff);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.empty .avatar {
|
||||
background: var(--bg-sunken);
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.you {
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgb(255 209 102 / 15%);
|
||||
color: var(--gold);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.aiBadge {
|
||||
background: rgb(139 108 255 / 20%);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.offline {
|
||||
background: rgb(255 107 122 / 15%);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin: 12px 0 0;
|
||||
color: var(--gold);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 3px;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.option input:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.option span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.option small {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.waiting {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { useState } from 'react'
|
||||
import type { Lobby } from '../../api/types'
|
||||
import type { WizardActions } from '../../api/useWizard'
|
||||
import { Button } from '../../components/Button/Button'
|
||||
import styles from './LobbyScreen.module.css'
|
||||
|
||||
interface LobbyScreenProps {
|
||||
lobby: Lobby
|
||||
playerId: string
|
||||
actions: WizardActions
|
||||
}
|
||||
|
||||
function inviteLink(code: string): string {
|
||||
const url = new URL(window.location.href)
|
||||
url.search = `?lobby=${code}`
|
||||
url.hash = ''
|
||||
return url.toString()
|
||||
}
|
||||
|
||||
export function LobbyScreen({ lobby, playerId, actions }: LobbyScreenProps) {
|
||||
const [copied, setCopied] = useState<'code' | 'link' | null>(null)
|
||||
const isHost = lobby.host_id === playerId
|
||||
const isFull = lobby.players.length >= lobby.max_players
|
||||
const missing = Math.max(0, lobby.min_players - lobby.players.length)
|
||||
|
||||
const copy = async (text: string, what: 'code' | 'link') => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
setCopied(what)
|
||||
setTimeout(() => setCopied(null), 1500)
|
||||
} catch {
|
||||
// Clipboard not available (e.g. insecure context): the code is visible anyway.
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<section className={styles.card}>
|
||||
<p className={styles.eyebrow}>Lobby code</p>
|
||||
<div className={styles.codeRow}>
|
||||
<span className={styles.code}>{lobby.code}</span>
|
||||
</div>
|
||||
<div className={styles.copyRow}>
|
||||
<Button size="sm" variant="secondary" onClick={() => copy(lobby.code, 'code')}>
|
||||
{copied === 'code' ? 'Copied!' : 'Copy code'}
|
||||
</Button>
|
||||
<Button size="sm" variant="secondary" onClick={() => copy(inviteLink(lobby.code), 'link')}>
|
||||
{copied === 'link' ? 'Copied!' : 'Copy invite link'}
|
||||
</Button>
|
||||
</div>
|
||||
<p className={styles.hint}>Share the code so your friends can join this lobby.</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.card}>
|
||||
<header className={styles.sectionHeader}>
|
||||
<h2 className={styles.heading}>
|
||||
Players <span className={styles.count}>{lobby.players.length}/{lobby.max_players}</span>
|
||||
</h2>
|
||||
{isHost && (
|
||||
<Button size="sm" variant="secondary" disabled={isFull} onClick={actions.addAI}>
|
||||
+ Add AI player
|
||||
</Button>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<ul className={styles.players}>
|
||||
{lobby.players.map((player) => (
|
||||
<li key={player.id} className={styles.player}>
|
||||
<span className={styles.avatar} data-ai={player.is_ai}>
|
||||
{player.is_ai ? '✦' : player.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
<span className={styles.name}>
|
||||
{player.name}
|
||||
{player.id === playerId && <span className={styles.you}> (you)</span>}
|
||||
</span>
|
||||
{player.id === lobby.host_id && <span className={styles.badge}>Host</span>}
|
||||
{player.is_ai && <span className={`${styles.badge} ${styles.aiBadge}`}>AI</span>}
|
||||
{!player.connected && <span className={`${styles.badge} ${styles.offline}`}>offline</span>}
|
||||
{isHost && player.id !== playerId && (
|
||||
<Button size="sm" variant="ghost" onClick={() => actions.removePlayer(player.id)} aria-label={`Remove ${player.name}`}>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
{Array.from({ length: lobby.max_players - lobby.players.length }, (_, index) => (
|
||||
<li key={`empty-${index}`} className={`${styles.player} ${styles.empty}`}>
|
||||
<span className={styles.avatar} />
|
||||
<span className={styles.name}>Free seat</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{!lobby.ai_available && lobby.players.some((player) => player.is_ai) && (
|
||||
<p className={styles.warning}>The AI service is offline — AI players will make random moves.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className={styles.card}>
|
||||
<h2 className={styles.heading}>Rules</h2>
|
||||
<label className={styles.option}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={lobby.options.not_equal}
|
||||
disabled={!isHost}
|
||||
onChange={(event) => actions.setOptions({ ...lobby.options, not_equal: event.target.checked })}
|
||||
/>
|
||||
<span>
|
||||
<strong>Not equal</strong>
|
||||
<small>The sum of all bids must not equal the number of tricks in the round.</small>
|
||||
</span>
|
||||
</label>
|
||||
<label className={styles.option}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={lobby.options.hidden_bids}
|
||||
disabled={!isHost}
|
||||
onChange={(event) => actions.setOptions({ ...lobby.options, hidden_bids: event.target.checked })}
|
||||
/>
|
||||
<span>
|
||||
<strong>Hidden bids</strong>
|
||||
<small>Bids are revealed only after everybody has made their prediction.</small>
|
||||
</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<footer className={styles.actions}>
|
||||
<Button variant="danger" onClick={actions.leaveLobby}>
|
||||
Leave lobby
|
||||
</Button>
|
||||
{isHost ? (
|
||||
<Button size="lg" disabled={missing > 0} onClick={actions.startGame}>
|
||||
{missing > 0 ? `Need ${missing} more player${missing > 1 ? 's' : ''}` : 'Start game'}
|
||||
</Button>
|
||||
) : (
|
||||
<p className={styles.waiting}>Waiting for the host to start the game…</p>
|
||||
)}
|
||||
</footer>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user