Add ability to hover pets in event log.

web/src/components/CardView.tsx

@@ -82,6 +82,62 @@ function triggersOf(text?: string): string[] {
   return out
 }
 
+// TriggerGloss renders the plain-English explanation of a card's trigger words,
+// shown beneath the hover magnifier (and nothing at all if none apply).
+function TriggerGloss({ card }: { card: Card }) {
+  const trigs = triggersOf(card.effectText).filter((t) => TRIGGER_GLOSS[t])
+  if (trigs.length === 0) return null
+  return (
+    <div className="trigger-gloss">
+      {trigs.map((t) => (
+        <div className="trigger-gloss-line" key={t}>
+          <strong>{t}</strong> — {TRIGGER_GLOSS[t]}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// CardMagnify portals a large floating copy of a card near the cursor, clamped
+// into the viewport. It's the shared hover-preview used both by CardView's own
+// magnifier and by card references in the event log.
+export function CardMagnify({
+  card,
+  x,
+  y,
+  bonus = 0,
+  damage = 0,
+  dead,
+  flip,
+}: {
+  card: Card
+  x: number
+  y: number
+  bonus?: number
+  damage?: number
+  dead?: boolean
+  // flip anchors the preview to the right of the cursor and grows it leftward,
+  // for hovers near the right edge (e.g. the event log) where the default
+  // rightward growth would run off-screen.
+  flip?: boolean
+}) {
+  const top = Math.min(Math.max(y - 120, 8), window.innerHeight - 320)
+  return createPortal(
+    <div
+      className={`card-magnify ${flip ? 'card-magnify-flip' : ''}`}
+      style={
+        flip
+          ? { right: Math.max(8, window.innerWidth - x + 24), top }
+          : { left: Math.min(x + 24, window.innerWidth - 200), top }
+      }
+    >
+      <CardView card={card} size="lg" bonus={bonus} damage={damage} dead={dead} preview />
+      <TriggerGloss card={card} />
+    </div>,
+    document.body,
+  )
+}
+
 interface Props {
   card: Card
   size?: 'sm' | 'md' | 'lg'
@@ -135,33 +191,9 @@ export function CardView({
 
   // Place the magnified preview near the cursor, clamped into the viewport.
   const previewEl =
-    hover && !preview && !noMagnify
-      ? createPortal(
-          <div
-            className="card-magnify"
-            style={{
-              left: Math.min(hover.x + 24, window.innerWidth - 200),
-              top: Math.min(Math.max(hover.y - 120, 8), window.innerHeight - 320),
-            }}
-          >
-            <CardView card={card} size="lg" bonus={bonus} damage={damage} dead={dead} preview />
-            {(() => {
-              const trigs = triggersOf(card.effectText).filter((t) => TRIGGER_GLOSS[t])
-              if (trigs.length === 0) return null
-              return (
-                <div className="trigger-gloss">
-                  {trigs.map((t) => (
-                    <div className="trigger-gloss-line" key={t}>
-                      <strong>{t}</strong> — {TRIGGER_GLOSS[t]}
-                    </div>
-                  ))}
-                </div>
-              )
-            })()}
-          </div>,
-          document.body,
-        )
-      : null
+    hover && !preview && !noMagnify ? (
+      <CardMagnify card={card} x={hover.x} y={hover.y} bonus={bonus} damage={damage} dead={dead} />
+    ) : null
 
   return (
     <div