From f639bf68799da85c8262a18e7e8974bd86f918fd Mon Sep 17 00:00:00 2001 From: DineshGov Date: Tue, 5 Feb 2019 14:10:33 +0100 Subject: [PATCH 1/4] Step 1 --- src/App.js | 4 ++++ src/BoardComponent.jsx | 35 +++++++++++++++++++++++++++++++++++ src/GameComponent.jsx | 0 src/SquareComponent.jsx | 15 +++++++++++++++ 4 files changed, 54 insertions(+) create mode 100644 src/BoardComponent.jsx create mode 100644 src/GameComponent.jsx create mode 100644 src/SquareComponent.jsx diff --git a/src/App.js b/src/App.js index 7e261ca..e9c96a5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,9 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; +import GameComponent from './GameComponent'; +import SquareComponent from './SquareComponent'; +import BoardComponent from './BoardComponent'; class App extends Component { render() { @@ -19,6 +22,7 @@ class App extends Component { > Learn React + ); diff --git a/src/BoardComponent.jsx b/src/BoardComponent.jsx new file mode 100644 index 0000000..49239af --- /dev/null +++ b/src/BoardComponent.jsx @@ -0,0 +1,35 @@ +import React, { Component } from 'react'; +import SquareComponent from "./SquareComponent"; + +export default class BoardComponent extends Component{ + + renderSquare(i) { + return ; + } + + render() { + const status = 'Next player: X'; + + return ( +
+
{status}
+
+ {this.renderSquare(0)} + {this.renderSquare(1)} + {this.renderSquare(2)} +
+
+ {this.renderSquare(3)} + {this.renderSquare(4)} + {this.renderSquare(5)} +
+
+ {this.renderSquare(6)} + {this.renderSquare(7)} + {this.renderSquare(8)} +
+
+ ); + } + +} \ No newline at end of file diff --git a/src/GameComponent.jsx b/src/GameComponent.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/SquareComponent.jsx b/src/SquareComponent.jsx new file mode 100644 index 0000000..4e9eb10 --- /dev/null +++ b/src/SquareComponent.jsx @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +export default class SquareComponent extends Component{ + + render() { + return ( + + ); + } + + + +} \ No newline at end of file From 23ca598da5e17122c57a1db4eabb133a70acac2d Mon Sep 17 00:00:00 2001 From: DineshGov Date: Tue, 5 Feb 2019 14:27:49 +0100 Subject: [PATCH 2/4] Step 2 --- src/GameComponent.jsx | 9 +++++++++ src/SquareComponent.jsx | 3 --- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/GameComponent.jsx b/src/GameComponent.jsx index e69de29..aa7f0b8 100644 --- a/src/GameComponent.jsx +++ b/src/GameComponent.jsx @@ -0,0 +1,9 @@ +import React, { Component } from 'react'; + +export default class GameComponent extends Component{ + + render() { + return ""; + } + +} \ No newline at end of file diff --git a/src/SquareComponent.jsx b/src/SquareComponent.jsx index 4e9eb10..4749063 100644 --- a/src/SquareComponent.jsx +++ b/src/SquareComponent.jsx @@ -9,7 +9,4 @@ export default class SquareComponent extends Component{ ); } - - - } \ No newline at end of file From 01ced2eb9daa33362bd94f78ebec27f98bce1264 Mon Sep 17 00:00:00 2001 From: DineshGov Date: Tue, 5 Feb 2019 16:30:18 +0100 Subject: [PATCH 3/4] Player can change --- src/App.css | 44 +++++++++++++++++++++++++++++++++++- src/App.js | 13 +---------- src/BoardComponent.jsx | 50 ++++++++++++++++++++++++++++++----------- src/GameComponent.jsx | 11 ++++++++- src/SquareComponent.jsx | 13 ++++++++++- 5 files changed, 103 insertions(+), 28 deletions(-) diff --git a/src/App.css b/src/App.css index 92f956e..dfb93ed 100644 --- a/src/App.css +++ b/src/App.css @@ -3,7 +3,7 @@ } .App-logo { - animation: App-logo-spin infinite 20s linear; + animation: App-logo-spin infinite 120s linear; height: 40vmin; } @@ -30,3 +30,45 @@ transform: rotate(360deg); } } + +.status { + margin-bottom: 10px; +} + +.board-row:after { + clear: both; + content: ""; + display: table; +} + +.square { + 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; + padding: 0; + text-align: center; + width: 34px; +} + +.square:focus { + outline: none; +} + +.game { + display: flex; + flex-direction: row; +} +.game { + display: flex; + flex-direction: row; +} + +.game-info { + margin-left: 20px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index e9c96a5..140d175 100644 --- a/src/App.js +++ b/src/App.js @@ -10,18 +10,7 @@ class App extends Component { return (
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - + logo
diff --git a/src/BoardComponent.jsx b/src/BoardComponent.jsx index 49239af..d23e6d9 100644 --- a/src/BoardComponent.jsx +++ b/src/BoardComponent.jsx @@ -3,30 +3,54 @@ import SquareComponent from "./SquareComponent"; export default class BoardComponent extends Component{ - renderSquare(i) { - return ; + constructor(props) { + super(props); + this.state = { + grid: Array(9).fill(null), + player: "X", + }; } - render() { - const status = 'Next player: X'; + handleClick(index) { + const grid = [...this.state.grid]; + grid[index] = this.state.player; + if(this.state.player === 'X'){ + this.setState({player: 'O'}); + } + else{ + this.setState({player: 'X'}); + } + this.setState({ grid }); + } + + + renderCell(index) { + return this.handleClick(index)} + />; + } + + render() { + const status = 'Next player:' + this.state.player + ''; return (
{status}
- {this.renderSquare(0)} - {this.renderSquare(1)} - {this.renderSquare(2)} + { this.renderCell(0) } + { this.renderCell(1) } + { this.renderCell(2) }
- {this.renderSquare(3)} - {this.renderSquare(4)} - {this.renderSquare(5)} + { this.renderCell(3) } + { this.renderCell(4) } + { this.renderCell(5) }
- {this.renderSquare(6)} - {this.renderSquare(7)} - {this.renderSquare(8)} + { this.renderCell(6) } + { this.renderCell(7) } + { this.renderCell(8) }
); diff --git a/src/GameComponent.jsx b/src/GameComponent.jsx index aa7f0b8..4e5b44d 100644 --- a/src/GameComponent.jsx +++ b/src/GameComponent.jsx @@ -1,9 +1,18 @@ import React, { Component } from 'react'; +import BoardComponent from "./BoardComponent"; export default class GameComponent extends Component{ render() { - return ""; + return ( +
+ +
+
{/* status */}
+
    {/* TODO */}
+
+
+ ); } } \ No newline at end of file diff --git a/src/SquareComponent.jsx b/src/SquareComponent.jsx index 4749063..2f9eea2 100644 --- a/src/SquareComponent.jsx +++ b/src/SquareComponent.jsx @@ -2,11 +2,22 @@ import React, { Component } from 'react'; export default class SquareComponent extends Component{ + getStyle() { + return { + cursor: this.props.value ? 'default' : 'pointer' + } + } + render() { return ( - ); } + } \ No newline at end of file From 37dcd714b5c46f0ce9b8d28d41e66f00eecfbe2b Mon Sep 17 00:00:00 2001 From: DineshGov Date: Tue, 5 Feb 2019 16:59:21 +0100 Subject: [PATCH 4/4] add Branch --- src/BoardComponent.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/BoardComponent.jsx b/src/BoardComponent.jsx index d23e6d9..4259464 100644 --- a/src/BoardComponent.jsx +++ b/src/BoardComponent.jsx @@ -14,6 +14,7 @@ export default class BoardComponent extends Component{ handleClick(index) { const grid = [...this.state.grid]; grid[index] = this.state.player; + if(this.state.player === 'X'){ this.setState({player: 'O'}); }