Update static/tribalStage.js

static/tribalStage.js

@@ -1,30 +1,84 @@
 class TribalStage extends GameStage {
-    constructor(canvas) {
-        super(canvas);
+    constructor() {
+        super();
         this.creatures = [];
         this.huts = [];
         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");
-        this.firepitImg = this.loadAsset("https://opengameart.org/sites/default/files/campfire.png");
+
+        // Load 3D models via URLs
+        this.loadModels();
+    }
+
+    loadModels() {
+        const loader = new THREE.GLTFLoader();
+        const textureLoader = new THREE.TextureLoader();
+
+        // Grass (terrain texture)
+        textureLoader.load(
+            "https://cdn.pixabay.com/photo/2013/07/12/18/40/grass-150056_1280.png",
+            (texture) => {
+                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+                texture.repeat.set(10, 10); // Tile the texture
+                this.ground.material = new THREE.MeshBasicMaterial({ map: texture });
+            },
+            undefined,
+            (error) => console.error("Grass texture load error:", error)
+        );
+
+        // Tribal Creature (Player)
+        loader.load(
+            "https://polyhaven.com/a/tribal_warrior", // Simplified URL; download GLTF from Poly Haven
+            (gltf) => {
+                this.creatureModel = gltf.scene;
+                this.creatureModel.scale.set(0.5, 0.5, 0.5); // Scale down for game size
+                this.spawnCreature(0, 0);
+            },
+            undefined,
+            (error) => console.error("Creature load error:", error)
+        );
+
+        // Hut
+        loader.load(
+            "https://polyhaven.com/a/hut", // Download GLTF from Poly Haven
+            (gltf) => {
+                this.hutModel = gltf.scene;
+                this.hutModel.scale.set(0.5, 0.5, 0.5);
+            },
+            undefined,
+            (error) => console.error("Hut load error:", error)
+        );
+
+        // Rival Tribe
+        loader.load(
+            "https://sketchfab.com/3d-models/tribal-warrior-7b9f9f7e2b7b4a2a8f1c9d0e", // Download GLTF, free version
+            (gltf) => {
+                this.rivalModel = gltf.scene;
+                this.rivalModel.scale.set(0.5, 0.5, 0.5);
+                this.spawnRivalTribe(5, 5);
+            },
+            undefined,
+            (error) => console.error("Rival load error:", error)
+        );
     }
 
     init() {
-        this.spawnCreature(400, 300); // Player's creature
-        this.spawnRivalTribe(600, 100); // Rival tribe
-        this.render();
+        this.animate();
     }
 
-    spawnCreature(x, y) {
-        this.creatures.push({ x, y, speed: 2, color: "#ff0000", size: 32 });
+    spawnCreature(x, z) {
+        const creature = this.creatureModel.clone();
+        creature.position.set(x, 0, z);
+        this.scene.add(creature);
+        this.creatures.push({ model: creature, speed: 0.05 });
         this.population = this.creatures.length;
         this.updateUI();
     }
 
-    spawnRivalTribe(x, y) {
-        this.rivalTribes.push({ x, y, members: 3, hostile: true });
+    spawnRivalTribe(x, z) {
+        const tribe = this.rivalModel.clone();
+        tribe.position.set(x, 0, z);
+        this.scene.add(tribe);
+        this.rivalTribes.push({ model: tribe, members: 3, hostile: true });
     }
 
     gatherFood() {
@@ -35,9 +89,12 @@ class TribalStage extends GameStage {
     buildHut() {
         if (this.resources.food >= 20 && this.huts.length < 5) {
             this.resources.food -= 20;
-            this.huts.push({ x: 350 + this.huts.length * 50, y: 250 });
+            const hut = this.hutModel.clone();
+            hut.position.set(-5 + this.huts.length, 0, 0);
+            this.scene.add(hut);
+            this.huts.push(hut);
             this.maxPopulation += 2;
-            this.spawnCreature(400, 300);
+            this.spawnCreature(0, 0);
         }
         this.updateUI();
     }
@@ -46,6 +103,7 @@ class TribalStage extends GameStage {
         if (this.rivalTribes.length > 0 && this.creatures.length > 1) {
             this.rivalTribes[0].members -= 1;
             if (this.rivalTribes[0].members <= 0) {
+                this.scene.remove(this.rivalTribes[0].model);
                 this.rivalTribes.shift();
                 this.relations = "Victorious";
             } else {
@@ -66,69 +124,30 @@ class TribalStage extends GameStage {
 
     applyCreatureChanges() {
         const color = document.getElementById("creatureColor").value;
-        const size = parseInt(document.getElementById("creatureSize").value);
+        const scale = parseFloat(document.getElementById("creatureSize").value);
         this.creatures.forEach(c => {
-            c.color = color;
-            c.size = size;
+            c.model.traverse((child) => {
+                if (child.isMesh) {
+                    child.material.color.set(color);
+                    c.model.scale.set(scale, scale, scale);
+                }
+            });
         });
         toggleEditor(); // Hide editor after applying
     }
 
     update() {
         this.creatures.forEach(creature => {
-            creature.x += (Math.random() - 0.5) * creature.speed;
-            creature.y += (Math.random() - 0.5) * creature.speed;
-            creature.x = Math.max(0, Math.min(800, creature.x));
-            creature.y = Math.max(0, Math.min(600, creature.y));
+            creature.model.position.x += (Math.random() - 0.5) * creature.speed;
+            creature.model.position.z += (Math.random() - 0.5) * creature.speed;
+            creature.model.position.x = Math.max(-50, Math.min(50, creature.model.position.x));
+            creature.model.position.z = Math.max(-50, Math.min(50, creature.model.position.z));
         });
     }
-
-    render() {
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-        // Draw grass background
-        for (let x = 0; x < this.canvas.width; x += 32) {
-            for (let y = 0; y < this.canvas.height; y += 32) {
-                if (this.grassImg.complete) this.ctx.drawImage(this.grassImg, x, y, 32, 32);
-            }
-        }
-
-        // Draw huts
-        this.huts.forEach(hut => {
-            if (this.hutImg.complete) this.ctx.drawImage(this.hutImg, hut.x, hut.y, 48, 48);
-        });
-
-        // Draw firepits (optional decoration)
-        this.huts.forEach((hut, i) => {
-            if (i % 2 === 0 && this.firepitImg.complete) {
-                this.ctx.drawImage(this.firepitImg, hut.x + 20, hut.y + 20, 32, 32);
-            }
-        });
-
-        // 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 => {
-            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();
-        requestAnimationFrame(() => this.render());
-    }
 }
 
 let game;
 document.addEventListener("DOMContentLoaded", () => {
-    game = new TribalStage(document.getElementById("gameCanvas"));
+    game = new TribalStage();
     game.init();
 });