Update static/tribalStage.js

static/tribalStage.js

@@ -1,38 +1,50 @@
 class TribalStage extends GameStage {
     constructor(canvas) {
-        super(); // Call the parent constructor without canvas
+        super(canvas);
         this.canvas = canvas;
-        this.ctx = canvas.getContext('2d'); // Get the 2D context
+        this.ctx = canvas.getContext('2d');
         this.creatures = [];
         this.huts = [];
         this.rivalTribes = [];
-        this.patterns = {};
+        this.images = {}; // Store loaded images
+        this.patterns = {}; // Store created patterns
         this.loadPatterns();
     }
 
-    loadPatterns() {
-        this.patterns.background = this.loadPattern("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/beige-paper.png");
-        this.patterns.creature = this.loadPattern("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/dark-wood.png");
-        this.patterns.hut = this.loadPattern("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/wood-pattern.png");
-        this.patterns.rival = this.loadPattern("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/dark-mosaic.png");
-        this.patterns.food = this.loadPattern("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/beige-paper.png");
+    // Function to load an image and return a promise
+    loadImage(url) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            img.onload = () => resolve(img);
+            img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
+            img.src = url;
+        });
     }
 
-    loadPattern(url) {
-        const img = new Image();
-        img.crossOrigin = "anonymous"; // Attempt to handle CORS
-        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"); // Return pattern or fallback
+    async loadPatterns() {
+        try {
+            // Load all images
+            this.images.background = await this.loadImage("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/beige-paper.png");
+            this.images.creature = await this.loadImage("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/dark-wood.png");
+            this.images.hut = await this.loadImage("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/wood-pattern.png");
+            this.images.rival = await this.loadImage("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/dark-mosaic.png");
+            this.images.food = await this.loadImage("https://huggingface.co/spaces/broadfield-dev/spore_grok/resolve/main/static/images/beige-paper.png");
+
+            // Create patterns once images are loaded
+            this.patterns.background = this.ctx.createPattern(this.images.background, "repeat");
+            this.patterns.creature = this.ctx.createPattern(this.images.creature, "repeat");
+            this.patterns.hut = this.ctx.createPattern(this.images.hut, "repeat");
+            this.patterns.rival = this.ctx.createPattern(this.images.rival, "repeat");
+            this.patterns.food = this.ctx.createPattern(this.images.food, "repeat");
+
+            console.log("All patterns loaded successfully.");
+        } catch (error) {
+            console.error("Error loading patterns:", error);
+        }
     }
 
+
     init() {
         this.spawnCreature(400, 300); // Player's creature
         this.spawnRivalTribe(600, 100); // Rival tribe