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