Untitled

TypeBboothFactory.prototype.spawnProducts = function(shopName, receivedProducts) {
    console.log("************** Start spawning!");
    this.loadingScreen.enabled = true;
    const productsPromisesArray = [];
    var self = this;
    this.boothProducts = [];
    //remove products of their lenght is longer than prepared slots
    if (receivedProducts.length > this.productsHolders.length) {
    // Slice the array to match the length of productsHolders
        receivedProducts = receivedProducts.slice(0, this.productsHolders.length);
    }
    this.clearProducts().then(() => {
        console.log("************** Start initiating!");
        for (let i = 0; i < receivedProducts.products.length; i++) {
            let productUrl = "";
            productUrl = isMobile ? receivedProducts.products[i].imageUrlMobile : receivedProducts.products[i].imageUrlPc;
            //fallback to old urls
            if (productUrl.length == 0) productUrl = receivedProducts.products[i].imageUrl;

            let productsTemplate = this.productTemplate.resource.instantiate();
            console.log("**************instantiate!");
            this.productsHolders[i].spotEntity.addChild(productsTemplate);
            console.log("**************addChild!");  
            if (receivedProducts.products[i].voteProduct) {
                //for vote products - use a set image, and add a 3d button
                productUrl = self.voteImage.getFileUrl();
                productsTemplate.button.active = false;
                productsTemplate.findByName("PurchaseCount").element.text = receivedProducts.products[i].totalNumberPurchased;
                productsTemplate.findByName("PurchaseCount").enabled = true;
                let voteButton = self.voteButtonTemplate.resource.instantiate();
                voteButton.script.infoButton3d.manualInitialize(2, "" , "", "", {"shopId": receivedProducts.shopID, "shopName": shopName, "productId": receivedProducts.products[i].productId});
                productsTemplate.addChild(voteButton);
            }

            let backupUrl = (productUrl !== receivedProducts.products[i].imageUrl) ? receivedProducts.products[i].imageUrl : null;
            const promise = this.setImages3(productsTemplate, productUrl, backupUrl);
            productsPromisesArray.push(promise);
            //pass reference of controller so could listen for events on it.
            if (productsTemplate.script.product) productsTemplate.script.product.manualInitialization(this.entity, receivedProducts.shopID, shopName, receivedProducts.products[i].productId);
            this.boothProducts.push(productsTemplate);
        }

    });

    Promise.all(productsPromisesArray)
        .then(() => {
            console.log("************ all products spawned?" +this.boothProducts.length);
            for(let z = 0; z < this.boothProducts.length; z++) {
                this.boothProducts[z].element.opacity = 1;
                this.boothProducts[z].element.useInput = true;
            }
            this.loadingScreen.enabled = false;
            this.boothController.fire("BoothController:LoadingStatus", true);
            //this.pageControl = true;
        })
        .catch(error => {
            this.loadingScreen.enabled = false;
            console.log('Error applying images:', error);
        });
}

TypeBboothFactory.prototype.setImages3 = function(imageEntity, productUrl, fallbackUrl) {
    return new Promise((resolve, reject) => {
        var self = this;
        const image = new Image();
        //imageEntity.element.opacity = 0;
        //imageEntity.element.useInput = false;
        image.crossOrigin = "anonymous";

        image.onload = () => {
            console.log("----------------------- TEXTURE LOADED!");
            const texture = new pc.Texture(self.app.graphicsDevice);
            texture.setSource(image);
            if (imageEntity.element){
                imageEntity.element.fitMode = pc.FITMODE_CONTAIN;
                imageEntity.element.texture = texture;
            }
            window.globalTextures.push(texture);
            resolve();
        };

        image.onerror = function() {
             if (fallbackUrl) {
                console.log('Error loading image:', productUrl, '. Trying fallback URL:', fallbackUrl);
                self.setImages3(imageEntity, fallbackUrl, null).then(resolve).catch(resolve);
            } else {
                console.log('Error loading image:', productUrl);
                imageEntity.element.texture = self.noImage.resource;
                resolve(); 
            }
        };
        // Set the image src outside and after the onload and onerror definitions
        image.src = productUrl;
    });
}