U4Ch1L7: 2023.2024_Tic Tac Toe App,

//Setting up variables
var player = 1;
var spaceText = "";
var gameOver = false;

//Event handlers for each space on the board
onEvent("aSpace", "click", function( ) {
spaceText = getText("aSpace");
updateBoard();
setText("aSpace",spaceText);
checkWin();
});
onEvent("bSpace", "click", function( ) {
spaceText = getText("bSpace");
updateBoard();
setText("bSpace",spaceText);
checkWin();
});
onEvent("cSpace", "click", function( ) {
spaceText = getText("cSpace");
updateBoard();
setText("cSpace",spaceText);
checkWin();
});
onEvent("dSpace", "click", function( ) {
spaceText = getText("dSpace");
updateBoard();
setText("dSpace",spaceText);
checkWin();
});
onEvent("eSpace", "click", function( ) {
spaceText = getText("eSpace");
updateBoard();
setText("eSpace",spaceText);
checkWin();
});
onEvent("fSpace", "click", function( ) {
spaceText = getText("fSpace");
updateBoard();
setText("fSpace",spaceText);
checkWin();
});
onEvent("gSpace", "click", function( ) {
spaceText = getText("gSpace");
updateBoard();
setText("gSpace",spaceText);
checkWin();
});
onEvent("hSpace", "click", function( ) {
spaceText = getText("hSpace");
updateBoard();
setText("hSpace",spaceText);
checkWin();
});
onEvent("iSpace", "click", function( ) {
spaceText = getText("iSpace");
updateBoard();
setText("iSpace",spaceText);
checkWin();
});

//update board function that allows for the game play to proceeed
//First it checks if the player tried clicking on a space that is already used
//Next it looks at which player's turn it is and assigns the correct letter to the space before
//switching the turn
function updateBoard() {
// 1️⃣
if (!gameOver){
hideElement("tryAgainLabel");
if (spaceText != "") {
showElement("tryAgainLabel");
} else if (player == 1) {
spaceText = "X";
player = 2;
hideElement("player1TurnLabel");
showElement("player2TurnLabel");
} else {
spaceText = "O";
player = 1;
hideElement("player2TurnLabel");
showElement("player1TurnLabel");
}
}
}

//check win function that looks through the board to see if the game is over
//first the function gets the value that is in each spot on the board
//Next it uses those to check if there is a win via a row, a column, or a diagonal
//If one of these conditions is true, this function calls the appropriate win function to update the screen
//Last, if no one has won it checks to see if all the spaces are filled and therefore the game is a draw
function checkWin() {
if (!gameOver){
var a = getText("aSpace");
var b = getText("bSpace");
var c = getText("cSpace");
var d = getText("dSpace");
var e = getText("eSpace");
var f = getText("fSpace");
var g = getText("gSpace");
var h = getText("hSpace");
var i = getText("iSpace");

//2️⃣
//The if and first else-if check the horizontal rows for a win
if((a=="X"&& b=="X" && c=="X")||(d=="X"&& e=="X" && f=="X")||(g=="X"&& h=="X" && i=="X")) {
xWins();
} else if ((a=="O"&& b=="O" && c=="O")||(d=="O"&& e=="O" && f=="O")||(g=="O"&& h=="O" && i=="O")){
oWins();
// 3️⃣
//The next two else-ifs check the vertical columns for a win
} else if ((a=="X"&& d=="X" && g=="X")||(b=="X"&& e=="X" && h=="X")||(c=="X"&& f=="X" && i=="X")) {
xWins();
} else if((a=="O"&& d=="O" && g=="O")||(b=="O"&& e=="O" && h=="O")||(c=="O"&& f=="O" && i=="O")) {
oWins();
//4️⃣
//The next two else-ifs check the diagonals for a win
} else if ((a=="X"&& e=="X" && i=="X")||(g=="X"&& e=="X" && c=="X")) {
xWins();
} else if ((a=="O"&& e=="O" && i=="O")||(g=="O"&& e=="O" && c=="O")) {
oWins();
// 5️⃣
//This last else-if checks to see if the board is full and the game is a draw
} else if (a!="" && b!="" && c!="" && d!="" && e!="" && f!="" && g!="" && h!="" && i!="" ){
setProperty("winLabel", "background-color", rgb(255,255,255,1));
setText("winLabel", "⚖️ Draw ⚖️");
hideElement("player1TurnLabel");
hideElement("player2TurnLabel");
showElement("resetBtn");
gameOver = true;
}
}
}

function xWins(){
setProperty("winLabel", "background-color", rgb(255,255,255,1));
setText("winLabel", "🙅 X's Win! 🙅 ");
hideElement("player1TurnLabel");
hideElement("player2TurnLabel");
showElement("resetBtn");
gameOver = true;
}

function oWins(){
setProperty("winLabel", "background-color", rgb(255,255,255,1));
setText("winLabel", "👌 O's Win! 👌 ");
hideElement("player1TurnLabel");
hideElement("player2TurnLabel");
showElement("resetBtn");
gameOver = true;
}

onEvent("resetBtn", "click", function( ) {
resetGame();
});

function resetGame() {
setText("aSpace", "");
setText("bSpace", "");
setText("cSpace", "");
setText("dSpace", "");
setText("eSpace", "");
setText("fSpace", "");
setText("gSpace", "");
setText("hSpace", "");
setText("iSpace", "");
player = 1;
hideElement("player2TurnLabel");
showElement("player1TurnLabel");
hideElement("resetBtn");
setText("winLabel", "");
setProperty("winLabel", "background-color", rgb(255,255,255,0));
gameOver = false;
}