Refresh waiting room cleanup on activity
- Extend waiting rooms while players or spectators are active - Make cleanup time configurable for tests and defaults - Tweak lobby layout for smaller screens
This commit is contained in:
syntaxbullet
@@ -156,7 +156,7 @@ function CreateRoomDialog({
|
||||
>
|
||||
{selectedGame ? (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<button
|
||||
onClick={onBack}
|
||||
@@ -165,9 +165,9 @@ function CreateRoomDialog({
|
||||
<ChevronLeft className="h-3.5 w-3.5" />
|
||||
Back to game selection
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-3xl">{selectedGame.icon}</span>
|
||||
<div>
|
||||
<div className="min-w-0">
|
||||
<h2 className="font-display text-2xl font-semibold text-foreground">{selectedGame.name}</h2>
|
||||
<p className="mt-1 text-sm text-text-tertiary">{selectedGame.description}</p>
|
||||
</div>
|
||||
@@ -303,7 +303,7 @@ function CreateRoomDialog({
|
||||
<div className="space-y-4">
|
||||
<section className={cn("rounded-3xl border p-4", gameSurfaceClass("blackjack"))}>
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Table Format</div>
|
||||
<div className="mt-3 grid gap-3 sm:grid-cols-2">
|
||||
<div className="mt-3 grid gap-3 md:grid-cols-2">
|
||||
<div className="rounded-2xl border border-white/10 bg-black/12 p-4">
|
||||
<div className="text-sm font-semibold text-foreground">Manual Start</div>
|
||||
<div className="mt-1 text-sm text-text-tertiary">
|
||||
@@ -381,7 +381,7 @@ function CreateRoomDialog({
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-primary">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
@@ -536,11 +536,11 @@ export function GameLobby() {
|
||||
Browse open rooms, check seats and stakes at a glance, and create a table with the settings you need.
|
||||
</p>
|
||||
|
||||
<div className="mt-5 flex flex-wrap items-center gap-3">
|
||||
<div className="mt-5 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
disabled={!connected}
|
||||
className="inline-flex items-center gap-2 rounded-2xl bg-primary px-5 py-3 text-sm font-semibold text-on-primary transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-5 py-3 text-sm font-semibold text-on-primary transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Create Room
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
@@ -556,7 +556,7 @@ export function GameLobby() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-3 sm:grid-cols-3">
|
||||
<div className="mt-6 grid gap-3 md:grid-cols-3">
|
||||
<MetricCard label="Active Rooms" value={String(activeRooms.length)} hint="Waiting and live tables." />
|
||||
<MetricCard label="Players" value={String(totalPlayers)} hint="Currently seated across games." />
|
||||
<MetricCard label="Spectators" value={String(totalSpectators)} hint="Watching without occupying seats." />
|
||||
@@ -589,7 +589,7 @@ export function GameLobby() {
|
||||
|
||||
<div className="rounded-[28px] border border-white/10 bg-card/70 p-4">
|
||||
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Lobby Snapshot</div>
|
||||
<div className="mt-3 grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
<div className="mt-3 grid gap-3 md:grid-cols-3 xl:grid-cols-1">
|
||||
<div className="flex items-center gap-3 text-sm text-text-secondary">
|
||||
<Swords className="h-4 w-4 text-primary" />
|
||||
<span>{waitingRoomCount} room{waitingRoomCount !== 1 ? "s" : ""} waiting to start</span>
|
||||
@@ -662,20 +662,20 @@ export function GameLobby() {
|
||||
)}
|
||||
>
|
||||
<div className={cn("pointer-events-none absolute inset-0 bg-gradient-to-br opacity-60", status.accentClassName)} />
|
||||
<div className="relative flex h-full flex-col">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-3xl">{plugin?.icon ?? "🎮"}</span>
|
||||
<div>
|
||||
<div className="font-display text-2xl font-semibold text-foreground">{room.gameName}</div>
|
||||
<div className="mt-1 text-sm text-text-secondary">
|
||||
{plugin?.description ?? "Game room"}
|
||||
<div className="relative flex h-full flex-col">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-3xl">{plugin?.icon ?? "🎮"}</span>
|
||||
<div className="min-w-0">
|
||||
<div className="font-display text-2xl font-semibold text-foreground">{room.gameName}</div>
|
||||
<div className="mt-1 text-sm text-text-secondary">
|
||||
{plugin?.description ?? "Game room"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className={cn("rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]", status.chipClassName)}>
|
||||
<span className={cn("shrink-0 rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]", status.chipClassName)}>
|
||||
{status.label}
|
||||
</span>
|
||||
</div>
|
||||
@@ -688,7 +688,7 @@ export function GameLobby() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
<div className="mt-5 grid gap-3 md:grid-cols-3">
|
||||
<div className="rounded-2xl border border-white/10 bg-black/10 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" />
|
||||
@@ -714,8 +714,8 @@ export function GameLobby() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex items-center justify-between gap-4">
|
||||
<div className="text-xs text-text-tertiary">
|
||||
<div className="mt-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="break-all text-xs text-text-tertiary">
|
||||
Room ID {room.id.slice(0, 8).toUpperCase()}
|
||||
</div>
|
||||
<button
|
||||
@@ -723,7 +723,7 @@ export function GameLobby() {
|
||||
state: { preferAs: room.status === "waiting" ? "player" : "spectator" },
|
||||
})}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-semibold transition-colors",
|
||||
"inline-flex w-full items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-semibold transition-colors sm:w-auto",
|
||||
room.status === "waiting"
|
||||
? "bg-primary text-on-primary hover:opacity-90"
|
||||
: "border border-white/10 bg-white/5 text-foreground hover:bg-white/10",
|
||||
@@ -765,7 +765,7 @@ export function GameLobby() {
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-text-tertiary">{game.tagline}</div>
|
||||
</div>
|
||||
<span className="rounded-full border border-white/10 bg-card px-2.5 py-1 text-xs text-text-secondary">
|
||||
<span className="shrink-0 rounded-full border border-white/10 bg-card px-2.5 py-1 text-xs text-text-secondary">
|
||||
{roomsForGame}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user