Tic-tac-toe React

What is a tic-tac-toe react How do you make a tic-tac-toe react? This script and codes were developed by Yas on 11 March 2022, Friday.

How do I make an tic-tac-toe react?
  1. Tic-tac-toe React Previews
  2. Tic-tac-toe React HTML Codes
  3. Tic-tac-toe React CSS Codes
  4. Tic-tac-toe React JS Codes
Tic-tac-toe React Previews

Tic-tac-toe React HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>tic-tac-toe React</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="board"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

Tic-tac-toe React CSS Codes

#board {
   display: flex;
   flex-basis: 406px;
   height: 390px;
   flex-direction: row;
   flex-wrap: wrap; 
   justify-content: flex-start;
   margin: 60px auto;
 
}
.square {
    display: flex;
    flex-basis: 130px;
    font-size: 100px;
    font-family: arial;
    justify-content: center;
    align-items: center;
}

.square:hover {
    background-color: #c4f8fa;
    cursor: pointer;
}

#s1 {
  border-right: 4px solid;
  border-bottom: 4px solid;
  border-color: #477076;
}
#s2 {
  border-left: 4px solid;
  border-right: 4px solid;
  border-bottom: 4px solid;
  border-color: #477076;
}
#s3 {
  border-left: 4px solid;
  border-bottom: 4px solid;
  border-color: #477076;
}
#s4 {
  border-right: 4px solid;
  border-top: 4px solid;
  border-bottom: 4px solid;
  border-color: #477076;
}
#s5 {
  border: 4px solid;
  border-color: #477076;
}
#s6 {
  border-left: 4px solid;
  border-top: 4px solid;
  border-bottom: 4px solid;
  border-color: #477076;
}
#s7 {
  border-right: 4px solid;
  border-top: 4px solid;
  border-color: #477076;
}
#s8 {
  border-left: 4px solid;
  border-right: 4px solid;
  border-top: 4px solid;
  border-color: #477076;
}
#s9 {
  border-left: 4px solid;
  border-top: 4px solid;
  border-color: #477076;
}

.blue {
  color: #08507d;
}

.red {
  color: #ec574e;
}

Tic-tac-toe React JS Codes

"use strict";

var TicTacToe = React.createClass({
  displayName: "TicTacToe",

  getInitialState: function getInitialState() {
    return {
      PLAYER_ONE_SYMBOL: "X",
      PLAYER_TWO_SYMBOL: "O",
      currentTurn: "X",
      writeMark: "X",
      X_CLASS: "square blue",
      O_CLASS: "square red",
      boardArr: ["", "", "", "", "", "", "", "", "", ""],
      colorArr: ["square", "square", "square", "square", "square", "square", "square", "square", "square"]
    };
  },

  switchTurn: function switchTurn() {
    var currentTurn = this.state.currentTurn == this.state.PLAYER_ONE_SYMBOL ? this.state.PLAYER_TWO_SYMBOL : this.state.PLAYER_ONE_SYMBOL;
    this.setState({
      currentTurn: currentTurn
    });
  },

  clearBoard: function clearBoard() {
    console.log("reset");
    this.state.boardArr = this.state.boardArr.map(function () {
      return " ";
    });
    this.state.colorArr = this.state.colorArr.map(function () {
      return "square";
    });
    this.setState({
      boardArr: this.state.boardArr,
      colorArr: this.state.colorArr
    });
  },

  resetGame: function resetGame() {
    console.log("reset");
    this.state.boardArr = this.state.boardArr.map(function () {
      return " ";
    });
    this.state.colorArr = this.state.colorArr.map(function () {
      return "square";
    });
    this.setState({
      boardArr: this.state.boardArr
    });
  },

  checkWinner: function checkWinner() {
    var mark = this.state.boardArr;
    if (mark[0] != "" && mark[0] == mark[1] && mark[0] == mark[2]) {
      this.resetGame();
      return mark[0];
    } else if (mark[3] != "" && mark[3] == mark[4] && mark[3] == mark[5]) {
      this.resetGame();
      return mark[4];
    } else if (mark[6] != "" && mark[6] == mark[7] && mark[6] == mark[8]) {
      this.resetGame();
      return mark[4];
    } else if (mark[0] != "" && mark[0] == mark[3] && mark[0] == mark[6]) {
      this.resetGame();
      return mark[4];
    } else if (mark[1] != "" && mark[1] == mark[4] && mark[1] == mark[7]) {
      this.resetGame();
      return mark[4];
    } else if (mark[2] != "" && mark[2] == mark[5] && mark[2] == mark[8]) {
      this.resetGame();
      return mark[4];
    } else if (mark[0] != "" && mark[0] == mark[4] && mark[0] == mark[8]) {
      this.resetGame();
      return mark[4];
    } else if (mark[2] != "" && mark[2] == mark[4] && mark[2] == mark[6]) {
      this.resetGame();
      return mark[4];
    }
  },

  clickHandler: function clickHandler(i) {
    if (this.state.boardArr[i] == "") {
      this.state.boardArr[i] = this.state.currentTurn;
      this.setState({
        boardArr: this.state.boardArr
      });
      this.state.colorArr[i] = this.state.boardArr[i] == this.state.PLAYER_ONE_SYMBOL ? this.state.X_CLASS : this.state.O_CLASS;
      this.setState({
        colorArr: this.state.colorArr
      });
      this.switchTurn();
      this.checkWinner();
      this.render();
    }
  },

  render: function render() {
    var _this = this;

    return React.createElement(
      "div",
      { id: "board" },
      this.state.boardArr.map(function (square, index) {
        var i = index + 1;
        return React.createElement(
          "div",
          { onClick: _this.clickHandler.bind(_this, index), className: _this.state.colorArr[index], id: "s" + i },
          square
        );
      })
    );
  }

});

ReactDOM.render(React.createElement(TicTacToe, null), document.getElementById('board'));
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.