Countdown before game start (#4198)

Resolves #4178 

## Description:

Let's the timer countdown remaining time to start in spawn phase

<img width="343" height="82" alt="Screenshot_2026-06-06-11-24-26-193_com
android chrome"
src="https://github.com/user-attachments/assets/e5827db4-a6d5-485f-b504-d8b64b7c6ba7"
/>

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

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

Dovg

src/client/hud/layers/GameRightSidebar.ts

@@ -111,13 +111,12 @@ export class GameRightSidebar extends LitElement implements Controller {
       this.requestUpdate();
     }
 
-    const maxTimerValue = this.game.config().gameConfig().maxTimerValue;
-
     if (this.game.inSpawnPhase()) {
-      this.timer =
-        maxTimerValue !== null && maxTimerValue !== undefined
-          ? maxTimerValue * 60
-          : 0;
+      const spawnPhaseDurationTicks = this.game.config().numSpawnPhaseTurns();
+      const currentTicks = this.game.ticks();
+      const remainingTicks = spawnPhaseDurationTicks - currentTicks;
+      const remainingSeconds = Math.ceil(remainingTicks / 10);
+      this.timer = Math.max(0, remainingSeconds);
       return;
     }
 
@@ -127,6 +126,7 @@ export class GameRightSidebar extends LitElement implements Controller {
       return;
     }
 
+    const maxTimerValue = this.game.config().gameConfig().maxTimerValue;
     if (maxTimerValue !== null && maxTimerValue !== undefined) {
       this.timer = Math.max(0, maxTimerValue * 60 - elapsedSeconds);
     } else {