Update static/tribalStage.js

static/tribalStage.js

@@ -1,87 +1,53 @@
-let game;
-
 class TribalStage extends GameStage {
-    constructor() {
-        super();
+    constructor(canvas) {
+        super(canvas);
         this.creatures = [];
         this.huts = [];
         this.rivalTribes = [];
+        this.patterns = {}; // Store loaded patterns
+        this.loadPatterns();
+    }
 
-        // Load 3D models via local paths (after downloading and hosting)
-        this.loadModels();
+    loadPatterns() {
+        // Load grass texture for background
+        this.patterns.grass = this.loadPattern("https://cdn.pixabay.com/photo/2013/07/12/18/40/grass-150056_1280.png", 32, 32);
+        // Load tribal pattern for creatures
+        this.patterns.creature = this.loadPattern("https://cdn.pixabay.com/photo/2023/05/15/10/32/ai-generated-7994367_1280.png", 32, 32);
+        // Load wood texture for huts
+        this.patterns.hut = this.loadPattern("https://cdn.pixabay.com/photo/2014/03/25/16/53/wood-295552_1280.png", 48, 48);
+        // Load apple for food
+        this.patterns.food = this.loadPattern("https://cdn.pixabay.com/photo/2013/07/12/07/25/apple-151229_1280.png", 16, 16);
     }
 
-    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(
-            "/static/assets/tribal_warrior.gltf",
-            (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(
-            "/static/assets/hut.gltf",
-            (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(
-            "/static/assets/rival_warrior.gltf",
-            (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)
-        );
+    loadPattern(url, width, height) {
+        const img = new Image();
+        img.crossOrigin = "anonymous"; // Try to handle CORS, but we’ll fallback if it fails
+        img.src = url;
+        let pattern = null;
+        img.onload = () => {
+            pattern = this.ctx.createPattern(img, "repeat");
+        };
+        img.onerror = () => {
+            console.error("Failed to load pattern:", url);
+            pattern = this.ctx.createPattern(new Uint8ClampedArray([255, 255, 255, 255]), "repeat"); // Fallback to white
+        };
+        return () => pattern || this.ctx.createPattern(new Uint8ClampedArray([255, 255, 255, 255]), "repeat"); // Fallback
     }
 
     init() {
-        this.animate();
-        game = this; // Set the global game reference here
+        this.spawnCreature(400, 300); // Player's creature
+        this.spawnRivalTribe(600, 100); // Rival tribe
+        this.render();
     }
 
-    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 });
+    spawnCreature(x, y) {
+        this.creatures.push({ x, y, speed: 2, size: 32 });
         this.population = this.creatures.length;
         this.updateUI();
     }
 
-    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 });
+    spawnRivalTribe(x, y) {
+        this.rivalTribes.push({ x, y, members: 3, hostile: true });
     }
 
     gatherFood() {
@@ -92,12 +58,9 @@ class TribalStage extends GameStage {
     buildHut() {
         if (this.resources.food >= 20 && this.huts.length < 5) {
             this.resources.food -= 20;
-            const hut = this.hutModel.clone();
-            hut.position.set(-5 + this.huts.length, 0, 0);
-            this.scene.add(hut);
-            this.huts.push(hut);
+            this.huts.push({ x: 350 + this.huts.length * 50, y: 250 });
             this.maxPopulation += 2;
-            this.spawnCreature(0, 0);
+            this.spawnCreature(400, 300);
         }
         this.updateUI();
     }
@@ -106,7 +69,6 @@ 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 {
@@ -127,35 +89,70 @@ class TribalStage extends GameStage {
 
     applyCreatureChanges() {
         const color = document.getElementById("creatureColor").value;
-        const scale = parseFloat(document.getElementById("creatureSize").value);
+        const size = parseInt(document.getElementById("creatureSize").value);
         this.creatures.forEach(c => {
-            c.model.traverse((child) => {
-                if (child.isMesh) {
-                    child.material.color.set(color);
-                    c.model.scale.set(scale, scale, scale);
-                }
-            });
+            c.color = color;
+            c.size = size;
         });
         toggleEditor(); // Hide editor after applying
     }
 
     update() {
         this.creatures.forEach(creature => {
-            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));
+            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));
         });
     }
 
-    animate() {
-        requestAnimationFrame(() => this.animate());
+    render() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        // Draw grass background (using pattern)
+        this.ctx.fillStyle = this.patterns.grass();
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+        // Draw huts (wood-patterned rectangles)
+        this.huts.forEach(hut => {
+            this.ctx.fillStyle = this.patterns.hut();
+            this.ctx.fillRect(hut.x, hut.y, 48, 48);
+        });
+
+        // Draw rival tribes (red or green circles with tribal pattern)
+        this.rivalTribes.forEach(tribe => {
+            this.ctx.fillStyle = tribe.hostile ? "red" : "green";
+            this.ctx.beginPath();
+            this.ctx.arc(tribe.x + 16, tribe.y + 16, 16, 0, Math.PI * 2);
+            this.ctx.fill();
+            this.ctx.fillStyle = this.patterns.creature();
+            this.ctx.fill();
+            this.ctx.fillText(`Members: ${tribe.members}`, tribe.x, tribe.y - 10);
+        });
+
+        // Draw creatures (circles with tribal pattern and custom color overlay)
+        this.creatures.forEach(creature => {
+            this.ctx.fillStyle = creature.color || "#ff0000";
+            this.ctx.beginPath();
+            this.ctx.arc(creature.x + creature.size / 2, creature.y + creature.size / 2, creature.size / 2, 0, Math.PI * 2);
+            this.ctx.fill();
+            this.ctx.fillStyle = this.patterns.creature();
+            this.ctx.fill();
+        });
+
+        // Optionally draw food (small apple icon)
+        if (this.resources.food > 0 && this.patterns.food()) {
+            this.ctx.fillStyle = this.patterns.food();
+            this.ctx.fillRect(50, 50, 16, 16); // Example position for food
+        }
+
         this.update();
-        this.renderer.render(this.scene, this.camera);
+        requestAnimationFrame(() => this.render());
     }
 }
 
+let game;
 document.addEventListener("DOMContentLoaded", () => {
-    game = new TribalStage();
+    game = new TribalStage(document.getElementById("gameCanvas"));
     game.init();
 });