*

1 files changed, 69 insertions, 18 deletions

diff --git a/html/plains/enemies.js b/html/plains/enemies.js
index c0e3daa..ad457b2 100644
--- a/html/plains/enemies.js
+++ b/html/plains/enemies.js
@@ -90,6 +90,17 @@ const handleEnemyDamage = (enemy, damage, knockbackForce = 0, angle = 0) => {
                 createdAt: animationTime
             });
         }
+
+        // Generate diamonds when enemy is defeated
+        const diamondCount = Math.floor(Math.random() * 5); // 0 to 4 diamonds
+        for (let i = 0; i < diamondCount; i++) {
+            state.diamonds.push({
+                x: enemy.x + (Math.random() - 0.5) * 20,
+                y: enemy.y + (Math.random() - 0.5) * 20,
+                size: 6, // Smaller size (was 10)
+                collected: false
+            });
+        }
     }
     
     return damage > 0 && enemy.hp <= 0;
@@ -356,7 +367,14 @@ const updateEnemies = (enemies, deltaTime) => {
 };
 
 const renderEnemies = (ctx, enemies) => {
+    // Pre-create the health circle gradient once
+    const healthGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 2);
+    healthGradient.addColorStop(0, 'rgba(255, 0, 0, 0.8)');
+    healthGradient.addColorStop(0.7, 'rgba(200, 0, 0, 0.6)');
+    healthGradient.addColorStop(1, 'rgba(150, 0, 0, 0.4)');
+
     enemies.forEach(enemy => {
+        // Draw enemy body
         ctx.beginPath();
         ctx.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI * 2);
         ctx.fillStyle = enemy.stunned ? 'rgb(150, 150, 150)' : enemy.color;
@@ -365,35 +383,68 @@ const renderEnemies = (ctx, enemies) => {
         // Add a glowing effect
         const glowSize = enemy.stunned ? 1.1 : (enemy.attacking ? 1.6 : enemy.isChasing ? 1.4 : 1.2);
         const glowIntensity = enemy.stunned ? 0.1 : (enemy.attacking ? 0.5 : enemy.isChasing ? 0.3 : 0.2);
-        const gradient = ctx.createRadialGradient(
+        
+        // Create glow gradient only once per enemy
+        const glowGradient = ctx.createRadialGradient(
             enemy.x, enemy.y, enemy.size * 0.5,
             enemy.x, enemy.y, enemy.size * glowSize
         );
-        gradient.addColorStop(0, `rgba(255, 0, 0, ${glowIntensity})`);
-        gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
+        glowGradient.addColorStop(0, `rgba(255, 0, 0, ${glowIntensity})`);
+        glowGradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
         
         ctx.beginPath();
         ctx.arc(enemy.x, enemy.y, enemy.size * glowSize, 0, Math.PI * 2);
-        ctx.fillStyle = gradient;
+        ctx.fillStyle = glowGradient;
         ctx.fill();
         
-        // Draw HP bar
-        const maxHP = 10;
-        const barWidth = enemy.size * 2;
-        const barHeight = 4;
-        const barX = enemy.x - barWidth / 2;
-        const barY = enemy.y - enemy.size - barHeight - 5;
-        
-        // Background
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(barX, barY, barWidth, barHeight);
-        
-        // HP
-        ctx.fillStyle = `rgb(${Math.floor(255 * (1 - enemy.hp/maxHP))}, ${Math.floor(255 * enemy.hp/maxHP)}, 0)`;
-        ctx.fillRect(barX, barY, barWidth * (enemy.hp/maxHP), barHeight);
+        // Draw HP circles
+        if (enemy.hp > 0) {
+            const circleRadius = 3;
+            const circleSpacing = 8;
+            const totalCircles = enemy.hp;
+            const startX = enemy.x - ((totalCircles - 1) * circleSpacing) / 2;
+            const circleY = enemy.y - enemy.size - 15;
+            
+            // Batch draw the circle borders
+            ctx.beginPath();
+            for (let i = 0; i < totalCircles; i++) {
+                const circleX = startX + (i * circleSpacing);
+                ctx.moveTo(circleX + circleRadius, circleY);
+                ctx.arc(circleX, circleY, circleRadius, 0, Math.PI * 2);
+            }
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            
+            // Batch draw the filled circles
+            ctx.beginPath();
+            for (let i = 0; i < totalCircles; i++) {
+                const circleX = startX + (i * circleSpacing);
+                ctx.moveTo(circleX + circleRadius - 1, circleY);
+                ctx.arc(circleX, circleY, circleRadius - 1, 0, Math.PI * 2);
+            }
+            ctx.fillStyle = 'rgba(255, 0, 0, 0.6)';
+            ctx.fill();
+        }
     });
 };
 
+const generateDiamonds = () => {
+    const diamondCount = Math.floor(Math.random() * 5); // 0 to 4 diamonds
+    const diamonds = [];
+    
+    for (let i = 0; i < diamondCount; i++) {
+        diamonds.push({
+            x: enemy.x + (Math.random() - 0.5) * 20, // Random position around the enemy
+            y: enemy.y + (Math.random() - 0.5) * 20,
+            size: 10, // Size of the diamond
+            collected: false // Track if collected
+        });
+    }
+    
+    return diamonds;
+};
+
 // Export the functions
 window.enemySystem = {
     generateEnemies,