const audioFiles = {
    rain: new Audio('audio/rain.mp3'),
    fire: new Audio('audio/fire.mp3'),
};

for (const audio in audioFiles) {
    audioFiles[audio].loop = true;

    const soundControl = document.createElement('div');
    soundControl.classList.add('sound');
    soundControl.innerHTML = `<label>${audio.charAt(0).toUpperCase() + audio.slice(1)}</label><input class="sound-slider" type="range" min="0" max="100" value="0" id="${audio}-slider">`;
    document.getElementById('sound-controls').appendChild(soundControl);
}

function toggleSound() {
    if (!playing) {
        for (const audio in audioFiles) {
            audioFiles[audio].play();
            playing = true;
        }
    }
    else {
        for (const audio in audioFiles) {
            audioFiles[audio].pause();
            playing = false;
        }
    }
}

document.getElementById('toggle').addEventListener('click', toggleSound);

const sliders = document.getElementsByClassName('sound-slider');

Array.from(sliders).forEach(slider => {
    slider.addEventListener('input', function (e) {
        for (const audio in audioFiles) {
            const slider = document.getElementById(audio + '-slider');
            audioFiles[audio].volume = slider.value / 100;
        }
    })
});

document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('attribution-modal');
    const openButton = document.getElementById('attributions-button');
    const closeButton = modal.querySelector('.close-button');

    openButton.addEventListener('click', () => {
        modal.style.display = 'block';
    });

    closeButton.addEventListener('click', () => {
        modal.style.display = 'none';
    });

    window.addEventListener('click', (event) => {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
});

var playing = false;