OX – CODEBOX

OX

✨ Pnd

<!DOCTYPE html>
<html>
<style>
  body{
    
  padding-top: 50px;
    background: linear-gradient(135deg, rgba(85,239,203,1) 0%,rgba(30,87,153,1) 0%,rgba(85,239,203,1) 0%,rgba(91,202,255,1) 100%);
  color: #f7f7f7;
  font-family: 'Lato', sans-serif;
}

#heading{
  margin-left: 470px;
    margin-bottom: 50px;
    font-size: 40px;
}

#mainBoard{
  
   background: linear-gradient(135deg, rgba(85,239,203,1) 0%,rgba(30,87,153,1) 0%,rgba(85,239,203,1) 0%,rgba(91,202,255,1) 100%);
  width: 321px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 7px;
  margin: 0 auto;
  
}

.smallBox{
  background-color: #f1f2f6;
  border: none;
  border-radius: 5px;
  color: #ffffff;
  height: 100px;
  width: 100px;
  float: top-left;
  text-align: centre;
  font-size: 100px;
  outline: none;
  padding: 5px;
  
  
}

/*Css class for Highlighting the winner*/
.blink{
animation: blinkingBackground 2s infinite;
	}
	@keyframes blinkingBackground{
		0%		{ background-color: #ffa502;}
		25%		{ background-color: #ff7f50;}
		50%		{ background-color: #ffa502;}
		75%		{ background-color: #ff7f50;}
		100%	        { background-color: #ffa502;}
	}
button{
      display: block;
    margin: 20px auto;
  outline:none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius:40px;
  background: #dfe4ea;
  border: 2px solid $green;
  color:$green;
  letter-spacing:1px;
  text-shadow:0;
  font-size: medium;
  
  
}

.redText{
 color: red;
  
}
.blackText{
  color: black
}
  </style>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id = "heading"> Tic Tac Toe Game</div>
  <div id = "mainBoard">
    <div id= "box00" class="smallBox"></div>
    <div id= "box01" class="smallBox"></div>
    <div id= "box02" class="smallBox"></div>
    <div id= "box10" class="smallBox"></div>
    <div id= "box11" class="smallBox"></div>
    <div id= "box12" class="smallBox"></div>
    <div id= "box20" class="smallBox"></div>
    <div id= "box21" class="smallBox"></div>
    <div id= "box22" class="smallBox"></div>
  </div>
  <button class = "buttonClass" id= "resetButton"> Reset </button>

</body>
  <script>
    /* Javascript Homework #8 */

//Global Variable to get the right text in box
var toggle = "X";

// Global variable that determines when to check for winner
var checkWinner = '0';

//Variable to check if the winner is decided
var isWinner = false;

//Calling Initialize function 
initializeGame();

// Getting the button object
const btn = document.getElementById("resetButton");
btn.addEventListener("click",initializeGame);

// Checking for Click in the play area
const mainBoard = document.getElementById("mainBoard");
console.log(mainBoard);
mainBoard.addEventListener("click", play);

// Function that adds Either 'X' or '0' to the clicked Box
function play(e){
  console.log("Inside PLay Function");
 const targetBox = e.target;
  
  console.log(targetBox);
  if(!isWinner){
    // this means that the winner is not decided so the game will continue
    const targetBox = e.target;
  
  console.log(targetBox + "Winner is not decided yet");
  if(!targetBox.textContent){
    //const newPara = document.createElement('p');
    if (toggle == "X"){
      targetBox.className+= " redText";
    }else{
      targetBox.className += " blackText";
    }
    targetBox.innerText = toggle;
    toggleValue();
    checkWinner+=1;
    if (checkWinner>3 && checkWinner<9){
      checkForWinner();
    }else if(checkWinner === 9 ){
      alert("It is a cat Game");
      initializeGame();
    }
  }
  }else{
    // This means the winner is decidede
    
    
  }
}
// Function to check for a winner
function checkForWinner(){
  const box00 = document.getElementById("box00");
  const box01 = document.getElementById("box01");
  const box02 = document.getElementById("box02");  
  const box10 = document.getElementById("box10");
  const box11 = document.getElementById("box11");
  const box12 = document.getElementById("box12");
  const box20 = document.getElementById("box20");
  const box21 = document.getElementById("box21");
  const box22 = document.getElementById("box22");
  // console.log("Box02: " + box02.innerText);
  // console.log("Box11: " + box11.innerText);
  // console.log("Box20: " + box20.innerText);
  
  if( box00.innerText == '0'  && box01.innerText == '0' && box02.innerText== '0'){
    zeroHasWon(box00, box01, box02);
   
  }else if(box10.innerText == '0' && box11.innerText == '0' && box12.innerText== '0'){
     zeroHasWon(box10, box11, box12);
  }else if(box20.innerText == '0' && box21.innerText == '0' && box22.innerText== '0'){
     zeroHasWon(box20, box21, box22);
  }else if(box00.innerText == '0' && box11.innerText == '0' && box22.innerText== '0'){
   zeroHasWon(box00, box11, box22);
  }else if(box00.innerText == '0' && box10.innerText == '0' && box20.innerText== '0'){
    zeroHasWon(box00, box10, box20);
  }else if(box01.innerText == '0' && box11.innerText == '0' && box21.innerText== '0'){
     zeroHasWon(box01, box11, box21);
  }else if(box02.innerText == '0' && box12.innerText == '0' && box22.innerText== '0'){
     zeroHasWon(box02, box12, box22);
  }else if(box02.innerText == '0' && box11.innerText == '0' && box20.innerText== '0'){
     zeroHasWon(box02, box11, box20);
  }
  
  // When the winner is 'x'
  if(box00.innerText == 'X' && box01.innerText == 'X' && box02.innerText=='X'){
    xHasWon(box00, box01, box02);
   
  }else if(box10.innerText == 'X' && box11.innerText == 'X' && box12.innerText=='X'){
   xHasWon(box10, box11, box12);
  }else if(box20.innerText == 'X' && box21.innerText == 'X' && box22.innerText=='X'){
   xHasWon(box20, box21, box22);
  }else if(box00.innerText == 'X' && box11.innerText == 'X' && box22.innerText=='X'){
    xHasWon(box00, box11, box22);
  }else if(box00.innerText == 'X' && box10.innerText == 'X' && box20.innerText=='X'){
   xHasWon(box00, box10, box20);
  }else if(box01.innerText == 'X' && box11.innerText == 'X' && box21.innerText=='X'){
    xHasWon(box01, box11, box21);
  }else if(box02.innerText == 'X' && box12.innerText == 'X' && box22.innerText=='X'){
    xHasWon(box02, box12, box22);
  }else
  if((box02.innerText == 'X') && (box11.innerText == 'X') && box20.innerText=='X'){
     xHasWon(box02, box11, box20);
  }
}

function xHasWon(box1, box2, box3){
  console.log("'X' is the winner");
    // Add victory text
    // blink the box 
        console.log("Condition: 02-11-20");
    isWinner = true;
    highlightWinnerBox(box1, box2, box3);
    setTimeout(function(){
      alert("Congrats X, You Won!");
      initializeGame();
      
    }, 200);
}

function zeroHasWon(box1, box2, box3){
  console.log("0 is the winner");
    // Add victory text
    // blink the box
    isWinner = true;
    highlightWinnerBox(box1, box2, box3);
    setTimeout(function(){
      alert("Congrats 0, You Won!");
      initializeGame();
      
    }, 200);
}

// Function that determines which of 'X' or '0' to be added
function toggleValue(){
  if(toggle == 'X'){
    toggle = 0;
  }else{
    toggle = 'X';
  }
}

// Intialize function 
function initializeGame(){
  
  isWinner= false;
  checkWinner = 0;
  toggle= "X";
  
  const box00 = document.getElementById("box00");
  const box01 = document.getElementById("box01");
  const box02 = document.getElementById("box02");  
  const box10 = document.getElementById("box10");
  const box11 = document.getElementById("box11");
  const box12 = document.getElementById("box12");
  const box20 = document.getElementById("box20");
  const box21 = document.getElementById("box21");
  const box22 = document.getElementById("box22");
  
  box00.innerText = "";
  box01.innerText = "";
  box02.innerText = "";
  box10.innerText = "";
  box10.innerText = "";
  box11.innerText = "";
  box12.innerText = "";
  box20.innerText = "";
  box21.innerText = "";
  box22.innerText = "";
  
  box00.className = "smallBox";
  box01.className = "smallBox";
  box02.className = "smallBox";
  box10.className = "smallBox";
  box10.className = "smallBox";
  box11.className = "smallBox";
  box12.className = "smallBox";
  box20.className = "smallBox";
  box21.className = "smallBox";
  box22.className = "smallBox";
  
}

function highlightWinnerBox(box1, box2, box3){
  box1.className += " blink";
  box2.className += " blink";
  box3.className += " blink";
}
  </script>
</html>