fix(chess): send game updates to move sender + responsive mobile redesign
Some checks failed
Deploy to Production / test (push) Failing after 32s

Bun's ws.publish() excludes the sender, so the player making a move never
received the GAME_UPDATE with the new FEN — causing pieces to snap back.
Added ctx.send() alongside ctx.publish() for GAME_UPDATE and GAME_ENDED.

Also redesigned the panel for mobile: hamburger drawer sidebar, responsive
chess board sizing via ResizeObserver, stacked layouts on small screens,
and touch-friendly modals/controls across lobby and game pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
syntaxbullet
2026-04-02 14:58:40 +02:00
parent 24211dca14
commit 9c4da51cfb
5 changed files with 166 additions and 89 deletions

View File

@@ -49,20 +49,20 @@ export function GameLobby() {
return (
<div>
<div className="flex items-center justify-between mb-6">
<div>
<div className="flex items-center justify-between gap-3 mb-4 md:mb-6">
<div className="min-w-0">
<h1 className="font-display text-lg font-semibold">Games</h1>
<p className="text-sm text-text-tertiary">Browse and create game rooms</p>
<p className="text-sm text-text-tertiary hidden sm:block">Browse and create game rooms</p>
</div>
<button
onClick={() => setShowCreate(true)}
className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors"
className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors shrink-0"
>
+ Create Room
</button>
</div>
<div className="flex gap-2 mb-4">
<div className="flex gap-2 mb-4 overflow-x-auto pb-1">
<button
onClick={() => setFilter(null)}
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
@@ -98,11 +98,11 @@ export function GameLobby() {
{activeRooms.map(room => {
const plugin = gameUIRegistry.get(room.gameSlug);
return (
<div key={room.id} className="flex items-center justify-between px-5 py-3 hover:bg-raised/40 transition-colors">
<div className="flex items-center gap-3">
<span className="text-lg">{plugin?.icon ?? "🎮"}</span>
<div>
<div className="text-sm font-medium">{room.gameName}</div>
<div key={room.id} className="flex items-center justify-between gap-3 px-4 py-3 md:px-5 hover:bg-raised/40 transition-colors">
<div className="flex items-center gap-3 min-w-0">
<span className="text-lg shrink-0">{plugin?.icon ?? "🎮"}</span>
<div className="min-w-0">
<div className="text-sm font-medium truncate">{room.gameName}</div>
<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 ${
room.status === "waiting"
@@ -118,7 +118,7 @@ export function GameLobby() {
</div>
<button
onClick={() => navigate(`/${room.gameSlug}/${room.id}`)}
className={`rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${
className={`rounded-md px-3 py-1.5 text-xs font-semibold transition-colors shrink-0 ${
room.status === "waiting"
? "bg-primary text-primary-foreground hover:bg-primary/90"
: "bg-card border border-border text-text-tertiary hover:text-foreground"
@@ -134,8 +134,8 @@ export function GameLobby() {
</div>
{showCreate && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowCreate(false)}>
<div className="bg-card border border-border rounded-lg p-6 w-full max-w-sm" onClick={e => e.stopPropagation()}>
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/50" onClick={() => setShowCreate(false)}>
<div className="bg-card border border-border rounded-t-xl sm:rounded-lg p-6 w-full sm:max-w-sm" onClick={e => e.stopPropagation()}>
<h2 className="font-display text-base font-semibold mb-4">Create a Room</h2>
<div className="space-y-2">
{gameTypes.map(g => (