Streamline game lobby copy and room facts
All checks were successful
CI / Deploy / test (push) Successful in 1m15s
CI / Deploy / deploy (push) Successful in 1m4s

- Tighten lobby messaging and empty-state copy
- Remove the obsolete "What Changed" sidebar
- Build room facts inline instead of with `useMemo`
This commit is contained in:
syntaxbullet
2026-04-10 11:49:36 +02:00
parent b0a103d8ce
commit 2fb8d559a6
2 changed files with 9 additions and 23 deletions

View File

@@ -533,7 +533,7 @@ export function GameLobby() {
Host faster. Join clearer. Spectate without guessing. Host faster. Join clearer. Spectate without guessing.
</h1> </h1>
<p className="mt-3 max-w-2xl text-sm leading-6 text-text-secondary sm:text-base"> <p className="mt-3 max-w-2xl text-sm leading-6 text-text-secondary sm:text-base">
The lobby now separates waiting rooms from active tables, exposes launch rules up front, and makes room creation feel like one guided flow instead of a stack of toggles. Browse open rooms, check seats and stakes at a glance, and create a table with the settings you need.
</p> </p>
<div className="mt-5 flex flex-wrap items-center gap-3"> <div className="mt-5 flex flex-wrap items-center gap-3">
@@ -630,7 +630,7 @@ export function GameLobby() {
</div> </div>
<div className="mt-4 font-display text-2xl font-semibold text-foreground">No active rooms yet</div> <div className="mt-4 font-display text-2xl font-semibold text-foreground">No active rooms yet</div>
<p className="mt-2 text-sm text-text-tertiary"> <p className="mt-2 text-sm text-text-tertiary">
Create a new room to seed the lobby, or switch filters if you expected another game type. Create a room to get started, or switch filters if you are looking for a different game.
</p> </p>
<button <button
onClick={() => setShowCreate(true)} onClick={() => setShowCreate(true)}
@@ -774,15 +774,6 @@ export function GameLobby() {
})} })}
</div> </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">What Changed</div>
<div className="mt-4 space-y-3 text-sm text-text-secondary">
<p>Room cards now surface launch rules, occupancy, and stake without opening the room.</p>
<p>The creation flow keeps game selection and configuration in one place instead of hiding presets behind repeated buttons.</p>
<p>Waiting tables and live games are visually separated so players know whether they can still sit down.</p>
</div>
</div>
</aside> </aside>
</section> </section>

View File

@@ -1,4 +1,4 @@
import { useMemo, useState } from "react"; import { useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom"; import { useLocation, useNavigate, useParams } from "react-router-dom";
import { import {
ArrowLeft, ArrowLeft,
@@ -250,17 +250,12 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
: `${hostPlayer?.username ?? "The host"} will start the game when the table is ready.` : `${hostPlayer?.username ?? "The host"} will start the game when the table is ready.`
: `This room starts automatically once ${plugin.maxPlayers} seats are filled.`; : `This room starts automatically once ${plugin.maxPlayers} seats are filled.`;
const roomFacts = useMemo(() => { const roomFacts = [
const facts = [ { label: "Format", value: plugin.manualStart ? "Manual start" : "Auto start" },
{ label: "Format", value: plugin.manualStart ? "Manual start" : "Auto start" }, { label: "Seats", value: plugin.minPlayers === plugin.maxPlayers ? `${plugin.maxPlayers}` : `${plugin.minPlayers}-${plugin.maxPlayers}` },
{ label: "Seats", value: plugin.minPlayers === plugin.maxPlayers ? `${plugin.maxPlayers}` : `${plugin.minPlayers}-${plugin.maxPlayers}` }, ...(timeControl ? [{ label: "Clock", value: timeControl }] : []),
]; ...(betAmount > 0 ? [{ label: "Stake", value: `${betAmount} AU` }] : []),
];
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 ( return (
<div className="space-y-6"> <div className="space-y-6">