Use real assets.

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>
             ))}
           </>,