цикл день-ночь, кролики, кровавая луна

src/components/Topbar.tsx

@@ -1,6 +1,7 @@
 import { observer } from 'mobx-react-lite';
+import { formatClock } from '../game/daynight';
 import type { GameStore } from '../game/GameStore';
-import { COIN_SPRITE, LOG_SPRITE, TWIG_SPRITE } from '../game/sprites';
+import { COIN_SPRITE, HEART_SPRITE, LOG_SPRITE, MEAT_SPRITE, TWIG_SPRITE } from '../game/sprites';
 import PixelSprite from './PixelSprite';
 
 interface Props {
@@ -13,7 +14,11 @@ function Topbar({ store, onExitToMenu }: Props) {
     <div className="topbar">
       <h1 className="topbar__title">Forest</h1>
       <div className="inventory-slot">
-        <span>Уровень {store.level}</span>
+        <span>День {store.day}, {formatClock(store.hour)}</span>
+      </div>
+      <div className="inventory-slot">
+        <PixelSprite pixels={HEART_SPRITE} size={18} />
+        <span>{store.characterHp}/{store.characterMaxHp}</span>
       </div>
       <div className="spacer" />
       <div className="inventory-slot">
@@ -24,6 +29,10 @@ function Topbar({ store, onExitToMenu }: Props) {
         <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>