Fin première journée

src/App.js

@@ -1,25 +1,13 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Game from './Game';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <Game/>
       </div>
     );
   }

src/Board.css

@@ -0,0 +1,11 @@
+.status 
+{
+    margin-bottom: 10px;
+}
+
+.board-row:after 
+{
+    clear: both;
+    content: "";
+    display: table;
+}

src/Board.jsx

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import Game from './Game';
+import Cases from './Cases';
+import './Board.css';
+import './App.css';
+
+const PLAYER_1 = 'X';
+const PLAYER_2 = 'O';
+
+export default class Board extends Component {
+    constructor(props) 
+    {
+        super(props);
+        this.state = {
+          grid: Array(9).fill(null),
+          currentPlayer: PLAYER_1
+        };
+    }
+
+    getNextPlayer() {
+        if (this.state.currentPlayer === PLAYER_1) return PLAYER_2;
+        return PLAYER_1;
+    }
+
+    handleClick(index) 
+    {
+        const grid = [...this.state.grid];
+
+        if (grid[index]) return;
+        grid[index] = this.state.currentPlayer;
+        this.setState({
+          grid,
+          currentPlayer: this.getNextPlayer()
+        });
+    }
+
+      renderCases(index) 
+      {
+        return <Cases
+          value={this.state.grid[index]}
+          onClick={() => this.handleClick(index)}
+        />;
+    }
+
+    render() 
+    {
+        const status = `Next player: ${this.state.currentPlayer}`;
+        return (
+        <div>
+            <div className="status">{status}</div>
+            <div className="board-row">
+                {this.renderCases(0)}
+                {this.renderCases(1)}
+                {this.renderCases(2)}
+            </div>
+            <div className="board-row">
+                {this.renderCases(3)}
+                {this.renderCases(4)}
+                {this.renderCases(5)}
+            </div>
+            <div className="board-row">
+                {this.renderCases(6)}
+                {this.renderCases(7)}
+                {this.renderCases(8)}
+            </div>
+        </div>
+        );
+    }
+}

src/Cases.css

@@ -0,0 +1,19 @@
+.cases
+{
+    background: #fff;
+    border: 3px solid #999;
+    float: left;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 60px;
+    height: 60px;
+    margin-right: -1px;
+    margin-top: -1px;
+    padding: 0;
+    text-align: center;
+    width: 60px;
+}
+
+.cases:focus {
+    outline: none;
+  }

src/Cases.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import './Cases.css';
+import './App.css';
+
+export default class Cases extends Component {
+
+    render()
+    {
+        return (
+        <button className="cases" onClick={this.props.onClick}>
+            { this.props.value }
+        </button>
+        );
+    }
+}

src/Game.jsx

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import Board from './Board';
+
+export default class Game extends Component {
+
+    render() 
+    {
+        return <Board/>;
+    }
+}