Pull Request Comte Thibaut

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

@@ -30,3 +30,19 @@
     transform: rotate(360deg);
   }
 }
+
+.cell{
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 70px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 70px;
+  cursor: pointer;
+}

src/App.js

@@ -1,24 +1,40 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Board from './Board';
+import Noel from './Noel';
 
 class App extends Component {
+
+  state = {
+    message : 'Tchoin',
+    time: 1500
+  }
+
+  onChangeMessage = (event) => {
+    const value = event.target.value;
+    this.setState({
+      message: value
+    })
+  }
+
+  onChangeTime = (event) => {
+    const time = parseInt(event.target.value);
+    this.setState({
+      time: time
+    });
+  }
+
   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>
+          <Board />
+          <label htmlFor="blink-time">Temps: </label>
+          <input id="blink-time" type="number" value={this.state.time} onChange={this.onChangeTime}/>
+          <label htmlFor="blink-text">Message: </label>
+          <input id="blink-text" type="text" value={this.state.message} onChange={this.onChangeMessage}/>
+          <Noel time = {this.state.time} message = {this.state.message}/>
         </header>
       </div>
     );

src/Board.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Board from './Board';
+import { wrap } from 'module';
+
+describe('Board tests', () => {
+    let wrapper;
+    beforeEach(() => {
+        wrapper = shallow(<Board />);
+    });
+
+
+    describe('isEnd', () => {
+        it('Should return false at startup', () => {
+            expect(wrapper.instance().isEnd()).toBe(false);
+        });
+
+        it('Should return true if board is full', () => {
+            const array = Array(9).fill('X');
+            wrapper.instance().setState({cells : array});
+            expect(wrapper.instance().isEnd()).toBe(true);
+        });
+    });
+
+    describe('calculateWinner', () => {
+        it('Should return null at startup', () => {
+            const array = Array(9).fill(null);
+            expect(wrapper.instance().calculateWinner(array)).toBe(null);
+        });
+
+        it('Should return X or O is a player win', () => {
+            const array = ['X', 'X', 'X', 'O', 'X', 'O', 'O', 'X', 'O'];
+            expect(wrapper.instance().calculateWinner(array)).toBe('X');
+        });
+    });
+
+});

src/Button.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+class Button extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+
+    render() {
+        return (
+            <button onClick={() => this.props.onClick()}>Replay</button>
+        );
+    }
+}
+
+export default Button;

src/Cell.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class Cell extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: null,
+
+        };
+    }
+
+    render() {
+        return (
+            <button className="cell" onClick= { () => {this.props.onClick() }}>
+                {this.props.value}
+            </button>
+        );
+    }
+}
+
+export default Cell;

src/Game.jsx

@@ -0,0 +1,30 @@
+// import React, { component } from 'react';
+// import Board from './Board';
+// import './App.css';
+
+// const PLAYER_1 = 'X';
+// const PLAYER_2 = 'O';
+
+// export default class Game extends Component {
+//     constructor(props) {
+//         super(props);
+//         this.state = {
+//             history: [
+//                 {
+//                     grid: Array(9).fill(null),
+//                     currentPlayer: PLAYER_1
+//                 }
+//             ],
+//             currentStep = 0
+//         };
+//         this.state.status = this.getStatus();
+//     }
+
+//     getNextPlayer() {
+//         const current = this.state.history[this.state.currentStep];
+//         if (current.currentPlayer === PLAYER_1) return PLAYER_2;
+//         return PLAYER_1;
+//     }
+
+// }
+

src/Noel.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import Cell from './Cell';
+import Button from './Button';
+
+class Noel extends Component {
+
+    state = {
+        show: true,
+        time: this.props.time
+    }
+
+    doBlink() {
+        this.setState(prevState => {
+            console.log(this.state.show)
+            return {show: !prevState};
+        });
+        this.intervalId = setTimeout(() => {
+            this.doBlink();
+        }, this.props.time)
+    }
+
+    componentDidMount() {
+        this.intervalId = setInterval(() => {
+            this.doBlink();
+        }, this.props.time)
+    }
+
+    // static getDrivedStateFromProps(props, state) {
+    //     if (props.time === state.time) return
+    //     state.time = props.time;
+    // }
+
+    componentWillUnmount() {
+        clearInterval(this.intervalId);
+    }
+
+    render() {
+        return (
+            <div>{this.state.show && this.props.message}</div>
+        );
+    }
+
+
+}
+
+export default Noel;

src/board.js

@@ -0,0 +1,137 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import Cell from './Cell';
+import Button from './Button';
+
+const PLAYER_1 = 'X';
+const PLAYER_2 = 'O';
+
+class Board extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            cells: Array(9).fill(null),
+            player: PLAYER_1
+        }
+        this.endGame = false;
+    }
+
+    getNextPlayer() {
+        if (this.state.player === PLAYER_1) return PLAYER_2;
+        return PLAYER_1;
+    }
+
+    renderHistory() {
+        const history = this.state.history;
+        return history.map((step, index) => {
+            const desc = index != 0 ?
+                'Go to move #' + index : 'Go to game start';
+            return (
+                <li key={index}>
+                 <button>{desc}</button>
+                </li>
+            );
+        });
+    }
+
+    handleClick(i) {
+        const cells = this.state.cells.slice();
+        if (this.calculateWinner(cells)) {
+            return;
+        }
+        if (!cells[i]) {
+            cells[i] = this.state.player;
+            this.setState({ 
+                cells: cells,
+                player: this.getNextPlayer()
+            });
+        } else {
+            alert('Case déjà cochée');
+        }
+    }
+
+    replay() {
+        let cells = Array(9).fill(null);
+        this.setState({ cells: cells });
+        this.endGame = false;
+        this.setState({ player: PLAYER_1})
+    }
+
+    calculateWinner(cells) {
+        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 (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) {
+                return cells[a];
+            }
+        }
+        return null;
+    }
+
+    isEnd() {
+        for (let i = 0; i < this.state.cells.length; i++) {
+            if (this.state.cells[i] == null) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    renderCell(i) {
+        return (
+            <Cell
+                value={this.state.cells[i]}
+                index={i}
+                onClick={() => this.handleClick(i)} />
+        );
+    }
+
+    render() {
+        let status;
+        const winner = this.calculateWinner(this.state.cells);
+        if (winner) {
+            status = 'Winner: ' + winner;
+            this.endGame = true;
+        }
+        else if (this.isEnd()) {
+            status = 'Game Over';
+            this.endGame = true;
+        } else {
+            status = 'Next player: ' + this.state.player;
+        }
+        return (
+            <div className="App">
+                <h3>{status}</h3>
+                {this.endGame ? <Button onClick={() => this.replay()} /> : null}
+                <br/><br/>
+                <div>
+                    {this.renderCell(0)}
+                    {this.renderCell(1)}
+                    {this.renderCell(2)}
+                </div>
+                <div>
+                    {this.renderCell(3)}
+                    {this.renderCell(4)}
+                    {this.renderCell(5)}
+                </div>
+                <div>
+                    {this.renderCell(6)}
+                    {this.renderCell(7)}
+                    {this.renderCell(8)}
+                </div>
+            </div>
+        );
+    }
+}
+export default Board;

src/setupTests.js

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