Add pets for tiers 1-3.

web/src/components/CardView.tsx

@@ -1,5 +1,5 @@
 import type { Card } from '../types'
-import { artFor, SUIT_EMOJI } from '../petArt'
+import { artFor } from '../petArt'
 
 interface Props {
   card: Card
@@ -13,8 +13,9 @@ interface Props {
   dead?: boolean
 }
 
-// CardView renders one physical card: pets get a power badge and suit stamp,
-// foods a description line. Battle mode layers on buffs and damage markers.
+// CardView renders one physical card: pets get a power badge and a colored
+// suit dot, foods a description line. Battle mode layers on buffs and damage
+// markers.
 export function CardView({
   card,
   size = 'md',
@@ -45,24 +46,25 @@ export function CardView({
       role={onClick ? 'button' : undefined}
     >
       <div className="card-top">
-        <span className="card-tier">T{card.tier || '–'}</span>
-        {card.suit && (
-          <span className="card-suit" title={`Suit: ${card.suit}`}>
-            {SUIT_EMOJI[card.suit]}
-          </span>
-        )}
+        <span className="card-tier">{card.tier ? `T${card.tier}` : '·'}</span>
+        {card.suit && <span className={`suit-dot suit-${card.suit}`} title={`${card.suit} suit`} />}
       </div>
       <div className="card-art" aria-hidden>
         {artFor(card.name)}
       </div>
       <div className="card-name">{card.name}</div>
       {card.kind === 'pet' ? (
-        <div className="card-bottom">
-          <span className={`card-power ${bonus > 0 ? 'is-buffed' : ''}`}>{power}</span>
-          {damage > 0 && !dead && <span className="card-damage">−{damage}</span>}
-        </div>
+        <>
+          {card.effectText && <div className="card-effect">{card.effectText}</div>}
+          <div className="card-bottom">
+            <span className={`card-power ${bonus > 0 ? 'is-buffed' : ''}`}>{power}</span>
+            {damage > 0 && !dead && <span className="card-damage">−{damage}</span>}
+          </div>
+        </>
       ) : (
-        <div className="card-food-text">+1 power</div>
+        <div className="card-effect">
+          {card.effectText ?? (card.food === 'apple' ? '+1 power (this battle)' : '')}
+        </div>
       )}
       {selected && <div className="card-check">✓</div>}
     </div>