Tic Tac Toe

TicTacToe.jsx

/*
Problem Statement:
- The goal is to create a functioning Tic Tac Toe game. 
- It should work the following way: the first player to go places an X anywhere on the board by clicking a square, and then the next player will be able to place an O, and it continues alternating like this every turn.
- You should also implement a function to determine if any player won by getting 3 X's or O's in a row. 
- If there is a winner, display a message at the top. 
- If nobody wins, then do not display any message. 
- Finally, you should also implement the reset function that resets the entire board. 
- You should also not be able to override the other players move during the game.
*/

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const rowStyle = {
  display: 'flex'
}

const squareStyle = {
  'width':'60px',
  'height':'60px',
  'backgroundColor': '#ddd',
  'margin': '4px',
  'display': 'flex',
  'justifyContent': 'center',
  'alignItems': 'center',
  'fontSize': '20px',
  'color': 'white'
}

const boardStyle = {
  'backgroundColor': '#eee',
  'width': '208px',
  'alignItems': 'center',
  'justifyContent': 'center',
  'display': 'flex',
  'flexDirection': 'column',
  'border': '3px #eee solid'
}

const containerStyle = {
  'display': 'flex',
  'alignItems': 'center',
  'flexDirection': 'column'
}

const instructionsStyle = {
  'marginTop': '5px',
  'marginBottom': '5px',
  'fontWeight': 'bold',
  'fontSize': '16px',
}

const buttonStyle = {
  'marginTop': '15px',
  'marginBottom': '16px',
  'width': '80px',
  'height': '40px',
  'backgroundColor': '#8acaca',
  'color': 'white',
  'fontSize': '16px',
}

class Square extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div
        className="square"
        style={squareStyle}
        onClick = {this.props.onClick}>
        {this.props.value}
      </div>
    );
  }
}

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: ['','','','','','','','',''],turn:'X',winner:"None"};
    this.reset = this.reset.bind(this);
    this.clicked = this.clicked.bind(this);
  }
  reset() {
     this.setState({data: ['','','','','','','','',''],turn:'X',winner:"None"});
  }

  clicked(i) {    
    var cD = this.state.data;
    var cTurn = cD[i] == '' ? (this.state.turn == 'X' ? 'O' : 'X') : this.state.turn;

    cD[i] = cD[i] == '' ? this.state.turn : cD[i];

    this.setState({
      data: cD,
      turn: cTurn
    });

	//Check the winner
    if(
      (cD[4] !== '' && 
        ((cD[4] === cD[1] && cD[1] === cD[7]) ||
        (cD[4] === cD[3] && cD[3] === cD[5]) ||
        (cD[4] === cD[0] && cD[0] === cD[8]) ||
        (cD[4] === cD[2] && cD[2] === cD[6]))
      ) ||
      (cD[0] !== '' && 
        ((cD[0] === cD[1] && cD[1] === cD[2]) ||
        (cD[0] === cD[3] && cD[3] === cD[6]))
      ) ||
      (cD[8] !== '' && 
        ((cD[8] === cD[6] && cD[6] === cD[7]) ||
        (cD[8] === cD[5] && cD[5] === cD[2]))
      )
    ){
      this.setState({winner:cD[i]})
    }
  }
  render() {
    return (
      <div style={containerStyle} className="gameBoard">
        <div className="status" style={instructionsStyle}>Next player: {this.state.turn}</div>
        <div className="winner" style={instructionsStyle}>Winner: {this.state.winner}</div>
        <button onClick = {this.reset} style={buttonStyle}>Reset</button>
        <div style={boardStyle}>
          <div className="board-row" style={rowStyle}>
            <Square value={this.state.data[0]} onClick = {()=> this.clicked(0)}/>
            <Square value={this.state.data[1]} onClick = {()=> this.clicked(1)}/>
            <Square value={this.state.data[2]} onClick = {()=> this.clicked(2)}/>
          </div>
          <div className="board-row" style={rowStyle}>
            <Square value={this.state.data[3]} onClick = {()=> this.clicked(3)}/>
            <Square value={this.state.data[4]} onClick = {()=> this.clicked(4)}/>
            <Square value={this.state.data[5]} onClick = {()=> this.clicked(5)}/>
          </div>
          <div className="board-row" style={rowStyle}>
            <Square value={this.state.data[6]} onClick = {()=> this.clicked(6)}/>
            <Square value={this.state.data[7]} onClick = {()=> this.clicked(7)}/>
            <Square value={this.state.data[8]} onClick = {()=> this.clicked(8)}/>
          </div>
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);