Magnify cards on hover

Hovering any card portals a large copy beside the cursor that grows to
fit its full effect text, so small or clipped cards can be read at a
glance.

web/src/components/CardView.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react'
+import { createPortal } from 'react-dom'
 import type { Card } from '../types'
 import { artFor } from '../petArt'
 
@@ -11,6 +13,8 @@ interface Props {
   bonus?: number
   damage?: number
   dead?: boolean
+  // preview marks the floating magnified copy so it doesn't magnify itself.
+  preview?: boolean
 }
 
 // CardView renders one physical card: pets get a power badge and a colored
@@ -25,7 +29,11 @@ export function CardView({
   bonus = 0,
   damage = 0,
   dead,
+  preview,
 }: Props) {
+  // Hover magnifier: show a large floating copy beside the cursor. The
+  // preview copy itself opts out so it can't recurse.
+  const [hover, setHover] = useState<{ x: number; y: number } | null>(null)
   const power = (card.power ?? 0) + bonus
   const classes = [
     'card',
@@ -39,12 +47,33 @@ export function CardView({
     .filter(Boolean)
     .join(' ')
 
+  // Place the magnified preview near the cursor, clamped into the viewport.
+  const previewEl =
+    hover && !preview
+      ? createPortal(
+          <div
+            className="card-magnify"
+            style={{
+              left: Math.min(hover.x + 24, window.innerWidth - 180),
+              top: Math.min(Math.max(hover.y - 120, 8), window.innerHeight - 250),
+            }}
+          >
+            <CardView card={card} size="lg" bonus={bonus} damage={damage} dead={dead} preview />
+          </div>,
+          document.body,
+        )
+      : null
+
   return (
     <div
       className={classes}
       onClick={disabled ? undefined : onClick}
       role={onClick ? 'button' : undefined}
+      onMouseEnter={preview ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
+      onMouseMove={preview ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
+      onMouseLeave={preview ? undefined : () => setHover(null)}
     >
+      {previewEl}
       <div className="card-top">
         <span className="card-tier">{card.tier ? `T${card.tier}` : '·'}</span>
         {card.suit && <span className={`suit-dot suit-${card.suit}`} title={`${card.suit} suit`} />}