*

1 files changed, 157 insertions, 36 deletions

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