script.js

const music = document.getElementById("background-music");
const muteButton = document.getElementById("mute-button");

//Function to play music if it's not playing
function playMusic() {
    if (music.paused) {
        music.volume = 0.1; // Adjust volume (0.0 to 1.0)
        music.play().catch(error => {
            console.log("Autoplay blocked. Waiting for user interaction.");
            document.addEventListener("click", () => music.play(), { once: true });
        });
    }
}

//Plays the music automatically when the page loads
window.addEventListener("load", playMusic);

// Character selection logic
document.querySelectorAll(".character").forEach(button => {
    button.addEventListener("click", function() {
        // Remove the selected class from all buttons
        document.querySelectorAll(".character").forEach(btn => btn.classList.remove("selected"));
        
        //Adds the selected class to the clicked button
        this.classList.add("selected");

        //Updates the display section
        document.getElementById("characterName").textContent = this.dataset.name;
        document.getElementById("characterImage").src = this.dataset.image;
        document.getElementById("characterImage").alt = this.dataset.name;
        document.getElementById("characterDescription").textContent = this.dataset.description;
    });
});

//Mute Button Logic
muteButton.addEventListener("click", () => {
    music.muted = !music.muted;
    muteButton.textContent = music.muted ? "🔇" : "🔊";
});