Update static/tribalStage.js

static/tribalStage.js

@@ -3,27 +3,32 @@ class TribalStage extends GameStage {
         super(canvas);
         this.creatures = [];
         this.huts = [];
-        this.grassImg = this.loadAsset("/static/assets/grass.png");
-        this.creatureImg = this.loadAsset("/static/assets/creature.png");
-        this.hutImg = this.loadAsset("/static/assets/hut.png");
+        this.rivalTribes = [];
+        this.grassImg = this.loadAsset("https://kenney.nl/assets/topdown-shooter/tiles/grass.png");
+        this.creatureImg = this.loadAsset("https://kenney.nl/assets/rpg-character/character.png");
+        this.hutImg = this.loadAsset("https://opengameart.org/sites/default/files/hut.png");
+        this.rivalImg = this.loadAsset("https://kenney.nl/assets/rpg-enemies/enemy.png");
     }
 
     init() {
-        this.spawnCreature(400, 300); // Start with one creature
+        this.spawnCreature(400, 300); // Player's creature
+        this.spawnRivalTribe(600, 100); // Rival tribe
         this.render();
     }
 
     spawnCreature(x, y) {
-        this.creatures.push({ x, y, speed: 2 });
+        this.creatures.push({ x, y, speed: 2, color: "#ff0000", size: 32 });
         this.population = this.creatures.length;
         this.updateUI();
     }
 
+    spawnRivalTribe(x, y) {
+        this.rivalTribes.push({ x, y, members: 3, hostile: true });
+    }
+
     gatherFood() {
-        if (this.creatures.length > 0) {
-            this.resources.food += 5 * this.creatures.length;
-            this.updateUI();
-        }
+        this.resources.food += 5 * this.creatures.length;
+        this.updateUI();
     }
 
     buildHut() {
@@ -31,11 +36,43 @@ class TribalStage extends GameStage {
             this.resources.food -= 20;
             this.huts.push({ x: 350 + this.huts.length * 50, y: 250 });
             this.maxPopulation += 2;
-            this.spawnCreature(400, 300); // New creature per hut
+            this.spawnCreature(400, 300);
         }
         this.updateUI();
     }
 
+    attackTribe() {
+        if (this.rivalTribes.length > 0 && this.creatures.length > 1) {
+            this.rivalTribes[0].members -= 1;
+            if (this.rivalTribes[0].members <= 0) {
+                this.rivalTribes.shift();
+                this.relations = "Victorious";
+            } else {
+                this.relations = "Hostile";
+            }
+            this.updateUI();
+        }
+    }
+
+    socializeTribe() {
+        if (this.rivalTribes.length > 0 && this.resources.food >= 10) {
+            this.resources.food -= 10;
+            this.rivalTribes[0].hostile = false;
+            this.relations = "Friendly";
+            this.updateUI();
+        }
+    }
+
+    applyCreatureChanges() {
+        const color = document.getElementById("creatureColor").value;
+        const size = parseInt(document.getElementById("creatureSize").value);
+        this.creatures.forEach(c => {
+            c.color = color;
+            c.size = size;
+        });
+        toggleEditor(); // Hide editor after applying
+    }
+
     update() {
         this.creatures.forEach(creature => {
             creature.x += (Math.random() - 0.5) * creature.speed;
@@ -51,18 +88,30 @@ class TribalStage extends GameStage {
         // Draw grass background
         for (let x = 0; x < this.canvas.width; x += 32) {
             for (let y = 0; y < this.canvas.height; y += 32) {
-                this.ctx.drawImage(this.grassImg, x, y, 32, 32);
+                if (this.grassImg.complete) this.ctx.drawImage(this.grassImg, x, y, 32, 32);
             }
         }
 
         // Draw huts
         this.huts.forEach(hut => {
-            this.ctx.drawImage(this.hutImg, hut.x, hut.y, 48, 48);
+            if (this.hutImg.complete) this.ctx.drawImage(this.hutImg, hut.x, hut.y, 48, 48);
         });
 
-        // Draw creatures
+        // Draw rival tribes
+        this.rivalTribes.forEach(tribe => {
+            if (this.rivalImg.complete) this.ctx.drawImage(this.rivalImg, tribe.x, tribe.y, 32, 32);
+            this.ctx.fillStyle = tribe.hostile ? "red" : "green";
+            this.ctx.fillText(`Members: ${tribe.members}`, tribe.x, tribe.y - 10);
+        });
+
+        // Draw creatures with custom color/size
         this.creatures.forEach(creature => {
-            this.ctx.drawImage(this.creatureImg, creature.x, creature.y, 32, 32);
+            if (this.creatureImg.complete) {
+                this.ctx.drawImage(this.creatureImg, creature.x, creature.y, creature.size, creature.size);
+            } else {
+                this.ctx.fillStyle = creature.color;
+                this.ctx.fillRect(creature.x, creature.y, creature.size, creature.size);
+            }
         });
 
         this.update();
@@ -70,7 +119,7 @@ class TribalStage extends GameStage {
     }
 }
 
-let game; // Global reference for UI functions
+let game;
 document.addEventListener("DOMContentLoaded", () => {
     game = new TribalStage(document.getElementById("gameCanvas"));
     game.init();