*

2 files changed, 226 insertions, 54 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,
diff --git a/html/plains/game.js b/html/plains/game.js
index 5923b16..d25daaf 100644
--- a/html/plains/game.js
+++ b/html/plains/game.js
@@ -366,7 +366,9 @@ const createInitialState = () => ({
         maxHp: 15,
         isInvulnerable: false,
         invulnerableUntil: 0,
-        isDead: false
+        isDead: false,
+        diamonds: 0, // Track number of collected diamonds
+        lastRenderedCircles: 4, // Add this line
     },
     particles: [],
     footprints: [],
@@ -381,7 +383,8 @@ const createInitialState = () => ({
     villagers: [],
     gameComplete: false,
     gameCompleteMessageShown: false,
-    enemies: []
+    enemies: [],
+    diamonds: [] // Array to hold diamond objects
 });
 
 let state = createInitialState();
@@ -1080,46 +1083,101 @@ const renderPlayerHUD = (ctx) => {
     // Switch to screen coordinates
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     
-    // HP Bar container
-    const barWidth = 200;
-    const barHeight = 20;
-    const barX = 20;
-    const barY = 20;
-    const borderWidth = 2;
-    
-    // Draw border
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
-    ctx.fillRect(
-        barX - borderWidth, 
-        barY - borderWidth, 
-        barWidth + borderWidth * 2, 
-        barHeight + borderWidth * 2
-    );
+    const circleRadius = 15;
+    const circleSpacing = 40;
+    const startX = 30;
+    const startY = 30;
+    const totalCircles = 4;
+    const hpPerCircle = state.player.maxHp / totalCircles;
+    
+    // Track if we need to create explosion particles
+    const currentFilledCircles = Math.ceil(state.player.hp / hpPerCircle);
+    if (currentFilledCircles < state.player.lastRenderedCircles) {
+        // Create explosion particles for the depleted circle
+        const circleIndex = currentFilledCircles;
+        const particleX = startX + circleIndex * circleSpacing;
+        createHealthCircleExplosion(particleX, startY);
+    }
+    state.player.lastRenderedCircles = currentFilledCircles;
     
-    // Background
-    ctx.fillStyle = 'rgba(50, 50, 50, 0.8)';
-    ctx.fillRect(barX, barY, barWidth, barHeight);
-    
-    // HP
-    const hpRatio = state.player.hp / state.player.maxHp;
-    ctx.fillStyle = `rgb(${Math.floor(255 * (1 - hpRatio))}, ${Math.floor(255 * hpRatio)}, 0)`;
-    ctx.fillRect(barX, barY, barWidth * hpRatio, barHeight);
-    
-    // HP Text
-    ctx.fillStyle = 'white';
-    ctx.font = '14px Arial';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(
-        `HP: ${state.player.hp}/${state.player.maxHp}`,
-        barX + barWidth/2,
-        barY + barHeight/2
-    );
+    // Draw circles
+    for (let i = 0; i < totalCircles; i++) {
+        const circleX = startX + i * circleSpacing;
+        const circleY = startY;
+        
+        // Calculate how full this circle should be
+        const circleStartHp = i * hpPerCircle;
+        const circleEndHp = (i + 1) * hpPerCircle;
+        let fillAmount = 1;
+        
+        if (state.player.hp <= circleStartHp) {
+            fillAmount = 0;
+        } else if (state.player.hp < circleEndHp) {
+            fillAmount = (state.player.hp - circleStartHp) / hpPerCircle;
+        }
+        
+        // Draw outer circle (border)
+        ctx.beginPath();
+        ctx.arc(circleX, circleY, circleRadius, 0, Math.PI * 2);
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        
+        // Draw fill
+        if (fillAmount > 0) {
+            // Create gradient for filled portion
+            const gradient = ctx.createRadialGradient(
+                circleX, circleY, 0,
+                circleX, circleY, circleRadius
+            );
+            gradient.addColorStop(0, 'rgba(255, 0, 0, 0.8)');
+            gradient.addColorStop(0.7, 'rgba(200, 0, 0, 0.6)');
+            gradient.addColorStop(1, 'rgba(150, 0, 0, 0.4)');
+            
+            ctx.beginPath();
+            ctx.arc(circleX, circleY, circleRadius * 0.9, 0, Math.PI * 2 * fillAmount);
+            ctx.lineTo(circleX, circleY);
+            ctx.fillStyle = gradient;
+            ctx.fill();
+        }
+    }
     
     // Restore the context state
     ctx.restore();
 };
 
+// Add this new function to create the explosion effect
+const createHealthCircleExplosion = (screenX, screenY) => {
+    const numParticles = 20;
+    const colors = [
+        'rgba(255, 0, 0, 0.8)',
+        'rgba(200, 0, 0, 0.6)',
+        'rgba(150, 0, 0, 0.4)'
+    ];
+    
+    // Convert screen coordinates to world coordinates
+    const worldX = screenX - state.camera.x;
+    const worldY = screenY - state.camera.y;
+    
+    for (let i = 0; i < numParticles; i++) {
+        const angle = (i / numParticles) * Math.PI * 2;
+        const speed = 2 + Math.random() * 3;
+        const size = 2 + Math.random() * 3;
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        
+        state.particles.push({
+            x: worldX,
+            y: worldY,
+            dx: Math.cos(angle) * speed,
+            dy: Math.sin(angle) * speed,
+            size: size,
+            color: color,
+            lifetime: 1000,
+            createdAt: animationTime
+        });
+    }
+};
+
 const render = () => {
     ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
     
@@ -1489,6 +1547,9 @@ const render = () => {
         state.player.isInvulnerable = false;
     }
     
+    // Render diamonds
+    renderDiamonds();
+    
     ctx.restore();
 };
 
@@ -1598,6 +1659,7 @@ const gameLoop = (currentTime) => {
         
         updatePlayer();
         state.enemies = enemySystem.updateEnemies(state.enemies, deltaTime);
+        collectDiamonds(); // Add this line to check for diamond collection
         render();
         
         lastFrameTime = currentTime;
@@ -1851,4 +1913,63 @@ const showGameOver = () => {
         <p>Press Space to restart</p>
     `;
     document.body.appendChild(gameOverDiv);
+};
+
+// Update the player's HP when collecting diamonds
+const collectDiamonds = () => {
+    state.diamonds.forEach(diamond => {
+        const dx = state.player.x - diamond.x;
+        const dy = state.player.y - diamond.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < (CONFIG.player.size / 2 + diamond.size / 2) && !diamond.collected) {
+            diamond.collected = true; // Mark diamond as collected
+            state.player.hp = Math.min(state.player.hp + 1, state.player.maxHp); // Restore 1 HP, max out at maxHp
+        }
+    });
+    
+    // Remove collected diamonds from the state
+    state.diamonds = state.diamonds.filter(diamond => !diamond.collected);
+};
+
+const renderDiamonds = () => {
+    state.diamonds.forEach(diamond => {
+        ctx.save();
+        
+        // Add pulsing glow effect
+        const pulseIntensity = 0.5 + Math.sin(animationTime * 0.005) * 0.3; // Pulsing between 0.2 and 0.8
+        
+        // Outer glow
+        const gradient = ctx.createRadialGradient(
+            diamond.x, diamond.y, diamond.size * 0.2,
+            diamond.x, diamond.y, diamond.size * 1.5
+        );
+        gradient.addColorStop(0, `rgba(255, 215, 0, ${pulseIntensity})`);    // Gold center
+        gradient.addColorStop(0.6, 'rgba(255, 215, 0, 0.2)');                // Fading gold
+        gradient.addColorStop(1, 'rgba(255, 215, 0, 0)');                    // Transparent edge
+        
+        ctx.beginPath();
+        ctx.arc(diamond.x, diamond.y, diamond.size * 1.5, 0, Math.PI * 2);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        
+        // Inner diamond
+        ctx.beginPath();
+        ctx.arc(diamond.x, diamond.y, diamond.size * 0.4, 0, Math.PI * 2);   // Make core smaller
+        ctx.fillStyle = `rgba(255, 223, 0, ${0.8 + pulseIntensity * 0.2})`; // Brighter gold
+        ctx.fill();
+        
+        // Shine effect
+        ctx.beginPath();
+        ctx.arc(
+            diamond.x - diamond.size * 0.2,
+            diamond.y - diamond.size * 0.2,
+            diamond.size * 0.15,
+            0, Math.PI * 2
+        );
+        ctx.fillStyle = `rgba(255, 255, 255, ${0.6 + pulseIntensity * 0.4})`;
+        ctx.fill();
+        
+        ctx.restore();
+    });
 };
\ No newline at end of file