moved spawn bar to UIRenderer

src/client/graphics/GameRenderer.ts

@@ -78,30 +78,9 @@ export class GameRenderer {
 			}
 		})
 
-		this.renderSpawnBar()
-
 		requestAnimationFrame(() => this.renderGame());
 	}
 
-	// TODO: move to UIRenderer
-	renderSpawnBar() {
-		if (!this.game.inSpawnPhase()) {
-			return
-		}
-
-		const barHeight = 15;
-		const barBackgroundWidth = this.canvas.width;
-
-		const ratio = this.game.ticks() / this.game.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.layers.forEach(l => l.tick())
 	}

src/client/graphics/TransformHandler.ts

@@ -12,6 +12,10 @@ export class TransformHandler {
         this.eventBus.on(DragEvent, (e) => this.onMove(e))
     }
 
+    width(): number {
+        return this.boundingRect.right
+    }
+
     handleTransform(context: CanvasRenderingContext2D) {
         // Disable image smoothing for pixelated effect
         if (this.scale > 3) {

src/client/graphics/UIRenderer.ts

@@ -26,6 +26,21 @@ export class UIRenderer implements Layer {
 
     }
     render(context: CanvasRenderingContext2D, transformHandler: TransformHandler) {
+        if (!this.game.inSpawnPhase()) {
+            return
+        }
+
+        const barHeight = 15;
+        const barBackgroundWidth = transformHandler.width();
+
+        const ratio = this.game.ticks() / this.game.config().numSpawnPhaseTurns()
+
+        // Draw bar background
+        context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        context.fillRect(0, 0, barBackgroundWidth, barHeight);
+
+        context.fillStyle = 'rgba(0, 128, 255, 0.7)';
+        context.fillRect(0, 0, barBackgroundWidth * ratio, barHeight);
     }
 
     shouldTransform(): boolean {