added spawn timer bar

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;