fix(chess): send game updates to move sender + responsive mobile redesign
Some checks failed
Deploy to Production / test (push) Failing after 32s
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:
@@ -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 => (
|
||||
|
||||
Reference in New Issue
Block a user