added spawn timer bar

TODO.txt

@@ -45,7 +45,8 @@
 * try vintage theme DONE 8/24/2023
 * BUG: fix hotreload (priority queue breaks it) DONE 8/24/2024
 * improve menu (keep highlighted when click, allow deselect lobby) DONE 8/25/2024
-* give time to (re) spawn at start of game
+* give time to (re) spawn at start of game DONE 8/25/2024
+* show bar for long to respawn
 * store & delay tile updates for lag compensation
 * add shader to dim border
 * REFACTOR: remove player.info()

src/client/ClientGame.ts

@@ -16,7 +16,7 @@ export function createClientGame(name: string, clientID: ClientID, gameID: GameI
     let eventBus = new EventBus()
     let game = createGame(terrainMap, eventBus, config)
     let terrainRenderer = new TerrainRenderer(game)
-    let gameRenderer = new GameRenderer(game, config.theme(), terrainRenderer)
+    let gameRenderer = new GameRenderer(game, terrainRenderer)
 
     return new ClientGame(
         name,

src/client/graphics/GameRenderer.ts

@@ -23,9 +23,11 @@ export class GameRenderer {
 
 
 	private nameRenderer: NameRenderer;
+	private theme: Theme
 
-	constructor(private gs: Game, private theme: Theme, private terrainRenderer: TerrainRenderer) {
-		this.nameRenderer = new NameRenderer(gs, theme)
+	constructor(private gs: Game, private terrainRenderer: TerrainRenderer) {
+		this.theme = gs.config().theme()
+		this.nameRenderer = new NameRenderer(gs, this.theme)
 	}
 
 	initialize() {
@@ -71,6 +73,10 @@ export class GameRenderer {
 		this.context.fillStyle = this.theme.backgroundColor().toHex();
 		this.context.fillRect(0, 0, this.gs.width(), this.gs.height());
 
+		// Save the current context state
+		this.context.save();
+
+
 		// Disable image smoothing for pixelated effect
 		if (this.scale > 3) {
 			this.context.imageSmoothingEnabled = false;
@@ -101,9 +107,32 @@ export class GameRenderer {
 		const [upperLeft, bottomRight] = this.boundingRect()
 		this.nameRenderer.render(this.context, this.scale, upperLeft, bottomRight)
 
+		this.context.restore()
+
+		this.renderUIBar()
+
+
 		requestAnimationFrame(() => this.renderGame());
 	}
 
+	renderUIBar() {
+		if (!this.gs.inSpawnPhase()) {
+			return
+		}
+
+		const barHeight = 15;
+		const barBackgroundWidth = this.canvas.width;
+
+		const ratio = this.gs.ticks() / this.gs.config().numSpawnPhaseTurns()
+
+		// Draw bar background
+		this.context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+		this.context.fillRect(0, 0, barBackgroundWidth, barHeight);
+
+		this.context.fillStyle = 'rgba(0, 128, 255, 0.7)';
+		this.context.fillRect(0, 0, barBackgroundWidth * ratio, barHeight);
+	}
+
 	tick() {
 		this.nameRenderer.tick()
 	}

src/client/index.html

@@ -21,7 +21,7 @@
 			</button>
 		</div>
 		<div id="dev-log">
-			<h4>DEVLOG: 8/18/2024 - 8/25/2024</h4>
+			<h4>DEVLOG: 8/18/2024 - 8/26/2024</h4>
 			<ul id="dev-log">
 				<li>Create dev server at <a href="https://www.openfront.dev">openfront.dev</a></li>
 				<li>fix invert zoom</li>
@@ -39,6 +39,7 @@
 				<li>Make lobby background the terrain map</li>
 				<li>Created favicon</li>
 				<li>improve menu (keep highlighted when click, allow deselect lobby)</li>
+				<li>Can respawn at start of game</li>
 			</ul>
 		</div>
 	</div>

src/client/styles.css

@@ -44,7 +44,7 @@ h1 {
 #username {
     width: 100%;
     padding: 15px;
-    font-size: 18px;
+    font-size: 24px;
     border: 2px solid #007bff;
     border-radius: 5px;
     background-color: rgba(255, 255, 255, 0.8);
@@ -57,8 +57,8 @@ h1 {
 
 
 .lobby-button {
-    width: 500px;
-    height: 500px;
+    width: 400px;
+    height: 400px;
     font-size: 24px;
     font-weight: bold;
     border: 3px solid #007bff;

src/core/GameImpl.ts

@@ -256,7 +256,7 @@ export class GameImpl implements MutableGame {
     }
 
     inSpawnPhase(): boolean {
-        return this._ticks <= this.config().turnsUntilGameStart()
+        return this._ticks <= this.config().numSpawnPhaseTurns()
     }
 
     ticks(): number {

src/core/configuration/Config.ts

@@ -21,7 +21,7 @@ export interface Config {
 	gameCreationRate(): number
 	lobbyLifetime(): number
 	numBots(): number
-	turnsUntilGameStart(): number
+	numSpawnPhaseTurns(): number
 }
 
 export interface PlayerConfig {

src/core/configuration/DefaultConfig.ts

@@ -7,7 +7,7 @@ import {vintageTheme} from "./VintageTheme";
 
 
 export class DefaultConfig implements Config {
-    turnsUntilGameStart(): number {
+    numSpawnPhaseTurns(): number {
         return 100
     }
     numBots(): number {

src/core/configuration/DevConfig.ts

@@ -3,7 +3,7 @@ import {PlayerConfig} from "./Config";
 import {DefaultConfig, DefaultPlayerConfig, defaultPlayerConfig} from "./DefaultConfig";
 
 export const devConfig = new class extends DefaultConfig {
-    turnsUntilGameStart(): number {
+    numSpawnPhaseTurns(): number {
         return 100
     }
     gameCreationRate(): number {

src/core/execution/AttackExecution.ts

@@ -71,7 +71,7 @@ export class AttackExecution implements Execution {
         if (!this.active) {
             return
         }
-        if (ticks < this.mg.config().turnsUntilGameStart()) {
+        if (ticks < this.mg.config().numSpawnPhaseTurns()) {
             return
         }
 

src/core/execution/BotExecution.ts

@@ -28,7 +28,7 @@ export class BotExecution implements Execution {
 
     tick(ticks: number) {
 
-        if (ticks < this.mg.config().turnsUntilGameStart()) {
+        if (ticks < this.mg.config().numSpawnPhaseTurns()) {
             return
         }
 

src/core/execution/PlayerExecution.ts

@@ -19,7 +19,7 @@ export class PlayerExecution implements Execution {
     }
 
     tick(ticks: number) {
-        if (ticks < this.config.turnsUntilGameStart()) {
+        if (ticks < this.config.numSpawnPhaseTurns()) {
             return
         }
         this.player.setTroops(this.config.player().troopAdditionRate(this.player))

src/core/execution/SpawnExecution.ts

@@ -23,7 +23,7 @@ export class SpawnExecution implements Execution {
             return
         }
 
-        if (ticks >= this.mg.config().turnsUntilGameStart()) {
+        if (ticks >= this.mg.config().numSpawnPhaseTurns()) {
             this.active = false
             return
         }