Population visualization (#842)

## Description:

Add a visualization for how the current population is allocated.

## Please complete the following:

- [ ] I have added screenshots for all UI updates
- [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

---------

Co-authored-by: Scott Anderson <662325+scottanderson@users.noreply.github.com>
Co-authored-by: evanpelle <evanpelle@gmail.com>

src/client/graphics/layers/SpawnTimer.ts

@@ -25,6 +25,21 @@ export class SpawnTimer implements Layer {
     this.colors = [];
 
     if (this.game.config().gameConfig().gameMode !== GameMode.Team) {
+      const player = this.game.myPlayer();
+      if (player === null) return;
+      const max = this.game.config().maxPopulation(player);
+      const troops = player.troops();
+      const workers = player.workers();
+      const total = player.totalPopulation();
+      const attacking = total - troops - workers;
+
+      this.colors = [
+        "rgba(0, 128, 255, 0.7)",
+        "orange",
+        "red",
+        "rgba(0, 0, 0, 0.5)",
+      ];
+      this.ratios = [workers / max, troops / max, attacking / max];
       return;
     }
 
@@ -63,7 +78,7 @@ export class SpawnTimer implements Layer {
     let x = 0;
     let filledRatio = 0;
     for (let i = 0; i < this.ratios.length && i < this.colors.length; i++) {
-      const ratio = this.ratios[i];
+      const ratio = this.ratios[i] ?? 1 - filledRatio;
       const segmentWidth = barWidth * ratio;
 
       context.fillStyle = this.colors[i];