Cfxtrjtrk

// tic tac toe v0.2, revised on 20th October, 2018;



var turn = 0; //is used for checking players turns...

var box = document.getElementsByClassName("box"); // one variable for all nine boxes...

var board = document.getElementById("board");



var modalParent = document.getElementById('modal-container');

var modal = modalParent.getElementsByClassName('custom-modal')[0];



//this function rotates the board randomly ...

function rotateBoard() {

  var rotator = ["transform:rotate(0deg)", "transform:rotate(90deg)", "transform:rotate(180deg)", "transform:rotate(270deg)"];

  board.setAttribute("style", rotator[Math.floor(Math.random() * 4)]);

}



//  this function will check which palyer wins....

//	when we set the value of each X to 2, all winning chances are here like this.

//  result of each row/column/slash is 6 when X wins.

//	

//      6    6    6    6

//      "    "    "  //        

//	    2 |  2  | 2   =  6

//	 -----+-----+----

//	    2 |  2  | 2   =  6

//	 -----+-----+----

//      2 |  2  | 2   =  6

//      

// setting all O to value 5 will make a winning number to 15 from all sides, unless these seven results 

// is equal to 6 or 15 , its a tie match. lets see if the function works or not ....

//

//	   15    15   15   15 

//	    "    "    "  //

//	    5 |  5  | 5    = 15

//	 -----+-----+----

//	    5 |  5  | 5    = 15

//	 -----+-----+----

//      5 |  5  | 5    = 15





// this function handles the win results inside a popup;

var popUpWindow = function(playerImagePosition) {

  modalParent.style.opacity = '1';

  modalParent.style.zIndex = '100';

  modal.style.zIndex = '200';

  if (playerImagePosition === 'tie') {

    modal.getElementsByTagName('h2')[0].innerHTML = "It's a Tie";

  } else {

    modal.getElementsByClassName('player-won')[0].style.backgroundPositionX = playerImagePosition;

  }

  modal.getElementsByTagName('button')[0].addEventListener('click', function() {

    window.location.reload(true);

  });

};



function winCheck() {

  var rowOne = parseInt(box[0].dataset.playerType) +

    parseInt(box[1].dataset.playerType) +

    parseInt(box[2].dataset.playerType);

  var rowTwo = parseInt(box[3].dataset.playerType) +

    parseInt(box[4].dataset.playerType) +

    parseInt(box[5].dataset.playerType);

  var rowThree = parseInt(box[6].dataset.playerType) +

    parseInt(box[7].dataset.playerType) +

    parseInt(box[8].dataset.playerType);

  var colOne = parseInt(box[0].dataset.playerType) +

    parseInt(box[3].dataset.playerType) +

    parseInt(box[6].dataset.playerType);

  var colTwo = parseInt(box[1].dataset.playerType) +

    parseInt(box[4].dataset.playerType) +

    parseInt(box[7].dataset.playerType);

  var colThree = parseInt(box[2].dataset.playerType) +

    parseInt(box[5].dataset.playerType) +

    parseInt(box[8].dataset.playerType);

  var backSlash = parseInt(box[0].dataset.playerType) +

    parseInt(box[4].dataset.playerType) +

    parseInt(box[8].dataset.playerType);

  var forwardSlash = parseInt(box[2].dataset.playerType) +

    parseInt(box[4].dataset.playerType) +

    parseInt(box[6].dataset.playerType);



  var possibilities = [rowOne, rowTwo, rowThree, colOne, colTwo, colThree, backSlash, forwardSlash];



  // like explained above comments with diagram, any item from the above array should return 1 or 2 if a player

  // wins, it can return 2 because a player can sometimes win from 2 possible lines maximum;

  var xWin = possibilities.filter(scope => scope === 6);

  var oWin = possibilities.filter(scope => scope === 15);

  var tie = possibilities.filter(scope => isNaN(scope));



  // now take care of who won the game

  if (xWin.length === 1 || xWin.length === 2) {

    popUpWindow('200%');

  } else if (oWin.length === 1 || oWin.length === 2) {

    popUpWindow('100%');

  } else if (tie.length === 0 && xWin.length === 0 && oWin.length === 0) {

    popUpWindow('tie');

  }



}



var turnCheck = function(event) {

  if (event.target.classList.contains('box')) {

    if (event.target.getAttribute('data-player-type') === null) {

      event.target.setAttribute('data-player-type', (turn % 2 === 0) ? 2 : 5);

      event.target.style.backgroundPosition = (turn % 2 === 0) ? '200% 0' : '100% 0';

      turn++;

      winCheck();

    }

  }

};



board.addEventListener('click', turnCheck);



// only for personal portfolio page;

document.body.addEventListener("dblclick", function reload() {

  location.reload(true);

});



// rotate the board when window loads;

rotateBoard();

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  cursor: default

}



body {

  background-color: transparent;

  font-family: monospace;

  max-width: 1280px;

  margin: 80px auto

}



body h1 {

  margin-bottom: 10px

}



body .boundary {

  width: 500px;

  height: 500px

}



body .boundary .board {

  width: 100vw;

  height: 100vw;

  background-image: url('https://towkir.github.io/tictactoe/dist/images/boardback.svg');

  background-size: 100%;

  max-width: 500px;

  max-height: 500px

}



body .boundary .board .box {

  height: 33.33%;

  width: 33.33%;

  float: left;

  background-image: url('https://towkir.github.io/tictactoe/dist/images/players.png');

  background-size: 300%

}



body #controls,

body #tictactoe {

  display: block;

  width: 100%;

  max-width: 600px;

  height: 220px;

  margin: 30px 0

}



body #controls {

  height: 120px

}



body #tictactoe table td a {

  padding: 1px 5px;

  background: rgba(128, 128, 128, .3);

  border-radius: 2px;

  text-decoration: none;

  color: inherit;

  cursor: pointer

}



body #tictactoe table td a:active,

body #tictactoe table td a:focus,

body #tictactoe table td a:hover {

  background: rgba(128, 128, 128, .5);

  outline: 0;

  color: inherit

}



body #modal-container {

  background-color: rgba(0, 0, 0, .8);

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  display: block;

  z-index: -100;

  opacity: 0;

  transition: opacity .3s ease-in-out

}



body #modal-container .custom-modal {

  background-color: #fff;

  position: fixed;

  min-width: 300px;

  left: 50%;

  top: 40%;

  border-radius: 4px;

  z-index: -200;

  padding: 20px;

  transform: translate(-50%, -50%)

}



body #modal-container .custom-modal h2 {

  font-size: 60px

}



body #modal-container .custom-modal h2 .player-won {

  width: 80px;

  height: 80px;

  display: inline-block;

  vertical-align: middle;

  background-image: url('https://towkir.github.io/tictactoe/dist/images/players.png');

  background-size: 240px;

  background-position-x: 0

}



body #modal-container .custom-modal button {

  display: block;

  border: 0;

  background-color: #90ee90;

  width: 100%;

  padding: 10px;

  font-family: monospace;

  font-size: 20px;

  margin-top: 20px;

  cursor: pointer

}

<div class="boundary" id="boundary">

  <div class="board" id="board" style="transform:rotate(180deg)">

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

  </div>

</div>

<div id="tictactoe">

  <h1>Tic Tac Toe</h1>

  <p>Among all the games, Tic Tac Toe seems to be the simplest, and this one is the simplest of all Tic Tac Toes out there. This is in two player mode, so the computer won't bother you at all. <br> Have fun with Noughts and Crosses. </p>

  <br>

  <table>

    <tbody>

      <tr>

        <td>Technology Used:</td>

        <td>HTML, CSS, JavaScript.</td>

      </tr>

      <tr>

        <td>Difficulty:</td>

        <td>What ? why would it be difficult ??</td>

      </tr>

      <tr>

        <td>Source Code:</td>

        <td>See the source code on <a href="https://github.com/towkir/tictactoe" target="_blank">This GitHub

                Repo</a></td>

      </tr>

    </tbody>

  </table>

</div>

<div id="controls">

  <h1>Game Controls</h1>

  <p><b>Reset:</b> Double click on the gamefield to reset to new game.</p>

</div>



<div id="modal-container">

  <div class="custom-modal">

    <h2><span class="player-won"></span> wins</h2>

    <button type="button" id="reload">Play Again</button>

  </div>

</div>