Two-player Tic-tac-toe game in React.js
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.
Since I'm new to React, could anybody give me feedback on how I implemented these features?
https://codepen.io/anon/pen/bjVeJG?editors=0110
function Square(props)
return (
<button
className="square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) )
onClick= props.onClick
>
props.value
</button>
);
function ResetBtn(props)
return(
<button
onClick=props.onClick
>
props.value
</button>
);
class Board extends React.Component
constructor(props)
super(props);
this.state =
squares: Array(9).fill(null),
xIsNext: true
;
handleClick(i)
const squares = this.state.squares.slice();
if (calculateWinner(squares)
renderSquare(i)
return (
<Square
value= this.state.squares[i]
onClick=() => this.handleClick(i)
/>
);
handleResetClick()
this.setState(
squares: Array(9).fill(null),
xIsNext : true
);
lockBoard()
const squares = this.state.squares.slice();
for(let i in squares)
if( squares[i] === null)
squares[i] = "";
this.setState(
squares : squares
);
render()
const winner = calculateWinner(this.state.squares);
let status;
if (winner)
status = 'Winner: ' + winner;
else
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
return (
<div>
<div className="status">status</div>
<ResetBtn
value="New Game"
onClick=() => this.handleResetClick()
/>
<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
render()
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>/* status */</div>
<ol>/* TODO */</ol>
</div>
</div>
);
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
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;
beginner tic-tac-toe react.js jsx
add a comment |Â
up vote
2
down vote
favorite
I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.
Since I'm new to React, could anybody give me feedback on how I implemented these features?
https://codepen.io/anon/pen/bjVeJG?editors=0110
function Square(props)
return (
<button
className="square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) )
onClick= props.onClick
>
props.value
</button>
);
function ResetBtn(props)
return(
<button
onClick=props.onClick
>
props.value
</button>
);
class Board extends React.Component
constructor(props)
super(props);
this.state =
squares: Array(9).fill(null),
xIsNext: true
;
handleClick(i)
const squares = this.state.squares.slice();
if (calculateWinner(squares)
renderSquare(i)
return (
<Square
value= this.state.squares[i]
onClick=() => this.handleClick(i)
/>
);
handleResetClick()
this.setState(
squares: Array(9).fill(null),
xIsNext : true
);
lockBoard()
const squares = this.state.squares.slice();
for(let i in squares)
if( squares[i] === null)
squares[i] = "";
this.setState(
squares : squares
);
render()
const winner = calculateWinner(this.state.squares);
let status;
if (winner)
status = 'Winner: ' + winner;
else
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
return (
<div>
<div className="status">status</div>
<ResetBtn
value="New Game"
onClick=() => this.handleResetClick()
/>
<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
render()
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>/* status */</div>
<ol>/* TODO */</ol>
</div>
</div>
);
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
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;
beginner tic-tac-toe react.js jsx
4
The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
â Mast
Jul 13 at 10:45
add a comment |Â
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.
Since I'm new to React, could anybody give me feedback on how I implemented these features?
https://codepen.io/anon/pen/bjVeJG?editors=0110
function Square(props)
return (
<button
className="square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) )
onClick= props.onClick
>
props.value
</button>
);
function ResetBtn(props)
return(
<button
onClick=props.onClick
>
props.value
</button>
);
class Board extends React.Component
constructor(props)
super(props);
this.state =
squares: Array(9).fill(null),
xIsNext: true
;
handleClick(i)
const squares = this.state.squares.slice();
if (calculateWinner(squares)
renderSquare(i)
return (
<Square
value= this.state.squares[i]
onClick=() => this.handleClick(i)
/>
);
handleResetClick()
this.setState(
squares: Array(9).fill(null),
xIsNext : true
);
lockBoard()
const squares = this.state.squares.slice();
for(let i in squares)
if( squares[i] === null)
squares[i] = "";
this.setState(
squares : squares
);
render()
const winner = calculateWinner(this.state.squares);
let status;
if (winner)
status = 'Winner: ' + winner;
else
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
return (
<div>
<div className="status">status</div>
<ResetBtn
value="New Game"
onClick=() => this.handleResetClick()
/>
<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
render()
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>/* status */</div>
<ol>/* TODO */</ol>
</div>
</div>
);
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
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;
beginner tic-tac-toe react.js jsx
I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.
Since I'm new to React, could anybody give me feedback on how I implemented these features?
https://codepen.io/anon/pen/bjVeJG?editors=0110
function Square(props)
return (
<button
className="square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) )
onClick= props.onClick
>
props.value
</button>
);
function ResetBtn(props)
return(
<button
onClick=props.onClick
>
props.value
</button>
);
class Board extends React.Component
constructor(props)
super(props);
this.state =
squares: Array(9).fill(null),
xIsNext: true
;
handleClick(i)
const squares = this.state.squares.slice();
if (calculateWinner(squares)
renderSquare(i)
return (
<Square
value= this.state.squares[i]
onClick=() => this.handleClick(i)
/>
);
handleResetClick()
this.setState(
squares: Array(9).fill(null),
xIsNext : true
);
lockBoard()
const squares = this.state.squares.slice();
for(let i in squares)
if( squares[i] === null)
squares[i] = "";
this.setState(
squares : squares
);
render()
const winner = calculateWinner(this.state.squares);
let status;
if (winner)
status = 'Winner: ' + winner;
else
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
return (
<div>
<div className="status">status</div>
<ResetBtn
value="New Game"
onClick=() => this.handleResetClick()
/>
<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
render()
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>/* status */</div>
<ol>/* TODO */</ol>
</div>
</div>
);
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
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;
beginner tic-tac-toe react.js jsx
edited Jul 13 at 13:28
200_success
123k14143399
123k14143399
asked Jul 13 at 10:21
Luca
111
111
4
The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
â Mast
Jul 13 at 10:45
add a comment |Â
4
The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
â Mast
Jul 13 at 10:45
4
4
The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
â Mast
Jul 13 at 10:45
The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
â Mast
Jul 13 at 10:45
add a comment |Â
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f198415%2ftwo-player-tic-tac-toe-game-in-react-js%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
4
The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body.
â Mast
Jul 13 at 10:45