HugoCapocci · ohsr · Feb 5, 2019 · Feb 5, 2019 · Feb 5, 2019 · Feb 5, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,5 +21,9 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.9.0"
+  }
 }
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

diff --git a/src/App.css b/src/App.css
@@ -2,31 +2,39 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
+
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+
 }
 
-.App-link {
-  color: #61dafb;
+
+.cell{
+  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;
+  text-align: center;
+  width: 34px;
+
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.pointer{
+  cursor: pointer;
+}
+.selector{
+  cursor: default;
 }
+
+
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,13 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Plateau from './Plateau';
 
 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>
+          <Plateau />
       </div>
     );
   }

diff --git a/src/BoardGrid.js b/src/BoardGrid.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { expect } from 'chai';
+import { render } from 'enzyme';
+
+import Plateau from './Plateau';
+
+describe('<Plateau/>', () => {
+  it('renders three `.foo-bar`s', () => {
+    const wrapper = render(<Plateau />);
+    expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
+  });
+
+  it('renders the title', () => {
+    const wrapper = render(<Foo title="unique" />);
+    expect(wrapper.text()).to.contain('unique');
+  });
+});
diff --git a/src/BoardGrid.test.js b/src/BoardGrid.test.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Plateau from './Plateau';
+
+describe('BoardGrid tests', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(<Plateau />);
+  });
+
+  describe('isBoardFull', () => {
+    it('Should return false at startup', () => {
+      expect(wrapper.instance().isBoardFull()).toBe(false);
+    });
+
+    it('Should return true if board is full', () => {
+      wrapper.setState({ grid: Array(9).fill('Y') });
+
+      expect(wrapper.instance().isBoardFull()).toBe(true);
+    });
+  });
+
+  describe('getWinner', () => {
+    it('Should return null at startup', () => {
+      expect(wrapper.instance().getWinner()).toBe(null);
+    });
+
+    it('Should return X when first player has fullfill firt row', () => {
+      wrapper.setState({
+        grid: Array(3).fill('X')
+      });
+
+      expect(wrapper.instance().getWinner()).toBe('X');
+    });
+
+    it('Should return O when second player has fullfill firt column', () => {
+      wrapper.setState({
+        grid: [
+          'O', null, null,
+          'O', null, null,
+          'O', null, null
+        ]
+      });
+
+      expect(wrapper.instance().getWinner()).toBe('O');
+    });
+
+    it('Should return X when first player has fullfill diagonal', () => {
+      wrapper.setState({
+        grid: [
+          'O', null, 'X',
+          'O', 'X', null,
+          'X', null, 'O'
+        ]
+      });
+
+      expect(wrapper.instance().getWinner()).toBe('X');
+    });
+  });
+});
diff --git a/src/Case.js b/src/Case.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+
+export default class Case extends Component {
+
+  render() {
+
+    return (
+        <button className={ "cell" + (this.props.value ? ' selector' : ' pointer' )} onClick={ this.props.handleClick }> { this.props.value }</button>
+    );
+  }
+}
+
diff --git a/src/Plateau.js b/src/Plateau.js
@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import Case from './Case';
+import './App.css';
+
+
+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++) {
+      const [a, b, c] = lines[i];
+      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+        return squares[a];
+      }
+    }
+    return null;
+  }
+
+
+export default class Plateau extends Component {
+
+
+    state={
+      cells : [
+          null,  null, null,
+          null, null, null,
+          null, null, null
+      ],
+      player: 'X',
+      winner: false,
+      status: 'Next Player: X',
+    }
+    refreshPage() {
+        window.location.reload();
+      }
+    isBoardFull = (cells) =>
+    {
+        return cells.every(cell => cell != null);
+    }
+    handleClick = (index)  => {
+            this.setState(prevState =>{
+                const cells= [...prevState.cells];
+                if(!cells[index] && !this.state.winner){
+                    cells[index]= prevState.player;
+                    if(prevState.player=="X")
+                    {
+                        this.setState({ player: 'O'});
+
+                    }else{
+                        this.setState({ player: 'X'});
+                    }
+                }
+                const winner = calculateWinner(cells);
+                let status;
+                if (winner) {        
+                    this.setState({ 
+                        winner: true,
+                        status: 'Winner: '+ winner,
+                    });
+                }else {
+                    this.setState({ 
+                        status: 'Next Player: '+ this.state.player,
+                    });
+                }
+                const boardFull= this.isBoardFull(cells);
+                if(boardFull)
+                {
+                    this.setState({ 
+                        winner: true,
+                        status: 'Tableau Complet',
+                    });
+                }
+
+                return {
+                    cells
+                }
+            })        
+    }
+
+  render() {  
+
+    return (
+        <div className="App">
+
+            <header className="App-header">
+                <h2>{ this.state.status }</h2>    
+                <div >
+                    < Case value={ this.state.cells[0] } handleClick={ () => this.handleClick(0) } />
+                    < Case value={ this.state.cells[1] } handleClick={ () => this.handleClick(1) }  />
+                    < Case value={ this.state.cells[2] } handleClick={ () => this.handleClick(2) } />
+                </div>
+                <div >
+                    < Case value={ this.state.cells[3] } handleClick={ () => this.handleClick(3) } />
+                    < Case value={ this.state.cells[4] } handleClick={ () => this.handleClick(4) } />
+                    < Case value={ this.state.cells[5] } handleClick={ () => this.handleClick(5) } />
+                </div>
+                <div >
+                    < Case value={ this.state.cells[6] } handleClick={ () => this.handleClick(6) } />
+                    < Case value={ this.state.cells[7] } handleClick={ () => this.handleClick(7) } />
+                    < Case value={ this.state.cells[8] } handleClick={ () => this.handleClick(8) } />
+                </div>
+            </header>
+            < button onClick = {this.refreshPage} > Refresh </button>
+      </div>
+    );
+  }
+}
+
diff --git a/src/setupTests.js b/src/setupTests.js
@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });