feat(game): 添加动物精灵图像变体支持并优化揭示动画

- 引入 light-animal-sprite 图像资源和 variant 属性支持
- 在动物组件中实现正常和浅色精灵图像切换功能
- 重构桌面和移动版动物组件的揭示动画逻辑
- 移除冗余的运动偏好检测和布局效果钩子
- 调整揭示动画的时间参数和平滑度曲线
- 更新资源预加载配置以包含浅色动物图像
- 修改控制组件中的投注数量调整状态管理
- 优化脚本生成精灵图像的复用性

scripts/generate-animal-sprite.mjs

@@ -5,7 +5,7 @@ import sharp from 'sharp'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const rootDir = path.resolve(__dirname, '..')
 const animalDir = path.join(rootDir, 'src/assets/animal')
-const outputPath = path.join(animalDir, 'animal-sprite.webp')
+const lightAnimalDir = path.join(rootDir, 'src/assets/light-animal')
 
 const columns = 6
 const rows = 6
@@ -13,41 +13,47 @@ const cellWidth = 446
 const cellHeight = 224
 const quality = 82
 
-const composites = await Promise.all(
-  Array.from({ length: columns * rows }, async (_, index) => {
-    const id = index + 1
-    const input = path.join(animalDir, `${id}.webp`)
-    const left = (index % columns) * cellWidth
-    const top = Math.floor(index / columns) * cellHeight
+async function generateSprite(sourceDir, outputFileName) {
+  const outputPath = path.join(sourceDir, outputFileName)
+  const composites = await Promise.all(
+    Array.from({ length: columns * rows }, async (_, index) => {
+      const id = index + 1
+      const input = path.join(sourceDir, `${id}.webp`)
+      const left = (index % columns) * cellWidth
+      const top = Math.floor(index / columns) * cellHeight
 
-    const buffer = await sharp(input)
-      .resize(cellWidth, cellHeight, {
-        fit: 'cover',
-        position: 'center',
-      })
-      .webp({ quality })
-      .toBuffer()
+      const buffer = await sharp(input)
+        .resize(cellWidth, cellHeight, {
+          fit: 'cover',
+          position: 'center',
+        })
+        .webp({ quality })
+        .toBuffer()
 
-    return {
-      input: buffer,
-      left,
-      top,
-    }
-  }),
-)
+      return {
+        input: buffer,
+        left,
+        top,
+      }
+    }),
+  )
 
-await sharp({
-  create: {
-    width: columns * cellWidth,
-    height: rows * cellHeight,
-    channels: 4,
-    background: { r: 0, g: 0, b: 0, alpha: 0 },
-  },
-})
-  .composite(composites)
-  .webp({ quality })
-  .toFile(outputPath)
+  await sharp({
+    create: {
+      width: columns * cellWidth,
+      height: rows * cellHeight,
+      channels: 4,
+      background: { r: 0, g: 0, b: 0, alpha: 0 },
+    },
+  })
+    .composite(composites)
+    .webp({ quality })
+    .toFile(outputPath)
 
-console.log(
-  `Generated ${path.relative(rootDir, outputPath)} (${columns}x${rows}, ${cellWidth}x${cellHeight})`,
-)
+  console.log(
+    `Generated ${path.relative(rootDir, outputPath)} (${columns}x${rows}, ${cellWidth}x${cellHeight})`,
+  )
+}
+
+await generateSprite(animalDir, 'animal-sprite.webp')
+await generateSprite(lightAnimalDir, 'light-animal-sprite.webp')