51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import type { GameStore } from '../game/GameStore';
|
|
import { costForNextLevel, UPGRADE_LIST } from '../game/upgrades';
|
|
import { COIN_SPRITE } from '../game/sprites';
|
|
import PixelSprite from './PixelSprite';
|
|
|
|
interface Props {
|
|
store: GameStore;
|
|
}
|
|
|
|
function Sidebar({ store }: Props) {
|
|
return (
|
|
<div className="sidebar">
|
|
<h2 className="sidebar__title">Апгрейды</h2>
|
|
<div className="upgrade-list">
|
|
{UPGRADE_LIST.map((def) => {
|
|
const level = store.upgradeLevels[def.id];
|
|
const cost = costForNextLevel(def, level);
|
|
const canAfford = store.inventory.coins >= cost;
|
|
|
|
return (
|
|
<button
|
|
key={def.id}
|
|
type="button"
|
|
className="upgrade-btn"
|
|
disabled={!canAfford}
|
|
onClick={() => store.buyUpgrade(def.id)}
|
|
>
|
|
<div className="upgrade-btn__header">
|
|
<span className="upgrade-btn__name">{def.name}</span>
|
|
<span className="upgrade-btn__level">Ур. {level}</span>
|
|
</div>
|
|
<div className="upgrade-btn__effects">
|
|
<span>{def.formatEffect(def.effectAtLevel(level))}</span>
|
|
<span className="upgrade-btn__arrow">></span>
|
|
<span>{def.formatEffect(def.effectAtLevel(level + 1))}</span>
|
|
</div>
|
|
<div className="upgrade-btn__cost">
|
|
<PixelSprite pixels={COIN_SPRITE} size={16} />
|
|
<span>{cost}</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(Sidebar);
|