Add a persistent event log for shop and prep actions.

web/src/components/Table.tsx

@@ -6,6 +6,7 @@ import { ArrangePhase } from './ArrangePhase'
 import { BattlePhase } from './BattlePhase'
 import { GameOver } from './GameOver'
 import { DebugPanel } from './DebugPanel'
+import { EventLog } from './EventLog'
 
 // Table connects to the game and routes to the right phase screen.
 export function Table({ session, onLeave }: { session: Session; onLeave: () => void }) {
@@ -56,15 +57,20 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
         </button>
       </header>
 
-      <main className="table-main">
-        {view.phase === 'lobby' && <Lobby view={view} />}
-        {(view.phase === 'shop' || view.phase === 'cleanup') && (
-          <ShopPhase view={view} you={you} send={send} />
+      <div className="table-body">
+        <main className="table-main">
+          {view.phase === 'lobby' && <Lobby view={view} />}
+          {(view.phase === 'shop' || view.phase === 'cleanup') && (
+            <ShopPhase view={view} you={you} send={send} />
+          )}
+          {view.phase === 'arrange' && <ArrangePhase view={view} you={you} send={send} />}
+          {view.phase === 'battle' && <BattlePhase view={view} send={send} />}
+          {view.phase === 'gameover' && <GameOver view={view} onLeave={onLeave} />}
+        </main>
+        {view.phase !== 'lobby' && (
+          <EventLog entries={view.log ?? []} youSeat={view.youSeat} />
         )}
-        {view.phase === 'arrange' && <ArrangePhase view={view} you={you} send={send} />}
-        {view.phase === 'battle' && <BattlePhase view={view} send={send} />}
-        {view.phase === 'gameover' && <GameOver view={view} onLeave={onLeave} />}
-      </main>
+      </div>
 
       {opponents.some((p) => !p.connected) && view.phase !== 'lobby' && (
         <div className="banner banner-warn">An opponent is disconnected…</div>