Skip to content

Commit 7a03982

Browse files
author
Chris Schuhmacher
committed
Abstracted modules into components directory
1 parent 3c559b8 commit 7a03982

17 files changed

+218
-161
lines changed

‎build/asset-manifest.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"main.css": "static/css/main.4a941626.css",
3+
"main.css.map": "static/css/main.4a941626.css.map",
4+
"main.js": "static/js/main.e3a10f78.js",
5+
"main.js.map": "static/js/main.e3a10f78.js.map"
6+
}

‎build/favicon.ico

3.78 KB
Binary file not shown.

‎build/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React Tac Toe</title><link href="/static/css/main.4a941626.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.e3a10f78.js"></script></body></html>

‎build/manifest.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎build/service-worker.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/static/css/main.4a941626.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/static/css/main.4a941626.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/static/js/main.e3a10f78.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/static/js/main.e3a10f78.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Board/Board.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎src/components/Board/Board.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
3+
import Square from '../Square/Square.js';
4+
5+
import './Board.css';
6+
7+
class Board extends React.Component {
8+
renderSquare(i) {
9+
return (
10+
<Square
11+
value={this.props.squares[i]}
12+
onClick={() => this.props.onClick(i)}
13+
/>
14+
);
15+
}
16+
17+
render() {
18+
return (
19+
<div>
20+
<div className="board-row">
21+
{this.renderSquare(0)}
22+
{this.renderSquare(1)}
23+
{this.renderSquare(2)}
24+
</div>
25+
<div className="board-row">
26+
{this.renderSquare(3)}
27+
{this.renderSquare(4)}
28+
{this.renderSquare(5)}
29+
</div>
30+
<div className="board-row">
31+
{this.renderSquare(6)}
32+
{this.renderSquare(7)}
33+
{this.renderSquare(8)}
34+
</div>
35+
</div>
36+
);
37+
}
38+
}
39+
40+
export default Board;

‎src/components/Game/Game.css

Whitespace-only changes.

‎src/components/Game/Game.js

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React from 'react';
2+
3+
import './Game.css';
4+
5+
import Board from '../Board/Board.js';
6+
7+
class Game extends React.Component {
8+
constructor() {
9+
super();
10+
this.state = {
11+
history: [{
12+
squares: Array(9).fill(null)
13+
}],
14+
stepNumber: 0,
15+
xIsNext: true
16+
}
17+
}
18+
19+
handleClick(i) {
20+
const history = this.state.history.slice(0, this.state.stepNumber + 1);
21+
const current = history[history.length - 1];
22+
const squares = current.squares.slice();
23+
if(calculateWinner(squares) || squares[i]) {
24+
return;
25+
}
26+
squares[i] = this.state.xIsNext ? 'X' : 'O';
27+
this.setState({
28+
history: history.concat([{
29+
squares: squares
30+
}]),
31+
stepNumber: history.length,
32+
xIsNext: !this.state.xIsNext
33+
});
34+
}
35+
36+
jumpTo(step) {
37+
this.setState({
38+
stepNumber: step,
39+
xIsNext: (step % 2) === 0
40+
});
41+
}
42+
43+
render() {
44+
const history = this.state.history;
45+
const current = history[this.state.stepNumber];
46+
const winner = calculateWinner(current.squares);
47+
48+
const moves = history.map((step, move) => {
49+
const desc = move ?
50+
'Go to move #' + move :
51+
'Go to game start';
52+
return (
53+
<li key={move}>
54+
<button onClick={() => this.jumpTo(move)}>{desc}</button>
55+
</li>
56+
);
57+
});
58+
59+
let status;
60+
if(winner) {
61+
status = 'Winner: ' + winner;
62+
} else {
63+
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
64+
}
65+
66+
return (
67+
<div className="game">
68+
<div className="game-board">
69+
<Board
70+
squares={current.squares}
71+
onClick={(i) => this.handleClick(i)}
72+
/>
73+
</div>
74+
<div className="game-info">
75+
<div>{status}</div>
76+
<ol>{moves}</ol>
77+
</div>
78+
</div>
79+
);
80+
}
81+
}
82+
83+
export default Game;
84+
85+
function calculateWinner(squares) {
86+
const lines = [
87+
[0, 1, 2],
88+
[3, 4, 5],
89+
[6, 7, 8],
90+
[0, 3, 6],
91+
[1, 4, 7],
92+
[2, 5, 8],
93+
[0, 4, 8],
94+
[2, 4, 6]
95+
];
96+
97+
for(let i = 0; i < lines.length; i++) {
98+
const [a, b, c] = lines[i];
99+
if(squares[a] && squares[a] === squares[b] && squares[a] === squares[c]){
100+
return squares[a];
101+
}
102+
}
103+
return null;
104+
}

‎src/components/Square/Square.css

Whitespace-only changes.

‎src/components/Square/Square.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
3+
import './Square.css';
4+
5+
function Square(props) {
6+
return (
7+
<button className="square" onClick={props.onClick}>
8+
{props.value}
9+
</button>
10+
);
11+
}
12+
13+
export default Square;

‎src/index.css

+30-24
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,56 @@
11
body {
2-
font: 14px "Century Gothic", Futura, sans-serif;
3-
margin: 20px;
2+
font: 14px "Century Gothic", Futura, sans-serif;
3+
margin: 20px;
4+
}
5+
6+
#root {
7+
margin: 0 auto;
8+
width: 100%;
9+
410
}
511

612
ol, ul {
7-
padding-left: 30px;
13+
padding-left: 30px;
814
}
915

1016
.board-row:after {
11-
clear: both;
12-
content: "";
13-
display: table;
17+
clear: both;
18+
content: "";
19+
display: table;
1420
}
1521

1622
.status {
17-
margin-bottom: 10px;
23+
margin-bottom: 10px;
1824
}
1925

2026
.square {
21-
background: #fff;
22-
border: 1px solid #999;
23-
float: left;
24-
font-size: 24px;
25-
font-weight: bold;
26-
line-height: 34px;
27-
height: 34px;
28-
margin-right: -1px;
29-
margin-top: -1px;
30-
padding: 0;
31-
text-align: center;
32-
width: 34px;
27+
background: #fff;
28+
border: 1px solid #999;
29+
float: left;
30+
font-size: 24px;
31+
font-weight: bold;
32+
line-height: 34px;
33+
height: 34px;
34+
margin-right: -1px;
35+
margin-top: -1px;
36+
padding: 0;
37+
text-align: center;
38+
width: 34px;
3339
}
3440

3541
.square:focus {
36-
outline: none;
42+
outline: none;
3743
}
3844

3945
.kbd-navigation .square:focus {
40-
background: #ddd;
46+
background: #ddd;
4147
}
4248

4349
.game {
44-
display: flex;
45-
flex-direction: row;
50+
display: flex;
51+
flex-direction: row;
4652
}
4753

4854
.game-info {
49-
margin-left: 20px;
55+
margin-left: 20px;
5056
}

0 commit comments

Comments
 (0)