first prototype
This commit is contained in:
@@ -1,184 +0,0 @@
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/* Global element defaults; everything else is scoped to modules. */
|
||||
:global(*),
|
||||
:global(*::before),
|
||||
:global(*::after) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
/* Design tokens, inherited by all components. */
|
||||
--bg: #0f0c24;
|
||||
--bg-elevated: #1a1640;
|
||||
--bg-sunken: #0a081a;
|
||||
--surface: #231d52;
|
||||
--border: #3a3278;
|
||||
--text: #ece9ff;
|
||||
--text-muted: #a49fcc;
|
||||
--accent: #8b6cff;
|
||||
--accent-strong: #a58cff;
|
||||
--gold: #ffd166;
|
||||
--danger: #ff6b7a;
|
||||
--success: #4fd18b;
|
||||
--suit-red: #e5484d;
|
||||
--suit-yellow: #f2b90d;
|
||||
--suit-green: #2fa46c;
|
||||
--suit-blue: #3e7bfa;
|
||||
--radius: 12px;
|
||||
--shadow: 0 10px 30px rgb(0 0 0 / 35%);
|
||||
--font: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
background:
|
||||
radial-gradient(ellipse at top, rgb(109 74 255 / 25%), transparent 60%),
|
||||
radial-gradient(ellipse at bottom, rgb(255 209 102 / 8%), transparent 60%),
|
||||
var(--bg);
|
||||
color: var(--text);
|
||||
font: 16px/1.45 var(--font);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 50;
|
||||
padding: 8px 16px;
|
||||
background: #5b2330;
|
||||
color: #ffe1e6;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
+48
-114
@@ -1,121 +1,55 @@
|
||||
import { useState } from 'react'
|
||||
import heroImg from './assets/hero.png'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import './App.css'
|
||||
import { useEffect } from 'react'
|
||||
import styles from './App.module.css'
|
||||
import { useWizard } from './api/useWizard'
|
||||
import { Toasts } from './components/Toasts/Toasts'
|
||||
import { GameScreen } from './screens/GameScreen/GameScreen'
|
||||
import { HomeScreen } from './screens/HomeScreen/HomeScreen'
|
||||
import { LobbyScreen } from './screens/LobbyScreen/LobbyScreen'
|
||||
|
||||
const STATUS_MESSAGES = {
|
||||
connecting: 'Connecting to the server…',
|
||||
closed: 'Connection lost. Reconnecting…',
|
||||
replaced: 'This game was opened in another window. Reload the page to continue here.',
|
||||
} as const
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
const { status, playerId, lobby, game, completedTrick, completedRound, toasts, dismissToast, actions } =
|
||||
useWizard()
|
||||
const lobbyCode = lobby?.code
|
||||
|
||||
// Keep the lobby code in the address bar so the URL can be shared as an invite link.
|
||||
useEffect(() => {
|
||||
if (lobbyCode) {
|
||||
window.history.replaceState(null, '', `?lobby=${lobbyCode}`)
|
||||
} else if (status === 'open' && window.location.search) {
|
||||
window.history.replaceState(null, '', window.location.pathname)
|
||||
}
|
||||
}, [lobbyCode, status])
|
||||
|
||||
let screen
|
||||
if (!lobby || !playerId) {
|
||||
screen = <HomeScreen connected={status === 'open'} actions={actions} />
|
||||
} else if (lobby.status === 'waiting' || !game) {
|
||||
screen = <LobbyScreen lobby={lobby} playerId={playerId} actions={actions} />
|
||||
} else {
|
||||
screen = (
|
||||
<GameScreen
|
||||
lobby={lobby}
|
||||
game={game}
|
||||
playerId={playerId}
|
||||
completedTrick={completedTrick}
|
||||
completedRound={completedRound}
|
||||
actions={actions}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div className="hero">
|
||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||
<img src={reactLogo} className="framework" alt="React logo" />
|
||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="counter"
|
||||
onClick={() => setCount((count) => count + 1)}
|
||||
>
|
||||
Count is {count}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</>
|
||||
<div className={styles.app}>
|
||||
{status !== 'open' && <div className={styles.banner}>{STATUS_MESSAGES[status]}</div>}
|
||||
{screen}
|
||||
<Toasts toasts={toasts} onDismiss={dismissToast} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
// Types of the messages exchanged with the game server (see wizard_server/app/protocol.py
|
||||
// and wizard_server/game_logic/wizard_game/observation.py).
|
||||
|
||||
export type Suit = 'red' | 'yellow' | 'green' | 'blue'
|
||||
export type CardKind = 'number' | 'wizard' | 'jester'
|
||||
|
||||
export interface Card {
|
||||
id: number
|
||||
kind: CardKind
|
||||
suit: Suit | null
|
||||
rank: number
|
||||
}
|
||||
|
||||
export type Action =
|
||||
| { type: 'bid'; value: number }
|
||||
| { type: 'play'; card: number }
|
||||
| { type: 'trump'; suit: Suit }
|
||||
|
||||
export type Phase = 'trump_selection' | 'bidding' | 'playing' | 'finished'
|
||||
|
||||
export interface GameOptions {
|
||||
not_equal: boolean
|
||||
hidden_bids: boolean
|
||||
}
|
||||
|
||||
export interface PlayedCard {
|
||||
player: number
|
||||
card: Card
|
||||
}
|
||||
|
||||
export interface TrickResult {
|
||||
round_number: number
|
||||
trick_number: number
|
||||
cards: PlayedCard[]
|
||||
winner: number
|
||||
}
|
||||
|
||||
export interface RoundResult {
|
||||
round_number: number
|
||||
bids: number[]
|
||||
tricks: number[]
|
||||
score_changes: number[]
|
||||
scores: number[]
|
||||
}
|
||||
|
||||
export interface Observation {
|
||||
player: number
|
||||
num_players: number
|
||||
options: GameOptions
|
||||
phase: Phase
|
||||
round_number: number
|
||||
total_rounds: number
|
||||
dealer: number
|
||||
current_player: number | null
|
||||
hand: Card[]
|
||||
hand_sizes: number[]
|
||||
trump_card: Card | null
|
||||
trump_suit: Suit | null
|
||||
bids: (number | null)[]
|
||||
has_bid: boolean[]
|
||||
tricks_won: number[]
|
||||
scores: number[]
|
||||
trick_number: number
|
||||
trick_leader: number
|
||||
current_trick: PlayedCard[]
|
||||
lead_suit: Suit | null
|
||||
played_cards: Card[]
|
||||
last_trick: TrickResult | null
|
||||
round_history: RoundResult[]
|
||||
legal_actions: Action[]
|
||||
winners: number[]
|
||||
}
|
||||
|
||||
export interface LobbyPlayer {
|
||||
id: string
|
||||
name: string
|
||||
is_ai: boolean
|
||||
connected: boolean
|
||||
}
|
||||
|
||||
export type LobbyStatus = 'waiting' | 'playing' | 'finished'
|
||||
|
||||
export interface Lobby {
|
||||
code: string
|
||||
status: LobbyStatus
|
||||
host_id: string | null
|
||||
options: GameOptions
|
||||
players: LobbyPlayer[]
|
||||
min_players: number
|
||||
max_players: number
|
||||
ai_available: boolean
|
||||
}
|
||||
|
||||
export interface GameView {
|
||||
// Seat index of the receiving player.
|
||||
you: number | null
|
||||
observation: Observation
|
||||
}
|
||||
|
||||
export type GameEvent =
|
||||
| { type: 'trick_completed'; trick: TrickResult }
|
||||
| { type: 'round_completed'; result: RoundResult }
|
||||
| { type: 'round_started'; round_number: number; dealer: number; trump_card: Card | null }
|
||||
| { type: 'game_finished'; scores: number[]; winners: number[] }
|
||||
|
||||
export type ServerMessage =
|
||||
| { type: 'welcome'; player_id: string; token: string; name: string | null }
|
||||
| { type: 'state'; lobby: Lobby | null; game: GameView | null; events: GameEvent[] }
|
||||
| { type: 'error'; message: string }
|
||||
|
||||
export type ClientMessage =
|
||||
| { type: 'hello'; token: string | null }
|
||||
| { type: 'create_lobby'; name: string }
|
||||
| { type: 'join_lobby'; code: string; name: string }
|
||||
| { type: 'leave_lobby' }
|
||||
| { type: 'add_ai' }
|
||||
| { type: 'remove_player'; player_id: string }
|
||||
| { type: 'set_options'; not_equal: boolean; hidden_bids: boolean }
|
||||
| { type: 'start_game' }
|
||||
| { type: 'action'; action: Action }
|
||||
| { type: 'return_to_lobby' }
|
||||
@@ -0,0 +1,190 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import type {
|
||||
Action,
|
||||
ClientMessage,
|
||||
GameOptions,
|
||||
GameView,
|
||||
Lobby,
|
||||
RoundResult,
|
||||
ServerMessage,
|
||||
TrickResult,
|
||||
} from './types'
|
||||
|
||||
export type ConnectionStatus = 'connecting' | 'open' | 'closed' | 'replaced'
|
||||
|
||||
export interface Toast {
|
||||
id: number
|
||||
message: string
|
||||
}
|
||||
|
||||
// Per tab, so several tabs can act as different players; survives reloads.
|
||||
const TOKEN_KEY = 'wizard.token'
|
||||
const TRICK_DISPLAY_MS = 2200
|
||||
const ROUND_DISPLAY_MS = 5000
|
||||
const TOAST_MS = 4000
|
||||
const MAX_RETRY_DELAY_MS = 10000
|
||||
// Close code the server uses when the session was opened in another tab.
|
||||
const CLOSE_REPLACED = 4000
|
||||
|
||||
function websocketUrl(): string {
|
||||
const configured = import.meta.env.VITE_WS_URL as string | undefined
|
||||
if (configured) return configured
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
|
||||
return `${protocol}//${window.location.host}/api/ws`
|
||||
}
|
||||
|
||||
function readToken(): string | null {
|
||||
try {
|
||||
return sessionStorage.getItem(TOKEN_KEY)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function storeToken(token: string) {
|
||||
try {
|
||||
sessionStorage.setItem(TOKEN_KEY, token)
|
||||
} catch {
|
||||
// Storage unavailable: reconnecting after a reload will start a new session.
|
||||
}
|
||||
}
|
||||
|
||||
export function useWizard() {
|
||||
const [status, setStatus] = useState<ConnectionStatus>('connecting')
|
||||
const [playerId, setPlayerId] = useState<string | null>(null)
|
||||
const [lobby, setLobby] = useState<Lobby | null>(null)
|
||||
const [game, setGame] = useState<GameView | null>(null)
|
||||
// The most recently completed trick, shown for a moment before it is cleared.
|
||||
const [completedTrick, setCompletedTrick] = useState<TrickResult | null>(null)
|
||||
// Result of the round that just ended, shown as a short summary.
|
||||
const [completedRound, setCompletedRound] = useState<RoundResult | null>(null)
|
||||
const [toasts, setToasts] = useState<Toast[]>([])
|
||||
|
||||
const socketRef = useRef<WebSocket | null>(null)
|
||||
const toastId = useRef(0)
|
||||
|
||||
const showError = useCallback((message: string) => {
|
||||
const id = ++toastId.current
|
||||
setToasts((current) => [...current, { id, message }])
|
||||
setTimeout(() => setToasts((current) => current.filter((toast) => toast.id !== id)), TOAST_MS)
|
||||
}, [])
|
||||
|
||||
const dismissToast = useCallback((id: number) => {
|
||||
setToasts((current) => current.filter((toast) => toast.id !== id))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false
|
||||
let attempt = 0
|
||||
let retryTimer: ReturnType<typeof setTimeout> | undefined
|
||||
let trickTimer: ReturnType<typeof setTimeout> | undefined
|
||||
let roundTimer: ReturnType<typeof setTimeout> | undefined
|
||||
|
||||
const handleMessage = (message: ServerMessage) => {
|
||||
switch (message.type) {
|
||||
case 'welcome':
|
||||
storeToken(message.token)
|
||||
setPlayerId(message.player_id)
|
||||
break
|
||||
case 'state': {
|
||||
setLobby(message.lobby)
|
||||
setGame(message.game)
|
||||
const trick = message.events.find((event) => event.type === 'trick_completed')
|
||||
if (trick) {
|
||||
setCompletedTrick(trick.trick)
|
||||
clearTimeout(trickTimer)
|
||||
trickTimer = setTimeout(() => setCompletedTrick(null), TRICK_DISPLAY_MS)
|
||||
}
|
||||
const round = message.events.find((event) => event.type === 'round_completed')
|
||||
if (round) {
|
||||
setCompletedRound(round.result)
|
||||
clearTimeout(roundTimer)
|
||||
roundTimer = setTimeout(() => setCompletedRound(null), ROUND_DISPLAY_MS)
|
||||
}
|
||||
if (!message.game) {
|
||||
setCompletedTrick(null)
|
||||
setCompletedRound(null)
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'error':
|
||||
showError(message.message)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const connect = () => {
|
||||
const socket = new WebSocket(websocketUrl())
|
||||
socketRef.current = socket
|
||||
|
||||
socket.onopen = () => {
|
||||
attempt = 0
|
||||
setStatus('open')
|
||||
socket.send(JSON.stringify({ type: 'hello', token: readToken() } satisfies ClientMessage))
|
||||
}
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
handleMessage(JSON.parse(event.data as string) as ServerMessage)
|
||||
} catch (error) {
|
||||
console.error('Invalid message from server', error)
|
||||
}
|
||||
}
|
||||
socket.onclose = (event) => {
|
||||
if (disposed) return
|
||||
socketRef.current = null
|
||||
if (event.code === CLOSE_REPLACED) {
|
||||
setStatus('replaced')
|
||||
return
|
||||
}
|
||||
setStatus('closed')
|
||||
const delay = Math.min(1000 * 2 ** attempt, MAX_RETRY_DELAY_MS)
|
||||
attempt += 1
|
||||
retryTimer = setTimeout(() => {
|
||||
setStatus('connecting')
|
||||
connect()
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
|
||||
connect()
|
||||
return () => {
|
||||
disposed = true
|
||||
clearTimeout(retryTimer)
|
||||
clearTimeout(trickTimer)
|
||||
clearTimeout(roundTimer)
|
||||
socketRef.current?.close()
|
||||
socketRef.current = null
|
||||
}
|
||||
}, [showError])
|
||||
|
||||
const send = useCallback(
|
||||
(message: ClientMessage) => {
|
||||
const socket = socketRef.current
|
||||
if (socket?.readyState === WebSocket.OPEN) {
|
||||
socket.send(JSON.stringify(message))
|
||||
} else {
|
||||
showError('Not connected to the server')
|
||||
}
|
||||
},
|
||||
[showError],
|
||||
)
|
||||
|
||||
const actions = useMemo(
|
||||
() => ({
|
||||
createLobby: (name: string) => send({ type: 'create_lobby', name }),
|
||||
joinLobby: (code: string, name: string) => send({ type: 'join_lobby', code, name }),
|
||||
leaveLobby: () => send({ type: 'leave_lobby' }),
|
||||
addAI: () => send({ type: 'add_ai' }),
|
||||
removePlayer: (playerId: string) => send({ type: 'remove_player', player_id: playerId }),
|
||||
setOptions: (options: GameOptions) => send({ type: 'set_options', ...options }),
|
||||
startGame: () => send({ type: 'start_game' }),
|
||||
play: (action: Action) => send({ type: 'action', action }),
|
||||
returnToLobby: () => send({ type: 'return_to_lobby' }),
|
||||
}),
|
||||
[send],
|
||||
)
|
||||
|
||||
return { status, playerId, lobby, game, completedTrick, completedRound, toasts, dismissToast, actions }
|
||||
}
|
||||
|
||||
export type WizardActions = ReturnType<typeof useWizard>['actions']
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,85 @@
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.15s,
|
||||
border-color 0.15s,
|
||||
transform 0.1s,
|
||||
opacity 0.15s;
|
||||
}
|
||||
|
||||
.button:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: 2px solid var(--gold);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sm {
|
||||
padding: 4px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.md {
|
||||
padding: 9px 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.lg {
|
||||
padding: 13px 24px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: linear-gradient(180deg, var(--accent-strong), var(--accent));
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 14px rgb(139 108 255 / 35%);
|
||||
}
|
||||
|
||||
.primary:hover:not(:disabled) {
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.secondary:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.ghost:hover:not(:disabled) {
|
||||
color: var(--text);
|
||||
background: rgb(255 255 255 / 6%);
|
||||
}
|
||||
|
||||
.danger {
|
||||
background: transparent;
|
||||
border-color: rgb(255 107 122 / 50%);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.danger:hover:not(:disabled) {
|
||||
background: rgb(255 107 122 / 12%);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { ButtonHTMLAttributes } from 'react'
|
||||
import styles from './Button.module.css'
|
||||
|
||||
type Variant = 'primary' | 'secondary' | 'ghost' | 'danger'
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: Variant
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
}
|
||||
|
||||
export function Button({ variant = 'primary', size = 'md', className, type = 'button', ...props }: ButtonProps) {
|
||||
const classes = [styles.button, styles[variant], styles[size], className].filter(Boolean).join(' ')
|
||||
return <button type={type} className={classes} {...props} />
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 16px;
|
||||
background: rgb(5 4 15 / 70%);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: min(460px, 100%);
|
||||
max-height: calc(100dvh - 32px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.wide {
|
||||
width: min(900px, 100%);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.close {
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 16px 20px 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useEffect, type ReactNode } from 'react'
|
||||
import styles from './Modal.module.css'
|
||||
|
||||
interface ModalProps {
|
||||
title: string
|
||||
onClose?: () => void
|
||||
children: ReactNode
|
||||
wide?: boolean
|
||||
}
|
||||
|
||||
export function Modal({ title, onClose, children, wide }: ModalProps) {
|
||||
useEffect(() => {
|
||||
if (!onClose) return
|
||||
const onKey = (event: KeyboardEvent) => event.key === 'Escape' && onClose()
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [onClose])
|
||||
|
||||
return (
|
||||
<div className={styles.backdrop} onClick={onClose}>
|
||||
<div
|
||||
className={`${styles.dialog} ${wide ? styles.wide : ''}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={title}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<header className={styles.header}>
|
||||
<h2 className={styles.title}>{title}</h2>
|
||||
{onClose && (
|
||||
<button type="button" className={styles.close} onClick={onClose} aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
<div className={styles.body}>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
.card {
|
||||
--card-color: #666;
|
||||
--w: 72px;
|
||||
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: var(--w);
|
||||
aspect-ratio: 5 / 7.4;
|
||||
padding: 0;
|
||||
border: 2px solid var(--card-color);
|
||||
border-radius: calc(var(--w) * 0.12);
|
||||
background:
|
||||
linear-gradient(160deg, rgb(255 255 255 / 100%), rgb(240 238 250 / 100%));
|
||||
color: var(--card-color);
|
||||
font-family: var(--font);
|
||||
font-weight: 800;
|
||||
box-shadow: 0 3px 8px rgb(0 0 0 / 35%);
|
||||
user-select: none;
|
||||
transition:
|
||||
transform 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
opacity 0.15s ease,
|
||||
filter 0.15s ease;
|
||||
}
|
||||
|
||||
.sm {
|
||||
--w: 44px;
|
||||
}
|
||||
|
||||
.md {
|
||||
--w: 72px;
|
||||
}
|
||||
|
||||
.lg {
|
||||
--w: 88px;
|
||||
}
|
||||
|
||||
.red {
|
||||
--card-color: var(--suit-red);
|
||||
}
|
||||
|
||||
.yellow {
|
||||
--card-color: var(--suit-yellow);
|
||||
}
|
||||
|
||||
.green {
|
||||
--card-color: var(--suit-green);
|
||||
}
|
||||
|
||||
.blue {
|
||||
--card-color: var(--suit-blue);
|
||||
}
|
||||
|
||||
.wizard {
|
||||
--card-color: #fff;
|
||||
|
||||
border-color: #c9b8ff;
|
||||
background: radial-gradient(circle at 50% 35%, #8b6cff, #3b1f9e 75%);
|
||||
}
|
||||
|
||||
.jester {
|
||||
--card-color: #3d3a52;
|
||||
|
||||
border-color: #9b98b3;
|
||||
background: linear-gradient(160deg, #e9e7f2, #c9c6d8);
|
||||
}
|
||||
|
||||
.back {
|
||||
border-color: #564aa8;
|
||||
background:
|
||||
repeating-linear-gradient(45deg, rgb(255 255 255 / 7%) 0 4px, transparent 4px 9px),
|
||||
linear-gradient(160deg, #3b2f8f, #211a58);
|
||||
}
|
||||
|
||||
.corner {
|
||||
position: absolute;
|
||||
top: 4%;
|
||||
left: 8%;
|
||||
font-size: calc(var(--w) * 0.2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cornerBottom {
|
||||
top: auto;
|
||||
right: 8%;
|
||||
bottom: 4%;
|
||||
left: auto;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: calc(var(--w) * 0.46);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.glyph {
|
||||
font-size: calc(var(--w) * 0.5);
|
||||
text-shadow: 0 0 12px rgb(255 209 102 / 60%);
|
||||
}
|
||||
|
||||
.wizard .glyph {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.sm .corner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.playable {
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
0 0 0 2px rgb(255 209 102 / 55%),
|
||||
0 3px 8px rgb(0 0 0 / 35%);
|
||||
}
|
||||
|
||||
.playable:hover,
|
||||
.playable:focus-visible {
|
||||
transform: translateY(-12px);
|
||||
box-shadow:
|
||||
0 0 0 3px var(--gold),
|
||||
0 10px 20px rgb(0 0 0 / 45%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dimmed {
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(0.6) brightness(0.6);
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
box-shadow:
|
||||
0 0 0 3px var(--gold),
|
||||
0 0 24px rgb(255 209 102 / 55%);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import type { Card } from '../../api/types'
|
||||
import { cardLabel } from '../../util/cards'
|
||||
import styles from './PlayingCard.module.css'
|
||||
|
||||
interface PlayingCardProps {
|
||||
card: Card
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
// Clickable card in the hand.
|
||||
onClick?: () => void
|
||||
// Rendered dimmed, e.g. a card that must not be played now.
|
||||
dimmed?: boolean
|
||||
highlighted?: boolean
|
||||
}
|
||||
|
||||
export function PlayingCard({ card, size = 'md', onClick, dimmed, highlighted }: PlayingCardProps) {
|
||||
const kindClass = card.kind === 'number' ? styles[card.suit!] : styles[card.kind]
|
||||
const classes = [
|
||||
styles.card,
|
||||
styles[size],
|
||||
kindClass,
|
||||
onClick && !dimmed ? styles.playable : '',
|
||||
dimmed ? styles.dimmed : '',
|
||||
highlighted ? styles.highlighted : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
|
||||
const symbol = card.kind === 'wizard' ? 'W' : card.kind === 'jester' ? 'J' : String(card.rank)
|
||||
const content = (
|
||||
<>
|
||||
<span className={styles.corner}>{symbol}</span>
|
||||
<span className={styles.center}>
|
||||
{card.kind === 'wizard' && <span className={styles.glyph}>✦</span>}
|
||||
{card.kind === 'jester' && <span className={styles.glyph}>☾</span>}
|
||||
{card.kind === 'number' && symbol}
|
||||
</span>
|
||||
<span className={`${styles.corner} ${styles.cornerBottom}`}>{symbol}</span>
|
||||
</>
|
||||
)
|
||||
|
||||
if (onClick) {
|
||||
return (
|
||||
<button type="button" className={classes} onClick={onClick} disabled={dimmed} aria-label={cardLabel(card)} title={cardLabel(card)}>
|
||||
{content}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className={classes} role="img" aria-label={cardLabel(card)} title={cardLabel(card)}>
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CardBack({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
|
||||
return <div className={`${styles.card} ${styles[size]} ${styles.back}`} aria-hidden="true" />
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.container {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 60;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: min(360px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.toast {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgb(255 107 122 / 50%);
|
||||
border-radius: 10px;
|
||||
background: #2a1426;
|
||||
color: #ffd9de;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
box-shadow: var(--shadow);
|
||||
cursor: pointer;
|
||||
animation: slide-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { Toast } from '../../api/useWizard'
|
||||
import styles from './Toasts.module.css'
|
||||
|
||||
interface ToastsProps {
|
||||
toasts: Toast[]
|
||||
onDismiss: (id: number) => void
|
||||
}
|
||||
|
||||
export function Toasts({ toasts, onDismiss }: ToastsProps) {
|
||||
return (
|
||||
<div className={styles.container} aria-live="polite">
|
||||
{toasts.map((toast) => (
|
||||
<button key={toast.id} type="button" className={styles.toast} onClick={() => onDismiss(toast.id)}>
|
||||
{toast.message}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 1126px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-inline: 1px solid var(--border);
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { Action, Card, Suit } from '../api/types'
|
||||
|
||||
export const SUITS: Suit[] = ['red', 'yellow', 'green', 'blue']
|
||||
|
||||
export const SUIT_NAMES: Record<Suit, string> = {
|
||||
red: 'Red',
|
||||
yellow: 'Yellow',
|
||||
green: 'Green',
|
||||
blue: 'Blue',
|
||||
}
|
||||
|
||||
export function cardLabel(card: Card): string {
|
||||
if (card.kind === 'wizard') return 'Wizard'
|
||||
if (card.kind === 'jester') return 'Jester'
|
||||
return `${SUIT_NAMES[card.suit!]} ${card.rank}`
|
||||
}
|
||||
|
||||
/** Wizards first, then the trump suit, the other suits, and jesters last. */
|
||||
export function sortHand(hand: Card[], trump: Suit | null): Card[] {
|
||||
const suitOrder = trump ? [trump, ...SUITS.filter((suit) => suit !== trump)] : SUITS
|
||||
const weight = (card: Card) => {
|
||||
if (card.kind === 'wizard') return -1
|
||||
if (card.kind === 'jester') return 100
|
||||
return suitOrder.indexOf(card.suit!) * 14 + card.rank
|
||||
}
|
||||
return [...hand].sort((a, b) => weight(a) - weight(b) || a.id - b.id)
|
||||
}
|
||||
|
||||
export function legalCardIds(actions: Action[]): Set<number> {
|
||||
return new Set(actions.flatMap((action) => (action.type === 'play' ? [action.card] : [])))
|
||||
}
|
||||
|
||||
export function legalBids(actions: Action[]): Set<number> {
|
||||
return new Set(actions.flatMap((action) => (action.type === 'bid' ? [action.value] : [])))
|
||||
}
|
||||
Reference in New Issue
Block a user