Remove workers & troop ratio bar, only have troops (#1676)

## Description:

The troop/worker ratio bar is almost never changed. so remove it and the
entire concept of workers. Now there is just troops.

Now players get a consistent 1k/s gold.

## 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 have read and accepted the CLA agreement (only required once).

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

evan

src/client/graphics/layers/ControlPanel.ts

@@ -6,7 +6,6 @@ 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 { renderNumber, renderTroops } from "../../Utils";
 import { UIState } from "../UIState";
 import { Layer } from "./Layer";
@@ -22,54 +21,29 @@ export class ControlPanel extends LitElement implements Layer {
   private attackRatio: number = 0.2;
 
   @state()
-  private targetTroopRatio = 0.95;
+  private _maxTroops: number;
 
   @state()
-  private currentTroopRatio = 0.95;
-
-  @state()
-  private _population: number;
-
-  @state()
-  private _maxPopulation: number;
-
-  @state()
-  private popRate: number;
+  private troopRate: 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 _troopRateIsIncreasing: boolean = true;
 
-  private _popRateIsIncreasing: boolean = true;
-
-  private _lastPopulationIncreaseRate: number;
-
-  private init_: boolean = false;
+  private _lastTroopIncreaseRate: number;
 
   init() {
     this.attackRatio = Number(
       localStorage.getItem("settings.attackRatio") ?? "0.2",
     );
-    this.targetTroopRatio = Number(
-      localStorage.getItem("settings.troopRatio") ?? "0.95",
-    );
-    this.init_ = true;
     this.uiState.attackRatio = this.attackRatio;
-    this.currentTroopRatio = this.targetTroopRatio;
     this.eventBus.on(AttackRatioEvent, (event) => {
       let newAttackRatio =
         (parseInt(
@@ -97,13 +71,6 @@ export class ControlPanel extends LitElement implements Layer {
   }
 
   tick() {
-    if (this.init_) {
-      this.eventBus.emit(
-        new SendSetTargetTroopRatioEvent(this.targetTroopRatio),
-      );
-      this.init_ = false;
-    }
-
     if (!this._isVisible && !this.game.inSpawnPhase()) {
       this.setVisibile(true);
     }
@@ -115,28 +82,24 @@ export class ControlPanel extends LitElement implements Layer {
     }
 
     if (this.game.ticks() % 5 === 0) {
-      this.updatePopulationIncrease();
+      this.updateTroopIncrease();
     }
 
-    this._population = player.population();
-    this._maxPopulation = this.game.config().maxPopulation(player);
+    this._troops = player.troops();
+    this._maxTroops = this.game.config().maxTroops(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.troopRate = this.game.config().troopIncreaseRate(player) * 10;
     this.requestUpdate();
   }
 
-  private updatePopulationIncrease() {
+  private updateTroopIncrease() {
     const player = this.game?.myPlayer();
     if (player === null) return;
-    const popIncreaseRate = this.game.config().populationIncreaseRate(player);
-    this._popRateIsIncreasing =
-      popIncreaseRate >= this._lastPopulationIncreaseRate;
-    this._lastPopulationIncreaseRate = popIncreaseRate;
+    const troopIncreaseRate = this.game.config().troopIncreaseRate(player);
+    this._troopRateIsIncreasing =
+      troopIncreaseRate >= this._lastTroopIncreaseRate;
+    this._lastTroopIncreaseRate = troopIncreaseRate;
   }
 
   onAttackRatioChange(newRatio: number) {
@@ -156,19 +119,6 @@ export class ControlPanel extends LitElement implements Layer {
     this.requestUpdate();
   }
 
-  targetTroops(): number {
-    return this._manpower * this.targetTroopRatio;
-  }
-
-  onTroopChange(newRatio: number) {
-    this.eventBus.emit(new SendSetTargetTroopRatioEvent(newRatio));
-  }
-
-  delta(): number {
-    const d = this._population - this.targetTroops();
-    return d;
-  }
-
   render() {
     return html`
       <style>
@@ -219,17 +169,16 @@ export class ControlPanel extends LitElement implements Layer {
         <div class="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
+              >${translateText("control_panel.troops")}:</span
             >
             <span translate="no"
-              >${renderTroops(this._population)} /
-              ${renderTroops(this._maxPopulation)}
+              >${renderTroops(this._troops)} / ${renderTroops(this._maxTroops)}
               <span
-                class="${this._popRateIsIncreasing
+                class="${this._troopRateIsIncreasing
                   ? "text-green-500"
                   : "text-yellow-500"}"
                 translate="no"
-                >(+${renderTroops(this.popRate)})</span
+                >(+${renderTroops(this.troopRate)})</span
               ></span
             >
           </div>
@@ -237,43 +186,7 @@ export class ControlPanel extends LitElement implements Layer {
             <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 sm:mb-4">
-          <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
-              class="absolute left-0 right-0 top-3 h-2 bg-white/20 rounded"
-            ></div>
-            <!-- Fill track -->
-            <div
-              class="absolute left-0 top-3 h-2 bg-blue-500/60 rounded transition-all duration-300"
-              style="width: ${this.currentTroopRatio * 100}%"
-            ></div>
-            <!-- Range input - exactly overlaying the visual elements -->
-            <input
-              type="range"
-              min="1"
-              max="100"
-              .value=${(this.targetTroopRatio * 100).toString()}
-              @input=${(e: Event) => {
-                this.targetTroopRatio =
-                  parseInt((e.target as HTMLInputElement).value) / 100;
-                this.onTroopChange(this.targetTroopRatio);
-              }}
-              class="absolute left-0 right-0 top-2 m-0 h-4 cursor-pointer targetTroopRatio"
-            />
+            <span translate="no">${renderNumber(this._gold)}</span>
           </div>
         </div>