gradshow24/backplaces/sunrise/sunrise.js

async function getdata(){
    let response = await fetch('data.json');
    console.log(response);
    let data = await response.json();
     console.log("data:", data);


   var post1 = document.getElementById("post1");
    post1.querySelector(".like-count").innerHTML = data["post1"];


   var post2 = document.getElementById("post2");
    post2.querySelector(".like-count").innerHTML = data["post2"];


   var post3 = document.getElementById("post3");
    post3.querySelector(".like-count").innerHTML = data["post3"];


   var post4 = document.getElementById("post4");
    post4.querySelector(".like-count").innerHTML = data["post4"];


   var post5 = document.getElementById("post5");
    post5.querySelector(".like-count").innerHTML = data["post5"];


   var post6 = document.getElementById("post6");
    post6.querySelector(".like-count").innerHTML = data["post6"];
}

getdata();

//write

async function writeData(post_number){
    var url = './write.php?post='+ post_number;
    let response = await fetch(url);
    console.log(response);
    console.log(response.text());
    getdata();
}

document.addEventListener("DOMContentLoaded", function() {
    var form = document.getElementById("user-form");
    var orb = document.getElementById("orb");
    var submitButton = document.getElementById("submitButton"); 
    var messageDiv = document.getElementById("message-div");

    submitButton.addEventListener("click", function(event) { 
        event.preventDefault(); 
        orb.style.transform = "scale(6,6)";
        orb.style.backgroundColor = "#e26d3f";
    });

    orb.addEventListener("transitionend", function() {
        messageDiv.style.display = "block";
    });
});

async function writePost(){
    var post = document.getElementById('username2').value;
    var name = document.getElementById('user-message2').value;
    console.log(post,name);
    var url = './writepost.php?post='+ post + '&name=' + name;
    let response = await fetch(url);
    console.log(response);
    console.log(response.text());
}

function openLetter() {
    $('#letterContents').html(` <p id = "letterContents">
    Hi. I made you this website. 
    <br><br>
    It’s called Solar Sibiling and it's a project that reimagines the Tumblr practice of web weaving pieces of media into collages. I did this by transforming user comments from TikTok videos about sibling relationships into poems. To do this I have taken the feeling behing the comment, found where it met my own and used our shared words. These poems capture a collective sense of despair and comfort in shared experiences. Solar Sibling is both a celebration of the vulnerabilities nurtured in online communities and an invitation to share anonymous contributions on the complexities of sibling relationships via comment form. Once you have whispered your sibiling feelings to me, they will stay with me and will never be used nor shared. It is just to make us both feel less singular.  
    <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`)
    $('.letterBox').toggle()
  }

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

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');
    
    // 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();
        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";
    });
});