Pull Request Alex

.gitignore

@@ -18,6 +18,7 @@
 .env.test.local
 .env.production.local
 
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

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"
+  }
 }

src/App.css

@@ -22,6 +22,34 @@
   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-left: -1px;
+  margin-bottom: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+
+}
+
+.pointer{
+  cursor: pointer;
+}
+
+.boardRow{
+  margin-left: 20px;
+  clear: both;
+  display: table;
+  content: "";
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,25 +1,14 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Game from './component/game.js';
 
 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>
+      <div>
+         <Game/>
+
       </div>
     );
   }

src/component/cell.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import Cell from "./grille";
+
+export default class Grille extends Component {
+
+
+
+
+
+
+
+    render() {
+        return (
+
+            <button onClick={this.props.Affp} className={'cell ' + (this.props.value == null?'pointer':'')}>{this.props.value}</button>
+        );
+    }
+}

src/component/game.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import Grille from './grille.js';
+
+export default class Game extends Component {
+    render() {
+        return (
+            <div>
+                <h1>Next player: X</h1>
+                <Grille/>
+            </div>
+        );
+    }
+}

src/component/grille.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import Cell from './cell.js';
+
+export default class Grille extends Component {
+
+    constructor(props){
+        super(props)
+        this.state = {
+            values : [
+                null, null, null,
+                null, null, null,
+                null, null, null
+            ],
+            player : "X",
+
+        }
+    }
+
+    isNull(value){
+        return value==null;
+    }
+
+    isBoardFull(){
+        return this.state.values.every(this.IsNull);
+    }
+
+    AffP = (index) => {
+        this.setState(
+            prevState => {
+                const values = [...prevState.values];
+                let player = '';
+                values[index] = prevState.player;
+                if (prevState.values[index]!=null){
+                    return null;
+                }
+                if (prevState.player == 'X')
+                {
+                    player = 'O';
+                }
+                else
+                {
+                    player = 'X';
+                }
+                return {
+                    values,
+                    player
+                }
+            }
+        );
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='boardRow'>
+                    <Cell value={this.state.values[0]} Affp={()=>this.AffP(0)}/>
+                    <Cell value={this.state.values[1]} Affp={()=>this.AffP(1)}/>
+                    <Cell value={this.state.values[2]} Affp={()=>this.AffP(2)}/>
+                </div>
+                <div className='boardRow'>
+                    <Cell value={this.state.values[3]} Affp={()=>this.AffP(3)}/>
+                    <Cell value={this.state.values[4]} Affp={()=>this.AffP(4)}/>
+                    <Cell value={this.state.values[5]} Affp={()=>this.AffP(5)}/>
+                </div>
+                <div className='boardRow'>
+                    <Cell value={this.state.values[6]} Affp={()=>this.AffP(6)}/>
+                    <Cell value={this.state.values[7]} Affp={()=>this.AffP(7)}/>
+                    <Cell value={this.state.values[8]} Affp={()=>this.AffP(8)}/>
+                </div>
+            </div>
+        );
+    }
+}

src/component/grille.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Grille from './grille.js';
+
+describe('BoardGrid tests', () => {
+    let wrapper;
+    beforeEach(() => {
+        wrapper = shallow(<Grille />);
+    });
+
+    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');
+        });
+    });
+});

src/setupTests.js

@@ -0,0 +1,3 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+configure({adapter: new Adapter()});