feat: 新增首页和图片资源

src/features/game/components/desktop/desktop-animal.tsx

@@ -0,0 +1,66 @@
+import { SmartImage } from '@/components/smart-image'
+
+const cx = (...classes: Array<string | false | null | undefined>) =>
+  classes.filter(Boolean).join(' ')
+
+const animalModules = import.meta.glob('../../../../assets/animal/*.webp', {
+  eager: true,
+  import: 'default',
+}) as Record<string, string>
+
+const animalImageList = Object.entries(animalModules)
+  .map(([path, url]) => {
+    const match = path.match(/\/(\d+)\.webp$/)
+
+    return {
+      id: Number(match?.[1] ?? 0),
+      url,
+    }
+  })
+  .filter((item) => item.id > 0)
+  .sort((left, right) => left.id - right.id)
+
+interface DesktopAnimalProps {
+  activeId?: number | null
+  className?: string
+  itemClassName?: string
+  imageClassName?: string
+  onSelect?: (animalId: number) => void
+}
+
+export function DesktopAnimal({
+  activeId,
+  className,
+  itemClassName,
+  imageClassName,
+  onSelect,
+}: DesktopAnimalProps) {
+  return (
+    <section className={cx('grid grid-cols-6', className)}>
+      {animalImageList.map((item) => {
+        const isActive = item.id === activeId
+
+        return (
+          <button
+            key={item.id}
+            type="button"
+            onClick={() => onSelect?.(item.id)}
+            className={cx(
+              'flex flex-col items-center transition',
+              'cursor-pointer',
+              isActive &&
+                'border-[rgba(255,151,15,0.95)] shadow-[inset_0_0_16px_rgba(255,151,15,0.55)]',
+              itemClassName,
+            )}
+          >
+            <SmartImage
+              src={item.url}
+              alt={`animal-${item.id}`}
+              className={cx('h-[110px] w-[220px]', imageClassName)}
+            />
+          </button>
+        )
+      })}
+    </section>
+  )
+}