// alert("Connected");

// var button1 = getElementsByID("p1");

// var button2 = getElementsByID("p2");

// var button3 = getElementsByID("reset");

// or

var p1button = document.querySelector("#player1");
var p2button = document.querySelector("#player2");
var resetButton = document.querySelector("#reset");
var p1Score = 0;
var p2Score = 0;
// var h1 = document.querySelector("h1");
// var scorep1 = getElementsByID("scoreP1");
// var scorep2 = getElementsByID("scoreP2");
var scorep1 = document.querySelector("#scorePlayer1");
var scorep2 = document.querySelector("#scorePlayer2");
var winScoreInput = document.querySelector("#winningScore");
var gameOver = false;
// var winScoreText =  document.querySelector("#winScoreText");

var winScoreText =  document.querySelector("p span");

var winScore = 5;

function reset(){
	p1Score = 0;
	p2Score = 0;
	scorePlayer1.textContent = p1Score;
	scorePlayer2.textContent = p2Score;
	// winScore = 5;
	// displaywinScore.textContent = 0;
	gameOver = false;
	scorePlayer1.classList.remove("winner");
	scorePlayer2.classList.remove("winner");
	// winScore = 0;
	// winScoreText.textContent = winScore;
}

winScoreInput.addEventListener("change", function(){
	// alert("changed input");
	
	winScore = Number(this.value);
	winScoreText.textContent = winScore;
	reset();
});



p2button.addEventListener("click", function(){
	// alert("Clicked");
	if (!gameOver) {

		p2Score++;
		if(p2Score === winScore){
		scorePlayer2.classList.add("winner");
		gameOver = true;
        	alert("We have a winner" + winningScore);
		firstLI.style.color = "red";	}
	
	console.log(p2Score);
	scorePlayer2.textContent = p2Score;
	// } else {
	// alert("We have a winner" + winningScore);
	}
});



p1button.addEventListener("click", function(){
	// alert("Clicked");
	if (!gameOver) {
		
		p1Score++;
		if(p1Score === winScore){
		scorePlayer1.classList.add("winner");
		gameOver = true;
	alert("We have a winner" + winningScore);
	firstLI.style.color = "red";
        
	}
	
	console.log(p1Score);
	scorePlayer1.textContent = p1Score;
	// } else {
	
	


	}
});



resetButton.addEventListener("click", function(){
	// alert("Clicked");
	reset();
});


var firstLI = document.querySelector("p");

firstLI.addEventListener("mouseover", function() {
	firstLI.style.color = "green";

	console.log("Mouse Over");
	// body...
});

firstLI.addEventListener("mouseout", function() {
	firstLI.style.color = "red";

	console.log("Mouse Over2");
	// body...
});

firstLI.addEventListener("mouseover", function() {
	firstLI.style.color = "orange";

	console.log("Mouse Over2");
	// body...
});


firstLI.addEventListener("mouseout", function() {
	firstLI.style.color = "yellow";

	console.log("Mouse Over2");
	// body...
});