Use real assets.

web/src/components/CardView.tsx

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import type { Card } from '../types'
-import { artFor } from '../petArt'
+import { artFor, artUrlFor } from '../petArt'
 
 // The suit's "hat" — the trade-in symbol printed on the real cards, tinted to
 // the suit's colour. Drawn as a tiny sun-hat SVG so it scales crisply.
@@ -272,7 +272,11 @@ export function CardView({
         )}
         {damage > 0 && !dead && <span className="card-damage">−{damage}</span>}
         <div className="card-art" aria-hidden>
-          {artFor(card.name)}
+          {artUrlFor(card.name) ? (
+            <img className="card-art-img" src={artUrlFor(card.name)!} alt="" draggable={false} />
+          ) : (
+            artFor(card.name)
+          )}
         </div>
       </div>
       {/* Lower panel: the suit hat, name, and tier die on one row, the ability

web/src/components/ShopPhase.tsx

@@ -4,10 +4,11 @@ import { createPortal } from 'react-dom'
 import type { Card, ClientMessage, GameView, PlayerView } from '../types'
 import { CardView } from './CardView'
 import { useCardAnimations } from '../anim'
+import { artFor, artUrlFor } from '../petArt'
 
 interface Flyer {
   key: string
-  emoji: string
+  name: string
   x: number
   y: number
 }
@@ -174,7 +175,7 @@ export function ShopPhase({ view, you, send }: Props) {
       if (!rect) continue
       added.push({
         key: `spawn-${e.seq}`,
-        emoji: e.spawn === 'bee' ? '🐝' : '🍎',
+        name: e.spawn === 'bee' ? 'Bee' : 'Apple',
         x: rect.left + rect.width / 2,
         y: rect.top + rect.height / 2,
       })
@@ -580,7 +581,11 @@ export function ShopPhase({ view, you, send }: Props) {
                   setFlyers((f) => f.filter((x) => x.key !== fl.key))
                 }
               >
-                {fl.emoji}
+                {artUrlFor(fl.name) ? (
+                  <img className="spawn-flyer-img" src={artUrlFor(fl.name)!} alt="" draggable={false} />
+                ) : (
+                  artFor(fl.name)
+                )}
               </div>
             ))}
           </>,