Better In Game UI (#1243)

## Description:
Top Bar Refactor – UI & UX Improvement Proposal

This update overhauls the top game bar to improve clarity,
responsiveness, and overall user experience across desktop and mobile.
It consolidates player resources (e.g., building counts), integrates
game controls (pause, settings, time), and enhances visual contrast.

Key changes:

Redesigned top bar with player data and game options.

Team color indicator bar (team games only).

Countdown bar during "Choose Starting Position" phase.

Removed redundant info (e.g., troop/worker counts shown elsewhere).

Inspired by strategy games like Travian Legends, this refactor offers a
cleaner and more intuitive layout, especially for smaller screens.

⚠️ Note: This is a large change and likely contains visual or functional
bugs I can’t currently spot due to fatigue. Thorough testing is required
before approval.

## 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
- [ ] 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:

Diessel
![Snímek obrazovky 2025-06-21 v 8 13 46](https://github.c
![Snímek obrazovky 2025-06-21 v 8 13
35](https://github.com/user-attachments/assets/e166ee1b-6173-48f5-8e2d-598d796a7e2d)
om/user-attachments/assets/3a0edbef-e621-4fc4-b6b7-c1ed
![Snímek obrazovky 2025-06-21 v 8 13
20](https://github.com/user-attachments/assets/1214ab61-323c-4317-8722-eaa4b932a60c)
8f9a8219)
![Snímek obrazovky 2025-06-21 v 8 10
04](https://github.com/user-attachments/assets/374fe15a-bfad-4469-9950-3ec631b6e2d3)

Closes #1165

---------

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

src/client/graphics/layers/SpawnTimer.ts

@@ -16,8 +16,11 @@ export class SpawnTimer implements Layer {
 
   tick() {
     if (this.game.inSpawnPhase()) {
-      this.ratios[0] =
-        this.game.ticks() / this.game.config().numSpawnPhaseTurns();
+      // During spawn phase, only one segment filling full width
+      this.ratios = [
+        this.game.ticks() / this.game.config().numSpawnPhaseTurns(),
+      ];
+      this.colors = ["rgba(0, 128, 255, 0.7)"];
       return;
     }
 
@@ -33,18 +36,17 @@ export class SpawnTimer implements Layer {
       const team = player.team();
       if (team === null) throw new Error("Team is null");
       const tiles = teamTiles.get(team) ?? 0;
-      const sum = tiles + player.numTilesOwned();
-      teamTiles.set(team, sum);
+      teamTiles.set(team, tiles + player.numTilesOwned());
     }
 
     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);
+      this.colors.push(theme.teamColor(team).toRgbString());
     }
   }
 
@@ -53,12 +55,23 @@ export class SpawnTimer implements Layer {
   }
 
   renderLayer(context: CanvasRenderingContext2D) {
-    if (this.ratios === null) return;
-    if (this.ratios.length === 0) return;
-    if (this.colors.length === 0) return;
+    if (this.ratios.length === 0 || this.colors.length === 0) return;
 
     const barHeight = 10;
     const barWidth = this.transformHandler.width();
+    let yOffset: number;
+
+    if (this.game.inSpawnPhase()) {
+      // At spawn time, draw at top
+      yOffset = 0;
+    } else if (this.game.config().gameConfig().gameMode === GameMode.Team) {
+      // After spawn, only in team mode, offset based on screen width
+      const screenW = window.innerWidth;
+      yOffset = screenW > 1024 ? 80 : 58;
+    } else {
+      // Not spawn and not team mode: no bar
+      return;
+    }
 
     let x = 0;
     let filledRatio = 0;
@@ -67,7 +80,7 @@ export class SpawnTimer implements Layer {
       const segmentWidth = barWidth * ratio;
 
       context.fillStyle = this.colors[i];
-      context.fillRect(x, 0, segmentWidth, barHeight);
+      context.fillRect(x, yOffset, segmentWidth, barHeight);
 
       x += segmentWidth;
       filledRatio += ratio;
@@ -76,8 +89,6 @@ export class SpawnTimer implements Layer {
 }
 
 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;