-
Welcome.
+
);
}
}
-export default hot(module)(App);
+export default hot(module)(App);
\ No newline at end of file
diff --git a/src/client/components/board/Player.jsx b/src/client/components/board/Player.jsx
new file mode 100644
index 0000000..5bbaa7f
--- /dev/null
+++ b/src/client/components/board/Player.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+class Player extends React.Component {
+
+ handleForm(e) {
+ e.preventDefault();
+ this.props.player(e.target.player.value)
+ }
+
+
+ render() {
+ return (
+
+ )
+ }
+}
+
+export default Player;
\ No newline at end of file
diff --git a/src/client/components/board/Status.jsx b/src/client/components/board/Status.jsx
new file mode 100644
index 0000000..6f16f7e
--- /dev/null
+++ b/src/client/components/board/Status.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Player from './Player';
+
+class Status extends React.Component {
+
+ handleSetPlayer(e) {
+ this.props.setPlayer(e)
+ }
+
+ handleReset() {
+ this.props.reset();
+ }
+
+ renderHTML() {
+ if(this.props.winner) {
+ return
Winner is {this.props.winner}
+ } else {
+ return this.props.player ?
+
Next Player is {this.props.player}
:
+
this.handleSetPlayer(e)}
+ />
+ }
+
+ }
+
+ render() {
+ return ({this.renderHTML()}
)
+ }
+}
+
+export default Status;
\ No newline at end of file
diff --git a/src/client/components/board/board.jsx b/src/client/components/board/board.jsx
index dc62e97..f937d90 100644
--- a/src/client/components/board/board.jsx
+++ b/src/client/components/board/board.jsx
@@ -1,64 +1,102 @@
import React from 'react';
+import Status from './Status';
+import Player from './Player';
class Board extends React.Component {
- constructor(){
-
- super()
+ constructor(props){
+ super(props)
this.state = {
- board: [
- ['i','i','i'],
- ['i','i','i'],
- ['i','i','i']
- ]
+ board: Array(9).fill(null),
+ player: null,
+ winner: null
}
}
- squareClick(something, something2){
- console.log( something, something2 );
+ checkWinner() {
+ let winningLines = [
+ ["0", "1", "2"],
+ ["3", "4", "5"],
+ ["6", "7", "8"],
+ ["0", "3", "6"],
+ ["1", "4", "7"],
+ ["2", "5", "8"],
+ ["0", "4", "8"],
+ ["2", "4", "8"]
+ ]
+ this.checkMatch(winningLines);
+
+ }
+
+ checkMatch(winningLines) {
+ for(let index = 0; index < winningLines.length; index++) {
+ const [a, b, c] = winningLines[index];
+ let board = this.state.board;
+ if(board[a] && board[a] === board[b] && board[a] === board[c]) {
+ alert("You've won");
+ this.setState ({
+ winner: this.state.player
+ })
+ }
+ }
}
- render() {
- console.log("board", this.state.board);
- const board = this.state.board.map( (row,rowIndex) => {
- // make a single row
- const rows = row.map( (col,colIndex) => {
+ handleClick(index) {
+ if(this.state.player && !this.state.winner) {
+ let newBoard = this.state.board
+ if(this.state.board[index] === null) {
+ newBoard[index] = this.state.player
- // make each column
- return (
- {
- this.squareClick(colIndex, rowIndex);
- }}
+ this.setState({
+ board: newBoard,
+ player: this.state.player === "X" ? "O" : "X"
+ });
- >
- {col} : {colIndex} : {rowIndex}
-
- );
+ this.checkWinner();
- });
+ }
+ }
+}
+
+ setPlayer(player) {
+ this.setState({ player })
+ }
- // return the complete row
- return (
-
- {rows}
-
+ renderBoxes() {
+ return this.state.board.map((box, index) =>
+
+ this.handleClick(index)}>{box}
)
+ }
- );
+ reset() {
+ this.setState({
+ player: null,
+ board: null,
+ board: Array(9).fill(null)
+ })
- });
+ }
- return (
-
- {board}
-
- );
+render () {
+ return (
+
+
+ {this.setPlayer(e)}}
+ winner={this.state.winner} />
+
+ {this.renderBoxes()}
+
+
+ Wow, react
+
-