48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import { formatClock } from '../game/daynight';
|
|
import type { GameStore } from '../game/GameStore';
|
|
import { COIN_SPRITE, HEART_SPRITE, LOG_SPRITE, MEAT_SPRITE, TWIG_SPRITE } from '../game/sprites';
|
|
import PixelSprite from './PixelSprite';
|
|
|
|
interface Props {
|
|
store: GameStore;
|
|
onExitToMenu: () => void;
|
|
}
|
|
|
|
function Topbar({ store, onExitToMenu }: Props) {
|
|
return (
|
|
<div className="topbar">
|
|
<h1 className="topbar__title">Forest</h1>
|
|
<div className="inventory-slot">
|
|
<span>День {store.day}, {formatClock(store.hour)}</span>
|
|
</div>
|
|
<div className="inventory-slot">
|
|
<PixelSprite pixels={HEART_SPRITE} size={18} />
|
|
<span>{store.characterHp.toFixed(1)}/{store.characterMaxHp}</span>
|
|
</div>
|
|
<div className="spacer" />
|
|
<div className="inventory-slot">
|
|
<PixelSprite pixels={TWIG_SPRITE} size={22} />
|
|
<span>{store.inventory.twigs}</span>
|
|
</div>
|
|
<div className="inventory-slot">
|
|
<PixelSprite pixels={LOG_SPRITE} size={28} />
|
|
<span>{store.inventory.logs}</span>
|
|
</div>
|
|
<div className="inventory-slot">
|
|
<PixelSprite pixels={MEAT_SPRITE} size={22} />
|
|
<span>{store.inventory.meat}</span>
|
|
</div>
|
|
<div className="inventory-slot">
|
|
<PixelSprite pixels={COIN_SPRITE} size={24} />
|
|
<span>{store.inventory.coins.toFixed(1)}</span>
|
|
</div>
|
|
<button type="button" className="exit-menu-btn" onClick={onExitToMenu}>
|
|
Выйти в меню
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(Topbar);
|