Remove top bar & revert control panel (#1415)

## Description:

Reverting control panel back to v23. Once we remove the worker/troop bar
we can revisit moving it to back to the top.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/graphics/GameRenderer.ts

@@ -15,7 +15,6 @@ import { EventsDisplay } from "./layers/EventsDisplay";
 import { FxLayer } from "./layers/FxLayer";
 import { GameLeftSidebar } from "./layers/GameLeftSidebar";
 import { GameRightSidebar } from "./layers/GameRightSidebar";
-import { GameTopBar } from "./layers/GameTopBar";
 import { GutterAdModal } from "./layers/GutterAdModal";
 import { HeadsUpMessage } from "./layers/HeadsUpMessage";
 import { Layer } from "./layers/Layer";
@@ -162,13 +161,6 @@ export function createRenderer(
   settingsModal.userSettings = userSettings;
   settingsModal.eventBus = eventBus;
 
-  const gameTopBar = document.querySelector("game-top-bar") as GameTopBar;
-  if (!(gameTopBar instanceof GameTopBar)) {
-    console.error("top bar not found");
-  }
-  gameTopBar.game = game;
-  gameTopBar.eventBus = eventBus;
-
   const unitDisplay = document.querySelector("unit-display") as UnitDisplay;
   if (!(unitDisplay instanceof UnitDisplay)) {
     console.error("unit display not found");
@@ -255,7 +247,6 @@ export function createRenderer(
     new SpawnTimer(game, transformHandler),
     leaderboard,
     gameLeftSidebar,
-    gameTopBar,
     unitDisplay,
     gameRightSidebar,
     controlPanel,

src/client/graphics/layers/ControlPanel.ts

@@ -2,16 +2,19 @@ import { LitElement, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { translateText } from "../../../client/Utils";
 import { EventBus } from "../../../core/EventBus";
+import { Gold } from "../../../core/game/Game";
 import { GameView } from "../../../core/game/GameView";
+import { ClientID } from "../../../core/Schemas";
 import { AttackRatioEvent } from "../../InputHandler";
 import { SendSetTargetTroopRatioEvent } from "../../Transport";
-import { renderTroops } from "../../Utils";
+import { renderNumber, renderTroops } from "../../Utils";
 import { UIState } from "../UIState";
 import { Layer } from "./Layer";
 
 @customElement("control-panel")
 export class ControlPanel extends LitElement implements Layer {
   public game: GameView;
+  public clientID: ClientID;
   public eventBus: EventBus;
   public uiState: UIState;
 
@@ -27,13 +30,34 @@ export class ControlPanel extends LitElement implements Layer {
   @state()
   private _population: number;
 
+  @state()
+  private _maxPopulation: number;
+
+  @state()
+  private popRate: number;
+
+  @state()
+  private _troops: number;
+
+  @state()
+  private _workers: number;
+
   @state()
   private _isVisible = false;
 
   @state()
   private _manpower: number = 0;
 
+  @state()
+  private _gold: Gold;
+
+  @state()
+  private _goldPerSecond: Gold;
+
+  private _popRateIsIncreasing: boolean = true;
+
   private _lastPopulationIncreaseRate: number;
+
   private init_: boolean = false;
 
   init() {
@@ -90,17 +114,31 @@ export class ControlPanel extends LitElement implements Layer {
       return;
     }
 
-    const popIncreaseRate = player.population() - this._population;
     if (this.game.ticks() % 5 === 0) {
-      this._lastPopulationIncreaseRate = popIncreaseRate;
+      this.updatePopulationIncrease();
     }
 
     this._population = player.population();
+    this._maxPopulation = this.game.config().maxPopulation(player);
+    this._gold = player.gold();
+    this._troops = player.troops();
+    this._workers = player.workers();
+    this.popRate = this.game.config().populationIncreaseRate(player) * 10;
+    this._goldPerSecond = this.game.config().goldAdditionRate(player) * 10n;
 
     this.currentTroopRatio = player.troops() / player.population();
     this.requestUpdate();
   }
 
+  private updatePopulationIncrease() {
+    const player = this.game?.myPlayer();
+    if (player === null) return;
+    const popIncreaseRate = this.game.config().populationIncreaseRate(player);
+    this._popRateIsIncreasing =
+      popIncreaseRate >= this._lastPopulationIncreaseRate;
+    this._lastPopulationIncreaseRate = popIncreaseRate;
+  }
+
   onAttackRatioChange(newRatio: number) {
     this.uiState.attackRatio = newRatio;
   }
@@ -174,21 +212,45 @@ export class ControlPanel extends LitElement implements Layer {
       </style>
       <div
         class="${this._isVisible
-          ? "text-sm lg:text-m md:w-[320px] bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur"
+          ? "w-[320px] text-sm lg:text-m bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur"
           : "hidden"}"
         @contextmenu=${(e) => e.preventDefault()}
       >
+        <div class="hidden lg:block bg-black/30 text-white mb-4 p-2 rounded">
+          <div class="flex justify-between mb-1">
+            <span class="font-bold"
+              >${translateText("control_panel.pop")}:</span
+            >
+            <span translate="no"
+              >${renderTroops(this._population)} /
+              ${renderTroops(this._maxPopulation)}
+              <span
+                class="${this._popRateIsIncreasing
+                  ? "text-green-500"
+                  : "text-yellow-500"}"
+                translate="no"
+                >(+${renderTroops(this.popRate)})</span
+              ></span
+            >
+          </div>
+          <div class="flex justify-between">
+            <span class="font-bold"
+              >${translateText("control_panel.gold")}:</span
+            >
+            <span translate="no"
+              >${renderNumber(this._gold)}
+              (+${renderNumber(this._goldPerSecond)})</span
+            >
+          </div>
+        </div>
+
         <div class="relative mb-4 lg:mb-4">
-          <label class="flex justify-between text-white mb-1" translate="no">
-            <span>
-              ${translateText("control_panel.troops")}:
-              ${(this.currentTroopRatio * 100).toFixed(0)}%
-            </span>
-            <span>
-              ${translateText("control_panel.workers")}:
-              ${((1 - this.currentTroopRatio) * 100).toFixed(0)}%
-            </span>
-          </label>
+          <label class="block text-white mb-1" translate="no"
+            >${translateText("control_panel.troops")}:
+            <span translate="no">${renderTroops(this._troops)}</span> |
+            ${translateText("control_panel.workers")}:
+            <span translate="no">${renderTroops(this._workers)}</span></label
+          >
           <div class="relative h-8">
             <!-- Background track -->
             <div

src/client/graphics/layers/GameTopBar.ts

@@ -1,168 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import goldCoinIcon from "../../../../resources/images/GoldCoinIcon.svg";
-import populationIcon from "../../../../resources/images/PopulationIconSolidWhite.svg";
-import troopIcon from "../../../../resources/images/TroopIconWhite.svg";
-import workerIcon from "../../../../resources/images/WorkerIconWhite.svg";
-import { EventBus } from "../../../core/EventBus";
-import { GameUpdateType } from "../../../core/game/GameUpdates";
-import { GameView } from "../../../core/game/GameView";
-import { renderNumber, renderTroops } from "../../Utils";
-import { Layer } from "./Layer";
-
-@customElement("game-top-bar")
-export class GameTopBar extends LitElement implements Layer {
-  public game: GameView;
-  public eventBus: EventBus;
-  private _troops = 0;
-  private _workers = 0;
-  private _lastPopulationIncreaseRate = 0;
-  private _popRateIsIncreasing = false;
-  private hasWinner = false;
-
-  createRenderRoot() {
-    return this;
-  }
-
-  init() {
-    this.requestUpdate();
-  }
-
-  tick() {
-    this.updatePopulationIncrease();
-    const player = this.game?.myPlayer();
-    if (!player) return;
-    this._troops = player.troops();
-    this._workers = player.workers();
-    const updates = this.game.updatesSinceLastTick();
-    if (updates) {
-      this.hasWinner = this.hasWinner || updates[GameUpdateType.Win].length > 0;
-    }
-    this.requestUpdate();
-  }
-
-  private updatePopulationIncrease() {
-    const player = this.game?.myPlayer();
-    if (player === null) return;
-    const popIncreaseRate = this.game.config().populationIncreaseRate(player);
-    this._popRateIsIncreasing =
-      popIncreaseRate >= this._lastPopulationIncreaseRate;
-    this._lastPopulationIncreaseRate = popIncreaseRate;
-  }
-
-  render() {
-    const myPlayer = this.game?.myPlayer();
-    if (!this.game || !myPlayer || this.game.inSpawnPhase()) {
-      return null;
-    }
-
-    const isAlt = this.game.config().isReplay();
-    if (isAlt) {
-      return html`
-        <div
-          class="absolute top-4 left-1/2 transform -translate-x-1/2 flex justify-center items-center p-2"
-        ></div>
-      `;
-    }
-    const popRate = myPlayer
-      ? this.game.config().populationIncreaseRate(myPlayer) * 10
-      : 0;
-    const maxPop = myPlayer ? this.game.config().maxPopulation(myPlayer) : 0;
-    const goldPerSecond = myPlayer
-      ? this.game.config().goldAdditionRate(myPlayer) * 10n
-      : 0n;
-
-    return html`
-      <div
-        class="fixed top-4 left-1/2 transform -translate-x-1/2 flex justify-center items-center p-1 md:px-1.5 lg:px-4 z-[1100]"
-      >
-        <div class="flex justify-center items-center gap-1">
-          ${myPlayer?.isAlive() && !this.game.inSpawnPhase()
-            ? html`
-                <div class="overflow-x-auto hide-scrollbar">
-                  <div
-                    class="grid gap-1 grid-cols-[80px_100px_80px] w-max md:gap-2 md:grid-cols-[90px_120px_90px]"
-                  >
-                    <div
-                      class="flex flex-wrap gap-1 flex-col bg-gray-800/70 border border-slate-400 p-0.5 md:px-1 lg:px-2"
-                    >
-                      <div class="flex gap-2 items-center justify-between">
-                        <img
-                          src=${goldCoinIcon}
-                          alt="gold"
-                          width="20"
-                          height="20"
-                          style="vertical-align: middle;"
-                        />
-                        <span class="text-white"
-                          >+${renderNumber(goldPerSecond)}</span
-                        >
-                      </div>
-                      <div class="text-white">
-                        ${renderNumber(myPlayer.gold())}
-                      </div>
-                    </div>
-                    <div
-                      class="flex flex-wrap gap-1 flex-col bg-gray-800/70 border border-slate-400 p-0.5 md:px-1 lg:px-2"
-                    >
-                      <div class="flex gap-2 items-center justify-between">
-                        <img
-                          src=${populationIcon}
-                          alt="population"
-                          width="20"
-                          height="20"
-                          style="vertical-align: middle;"
-                        />
-                        <span
-                          class="${this._popRateIsIncreasing
-                            ? "text-green-500"
-                            : "text-yellow-500"}"
-                          translate="no"
-                        >
-                          +${renderTroops(popRate)}
-                        </span>
-                      </div>
-                      <div class="text-white">
-                        ${renderTroops(myPlayer.population())} /
-                        ${renderTroops(maxPop)}
-                      </div>
-                    </div>
-                    <div
-                      class="flex bg-gray-800/70 border border-slate-400 p-0.5 md:px-1 lg:px-2"
-                    >
-                      <div class="flex flex-col flex-grow gap-1 w-full ">
-                        <div class="flex gap-1">
-                          <img
-                            src=${troopIcon}
-                            alt="troops"
-                            width="20"
-                            height="20"
-                            style="vertical-align: middle;"
-                          />
-                          <span class="text-white"
-                            >${renderTroops(this._troops)}</span
-                          >
-                        </div>
-                        <div class="flex gap-1">
-                          <img
-                            src=${workerIcon}
-                            alt="gold"
-                            width="20"
-                            height="20"
-                            style="vertical-align: middle;"
-                          />
-                          <span class="text-white"
-                            >${renderTroops(this._workers)}</span
-                          >
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              `
-            : html`<div></div>`}
-        </div>
-      </div>
-    `;
-  }
-}