Add pets for tiers 1-3.

web/src/components/ShopPhase.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import type { Card, ClientMessage, GameView, PlayerView } from '../types'
 import { CardView } from './CardView'
-import { SUIT_EMOJI } from '../petArt'
 
 interface Props {
   view: GameView
@@ -55,12 +54,12 @@ export function ShopPhase({ view, you, send }: Props) {
         {cleanup ? (
           excessPets > 0 ? (
             <span className="status-hot">
-              Too many pets! Discard <strong>{excessPets}</strong> — they become
+              Too many pets! Sell <strong>{excessPets}</strong> — they become
               apples 🍎
             </span>
           ) : (
             <span className="muted">
-              Waiting for {opponent?.name ?? 'opponent'} to discard down to{' '}
+              Waiting for {opponent?.name ?? 'opponent'} to sell down to{' '}
               {view.maxPets} pets…
             </span>
           )
@@ -135,9 +134,9 @@ export function ShopPhase({ view, you, send }: Props) {
             <button
               className="btn btn-primary"
               disabled={!cleanupReady}
-              onClick={() => act({ type: 'discard', cards: selected })}
+              onClick={() => act({ type: 'sell', cards: selected })}
             >
-              Discard {excessPets} pet{excessPets > 1 ? 's' : ''} → 🍎
+              Sell {excessPets} pet{excessPets > 1 ? 's' : ''} → 🍎
             </button>
           )
         ) : (
@@ -145,10 +144,10 @@ export function ShopPhase({ view, you, send }: Props) {
             <button
               className="btn btn-secondary"
               disabled={!myTurn || selected.length === 0}
-              onClick={() => act({ type: 'discard', cards: selected })}
-              title="Convert selected cards into apples (+1 power each)"
+              onClick={() => act({ type: 'sell', cards: selected })}
+              title="Convert selected cards into apples (+1 power each, this battle only)"
             >
-              Discard {selected.length > 0 ? selected.length : ''} → 🍎 (1 🪙)
+              Sell {selected.length > 0 ? selected.length : ''} → 🍎 (1 🪙)
             </button>
             <button
               className="btn btn-secondary"
@@ -156,8 +155,13 @@ export function ShopPhase({ view, you, send }: Props) {
               onClick={() => act({ type: 'trade', cards: selected })}
               title="Trade 3 same-suit pets for a pick from the next tier"
             >
-              Trade 3 {sameSuit && selectedCards[0].suit ? SUIT_EMOJI[selectedCards[0].suit] : 'matching'} ↑ Tier{' '}
-              {Math.min(view.round + 1, view.maxRounds)} (1 🪙)
+              Trade 3{' '}
+              {sameSuit && selectedCards[0].suit ? (
+                <span className={`suit-dot suit-${selectedCards[0].suit}`} />
+              ) : (
+                'matching'
+              )}{' '}
+              ↑ Tier {Math.min(view.round + 1, view.maxRounds)} (1 🪙)
             </button>
             <button
               className="btn btn-ghost"