1 files changed, 27 insertions, 24 deletions
diff --git a/html/tower/js/renderer.js b/html/tower/js/renderer.js
index 10444aa..b0d1da0 100644
--- a/html/tower/js/renderer.js
+++ b/html/tower/js/renderer.js
@@ -61,29 +61,15 @@ function renderEnemies(ctx, enemies) {
     const cellSize = canvas.width / 20;
     
     enemies.forEach(enemy => {
-        // Draw enemy health bar
         const healthPercent = enemy.currentHealth / enemy.maxHealth;
-        const barWidth = cellSize * 0.8;
-        const barHeight = 4;
+        const opacity = 0.3 + (healthPercent * 0.7);
         
-        ctx.fillStyle = '#e74c3c';
-        ctx.fillRect(
-            (enemy.position.x + 0.1) * cellSize,
-            (enemy.position.y - 0.1) * cellSize - barHeight,
-            barWidth,
-            barHeight
-        );
-        
-        ctx.fillStyle = '#2ecc71';
-        ctx.fillRect(
-            (enemy.position.x + 0.1) * cellSize,
-            (enemy.position.y - 0.1) * cellSize - barHeight,
-            barWidth * healthPercent,
-            barHeight
-        );
+        // Use enemy type color
+        ctx.fillStyle = `${EnemyTypes[enemy.type].color}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`;
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';
+        ctx.lineWidth = 2;
         
-        // Draw enemy
-        ctx.fillStyle = 'red';
+        // Draw enemy body
         ctx.beginPath();
         ctx.arc(
             (enemy.position.x + 0.5) * cellSize,
@@ -93,6 +79,21 @@ function renderEnemies(ctx, enemies) {
             Math.PI * 2
         );
         ctx.fill();
+        ctx.stroke();
+        
+        // Draw range indicator for ranged enemies
+        if (EnemyTypes[enemy.type].isRanged) {
+            ctx.beginPath();
+            ctx.arc(
+                (enemy.position.x + 0.5) * cellSize,
+                (enemy.position.y + 0.5) * cellSize,
+                EnemyTypes[enemy.type].attackRange * cellSize,
+                0,
+                Math.PI * 2
+            );
+            ctx.strokeStyle = `${EnemyTypes[enemy.type].color}40`;
+            ctx.stroke();
+        }
     });
 }
 
@@ -107,8 +108,10 @@ function renderTowers(ctx, towers) {
     const cellSize = canvas.width / 20;
     
     towers.forEach(tower => {
-        // Draw tower body
-        ctx.fillStyle = tower.color;
+        const healthPercent = tower.currentHealth / tower.maxHealth;
+        
+        // Draw tower body with opacity based on health
+        ctx.fillStyle = tower.color + Math.floor(healthPercent * 255).toString(16).padStart(2, '0');
         ctx.fillRect(
             tower.position.x * cellSize + cellSize * 0.1,
             tower.position.y * cellSize + cellSize * 0.1,
@@ -116,7 +119,7 @@ function renderTowers(ctx, towers) {
             cellSize * 0.8
         );
         
-        // Draw range indicator (only during placement phase)
+        // Draw range indicator
         if (gameState.phase === GamePhase.PLACEMENT) {
             ctx.beginPath();
             ctx.arc(
@@ -126,7 +129,7 @@ function renderTowers(ctx, towers) {
                 0,
                 Math.PI * 2
             );
-            ctx.strokeStyle = tower.color + '40'; // 40 is hex for 25% opacity
+            ctx.strokeStyle = tower.color + '40';
             ctx.stroke();
         }
     });