parent
6c45a1390b
commit
47d658f04f
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
@ -0,0 +1 @@
|
||||
16
|
@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "learning-react",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<title>Tic Tac Toes</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,51 @@
|
||||
body {
|
||||
font: 14px "Century Gothic", Futura, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.board-row:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.kbd-navigation .square:focus {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.game {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
@ -0,0 +1,150 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
|
||||
function Square(props) {
|
||||
return (
|
||||
<button className="square" onClick={props.onClick}>
|
||||
{props.value}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
class Board extends React.Component {
|
||||
renderSquare(i) {
|
||||
return (
|
||||
<Square
|
||||
value={this.props.squares[i]}
|
||||
onClick={() => this.props.onClick(i)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="board-row">
|
||||
{this.renderSquare(0)}
|
||||
{this.renderSquare(1)}
|
||||
{this.renderSquare(2)}
|
||||
</div>
|
||||
<div className="board-row">
|
||||
{this.renderSquare(3)}
|
||||
{this.renderSquare(4)}
|
||||
{this.renderSquare(5)}
|
||||
</div>
|
||||
<div className="board-row">
|
||||
{this.renderSquare(6)}
|
||||
{this.renderSquare(7)}
|
||||
{this.renderSquare(8)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Game extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
history: [{
|
||||
squares: Array(9).fill(null),
|
||||
}],
|
||||
stepNumber: 0,
|
||||
xIsNext: true,
|
||||
};
|
||||
}
|
||||
|
||||
handleClick(i) {
|
||||
const history = this.state.history.slice(0, this.state.stepNumber + 1);
|
||||
const current = history[history.length - 1];
|
||||
const squares = current.squares.slice();
|
||||
if (calculateWinner(squares) || squares[i]) {
|
||||
return;
|
||||
}
|
||||
squares[i] = this.state.xIsNext ? 'X' : 'O';
|
||||
this.setState({
|
||||
history: history.concat([{
|
||||
squares
|
||||
}]),
|
||||
stepNumber: history.length,
|
||||
xIsNext: !this.state.xIsNext,
|
||||
})
|
||||
}
|
||||
|
||||
jumpTo(step) {
|
||||
this.setState({
|
||||
stepNumber: step,
|
||||
xIsNext: (step % 2) === 0,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const history = this.state.history;
|
||||
const current = history[this.state.stepNumber];
|
||||
const winner = calculateWinner(current.squares);
|
||||
|
||||
const moves = history.map((step, move) => {
|
||||
const desc = move ?
|
||||
'Go to move #' + move :
|
||||
'Go to game start';
|
||||
|
||||
return (
|
||||
<li key={move}>
|
||||
<button onClick={() => this.jumpTo(move)}>{desc}</button>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
|
||||
let status;
|
||||
if (winner) {
|
||||
status = 'Winner: ' + winner;
|
||||
} else {
|
||||
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="game">
|
||||
<div className="game-board">
|
||||
<Board
|
||||
squares={current.squares}
|
||||
onClick={(i) => this.handleClick(i)}
|
||||
/>
|
||||
</div>
|
||||
<div className="game-info">
|
||||
<div>{status}</div>
|
||||
<ol>{moves}</ol>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function calculateWinner(squares) {
|
||||
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 (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
|
||||
return squares[a]
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
|
||||
ReactDOM.render(
|
||||
<Game />,
|
||||
document.getElementById('root')
|
||||
);
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue