Add ability to hover pets in event log.

web/src/components/Table.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
 import { useGame } from '../useGame'
-import type { Session } from '../types'
+import { useCatalog } from '../useCatalog'
+import type { Card, Session } from '../types'
 import { Lobby } from './Lobby'
 import { ShopPhase } from './ShopPhase'
 import { ArrangePhase } from './ArrangePhase'
@@ -65,6 +66,27 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
     return lines
   }, [view, inBattle, events, step, battleDone, battleRound])
 
+  // Map every card name we know about to a representative card, so the event
+  // log can preview pets/foods it mentions on hover. The catalog covers all
+  // buyable pets and foods for the pack (even ones not currently in view);
+  // concrete cards from the view fill in tokens and summons (Bee, Apple, …)
+  // that never appear in the shop.
+  const catalog = useCatalog(view?.pack)
+  const cardLookup = useMemo(() => {
+    const map = new Map<string, Card>()
+    for (const c of catalog) if (c.name) map.set(c.name, c)
+    const add = (c?: Card) => {
+      if (c?.name && !map.has(c.name)) map.set(c.name, c)
+    }
+    if (view) {
+      view.shopRow?.forEach(add)
+      view.players?.forEach((p) => p.deck?.forEach(add))
+      view.battle?.lineups?.forEach((line) => line.forEach(add))
+      view.battle?.events?.forEach((ev) => add(ev.card))
+    }
+    return map
+  }, [catalog, view])
+
   if (!view) {
     return (
       <div className="centered muted">
@@ -148,7 +170,12 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
           {view.phase === 'gameover' && <GameOver view={view} onLeave={onLeave} />}
         </main>
         {view.phase !== 'lobby' && (
-          <EventLog entries={entries} youSeat={view.youSeat} battleLines={battleLines} />
+          <EventLog
+            entries={entries}
+            youSeat={view.youSeat}
+            battleLines={battleLines}
+            cardLookup={cardLookup}
+          />
         )}
       </div>