From 31698f7f5e55032ebed50b57f315c2498cc09124 Mon Sep 17 00:00:00 2001
From: Slimanes <slimane_kouba@yahoo.fr>
Date: Tue, 5 Feb 2019 14:21:50 +0100
Subject: [PATCH 1/2] 'step1'

---
 src/App.js    |  3 +++
 src/Board.jsx | 35 +++++++++++++++++++++++++++++++++++
 src/Case.jsx  | 16 ++++++++++++++++
 src/Game.jsx  | 22 ++++++++++++++++++++++
 4 files changed, 76 insertions(+)
 create mode 100644 src/Board.jsx
 create mode 100644 src/Case.jsx
 create mode 100644 src/Game.jsx

diff --git a/src/App.js b/src/App.js
index 7e261ca..fb7e2bb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Board from "./Board";
 
 class App extends Component {
   render() {
@@ -19,7 +20,9 @@ class App extends Component {
           >
             Learn React
           </a>
+          <Board/>
         </header>
+
       </div>
     );
   }
diff --git a/src/Board.jsx b/src/Board.jsx
new file mode 100644
index 0000000..d86d447
--- /dev/null
+++ b/src/Board.jsx
@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import Case from './Case.jsx';
+export default class Board extends Component {
+    
+    renderCase(i){
+
+        return <Case value={i} />;
+    }
+    render() {
+        const tour = 'Next Player : X';
+
+        return (
+            <div>
+                <div className="tour">{tour}</div>
+                <div className="board-row">
+                    {this.renderCase(0)}
+                    {this.renderCase(1)}
+                    {this.renderCase(2)}
+                </div>
+                <div className="board-row">
+                    {this.renderCase(3)}
+                    {this.renderCase(4)}
+                    {this.renderCase(5)}
+                </div>
+                <div className="board-row">
+                    {this.renderCase(6)}
+                    {this.renderCase(7)}
+                    {this.renderCase(8)}
+                </div>
+            </div>
+        );
+    }
+
+    
+}
diff --git a/src/Case.jsx b/src/Case.jsx
new file mode 100644
index 0000000..7b4b25e
--- /dev/null
+++ b/src/Case.jsx
@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+
+
+export default class Case extends Component{
+    
+    
+    render(){
+        return (
+            <button className="case">{this.props.value}</button>
+
+
+        );
+    }
+    
+    
+}
\ No newline at end of file
diff --git a/src/Game.jsx b/src/Game.jsx
new file mode 100644
index 0000000..ab12f16
--- /dev/null
+++ b/src/Game.jsx
@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import Board from './Board.jsx';
+
+
+export default class Game extends Component{
+
+    render() {
+        return (
+            <div className="game">
+                <div className="game-board">
+                    <Board/>
+                </div>
+                <div className="game-info">
+                    <div>{/* status */}</div>
+                    <ol>{/* TODO */}</ol>
+                </div>
+            </div>
+        );
+    }
+    
+    
+}
\ No newline at end of file

From c10e8741056a1d7ef2195f0fe95b38cf99bc08c2 Mon Sep 17 00:00:00 2001
From: Slimanes <slimane_kouba@yahoo.fr>
Date: Tue, 5 Feb 2019 16:29:56 +0100
Subject: [PATCH 2/2] step5

---
 src/App.css   |  4 ++++
 src/Board.jsx | 35 ++++++++++++++++++++++++++++++++---
 src/Case.jsx  | 16 ----------------
 src/Cases.jsx | 23 +++++++++++++++++++++++
 4 files changed, 59 insertions(+), 19 deletions(-)
 delete mode 100644 src/Case.jsx
 create mode 100644 src/Cases.jsx

diff --git a/src/App.css b/src/App.css
index 92f956e..5fe56dd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -30,3 +30,7 @@
     transform: rotate(360deg);
   }
 }
+.case{
+  width: 50px;
+  height: 50px;
+}
diff --git a/src/Board.jsx b/src/Board.jsx
index d86d447..9c4ae66 100644
--- a/src/Board.jsx
+++ b/src/Board.jsx
@@ -1,13 +1,42 @@
 import React, {Component} from 'react';
-import Case from './Case.jsx';
+import Cases from './Cases.jsx';
 export default class Board extends Component {
+
+
+    constructor(props){
+
+        super(props);
+        this.state= {
+            grid:Array(9).fill(null),
+            player:'X',
+        };
+    }
+
+    handleClick(index) {
+        const grid = [...this.state.grid];
+        //grid[index] = 'X';
+        grid[index] =this.state.player;
+        if(this.state.player === 'X'){
+            this.setState({player:'O'});
+        }
+        else{
+            this.setState({player:'X'});
+
+        }
+        this.setState({ grid });
+    }
+
     
     renderCase(i){
 
-        return <Case value={i} />;
+        return <Cases value={this.state.grid[i]}
+
+        onClick={() => this.handleClick(i)}
+
+        />;
     }
     render() {
-        const tour = 'Next Player : X';
+        const tour = 'Next Player : '+ this.state.player;
 
         return (
             <div>
diff --git a/src/Case.jsx b/src/Case.jsx
deleted file mode 100644
index 7b4b25e..0000000
--- a/src/Case.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, {Component} from 'react';
-
-
-export default class Case extends Component{
-    
-    
-    render(){
-        return (
-            <button className="case">{this.props.value}</button>
-
-
-        );
-    }
-    
-    
-}
\ No newline at end of file
diff --git a/src/Cases.jsx b/src/Cases.jsx
new file mode 100644
index 0000000..76d7211
--- /dev/null
+++ b/src/Cases.jsx
@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+
+
+export default class Cases extends Component{
+
+    getStyle() {
+        return {
+            cursor: this.props.value ? 'default' : 'pointer'
+        }
+    }
+
+    render() {
+        return (
+            <button
+                className="case"
+                style={this.getStyle()}
+                onClick={this.props.onClick}
+            >
+                {this.props.value}
+            </button>
+        );
+    }
+}
\ No newline at end of file