52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
||
import { ResourceStringView } from "./ResourceStringView";
|
||
import { Upgrade } from "../model/upgrade";
|
||
import { isResourceSetZero } from "../utils/resources";
|
||
|
||
type Props = {
|
||
upgrade: Upgrade;
|
||
}
|
||
|
||
export const UpgradeView = observer(function ({ upgrade }: Props) {
|
||
|
||
function handleClick(): void {
|
||
if (upgrade.isOpen() && upgrade.isAffordable())
|
||
upgrade.execute();
|
||
}
|
||
|
||
let classNames = ['upgrade'];
|
||
if (!upgrade.isOpen())
|
||
classNames.push('closed')
|
||
|
||
return <div
|
||
className={classNames.join(' ')}
|
||
onClick={handleClick}
|
||
>
|
||
<div className="name">{upgrade.name}</div>
|
||
{upgrade.level > 0 ? <div className="level">{upgrade.level} ур</div> : <></>}
|
||
<div className="description">{upgrade.description}</div>
|
||
{
|
||
!upgrade.isOpen()
|
||
? (
|
||
!isResourceSetZero(upgrade.costToOpen)
|
||
? <ResourceStringView className="cost" prefix="Открывается на" resources={upgrade.costToOpen} partial={true} />
|
||
: <></>
|
||
)
|
||
: (
|
||
!isResourceSetZero(upgrade.costToBuy)
|
||
? <ResourceStringView className="cost" prefix="Покупка" resources={upgrade.costToBuy} partial={true} />
|
||
: <></>
|
||
)
|
||
}
|
||
{/* <div>Открывается на: <ResourceStringView className="cost" resources={upgrade.costToOpen} partial={true} /></div>
|
||
<div>Покупка: <ResourceStringView className="cost" resources={upgrade.costToBuy} partial={true} /></div> */}
|
||
{/* {
|
||
[...Array(10).keys()].map((lvl: number) => <div>
|
||
{lvl}
|
||
<ResourceStringView className="cost" resources={upgrade.evalCostToUpgrade(lvl)} partial={true} />
|
||
<ResourceStringView className="cost" resources={upgrade.evalCostToStepUpgrade(lvl)} partial={true} />
|
||
</div>)
|
||
} */}
|
||
</div>;
|
||
});
|