game.js

// Function to save and load progress using localStorage
function saveProgress(section) {
    localStorage.setItem("current_section", section);
}

function loadProgress() {
    return localStorage.getItem("current_section") || "introduction";
}

// Display the game start screen
function showStartScreen() {
    document.getElementById("game-start").classList.remove("hidden");
    document.getElementById("game-content").classList.add("hidden");
    document.getElementById("game-over").classList.add("hidden");
}

// Display the story and choices
function displayStory(section) {
    saveProgress(section);
    fadeOutContent(); // Fade out old content before loading new

    setTimeout(() => {
        const currentStory = story[section]; // Use story from storyData.js
        document.getElementById("story-image").src = currentStory.image;
        document.getElementById("story-text").innerText = currentStory.text;

        const buttonsContainer = document.getElementById("buttons-container");
        buttonsContainer.innerHTML = ''; // Clear previous buttons

        if (section === "gameOver") {
            showGameOver();
            return;
        }

        currentStory.choices.forEach(choice => {
            const button = document.createElement("button");
            button.innerText = choice.text;
            button.onclick = () => displayStory(choice.next);
            buttonsContainer.appendChild(button);
        });

        fadeInContent(); // Fade in the new content
    }, 500); // Wait for fade-out animation to complete
}

// Start the game
document.addEventListener("DOMContentLoaded", () => {
    // Get the background music element
    const backgroundMusic = document.getElementById("background-music");

    showStartScreen();

    document.getElementById("start-button").addEventListener("click", () => {
        // Play background music when the game starts
        backgroundMusic.play();

        document.getElementById("game-start").classList.add("hidden");
        document.getElementById("game-content").classList.remove("hidden");
        displayStory("introduction");
    });

    document.getElementById("restart-button").addEventListener("click", () => {
        document.getElementById("game-over").classList.add("hidden");
        document.getElementById("game-content").classList.remove("hidden");
        displayStory("introduction");
    });
});


// Fade out the current story content
function fadeOutContent() {
    const storyText = document.getElementById("story-text");
    const storyImage = document.getElementById("story-image-container");

    storyText.style.opacity = 0;
    storyImage.style.opacity = 0;
}

// Fade in the new story content
function fadeInContent() {
    const storyText = document.getElementById("story-text");
    const storyImage = document.getElementById("story-image-container");

    storyText.style.opacity = 1;
    storyImage.style.opacity = 1;
}

// Show the game over screen
function showGameOver() {
    document.getElementById("game-over").classList.remove("hidden");
    document.getElementById("game-content").classList.add("hidden");
}