1 files changed, 28 insertions, 5 deletions
diff --git a/html/tower/js/renderer.js b/html/tower/js/renderer.js
index 9bebe0b..cf52ebc 100644
--- a/html/tower/js/renderer.js
+++ b/html/tower/js/renderer.js
@@ -98,14 +98,37 @@ function renderEnemies(ctx, enemies) {
 }
 
 function renderUI(ctx, gameState) {
+    const padding = 20;
+    const lineHeight = 30;
+    const startY = padding;
+    const width = 200;
+    const height = lineHeight * 5;
+    
+    // Save the current canvas state
+    ctx.save();
+    
+    // Reset any transformations
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    
+    // Draw semi-transparent background
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.fillRect(0, 0, width, height + padding);
+    
+    // Set text properties
     ctx.fillStyle = 'black';
     ctx.font = '20px Arial';
-    ctx.fillText(`Currency: $${gameState.currency}`, 10, 30);
-    ctx.fillText(`Phase: ${gameState.phase}`, 10, 60);
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';  // Add this to ensure consistent vertical alignment
+    
+    // Draw UI elements
+    ctx.fillText(`Level: ${gameState.level}`, padding, startY);
+    ctx.fillText(`Currency: $${gameState.currency}`, padding, startY + lineHeight);
+    ctx.fillText(`Phase: ${gameState.phase}`, padding, startY + lineHeight * 2);
+    ctx.fillText(`Destroyed: ${gameState.enemiesDestroyed}`, padding, startY + lineHeight * 3);
+    ctx.fillText(`Escaped: ${gameState.enemiesEscaped}`, padding, startY + lineHeight * 4);
     
-    // Add enemy stats
-    ctx.fillText(`Destroyed: ${gameState.enemiesDestroyed}`, 10, 90);
-    ctx.fillText(`Escaped: ${gameState.enemiesEscaped}`, 10, 120);
+    // Restore the canvas state
+    ctx.restore();
 }
 
 function renderTowers(ctx, towers) {