Add lobby and pack concept.

web/src/components/Table.tsx

@@ -73,6 +73,22 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
     )
   }
 
+  // A player the host removed from the lobby no longer has a seat.
+  if (view.youSeat < 0) {
+    return (
+      <div className="centered lobby-removed">
+        <div className="lobby-bounce" aria-hidden>
+          👋
+        </div>
+        <h2>You were removed from the game</h2>
+        <p className="muted">The host removed you from this lobby.</p>
+        <button className="btn btn-primary" onClick={onLeave}>
+          Back to home
+        </button>
+      </div>
+    )
+  }
+
   const you = view.players[view.youSeat]
   const opponents = view.players.filter((p) => p.seat !== view.youSeat)
 
@@ -82,7 +98,7 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
         <div className="topbar-brand" title="Super Auto Pets: The Board Game">
           🐾 <span>SAP</span>
         </div>
-        {view.phase !== 'gameover' && (
+        {view.phase !== 'gameover' && view.phase !== 'lobby' && (
           <div className="topbar-round">
             Round <strong>{view.round}</strong> / {view.maxRounds}
           </div>
@@ -118,7 +134,7 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
 
       <div className="table-body">
         <main className="table-main">
-          {view.phase === 'lobby' && <Lobby view={view} />}
+          {view.phase === 'lobby' && <Lobby view={view} send={send} />}
           {view.phase === 'shop' && <ShopPhase view={view} you={you} send={send} />}
           {view.phase === 'arrange' && <ArrangePhase view={view} you={you} send={send} />}
           {view.phase === 'battle' && (