const homeScoreEl = document.getElementById("home-score");
const guestScoreEl = document.getElementById("guest-score");

const homeScoreBtnOne = document.getElementById("home-btn-one");
const homeScoreBtnTwo = document.getElementById("home-btn-two");
const homeScoreBtnThree = document.getElementById("home-btn-three");

const guestScoreBtnOne = document.getElementById("guest-btn-one");
const guestScoreBtnTwo = document.getElementById("guest-btn-two");
const guestScoreBtnThree = document.getElementById("guest-btn-three");

let homeScore = 0;
let guestScore = 0;


function incrementHomeScore(scoreAmount) {
    homeScore += scoreAmount;
    return homeScore;
}

function incrementGuestScore(scoreAmount) {
    guestScore += scoreAmount;
    return guestScore;
}


function highlightLeadingScore() {
    if(homeScore > guestScore) {
        homeScoreEl.classList.add("highlight");
        guestScoreEl.classList.remove("highlight");
    } else if(homeScore < guestScore) {
        guestScoreEl.classList.add("highlight");
        homeScoreEl.classList.remove("highlight");
    } else {
        homeScoreEl.classList.remove("highlight");  
        guestScoreEl.classList.remove("highlight");
    }
}




document.addEventListener("click", highlightLeadingScore);


// HOME SCORE BUTTONS
homeScoreBtnOne.addEventListener("click", function() {
    homeScoreEl.textContent = incrementHomeScore(1);
})

homeScoreBtnTwo.addEventListener("click", function() {
    homeScoreEl.textContent = incrementHomeScore(2);
})

homeScoreBtnThree.addEventListener("click", function() {
    homeScoreEl.textContent = incrementHomeScore(3);
})


// GUEST SCORE BUTTONS

guestScoreBtnOne.addEventListener("click", function() {
    guestScoreEl.textContent = incrementGuestScore(1);
})
guestScoreBtnTwo.addEventListener("click", function() {
    guestScoreEl.textContent = incrementGuestScore(2);
})
guestScoreBtnThree.addEventListener("click", function() {
    guestScoreEl.textContent = incrementGuestScore(3);
})