Update index.html

index.html

@@ -52,7 +52,7 @@
                 for (let col = 0; col < cols; col++) {
                     let x = col * offsetX + 150;
                     let y = row * hexHeight + (col % 2 ? offsetY : 0) + 50;
-                    hexGrid.push({ x, y, type: "empty", lifeStage: 0, score: 0, emoji: "" });
+                    hexGrid.push({ x, y, type: "empty", lifeStage: 0, score: 0, emojis: [] });
                 }
             }
         }
@@ -62,7 +62,7 @@
         }
 
         function drawHex(hex) {
-            const { x, y, type, emoji } = hex;
+            const { x, y, type, emojis } = hex;
             ctx.beginPath();
             for (let i = 0; i < 6; i++) {
                 let angle = (Math.PI / 3) * i;
@@ -76,7 +76,11 @@
             ctx.stroke();
             ctx.fillStyle = "white";
             ctx.font = "20px Arial";
-            ctx.fillText(emoji, x - 10, y + 5);
+            emojis.forEach((emoji, index) => {
+                let randX = x - 10 + (Math.random() * 20 - 10);
+                let randY = y + 5 + (Math.random() * 20 - 10);
+                ctx.fillText(emoji, randX, randY);
+            });
         }
 
         function getTerrainColor(type) {
@@ -89,6 +93,9 @@
                     hex.lifeStage++;
                     hex.score += hex.lifeStage * 5;
                     totalScore += hex.lifeStage * 5;
+                    if (hex.lifeStage % 3 === 0) {
+                        hex.emojis.push(hex.emojis[0]); 
+                    }
                     document.getElementById("scoreboard").innerText = `Total Score: ${totalScore}`;
                 }
             });
@@ -102,7 +109,7 @@
         function updateTimer() {
             timer--;
             document.getElementById("timer").innerText = `Time Left: ${Math.floor(timer / 60)}:${(timer % 60).toString().padStart(2, '0')}`;
-            if (timer % 15 === 0) {
+            if (timer % 10 === 0) {
                 evolveGrid();
             }
             renderMap();
@@ -122,7 +129,7 @@
                     if (selectedPlant && resources[selectedPlant] > 0 && hex.type === "empty") {
                         hex.type = "seed";
                         hex.lifeStage = 1;
-                        hex.emoji = selectedPlant;
+                        hex.emojis.push(selectedPlant);
                         resources[selectedPlant]--;
                         document.getElementById("resources").innerText = `Seeds: 🌿${resources["🌿"]} 🍁${resources["🍁"]} 🌺${resources["🌺"]} 🌾${resources["🌾"]} 🍊${resources["🍊"]}`;
                     }