Allow up to seven teams for players (#445)

## Description:

- Allow up to seven teams for players, and one for bots.
- Add team count selection to the single player dialog.
- Select random number of teams in server rotation.

Fixes #456

## Please complete the following:

- [x] 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


![image](https://github.com/user-attachments/assets/cbc1ba82-9d06-4763-896c-abdce067a161)


![image](https://github.com/user-attachments/assets/9f82a0a5-c0bb-49b6-a714-2b13286a64ca)

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

fake.neo

---------

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

src/client/graphics/layers/SpawnTimer.ts

@@ -1,13 +1,11 @@
-import { blue, red } from "../../../core/configuration/Colors";
 import { GameMode, Team } from "../../../core/game/Game";
 import { GameView } from "../../../core/game/GameView";
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
 export class SpawnTimer implements Layer {
-  private ratio = 0;
-  private leftColor = "rgba(0, 128, 255, 0.7)";
-  private rightColor = "rgba(0, 0, 0, 0.5)";
+  private ratios = [0];
+  private colors = ["rgba(0, 128, 255, 0.7)", "rgba(0, 0, 0, 0.5)"];
 
   constructor(
     private game: GameView,
@@ -18,27 +16,35 @@ export class SpawnTimer implements Layer {
 
   tick() {
     if (this.game.inSpawnPhase()) {
-      this.ratio = this.game.ticks() / this.game.config().numSpawnPhaseTurns();
+      this.ratios[0] =
+        this.game.ticks() / this.game.config().numSpawnPhaseTurns();
       return;
     }
+
+    this.ratios = [];
+    this.colors = [];
+
     if (this.game.config().gameConfig().gameMode != GameMode.Team) {
-      this.ratio = 0;
       return;
     }
 
-    const numBlueTiles = this.game
-      .players()
-      .filter((p) => p.team() == Team.Blue)
-      .reduce((acc, p) => acc + p.numTilesOwned(), 0);
+    const teamTiles: Map<Team, number> = new Map();
+    for (const player of this.game.players()) {
+      const team = player.team();
+      const tiles = teamTiles.get(team) ?? 0;
+      const sum = tiles + player.numTilesOwned();
+      teamTiles.set(team, sum);
+    }
 
-    const numRedTiles = this.game
-      .players()
-      .filter((p) => p.team() == Team.Red)
-      .reduce((acc, p) => acc + p.numTilesOwned(), 0);
-
-    this.ratio = numBlueTiles / (numBlueTiles + numRedTiles);
-    this.leftColor = blue.toRgbString();
-    this.rightColor = red.toRgbString();
+    const theme = this.game.config().theme();
+    const total = sumIterator(teamTiles.values());
+    if (total === 0) return;
+    for (const [team, count] of teamTiles) {
+      const ratio = count / total;
+      const color = theme.teamColor(team).toRgbString();
+      this.ratios.push(ratio);
+      this.colors.push(color);
+    }
   }
 
   shouldTransform(): boolean {
@@ -46,18 +52,34 @@ export class SpawnTimer implements Layer {
   }
 
   renderLayer(context: CanvasRenderingContext2D) {
-    if (this.ratio == 0) {
-      return;
-    }
+    if (this.ratios === null) return;
+    if (this.ratios.length === 0) return;
+    if (this.colors.length === 0) return;
 
     const barHeight = 10;
-    const barBackgroundWidth = this.transformHandler.width();
+    const barWidth = this.transformHandler.width();
 
-    // Draw bar background
-    context.fillStyle = this.rightColor;
-    context.fillRect(0, 0, barBackgroundWidth, barHeight);
+    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 segmentWidth = barWidth * ratio;
 
-    context.fillStyle = this.leftColor;
-    context.fillRect(0, 0, barBackgroundWidth * this.ratio, barHeight);
+      context.fillStyle = this.colors[i];
+      context.fillRect(x, 0, segmentWidth, barHeight);
+
+      x += segmentWidth;
+      filledRatio += ratio;
+    }
   }
 }
+
+function sumIterator(values: MapIterator<number>) {
+  // To use reduce, we'd need to allocate an array:
+  // return Array.from(values).reduce((sum, v) => sum + v, 0);
+  let total = 0;
+  for (const value of values) {
+    total += value;
+  }
+  return total;
+}