create topbar for mobile

src/client/graphics/layers/ControlPanel.ts

@@ -114,7 +114,7 @@ export class ControlPanel extends LitElement implements Layer {
     return html`
       <div
         class="${this._isVisible
-          ? "w-full lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg rounded-lg backdrop-blur"
+          ? "w-full text-sm lg:text-m lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg rounded-lg backdrop-blur"
           : "hidden"}"
       >
         <div class="hidden lg:block bg-black/30 text-white mb-4 p-2 rounded">

src/client/graphics/layers/TopBar.ts

@@ -0,0 +1,66 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { GameView } from "../../../core/game/GameView";
+import { Layer } from "./Layer";
+import { renderNumber, renderTroops } from "../../Utils";
+
+@customElement("top-bar")
+export class TopBar extends LitElement implements Layer {
+  public game: GameView;
+  private isVisible = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  init() {
+    this.isVisible = true;
+    this.requestUpdate();
+  }
+
+  tick() {
+    this.requestUpdate();
+  }
+
+  render() {
+    if (!this.isVisible) {
+      return html``;
+    }
+    const myPlayer = this.game?.myPlayer();
+    if (!myPlayer?.isAlive() || this.game?.inSpawnPhase()) {
+      return html``;
+    }
+    console.log("rendering top bar");
+    const popRate = this.game.config().populationIncreaseRate(myPlayer) * 10;
+    const maxPop = this.game.config().maxPopulation(myPlayer);
+    const goldPerSecond = this.game.config().goldAdditionRate(myPlayer) * 10;
+    return html`
+      <div
+        class="fixed top-0 z-50 bg-black/90 text-white text-sm p-1 rounded grid grid-cols-1 sm:grid-cols-2 w-2/3 sm:w-2/3 md:w-1/2 lg:hidden"
+      >
+        <!-- Pop section (takes 2 columns on desktop) -->
+        <div
+          class="sm:col-span-1 flex items-center space-x-1 overflow-x-auto whitespace-nowrap"
+        >
+          <span class="font-bold shrink-0">Pop:</span>
+          <span
+            >${renderTroops(myPlayer.population())} /
+            ${renderTroops(maxPop)}</span
+          >
+          <span>(+${renderTroops(popRate)})</span>
+        </div>
+
+        <!-- Gold section (takes 1 column on desktop) -->
+        <div
+          class="flex items-center space-x-2 overflow-x-auto whitespace-nowrap"
+        >
+          <span class="font-bold shrink-0">Gold:</span>
+          <span
+            >${renderNumber(myPlayer.gold())}
+            (+${renderNumber(goldPerSecond)})</span
+          >
+        </div>
+      </div>
+    `;
+  }
+}