Redesign game lobby and room creation flow
- Split chess and blackjack setup into guided creation steps - Add chess time control presets and reusable lobby room metrics - Improve room filtering, ordering, and live connection state
This commit is contained in:
syntaxbullet
File diff suppressed because it is too large
Load Diff
@@ -1,34 +1,168 @@
|
||||
import { useState } from "react";
|
||||
import { useParams, useNavigate, useLocation } from "react-router-dom";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
Clock3,
|
||||
Coins,
|
||||
Copy,
|
||||
Eye,
|
||||
Loader2,
|
||||
Play,
|
||||
Shield,
|
||||
Sparkles,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { useGameRoom } from "../lib/useGameRoom";
|
||||
import { CHESS_TIME_CONTROL_LABELS } from "./chess/timeControls";
|
||||
import { gameUIRegistry } from "./registry";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
function CopyInviteLink({ url }: { url: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
function copy() {
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
});
|
||||
}
|
||||
function stateChip(status: "waiting" | "playing" | "finished") {
|
||||
if (status === "waiting") return "border-warning/25 bg-warning/12 text-warning";
|
||||
if (status === "playing") return "border-success/25 bg-success/12 text-success";
|
||||
return "border-white/10 bg-card text-text-tertiary";
|
||||
}
|
||||
|
||||
function stateLabel(status: "waiting" | "playing" | "finished") {
|
||||
if (status === "waiting") return "Waiting";
|
||||
if (status === "playing") return "Live";
|
||||
return "Finished";
|
||||
}
|
||||
|
||||
function gameSurfaceClass(slug: string): string {
|
||||
return slug === "blackjack"
|
||||
? "border-emerald-500/20 bg-[radial-gradient(circle_at_top,rgba(34,197,94,0.14),transparent_42%),linear-gradient(180deg,rgba(6,95,70,0.34),rgba(6,78,59,0.08))]"
|
||||
: "border-primary/20 bg-[radial-gradient(circle_at_top,rgba(233,195,73,0.14),transparent_42%),linear-gradient(180deg,rgba(61,46,0,0.24),rgba(61,46,0,0.06))]";
|
||||
}
|
||||
|
||||
function MessageState({
|
||||
title,
|
||||
body,
|
||||
actionLabel,
|
||||
onAction,
|
||||
loading = false,
|
||||
}: {
|
||||
title: string;
|
||||
body: string;
|
||||
actionLabel: string;
|
||||
onAction: () => void;
|
||||
loading?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="text-xs text-text-disabled mb-1">Share this link to invite:</div>
|
||||
<div className="flex items-center gap-2 w-full max-w-sm">
|
||||
<span className="flex-1 font-mono bg-card rounded-lg px-2 py-1.5 text-[11px] text-text-tertiary truncate">
|
||||
{url}
|
||||
</span>
|
||||
<button
|
||||
onClick={copy}
|
||||
className={`shrink-0 rounded px-3 py-1.5 text-xs font-medium transition-colors ${
|
||||
copied
|
||||
? "bg-success/15 text-success"
|
||||
: "bg-raised text-text-tertiary hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{copied ? "Copied!" : "Copy"}
|
||||
</button>
|
||||
<div className="rounded-[32px] border border-white/10 bg-card/70 px-6 py-12 text-center shadow-[0_24px_80px_rgba(0,0,0,0.2)]">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
{loading ? <Loader2 className="h-6 w-6 animate-spin" /> : <Sparkles className="h-6 w-6" />}
|
||||
</div>
|
||||
<h1 className="mt-5 font-display text-3xl font-semibold text-foreground">{title}</h1>
|
||||
<p className="mx-auto mt-2 max-w-xl text-sm text-text-tertiary">{body}</p>
|
||||
<button
|
||||
onClick={onAction}
|
||||
className="mt-6 inline-flex items-center gap-2 rounded-2xl bg-primary px-4 py-2.5 text-sm font-semibold text-on-primary transition hover:opacity-90"
|
||||
>
|
||||
{actionLabel}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CopyInviteCard({ url }: { url: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1800);
|
||||
} catch {
|
||||
setCopied(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-[28px] border border-white/10 bg-card/70 p-5">
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Invite Link</div>
|
||||
<div className="mt-2 text-sm text-text-secondary">
|
||||
Share this room URL to bring another player directly into the waiting room.
|
||||
</div>
|
||||
<div className="mt-4 rounded-2xl border border-white/10 bg-black/10 p-3">
|
||||
<div className="truncate font-mono text-xs text-text-secondary">{url}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={copy}
|
||||
className={cn(
|
||||
"mt-4 inline-flex w-full items-center justify-center gap-2 rounded-2xl border px-4 py-3 text-sm font-semibold transition-colors",
|
||||
copied
|
||||
? "border-success/20 bg-success/10 text-success"
|
||||
: "border-white/10 bg-white/5 text-foreground hover:bg-white/10",
|
||||
)}
|
||||
>
|
||||
{copied ? <CheckCircle2 className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||||
{copied ? "Invite Copied" : "Copy Invite Link"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CompactRoomBar({
|
||||
roomCode,
|
||||
state,
|
||||
isSpectator,
|
||||
playerCount,
|
||||
maxPlayers,
|
||||
spectatorCount,
|
||||
facts,
|
||||
onExit,
|
||||
}: {
|
||||
roomCode: string;
|
||||
state: "waiting" | "playing" | "finished";
|
||||
isSpectator: boolean;
|
||||
playerCount: number;
|
||||
maxPlayers: number;
|
||||
spectatorCount: number;
|
||||
facts: Array<{ label: string; value: string }>;
|
||||
onExit: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="sticky top-[4.5rem] z-30 md:top-6">
|
||||
<div className="rounded-[24px] border border-white/10 bg-background/82 p-3 shadow-[0_18px_50px_rgba(0,0,0,0.28)] backdrop-blur-xl">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
||||
<span className={cn("rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]", stateChip(state))}>
|
||||
{stateLabel(state)}
|
||||
</span>
|
||||
<span className="rounded-full border border-white/10 bg-black/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-text-secondary">
|
||||
Room {roomCode}
|
||||
</span>
|
||||
{isSpectator && (
|
||||
<span className="rounded-full border border-info/20 bg-info/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-info">
|
||||
Spectating
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={onExit}
|
||||
className="rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-sm text-text-secondary transition-colors hover:text-foreground"
|
||||
>
|
||||
Leave
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-xs text-text-secondary">
|
||||
<Users className="h-3.5 w-3.5" />
|
||||
{playerCount}/{maxPlayers} players
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-xs text-text-secondary">
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
{spectatorCount} spectators
|
||||
</span>
|
||||
{facts.map(fact => (
|
||||
<span key={fact.label} className="rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-xs text-text-secondary">
|
||||
{fact.label}: {fact.value}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -41,177 +175,365 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
|
||||
const preferAs = (location.state as { preferAs?: "player" | "spectator" } | null)?.preferAs ?? "player";
|
||||
|
||||
const {
|
||||
gameState, players, spectators, roomStatus,
|
||||
isSpectator, gameOver, roundResult, error, sendAction, leaveRoom, sessionReplaced, rejoin, fillRoom, startGame, roomOptions,
|
||||
gameState,
|
||||
players,
|
||||
spectators,
|
||||
roomStatus,
|
||||
isSpectator,
|
||||
gameOver,
|
||||
roundResult,
|
||||
error,
|
||||
sendAction,
|
||||
leaveRoom,
|
||||
sessionReplaced,
|
||||
rejoin,
|
||||
fillRoom,
|
||||
startGame,
|
||||
roomOptions,
|
||||
} = useGameRoom(roomId!, userId, role, preferAs);
|
||||
|
||||
const betAmount = roomOptions.betAmount ?? 0;
|
||||
|
||||
const plugin = gameSlug ? gameUIRegistry.get(gameSlug) : undefined;
|
||||
|
||||
function exitRoom() {
|
||||
leaveRoom();
|
||||
navigate("/games");
|
||||
}
|
||||
|
||||
if (!plugin) {
|
||||
return (
|
||||
<div className="text-center py-16">
|
||||
<div className="text-lg font-display font-semibold mb-2">Unknown Game</div>
|
||||
<p className="text-sm text-text-tertiary mb-4">The game type "{gameSlug}" doesn't exist.</p>
|
||||
<button onClick={() => navigate("/games")} className="text-sm text-primary hover:underline">
|
||||
Back to Games
|
||||
</button>
|
||||
</div>
|
||||
<MessageState
|
||||
title="Unknown Game"
|
||||
body={`The game type "${gameSlug}" is not registered in the panel.`}
|
||||
actionLabel="Back to Games"
|
||||
onAction={() => navigate("/games")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (roomStatus === "not_found") {
|
||||
return (
|
||||
<div className="text-center py-16">
|
||||
<div className="text-lg font-display font-semibold mb-2">Room Not Found</div>
|
||||
<p className="text-sm text-text-tertiary mb-4">This room no longer exists or has expired.</p>
|
||||
<button onClick={() => navigate("/games")} className="text-sm text-primary hover:underline">
|
||||
Back to Games
|
||||
</button>
|
||||
</div>
|
||||
<MessageState
|
||||
title="Room Not Found"
|
||||
body="This room no longer exists, has expired, or was already cleaned up by the server."
|
||||
actionLabel="Back to Games"
|
||||
onAction={() => navigate("/games")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (roomStatus === "connecting") {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 gap-3">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-text-tertiary" />
|
||||
<p className="text-sm text-text-tertiary">
|
||||
{preferAs === "spectator" ? "Joining as spectator..." : "Joining room..."}
|
||||
</p>
|
||||
</div>
|
||||
<MessageState
|
||||
title={preferAs === "spectator" ? "Joining As Spectator" : "Joining Room"}
|
||||
body="The panel is restoring the room state and syncing your latest seat information."
|
||||
actionLabel="Back to Games"
|
||||
onAction={() => navigate("/games")}
|
||||
loading
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const GameComponent = plugin.component;
|
||||
const roomCode = roomId?.slice(0, 8).toUpperCase() ?? "";
|
||||
const hostPlayer = players[0] ?? null;
|
||||
const isHost = hostPlayer?.discordId === userId;
|
||||
const betAmount = roomOptions.betAmount ?? 0;
|
||||
const timeControl = typeof roomOptions.timeControl === "string"
|
||||
? CHESS_TIME_CONTROL_LABELS[roomOptions.timeControl] ?? roomOptions.timeControl
|
||||
: null;
|
||||
const readyToStart = players.length >= plugin.minPlayers;
|
||||
const startHint = plugin.manualStart
|
||||
? isHost
|
||||
? readyToStart
|
||||
? "You can start the game now."
|
||||
: `Need ${plugin.minPlayers} player${plugin.minPlayers === 1 ? "" : "s"} before you can start.`
|
||||
: `${hostPlayer?.username ?? "The host"} will start the game when the table is ready.`
|
||||
: `This room starts automatically once ${plugin.maxPlayers} seats are filled.`;
|
||||
|
||||
const roomFacts = useMemo(() => {
|
||||
const facts = [
|
||||
{ label: "Format", value: plugin.manualStart ? "Manual start" : "Auto start" },
|
||||
{ label: "Seats", value: plugin.minPlayers === plugin.maxPlayers ? `${plugin.maxPlayers}` : `${plugin.minPlayers}-${plugin.maxPlayers}` },
|
||||
];
|
||||
|
||||
if (timeControl) facts.push({ label: "Clock", value: timeControl });
|
||||
if (betAmount > 0) facts.push({ label: "Stake", value: `${betAmount} AU` });
|
||||
|
||||
return facts;
|
||||
}, [betAmount, plugin.manualStart, plugin.maxPlayers, plugin.minPlayers, timeControl]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-3 mb-4 md:mb-6">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<span className="text-xl shrink-0">{plugin.icon}</span>
|
||||
<div className="min-w-0">
|
||||
<h1 className="font-display text-base font-semibold truncate">{plugin.name}</h1>
|
||||
<div className="flex items-center gap-2 text-xs text-text-tertiary">
|
||||
<span className={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold ${
|
||||
roomStatus === "waiting" ? "bg-warning/15 text-warning"
|
||||
: roomStatus === "playing" ? "bg-success/15 text-success"
|
||||
: "bg-card text-text-tertiary"
|
||||
}`}>
|
||||
{roomStatus === "waiting" ? "Waiting" : roomStatus === "playing" ? "Playing" : "Finished"}
|
||||
</span>
|
||||
{isSpectator && <span className="text-text-disabled">Spectating</span>}
|
||||
{betAmount > 0 && (
|
||||
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-warning/15 text-warning">
|
||||
{betAmount} AU{players.length > 1 ? `/player` : ""}
|
||||
</span>
|
||||
)}
|
||||
<span>👁 {spectators.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { leaveRoom(); navigate("/games"); }}
|
||||
className="rounded-md px-3 py-1.5 text-sm font-medium bg-raised text-text-tertiary hover:text-foreground transition-colors shrink-0"
|
||||
>
|
||||
Leave
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{sessionReplaced && (
|
||||
<div className="mb-4 rounded-xl bg-warning/10 px-4 py-3 flex items-center justify-between gap-3">
|
||||
<p className="text-sm text-warning">
|
||||
You opened this game in another tab. Actions from this tab are disabled.
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
<section className={cn("overflow-hidden rounded-[32px] border p-5 shadow-[0_24px_80px_rgba(0,0,0,0.22)] sm:p-6", gameSurfaceClass(plugin.slug))}>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<button
|
||||
onClick={rejoin}
|
||||
className="shrink-0 text-xs font-medium text-warning underline hover:no-underline"
|
||||
onClick={exitRoom}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-sm text-text-secondary transition-colors hover:text-foreground"
|
||||
>
|
||||
Rejoin here
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Games
|
||||
</button>
|
||||
<button
|
||||
onClick={exitRoom}
|
||||
className="rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-sm text-text-secondary transition-colors hover:text-foreground"
|
||||
>
|
||||
Leave Room
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl bg-destructive/10 px-4 py-2 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-5 grid gap-5 xl:grid-cols-[minmax(0,1fr)_320px] xl:items-start">
|
||||
<div>
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="text-4xl">{plugin.icon}</span>
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h1 className="font-display text-3xl font-semibold text-foreground sm:text-4xl">{plugin.name}</h1>
|
||||
<span className={cn("rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]", stateChip(roomStatus))}>
|
||||
{stateLabel(roomStatus)}
|
||||
</span>
|
||||
{isSpectator && (
|
||||
<span className="rounded-full border border-info/20 bg-info/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-info">
|
||||
Spectating
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 max-w-2xl text-sm text-text-secondary">{plugin.description}</p>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<span className="rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-xs text-text-secondary">
|
||||
Room ID {roomCode}
|
||||
</span>
|
||||
{roomFacts.map(fact => (
|
||||
<span key={fact.label} className="rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-xs text-text-secondary">
|
||||
{fact.label}: {fact.value}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{gameOver && (
|
||||
<div className="mb-4 rounded-xl bg-primary/10 px-4 py-3">
|
||||
<div className="text-sm font-semibold text-primary">
|
||||
{gameOver.winner
|
||||
? `Winner: ${players.find(p => p.discordId === gameOver.winner)?.username ?? gameOver.winner}`
|
||||
: "Draw!"}
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-2xl border border-white/10 bg-black/12 px-4 py-3">
|
||||
<div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-text-disabled">
|
||||
<Users className="h-3.5 w-3.5" />
|
||||
Players
|
||||
</div>
|
||||
<div className="mt-2 text-lg font-semibold text-foreground">{players.length}/{plugin.maxPlayers}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-black/12 px-4 py-3">
|
||||
<div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-text-disabled">
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
Spectators
|
||||
</div>
|
||||
<div className="mt-2 text-lg font-semibold text-foreground">{spectators.length}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-black/12 px-4 py-3">
|
||||
<div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-text-disabled">
|
||||
{betAmount > 0 ? <Coins className="h-3.5 w-3.5" /> : <Clock3 className="h-3.5 w-3.5" />}
|
||||
{betAmount > 0 ? "Stake" : "Launch"}
|
||||
</div>
|
||||
<div className="mt-2 text-sm font-semibold text-foreground">
|
||||
{betAmount > 0 ? `${betAmount} AU${plugin.slug === "blackjack" ? " / hand" : ""}` : plugin.manualStart ? "Host starts" : "Auto starts"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-text-tertiary mt-1">{gameOver.reason}</div>
|
||||
{gameOver.payout && (
|
||||
<div className="text-xs font-semibold text-warning mt-1.5">
|
||||
{gameOver.payout.refunded
|
||||
? `Wager refunded: ${gameOver.payout.amount} AU`
|
||||
: `Payout: ${gameOver.payout.amount} AU`}
|
||||
|
||||
<div className="rounded-[28px] border border-white/10 bg-black/12 p-4">
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Room Notes</div>
|
||||
<div className="mt-3 text-sm text-text-secondary">{startHint}</div>
|
||||
{hostPlayer && (
|
||||
<div className="mt-4 flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm">
|
||||
<span className="text-text-tertiary">Host</span>
|
||||
<span className="font-semibold text-foreground">{hostPlayer.username}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-3">
|
||||
{sessionReplaced && (
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-warning/20 bg-warning/10 px-4 py-3">
|
||||
<div className="text-sm text-warning">
|
||||
Another tab claimed this room session. Actions from this tab are currently disabled.
|
||||
</div>
|
||||
<button
|
||||
onClick={rejoin}
|
||||
className="rounded-full border border-warning/20 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-warning transition-colors hover:bg-warning/10"
|
||||
>
|
||||
Rejoin Here
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-2xl border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{gameOver && (
|
||||
<div className="rounded-2xl border border-primary/20 bg-primary/10 px-4 py-3">
|
||||
<div className="text-sm font-semibold text-primary">
|
||||
{gameOver.winner
|
||||
? `Winner: ${players.find(player => player.discordId === gameOver.winner)?.username ?? gameOver.winner}`
|
||||
: "Draw"}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-text-secondary">{gameOver.reason}</div>
|
||||
{gameOver.payout && (
|
||||
<div className="mt-2 text-sm font-semibold text-warning">
|
||||
{gameOver.payout.refunded
|
||||
? `Wager refunded: ${gameOver.payout.amount} AU`
|
||||
: `Payout: ${gameOver.payout.amount} AU`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{roomStatus === "finished" && (
|
||||
<div className="mt-4 text-center">
|
||||
<button
|
||||
onClick={() => { leaveRoom(); navigate("/games"); }}
|
||||
className="rounded-xl bg-primary text-on-primary px-5 py-2 text-sm font-label font-medium hover:opacity-90 transition-colors"
|
||||
>
|
||||
Back to Lobby
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{roomStatus === "waiting" && (
|
||||
<div className="bg-card rounded-xl p-5 md:p-8">
|
||||
<div className="text-sm font-semibold mb-4 text-center">
|
||||
Waiting for players ({players.length}/{plugin.maxPlayers})
|
||||
</div>
|
||||
<div className="flex gap-3 justify-center mb-6 flex-wrap">
|
||||
{Array.from({ length: Math.max(players.length + 1, plugin.minPlayers ?? 1, Math.min(plugin.maxPlayers, 4)) }).map((_, i) => {
|
||||
if (i >= plugin.maxPlayers) return null;
|
||||
const player = players[i];
|
||||
return (
|
||||
<div key={i} className={`flex flex-col items-center gap-2 px-4 py-3 rounded-xl ${player ? "bg-primary/10" : "bg-surface"}`}>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold ${player ? "bg-primary/20 text-primary" : "bg-surface text-text-disabled animate-pulse"}`}>
|
||||
{player ? player.username[0]?.toUpperCase() : "?"}
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<section className="rounded-[32px] border border-white/10 bg-card/70 p-5 shadow-[0_20px_60px_rgba(0,0,0,0.16)] sm:p-6">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Waiting Room</div>
|
||||
<h2 className="mt-3 font-display text-3xl font-semibold text-foreground">
|
||||
{plugin.manualStart ? "Seat players and launch when ready" : "Filling seats before the game begins"}
|
||||
</h2>
|
||||
<p className="mt-2 max-w-2xl text-sm text-text-tertiary">
|
||||
{plugin.manualStart
|
||||
? "Hosts can keep collecting players and spectators, then start the table manually."
|
||||
: "The game will start automatically as soon as every required player seat is occupied."}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-primary/20 bg-primary/10 px-4 py-3 text-right">
|
||||
<div className="text-[11px] uppercase tracking-[0.18em] text-text-disabled">Seats Filled</div>
|
||||
<div className="mt-1 text-2xl font-semibold text-foreground">{players.length}/{plugin.maxPlayers}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: plugin.maxPlayers }).map((_, index) => {
|
||||
const player = players[index];
|
||||
const isSeatHost = index === 0 && !!player;
|
||||
const isMe = player?.discordId === userId;
|
||||
return (
|
||||
<div
|
||||
key={`${player?.discordId ?? "empty"}-${index}`}
|
||||
className={cn(
|
||||
"rounded-[28px] border p-4 transition-colors",
|
||||
player
|
||||
? "border-white/10 bg-black/12"
|
||||
: "border-dashed border-white/10 bg-black/6",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className={cn(
|
||||
"flex h-12 w-12 items-center justify-center rounded-2xl text-lg font-semibold",
|
||||
player ? "bg-primary/12 text-primary" : "bg-card text-text-disabled",
|
||||
)}>
|
||||
{player ? player.username[0]?.toUpperCase() : "?"}
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{isSeatHost && (
|
||||
<span className="rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-primary">
|
||||
Host
|
||||
</span>
|
||||
)}
|
||||
{isMe && (
|
||||
<span className="rounded-full border border-info/20 bg-info/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-info">
|
||||
You
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 text-lg font-semibold text-foreground">
|
||||
{player ? player.username : "Open Seat"}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-text-tertiary">
|
||||
{player ? `Player ${index + 1}` : "Share the invite to fill this seat."}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs font-medium">
|
||||
{player ? player.username : <span className="text-text-disabled">Waiting...</span>}
|
||||
</div>
|
||||
<div className="text-[10px] text-text-disabled">
|
||||
Player {i + 1}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="space-y-4">
|
||||
<CopyInviteCard url={window.location.href} />
|
||||
|
||||
<div className="rounded-[28px] border border-white/10 bg-card/70 p-5">
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Room Settings</div>
|
||||
<div className="mt-4 space-y-3">
|
||||
{roomFacts.map(fact => (
|
||||
<div key={fact.label} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm">
|
||||
<span className="text-text-tertiary">{fact.label}</span>
|
||||
<span className="font-semibold text-foreground">{fact.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[28px] border border-white/10 bg-card/70 p-5">
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Actions</div>
|
||||
<div className="mt-3 text-sm text-text-secondary">{startHint}</div>
|
||||
|
||||
{plugin.manualStart && isHost && (
|
||||
<button
|
||||
onClick={startGame}
|
||||
disabled={!readyToStart}
|
||||
className="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-semibold text-on-primary transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-45"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
Start Game
|
||||
</button>
|
||||
)}
|
||||
|
||||
{role === "admin" && players.length < plugin.maxPlayers && (
|
||||
<button
|
||||
onClick={fillRoom}
|
||||
className="mt-3 inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-warning/20 bg-warning/10 px-4 py-3 text-sm font-semibold text-warning transition hover:bg-warning/15"
|
||||
>
|
||||
<Shield className="h-4 w-4" />
|
||||
Fill Room For Test
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="rounded-[28px] border border-white/10 bg-card/70 p-5">
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Spectators</div>
|
||||
{spectators.length === 0 ? (
|
||||
<div className="mt-3 rounded-2xl border border-dashed border-white/10 bg-black/8 px-4 py-5 text-sm text-text-tertiary">
|
||||
No spectators yet.
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<CopyInviteLink url={window.location.href} />
|
||||
{plugin.manualStart && players.length >= (plugin.minPlayers ?? 1) && players[0]?.discordId === userId && (
|
||||
<button
|
||||
onClick={startGame}
|
||||
className="mt-4 w-full max-w-sm mx-auto block rounded-xl bg-primary text-on-primary px-4 py-2.5 text-sm font-label font-semibold hover:opacity-90 transition-colors"
|
||||
>
|
||||
Start Game ({players.length} player{players.length !== 1 ? "s" : ""})
|
||||
</button>
|
||||
)}
|
||||
{role === "admin" && players.length < plugin.maxPlayers && (
|
||||
<button
|
||||
onClick={fillRoom}
|
||||
className="mt-4 w-full max-w-sm rounded-md px-4 py-2 text-sm font-medium bg-warning/10 text-warning border border-warning/30 hover:bg-warning/20 transition-colors"
|
||||
>
|
||||
Start Solo Test
|
||||
</button>
|
||||
)}
|
||||
) : (
|
||||
<div className="mt-4 space-y-3">
|
||||
{spectators.map(spectator => (
|
||||
<div key={spectator.discordId} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm">
|
||||
<span className="font-medium text-foreground">{spectator.username}</span>
|
||||
<span className="text-text-tertiary">Watching</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(roomStatus === "playing" || roomStatus === "finished") && (
|
||||
<CompactRoomBar
|
||||
roomCode={roomCode}
|
||||
state={roomStatus}
|
||||
isSpectator={isSpectator}
|
||||
playerCount={players.length}
|
||||
maxPlayers={plugin.maxPlayers}
|
||||
spectatorCount={spectators.length}
|
||||
facts={roomFacts}
|
||||
onExit={exitRoom}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(roomStatus === "playing" || roomStatus === "finished") && gameState != null && (
|
||||
<GameComponent
|
||||
state={gameState}
|
||||
@@ -223,6 +545,17 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
|
||||
roomOptions={roomOptions}
|
||||
/>
|
||||
)}
|
||||
|
||||
{roomStatus === "finished" && (
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={exitRoom}
|
||||
className="inline-flex items-center gap-2 rounded-2xl bg-primary px-4 py-2.5 text-sm font-semibold text-on-primary transition hover:opacity-90"
|
||||
>
|
||||
Back to Lobby
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -452,6 +452,126 @@ function EmptySeatCard({ onSit }: { onSit: () => void }) {
|
||||
);
|
||||
}
|
||||
|
||||
function MobileSeatRail({
|
||||
seatedPlayers,
|
||||
activePlayerId,
|
||||
myPlayerId,
|
||||
betAmount,
|
||||
canSitDown,
|
||||
onSit,
|
||||
}: {
|
||||
seatedPlayers: Array<{ playerId: string; seat: PlayerSeatView; name: string }>;
|
||||
activePlayerId: string | null;
|
||||
myPlayerId: string;
|
||||
betAmount: number;
|
||||
canSitDown: boolean;
|
||||
onSit: () => void;
|
||||
}) {
|
||||
const seatCards = Array.from({ length: 6 }, (_, index) => {
|
||||
const entry = seatedPlayers[index] ?? null;
|
||||
if (!entry) return { kind: "empty" as const, index };
|
||||
|
||||
const { playerId, seat, name } = entry;
|
||||
const isActive = activePlayerId === playerId;
|
||||
const isMe = playerId === myPlayerId;
|
||||
const summary = seat.roundNet !== null
|
||||
? formatSignedAu(seat.roundNet)
|
||||
: seat.hands.length > 0
|
||||
? `${seat.hands.length} hand${seat.hands.length === 1 ? "" : "s"}`
|
||||
: seat.hasBet
|
||||
? "Bet locked"
|
||||
: betAmount > 0
|
||||
? "Needs buy-in"
|
||||
: "Waiting";
|
||||
|
||||
return { kind: "seat" as const, index, playerId, name, seat, isActive, isMe, summary };
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="md:hidden">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-white/45">Table Seats</div>
|
||||
<div className="mt-1 text-sm text-white/65">Fast seat scan for mobile play and spectating.</div>
|
||||
</div>
|
||||
<div className="rounded-full border border-white/10 bg-black/15 px-3 py-1.5 text-xs text-white/70">
|
||||
{seatedPlayers.length}/6 filled
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="-mx-1 mt-4 flex snap-x gap-3 overflow-x-auto px-1 pb-1">
|
||||
{seatCards.map(card => (
|
||||
card.kind === "seat" ? (
|
||||
<div
|
||||
key={card.playerId}
|
||||
className={`min-w-[152px] snap-start rounded-[22px] border p-3 ${
|
||||
card.isActive
|
||||
? "border-primary/45 bg-white/10"
|
||||
: "border-white/10 bg-black/15"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className={`flex h-10 w-10 items-center justify-center rounded-2xl text-sm font-bold ${
|
||||
card.isActive ? "bg-primary/20 text-primary" : "bg-white/10 text-white"
|
||||
}`}>
|
||||
{card.name[0]?.toUpperCase() ?? "?"}
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
{card.isMe && (
|
||||
<span className="rounded-full bg-primary/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-primary">
|
||||
You
|
||||
</span>
|
||||
)}
|
||||
{card.isActive && (
|
||||
<span className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-emerald-200">
|
||||
Acting
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 truncate text-sm font-semibold text-white">{card.name}</div>
|
||||
<div className="mt-1 text-xs text-white/55">Seat {card.index + 1}</div>
|
||||
<div className="mt-3 rounded-2xl border border-white/10 bg-black/15 px-3 py-2">
|
||||
<div className="text-[10px] uppercase tracking-[0.16em] text-white/40">Status</div>
|
||||
<div className={`mt-1 inline-flex rounded-full border px-2.5 py-1 text-xs ${toneClasses(card.seat.roundNet ?? card.seat.cumulativePnl)}`}>
|
||||
{card.summary}
|
||||
</div>
|
||||
{betAmount > 0 && card.seat.totalWager > 0 && (
|
||||
<div className="mt-2 text-xs text-white/60">Wager {formatAu(card.seat.totalWager)}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
key={`empty-${card.index}`}
|
||||
className="min-w-[152px] snap-start rounded-[22px] border border-dashed border-white/10 bg-black/10 p-3"
|
||||
>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white/5 text-white/50">
|
||||
<Plus className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="mt-3 text-sm font-semibold text-white">Open Seat</div>
|
||||
<div className="mt-1 text-xs text-white/50">Seat {card.index + 1}</div>
|
||||
{canSitDown ? (
|
||||
<button
|
||||
onClick={onSit}
|
||||
className="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-3 py-2 text-xs font-semibold text-on-primary transition hover:opacity-90"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Sit Down
|
||||
</button>
|
||||
) : (
|
||||
<div className="mt-4 rounded-2xl border border-white/10 bg-black/15 px-3 py-2 text-xs text-white/55">
|
||||
Available next betting round.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DealerPanel({ hand, visibleValue, fullValue }: {
|
||||
hand: Card[];
|
||||
visibleValue: number;
|
||||
@@ -622,6 +742,17 @@ export function BlackjackGame({ state, myPlayerId, isSpectator, onAction, player
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<MobileSeatRail
|
||||
seatedPlayers={seatedPlayers}
|
||||
activePlayerId={view.activePlayerId}
|
||||
myPlayerId={myPlayerId}
|
||||
betAmount={betAmount}
|
||||
canSitDown={canSitDown}
|
||||
onSit={handleSit}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
|
||||
{seatedPlayers.map(({ playerId, seat, name }) => (
|
||||
<SeatPanel
|
||||
|
||||
@@ -5,6 +5,7 @@ import type { Square } from "chess.js";
|
||||
import { Check, Clock3, Eye, Flag, Handshake, RotateCw, TimerReset, X } from "lucide-react";
|
||||
import type { GameUIProps } from "../registry";
|
||||
import { chessPieces } from "./pieces";
|
||||
import { CHESS_TIME_CONTROL_LABELS } from "./timeControls";
|
||||
|
||||
interface ChessClockView {
|
||||
white: number;
|
||||
@@ -47,19 +48,6 @@ interface LocalNotice {
|
||||
}
|
||||
|
||||
const FILES = ["a", "b", "c", "d", "e", "f", "g", "h"] as const;
|
||||
const CHESS_TIME_CONTROL_LABELS: Record<string, string> = {
|
||||
bullet_1_0: "Bullet 1+0",
|
||||
bullet_2_1: "Bullet 2+1",
|
||||
blitz_3_0: "Blitz 3+0",
|
||||
blitz_3_2: "Blitz 3+2",
|
||||
blitz_5_0: "Blitz 5+0",
|
||||
blitz_5_3: "Blitz 5+3",
|
||||
rapid_10_0: "Rapid 10+0",
|
||||
rapid_15_10: "Rapid 15+10",
|
||||
classical_30_0: "Classical 30+0",
|
||||
none: "No Clock",
|
||||
};
|
||||
|
||||
function isPlayerView(state: unknown): state is PlayerView {
|
||||
return typeof state === "object" && state !== null && "myColor" in state;
|
||||
}
|
||||
@@ -627,8 +615,58 @@ export function ChessGame({ state, myPlayerId, isSpectator, onAction, players, r
|
||||
metaFacts.push({ label: "Wager", value: `${roomOptions!.betAmount} AU` });
|
||||
}
|
||||
|
||||
const recapFacts = [
|
||||
{ label: "Turn", value: colorLabel(view.turn) },
|
||||
{ label: "Latest", value: latestMove?.san ?? "Opening" },
|
||||
{ label: "Clock", value: timeControlLabel },
|
||||
];
|
||||
|
||||
if ((roomOptions?.betAmount ?? 0) > 0) {
|
||||
recapFacts.push({ label: "Stake", value: `${roomOptions!.betAmount} AU` });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-[1440px]">
|
||||
<div className="mb-5 rounded-[28px] border border-border/60 bg-[radial-gradient(circle_at_top,rgba(233,195,73,0.12),transparent_42%),linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01))] p-4 shadow-[0_18px_50px_rgba(0,0,0,0.22)]">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-text-disabled">Quick Recap</div>
|
||||
<div className="mt-2 text-xl font-display font-semibold text-foreground">{statusTitle}</div>
|
||||
<div className="mt-1 text-sm text-text-secondary">{statusText}</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 text-xs">
|
||||
{view.isCheck && !isGameOver && (
|
||||
<span className="rounded-full bg-destructive/15 px-2.5 py-1 text-destructive">Check</span>
|
||||
)}
|
||||
{!isSpectator && (
|
||||
<span className="rounded-full bg-card/70 px-2.5 py-1 text-text-secondary">
|
||||
Playing as {colorLabel(myColor)}
|
||||
</span>
|
||||
)}
|
||||
{isSpectator && (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-card/70 px-2.5 py-1 text-text-secondary">
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
Spectating
|
||||
</span>
|
||||
)}
|
||||
{queuedMove && !isGameOver && (
|
||||
<span className="rounded-full bg-info/15 px-2.5 py-1 text-info">
|
||||
Premove: {formatMoveIntent(queuedMove)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{recapFacts.map(fact => (
|
||||
<div key={fact.label} className="rounded-2xl border border-border/60 bg-card/80 px-4 py-3">
|
||||
<div className="text-[11px] uppercase tracking-[0.18em] text-text-disabled">{fact.label}</div>
|
||||
<div className="mt-1 truncate text-sm font-semibold text-foreground">{fact.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px] xl:items-start">
|
||||
<section className="min-w-0">
|
||||
<div className="mx-auto flex max-w-[860px] flex-col items-center gap-4 lg:min-h-[calc(100vh-14rem)] lg:justify-center">
|
||||
|
||||
25
panel/src/games/chess/timeControls.ts
Normal file
25
panel/src/games/chess/timeControls.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
export interface ChessTimeControlOption {
|
||||
key: string;
|
||||
label: string;
|
||||
category: "Bullet" | "Blitz" | "Rapid" | "Classical" | "No Clock";
|
||||
detail: string;
|
||||
}
|
||||
|
||||
export const CHESS_TIME_CONTROLS: ChessTimeControlOption[] = [
|
||||
{ key: "bullet_1_0", label: "1+0", category: "Bullet", detail: "Instant games with no increment." },
|
||||
{ key: "bullet_2_1", label: "2+1", category: "Bullet", detail: "Fast clock with a small recovery buffer." },
|
||||
{ key: "blitz_3_0", label: "3+0", category: "Blitz", detail: "Classic blitz pace for sharp openings." },
|
||||
{ key: "blitz_3_2", label: "3+2", category: "Blitz", detail: "Short games with enough time to convert." },
|
||||
{ key: "blitz_5_0", label: "5+0", category: "Blitz", detail: "Simple blitz with no increment pressure." },
|
||||
{ key: "blitz_5_3", label: "5+3", category: "Blitz", detail: "Balanced default for most quick matches." },
|
||||
{ key: "rapid_10_0", label: "10+0", category: "Rapid", detail: "More room for calculated middlegames." },
|
||||
{ key: "rapid_15_10", label: "15+10", category: "Rapid", detail: "Longer sessions with generous increment." },
|
||||
{ key: "classical_30_0", label: "30+0", category: "Classical", detail: "Deliberate play for deep analysis." },
|
||||
{ key: "none", label: "None", category: "No Clock", detail: "Untimed board for casual or teaching games." },
|
||||
];
|
||||
|
||||
export const CHESS_TIME_CONTROL_LABELS = Object.fromEntries(
|
||||
CHESS_TIME_CONTROLS.map(control => [control.key, `${control.category === "No Clock" ? "" : `${control.category} `}${control.label}`.trim()]),
|
||||
) as Record<string, string>;
|
||||
|
||||
export const CHESS_TIME_CONTROL_CATEGORIES = ["Bullet", "Blitz", "Rapid", "Classical", "No Clock"] as const;
|
||||
@@ -14,6 +14,8 @@ export interface GameUIPlugin {
|
||||
slug: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
tagline: string;
|
||||
description: string;
|
||||
minPlayers: number;
|
||||
maxPlayers: number;
|
||||
/** If true, the host must manually start the game. */
|
||||
@@ -47,6 +49,8 @@ gameUIRegistry.register({
|
||||
slug: "chess",
|
||||
name: "Chess",
|
||||
icon: "\u265A",
|
||||
tagline: "Head-to-head duels with clock and wager options.",
|
||||
description: "Challenge another player, choose a time control, and launch a clean board built for focused play.",
|
||||
minPlayers: 2,
|
||||
maxPlayers: 2,
|
||||
component: ChessGame,
|
||||
@@ -56,6 +60,8 @@ gameUIRegistry.register({
|
||||
slug: "blackjack",
|
||||
name: "Blackjack",
|
||||
icon: "\uD83C\uDCA1",
|
||||
tagline: "Live table rounds with seating, betting, and spectator support.",
|
||||
description: "Open a table, set the stake, and manage a shared room where players can buy in and queue for the next hand.",
|
||||
minPlayers: 1,
|
||||
maxPlayers: 6,
|
||||
manualStart: true,
|
||||
|
||||
@@ -24,6 +24,21 @@ interface GameRoomState {
|
||||
roomOptions: { betAmount?: number; timeControl?: string };
|
||||
}
|
||||
|
||||
function createInitialRoomState(): GameRoomState {
|
||||
return {
|
||||
gameState: null,
|
||||
players: [],
|
||||
spectators: [],
|
||||
roomStatus: "connecting",
|
||||
isSpectator: false,
|
||||
gameOver: null,
|
||||
roundResult: null,
|
||||
error: null,
|
||||
sessionReplaced: false,
|
||||
roomOptions: {},
|
||||
};
|
||||
}
|
||||
|
||||
export function useGameRoom(roomId: string, userId: string, role?: string, preferAs: "player" | "spectator" = "player") {
|
||||
const { send, subscribe, connected } = useWebSocket();
|
||||
const navigate = useNavigate();
|
||||
@@ -38,22 +53,13 @@ export function useGameRoom(roomId: string, userId: string, role?: string, prefe
|
||||
}
|
||||
}, []);
|
||||
|
||||
const [state, setState] = useState<GameRoomState>({
|
||||
gameState: null,
|
||||
players: [],
|
||||
spectators: [],
|
||||
roomStatus: "connecting",
|
||||
isSpectator: false,
|
||||
gameOver: null,
|
||||
roundResult: null,
|
||||
error: null,
|
||||
sessionReplaced: false,
|
||||
roomOptions: {},
|
||||
});
|
||||
const [state, setState] = useState<GameRoomState>(() => createInitialRoomState());
|
||||
|
||||
useEffect(() => {
|
||||
if (!connected) return;
|
||||
|
||||
setState(createInitialRoomState());
|
||||
|
||||
send({ type: "JOIN_ROOM", roomId, preferAs, role: role ?? "player" });
|
||||
|
||||
const unsubscribe = subscribe((msg: any) => {
|
||||
@@ -180,7 +186,7 @@ export function useGameRoom(roomId: string, userId: string, role?: string, prefe
|
||||
send({ type: "LEAVE_ROOM", roomId });
|
||||
unsubscribe();
|
||||
};
|
||||
}, [roomId, connected, userId, send, subscribe]);
|
||||
}, [connected, preferAs, role, roomId, send, subscribe, userId]);
|
||||
|
||||
const sendAction = useCallback((action: unknown) => {
|
||||
const sent = send({ type: "GAME_ACTION", roomId, action });
|
||||
|
||||
Reference in New Issue
Block a user