initial commit

2026-09-04 16:03:17 +03:00
commit a05d5f4547
31 changed files with 2842 additions and 0 deletions
@@ -0,0 +1,50 @@
+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">&gt;</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);