initial commit

src/components/Topbar.tsx

@@ -0,0 +1,27 @@
+import { observer } from 'mobx-react-lite';
+import type { GameStore } from '../game/GameStore';
+import { COIN_SPRITE, LOG_SPRITE } from '../game/sprites';
+import PixelSprite from './PixelSprite';
+
+interface Props {
+  store: GameStore;
+}
+
+function Topbar({ store }: Props) {
+  return (
+    <div className="topbar">
+      <h1 className="topbar__title">Forest</h1>
+      <div className="spacer" />
+      <div className="inventory-slot">
+        <PixelSprite pixels={LOG_SPRITE} size={28} />
+        <span>{store.inventory.logs}</span>
+      </div>
+      <div className="inventory-slot">
+        <PixelSprite pixels={COIN_SPRITE} size={24} />
+        <span>{store.inventory.coins}</span>
+      </div>
+    </div>
+  );
+}
+
+export default observer(Topbar);