// PLAYER VARIABLES
// Assigning variables to each player button
var p1Button = document.querySelector("#player1button");
var p2Button = document.querySelector("#player2button");

// Assigning variables to Score display <span>s
var p1Display = document.querySelector("#score1");
var p2Display = document.querySelector("#score2");

// Creating variables to track current score
var p1Score = Number(document.querySelector("#score1").textContent);
var p2Score = Number(document.querySelector("#score2").textContent);

// MAX SCORE VARIABLES
var maxScoreInput = document.querySelector("#maxScoreInput");
var maxScoreDisplay = document.querySelector("#maxScoreDisplay");
var maxScore = Number(maxScoreInput.value);

// RESET VARIABLES
var resetButton = document.querySelector("#reset");

// EVENT LISTENERS
// Simply for debugging in the console
p1Button.addEventListener("click", logClick);
p2Button.addEventListener("click", logClick);

// clicking player buttons adds 1 to their score
p1Button.addEventListener("click", p1PlusOne);
p2Button.addEventListener("click", p2PlusOne);

// set max score display = to max score input
maxScoreInput.addEventListener("change", changeMaxScore);

// reset button sets scores back to zero and removes green class
resetButton.addEventListener("click", resetScore);


// FUNCTIONS
// console.log function for click event listeners
function logClick() {
  console.log("Button has been clicked");
}

// **The following two functions could be refactored together** 
// if neither player is at max score, gives 1 point to player 1, if max score is reached, turns score display green
function p1PlusOne() {
  if (p1Score < maxScore && p2Score < maxScore) {
    p1Score++;
    console.log("player 1 score is " + p1Score);
    p1Display.textContent = p1Score;
  }
  if (p1Score === maxScore) {
    p1Display.classList.add("turnGreen");
  }
}

// if neither player is at max score, gives 1 point to player 2, if max score is reached, turns score display green
function p2PlusOne() {
  if (p1Score < maxScore && p2Score < maxScore) {
    p2Score++;
    console.log("player 2 score is " + p2Score);
    p2Display.textContent = p2Score;
  }
  if (p2Score === maxScore) {
    p2Display.classList.add("turnGreen");
  }
}

// updates the max score display with the current max score value
function changeMaxScore() {
  maxScore = Number(maxScoreInput.value);
  maxScoreDisplay.textContent = maxScore;
}

// resets the player scores to zero, sets player score displays to new score which is zero, removes .turnGreen CSS class
function resetScore() {
  p1Score = 0;
  p2Score = 0;
  p1Display.textContent = p1Score;
  p2Display.textContent = p2Score;
  p1Display.classList.remove("turnGreen");
  p2Display.classList.remove("turnGreen");
}