feat: 实现游戏核心功能与前端界面

- 添加游戏核心系统：战斗、任务、日志、随机数生成等
- 实现前端主界面、HUD、底部导航和各类卡片组件
- 添加用户认证系统与游戏存档持久化
- 配置项目基础架构与开发环境
- 补充文档说明与Docker部署支持

apps/web/src/features/game/components/cards/RecipeCard.tsx

@@ -0,0 +1,37 @@
+import type { RecipeView } from '@tinywaste/game-core';
+import { getItemArt } from '../../uiAssets';
+import { AssetThumb } from '../AssetThumb';
+
+export function RecipeCard({
+  recipe,
+  busy,
+  onCraft,
+}: {
+  recipe: RecipeView;
+  busy: boolean;
+  onCraft: () => void;
+}) {
+  const primaryOutput = recipe.outputs[0];
+
+  return (
+    <article className={`recipe-card ${recipe.craftable ? 'craftable' : ''}`}>
+      <AssetThumb src={getItemArt(primaryOutput?.itemId)} label={recipe.name} />
+      <div className="recipe-copy">
+        <strong>{recipe.name}</strong>
+        <p>{recipe.desc}</p>
+        <small>
+          {recipe.timeCostMin} 分钟 · 精力 -{recipe.energyCost}
+        </small>
+        <small>
+          需求：{recipe.inputs.map((input) => `${input.name} ${input.owned}/${input.count}`).join(' · ')}
+        </small>
+      </div>
+      <div className="recipe-actions">
+        <button className="small-button" onClick={onCraft} disabled={!recipe.craftable || busy}>
+          制作
+        </button>
+        {recipe.disabledReason ? <em>{recipe.disabledReason}</em> : null}
+      </div>
+    </article>
+  );
+}