Update static/tribalStage.js

static/tribalStage.js

@@ -4,24 +4,21 @@ class TribalStage extends GameStage {
         this.creatures = [];
         this.huts = [];
         this.rivalTribes = [];
-        this.patterns = {}; // Store loaded patterns
+        this.patterns = {};
         this.loadPatterns();
     }
 
     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);
+        this.patterns.background = this.loadPattern("https://www.transparenttextures.com/patterns/subtle-white-feathers.png");
+        this.patterns.creature = this.loadPattern("https://www.transparenttextures.com/patterns/dark-wood.png");
+        this.patterns.hut = this.loadPattern("https://www.transparenttextures.com/patterns/wood-pattern.png");
+        this.patterns.rival = this.loadPattern("https://www.transparenttextures.com/patterns/dark-mosaic.png");
+        this.patterns.food = this.loadPattern("https://www.transparenttextures.com/patterns/red-paper.png");
     }
 
-    loadPattern(url, width, height) {
+    loadPattern(url) {
         const img = new Image();
-        img.crossOrigin = "anonymous"; // Try to handle CORS, but we’ll fallback if it fails
+        img.crossOrigin = "anonymous"; // Attempt to handle CORS
         img.src = url;
         let pattern = null;
         img.onload = () => {
@@ -31,7 +28,7 @@ class TribalStage extends GameStage {
             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
+        return () => pattern || this.ctx.createPattern(new Uint8ClampedArray([255, 255, 255, 255]), "repeat"); // Return pattern or fallback
     }
 
     init() {
@@ -109,39 +106,36 @@ class TribalStage extends GameStage {
     render() {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-        // Draw grass background (using pattern)
-        this.ctx.fillStyle = this.patterns.grass();
+        // Draw background with subtle white feathers pattern
+        this.ctx.fillStyle = this.patterns.background();
         this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
-        // Draw huts (wood-patterned rectangles)
+        // Draw huts with wood pattern
         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)
+        // Draw rival tribes with dark mosaic pattern
         this.rivalTribes.forEach(tribe => {
-            this.ctx.fillStyle = tribe.hostile ? "red" : "green";
+            this.ctx.fillStyle = this.patterns.rival();
             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.fillStyle = tribe.hostile ? "red" : "green";
             this.ctx.fillText(`Members: ${tribe.members}`, tribe.x, tribe.y - 10);
         });
 
-        // Draw creatures (circles with tribal pattern and custom color overlay)
+        // Draw creatures with dark wood pattern
         this.creatures.forEach(creature => {
-            this.ctx.fillStyle = creature.color || "#ff0000";
+            this.ctx.fillStyle = this.patterns.creature();
             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()) {
+        // Optionally draw food with red paper pattern
+        if (this.resources.food > 0) {
             this.ctx.fillStyle = this.patterns.food();
             this.ctx.fillRect(50, 50, 16, 16); // Example position for food
         }