Initial commit

src/App.js

@@ -0,0 +1,11 @@
+import "./styles.css";
+import Game from "./Game";
+
+export default function App() {
+  return (
+    <div className="App">
+      <h1> Tic Tac Toe game </h1>
+      <Game />
+    </div>
+  );
+}

src/Board.js

@@ -0,0 +1,64 @@
+import React from "react";
+import Square from "./Square";
+
+class Board extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      squares: Array(9).fill(null),
+      slot: true
+    };
+    this.clickHandler = this.clickHandler.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  clickHandler() {
+    console.log("Click");
+    this.setState({ value: "O" });
+  }
+  handleClick(props) {
+    let square = this.state.squares.slice();
+    console.log(square);
+    this.state.slot === true ? (square[props] = "X") : (square[props] = "O");
+    this.setState({
+      squares: square,
+      slot: !this.state.slot
+    });
+  }
+
+  renderSquare(props) {
+    return (
+      <Square
+        value={this.state.squares[props]}
+        onClick={() => this.handleClick(props)}
+      />
+    );
+  }
+
+  render() {
+    const status = "Next player: X";
+
+    return (
+      <div>
+        <div className="status">{status}</div>
+        <div className="board-row">
+          {this.renderSquare(0)}
+          {this.renderSquare(1)}
+          {this.renderSquare(2)}
+        </div>
+        <div className="board-row">
+          {this.renderSquare(3)}
+          {this.renderSquare(4)}
+          {this.renderSquare(5)}
+        </div>
+        <div className="board-row">
+          {this.renderSquare(6)}
+          {this.renderSquare(7)}
+          {this.renderSquare(8)}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Board;

src/Game.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Board from "./Board";
+
+class Game extends React.Component {
+  render() {
+    return (
+      <div className="game">
+        <div className="game-board">
+          <Board />
+        </div>
+        <div className="game-info">
+          <div>{/* status */}</div>
+          <ol>{/* TODO */}</ol>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Game;

src/Square.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+class Square extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: null
+    };
+  }
+
+  render() {
+    return (
+      <button className="square" onClick={() => this.props.onClick()}>
+        {this.props.value}
+      </button>
+    );
+  }
+}
+
+export default Square;

src/index.js

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+  rootElement
+);

src/styles.css

@@ -0,0 +1,55 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}
+body {
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+}
+
+ol,
+ul {
+  padding-left: 30px;
+}
+
+.board-row:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid black;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.square:focus {
+  outline: none;
+}
+
+.kbd-navigation .square:focus {
+  background: #ddd;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}