gradshow24/backplaces/hermit/script.js

//cards
document.addEventListener('DOMContentLoaded', () => {
    const topCard = document.getElementById('topCard');
    const messageDiv = document.getElementById('message-div');
    const texts = [
        document.getElementById('text1'),
        document.getElementById('text2'),
        document.getElementById('text3'),
        document.getElementById('text4'),
        document.getElementById('text5')
    ];

    let currentTextIndex = 0;

    // Initialize by showing the first text in the top card
    topCard.innerHTML = texts[currentTextIndex].innerHTML;

    // Show the next text behind the top card
    function updateBehindCard() {
        texts.forEach((text, index) => {
            text.style.display = (index === currentTextIndex + 1) ? 'block' : 'none';
        });
    }
    updateBehindCard();

    topCard.addEventListener('click', () => {
        // Hide the current text
        texts[currentTextIndex].style.display = 'none';

        // Update the index
        currentTextIndex++;

        if (currentTextIndex >= texts.length) {
            // Hide the top card after the last text
            topCard.style.display = 'none';
            // Show the message div
            messageDiv.style.display = 'block';
        } else {
            // Show the new text in the top card
            topCard.innerHTML = texts[currentTextIndex].innerHTML;

            // Update the card behind the top card
            updateBehindCard();
        }
    });
});

function openLetter() {
    $('#letterContents').html(`
        <p id="letterContents">
            Hi. I made you this website. 
            <br><br>
            Hermit Fantasy is a short story about a bot and a hermit. It started when I conducted a survey about receiving emotional support on the internet. This is an imagined response to an email I received. The story explores the loneliness of both being online and offline. As an act, it's a series of letters, click by click.
            <br><br>
            ada
            <br><br>
            p.s.
                <br>
            If you see yourself, what you have told me or posted online reflected too closely for comfort do not hesitate to reach out to me at 0backplaces@gmail.com
        </p>
    `);
    $('.letterBox').toggle();
}

function closeLetter() {
    $('.letterBox').hide();
}

//nav
document.addEventListener('DOMContentLoaded', (event) => {
    const about = document.getElementById('about');

    about.addEventListener('mouseover', (event) => {
        event.target.src = '../photos/open-crow.png';
    });ß

    about.addEventListener('mouseout', (event) => {
        event.target.src = '../photos/closed-crow.png';
    });

    const home = document.getElementById('home');

    home.addEventListener('mouseover', (event) => {
        event.target.src = '../photos/home-open.png';
    });

    home.addEventListener('mouseout', (event) => {
        event.target.src = '../photos/home-closed.png';
    });
});
//audio
document.addEventListener("DOMContentLoaded", function() {
    const audioElement = document.getElementById('background-audio');
    const muteButton = document.getElementById('mute-btn');
    
    // Function to set the volume
    const setVolume = () => {
        audioElement.volume = 0.1; // Set volume to 10%
    };
    
    setVolume(); // Set initial volume

    // Set initial mute state from localStorage
    let isMuted = localStorage.getItem('mute') === 'true';
    audioElement.muted = isMuted;
    muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";

    // Start audio playback on user interaction
    const startAudio = () => {
        audioElement.play();
        setVolume(); // Ensure volume is set after play
        document.removeEventListener('click', startAudio);
    };

    document.addEventListener('click', startAudio);

    muteButton.addEventListener('click', function() {
        isMuted = !isMuted;
        audioElement.muted = isMuted;
        localStorage.setItem('mute', isMuted);
        muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";
    });
});