Trouble with non-broken "broken" images

jedilkeme

im working on a super basic tarot draw module that draws three cards at random out of seventy eight at random with the chance of inversion of each card. not being a javascript or any other kind of real coder(i am a script kitty at best and not afraid to admit it). i had chat gpt write me a module, which seems well written, ive had it correct itself and i just dont see where the errors are, if anyone would be willing to take a look i would be stoked. thanks in advance code_text ...
code_text

MMM_Tarot.css

.tarot-card {
    max-width: 300px; /* Set maximum width */
    max-height: 400px; /* Set maximum height */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
}

.inverted {
    transform: scaleY(-1);
}


code_text
MMM_Tarot.js

Module.register("MMM_Tarot", {
    defaults: {
        updateHour: 5, // Update hour (5 am)
        updateMinute: 0, // Update minute
        updateInterval: 24 * 60 * 60 * 1000, // Update every day
    },

    start: function() {
        var self = this;
        this.tarotData = {};
        this.scheduleUpdate();
        setInterval(function() {
            self.scheduleUpdate();
        }, 60 * 1000); // Check every minute if it's time to update
    },

    scheduleUpdate: function() {
        var self = this;
        var now = new Date();
        var scheduledTime = new Date(
            now.getFullYear(),
            now.getMonth(),
            now.getDate(),
            this.config.updateHour,
            this.config.updateMinute,
            0,
            0
        );

        var delay = scheduledTime.getTime() - now.getTime();
        if (delay < 0) {
            delay += this.config.updateInterval;
        }

        setTimeout(function() {
            self.getTarotData();
            setInterval(function() {
                self.getTarotData();
            }, self.config.updateInterval);
        }, delay);
    },

    getStyles: function() {
        return ["MMM_Tarot.css"];
    },

    getTarotData: function() {
        this.sendSocketNotification("GET_TAROT_DATA");
    },

    socketNotificationReceived: function(notification, payload) {
        if (notification === "TAROT_DATA") {
            this.tarotData = payload;
            this.updateDom();
        }
    },

    getDom: function() {
        const wrapper = document.createElement("div");

        if (this.tarotData.images) {
            for (let i = 0; i < this.tarotData.images.length; i++) {
                const cardImg = document.createElement("img");
                cardImg.src = this.tarotData.images[i].image;
                cardImg.className = "tarot-card"; // Add class to set max-width

                // If the card is inverted, add a class to flip it
                if (this.tarotData.images[i].inverted) {
                    cardImg.classList.add("inverted");
                }

                wrapper.appendChild(cardImg);
            }
        } else {
            wrapper.innerHTML = "Loading...";
        }



        return wrapper;
    }
});

code_text

node_helper.js

const NodeHelper = require(“node_helper”);
const fs = require(“fs”);
const path = require(“path”);

module.exports = NodeHelper.create({
start: function() {
console.log(“Starting node_helper for MMM_Tarot”);
},

socketNotificationReceived: function(notification) {
    if (notification === "GET_TAROT_DATA") {
        this.getTarotData();
    }
},

getTarotData: function() {
    // Array of available card images
    const cardImages = fs.readdirSync(path.join(__dirname, "..", "MMM_Tarot", "cards"));

    // Randomly select three card images
    const selectedCards = [];
    for (let i = 0; i < 3; i++) {
        const randomIndex = Math.floor(Math.random() * cardImages.length);
        selectedCards.push(cardImages[randomIndex]);
    }

    // Determine if each card should be inverted
    const invertedCards = [];
    for (let i = 0; i < 3; i++) {
        invertedCards.push(Math.random() < 0.5); // 50% chance of being inverted
    }

    // Construct the file paths for the selected cards
    const cardPaths = selectedCards.map((card, index) => ({
        image: path.join(__dirname, "..", "cards", card),
        inverted: invertedCards[index],
    }));

    // Send the selected cards data back to the main module
    this.sendSocketNotification("TAROT_DATA", { images: cardPaths });
}

});

sdetweil

@jedilkeme what do I mean broken?

did u look in the developers window console and elements tab?

ctrl-alt-i

tar in the filter field to see messages from,/about your module

elements tab can see the html being used

jedilkeme

@sdetweil ctrl-alt-i has no effect???

sdetweil

@jedilkeme I’m sorry, brain fart, ctrl-shift-i

jedilkeme

@jedilkeme what should I be looking for from there?

sdetweil

@jedilkeme in the console tab, you might see a 404 error, not found
in the elements tab you can see the actual html used.

jedilkeme

@sdetweil no 404 errors or anything else that pops out at me…

sdetweil

@jedilkeme and if you look at the html for the image, it is as you expected. and if you use that url.i a browser, the image is displayed?

jedilkeme

@sdetweil ah, it wasn’t showing errors because I had it written to load at 5am… I set it to run in one minute, and I did receive a 404 for the images, permissions are all groovy but I noticed I can’t view the images from localhost:8080/path-to-images in the browser, but if I just put in the file path in the address bar I can see the images… then I ran npm start dev and I found an EADDRINUSE error. Stumped. Thanks your you assistance so far!

sdetweil

@jedilkeme said in Trouble with non-broken "broken" images:

I ran npm start dev and I found an EADDRINUSE error

pm2 already has an instance running… only one at a time please on the same port

pm2 status to see what pm2 manages
pm2 --help
to see all the things it CAN do
pm2 stop name or row number or all
pm2 stop all

then you can do the npm start …

when u are happy , then ctrl-q or ctrl-c to stop the npm start and pm2 start or restart row or name
then on reboot it will come back up…

pm2’s JOB is to keep its managed apps running…