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/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