Added components for tic tac toe game

masudcsesust04 · masudcsesust04 · commit 71800e85bc9d · 2018-01-10T14:11:28.000+06:00
diff --git a/app/javascript/packs/components/App.jsx b/app/javascript/packs/components/App.jsx
@@ -19,6 +19,7 @@ class App extends React.Component {
             <Route exact path="/" component={Root} />
             <Route exact path="/users" component={User} />
             <Route exact path="/users/:id/:name" component={UserDetails} />
+            <Route exact path="/games" component={Game} />
             <Route component={NotFound} />
           </Switch>
         </div>
diff --git a/app/javascript/packs/components/Board.jsx b/app/javascript/packs/components/Board.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import Square from './Square';
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+
+  for (let i = 0; i < lines.length; i += 1) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}
+
+class Board extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      squares: Array(9).fill(null),
+      xIsNext: true,
+    };
+  }
+
+  handleClick(i) {
+    const squares = this.state.squares.slice();
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    squares[i] = this.state.xIsNext ? 'X' : 'O';
+    this.setState({
+      squares: squares,
+      xIsNext: !this.state.xIsNext,
+    });
+  }
+
+  renderSquare(i) {
+    return (
+      <Square
+        value={this.state.squares[i]}
+        onClick={() => this.handleClick(i)}
+      />
+    );
+  }
+
+  render() {
+    const winner = calculateWinner(this.state.squares);
+    let status;
+    if (winner) {
+      status = `Winner: ${winner}`;
+    } else {
+      status = `Next player: ${(this.state.xIsNext ? 'X' : 'O')}`;
+    }
+
+    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;
diff --git a/app/javascript/packs/components/Game.jsx b/app/javascript/packs/components/Game.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Board from './Board';
+
+class Game extends React.Component {
+  render() {
+    return (
+      <div className="game">
+        <div className="game-board">
+          <h1>Game</h1>
+          <Board />
+        </div>
+        <div className="game-info">
+          <div>{/* status */}</div>
+          <ol>{/* TODO */}</ol>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Game;
diff --git a/app/javascript/packs/components/Square.jsx b/app/javascript/packs/components/Square.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Square(props) {
+  return (
+    <button className="square" onClick={props.onClick}>
+      {props.value}
+    </button>
+  );
+}
+
+export default Square;
diff --git a/app/views/application/index.html.erb b/app/views/application/index.html.erb
@@ -1,2 +1,55 @@
+<style type="text/css">
+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 #999;
+  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;
+}
+</style>
+
 <div id="root"></div>
 <%= javascript_pack_tag 'index' %>
