Question

In: Computer Science

QUESTION: This is a tic-tac-toe game in react.js. Covert the following class-based components in React.js to...

QUESTION: This is a tic-tac-toe game in react.js. Covert the following class-based components in React.js to Functional Based component in React.

//CODE
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
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;
}

function Square(props) {
return (

{props.value}

);
}

class Board extends React.Component {
renderSquare(i) {
return (
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
}

render() {
return (


{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)}


);
}
}

class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [
{
squares: Array(9).fill(null)
}
],
stepNumber: 0,
xIsNext: true
};
}

handleClick(i) {
let 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";
const stepNumber = history.length;
history = history.concat([{squares}]);
const xIsNext = !this.state.xIsNext;
this.setState({
history, stepNumber, 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>
);
}

}

// ========================================

ReactDOM.render(, document.getElementById("root"))

Solutions

Expert Solution

import React { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const 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;
}

const function Square(props) {
return (

{props.value}

);
}

const function Board(props) {
renderSquare(i) {
return (
value={props.squares[i]}
onClick={() => props.onClick(i)}
/>
);
}


return (


{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}


{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}


{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}


);

}

const function Game(props) {

handleClick(i) {
let history = history.slice(0, stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = .xIsNext ? "X" : "O";
const stepNumber = history.length;
history = history.concat([{squares}]);
const xIsNext = !xIsNext;
setState({
history, stepNumber, xIsNext
});
}

jumpTo(step) {
setState({
stepNumber: step,
xIsNext: (step % 2) === 0
});
}


const current = history[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={() => jumpTo(move)}>{desc}</button>
</li>
);
});

let status;
if (winner) {
status = "Winner: " + winner;
} else {
status = "Next player: " + (xIsNext ? "X" : "O");
}

return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onClick={i => handleClick(i)}
/>
</div>
<div className="game-info">
<div>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);


}

// ========================================

ReactDOM.render(, document.getElementById("root"))


Related Solutions

Write a program that plays tic-tac-toe. The tic-tac-toe game is played on a 3 × 3...
Write a program that plays tic-tac-toe. The tic-tac-toe game is played on a 3 × 3 grid as shown below: The game is played by two players, who take turns. The first player marks moves with a circle, the second with a cross. The player who has formed a horizontal, vertical, or diagonal sequence of three marks wins. Your program should draw the game board, ask the user for the coordinates of the next mark (their move), change the players...
How to make tic tac toe game in javascript with vue.js
How to make tic tac toe game in javascript with vue.js
The objective of this assignment is to implement the tic-tac-toe game with a C program. The...
The objective of this assignment is to implement the tic-tac-toe game with a C program. The game is played by two players on a board defined as a 5x5 grid (array). Each board position can contain one of two possible markers, either ‘X’ or ‘O’. The first player plays with ‘X’ while the second player plays with ‘O’. Players place their markers in an empty position of the board in turns. The objective is to place 5 consecutive markers of...
How to make a 2D array Tic Tac Toe game in C?
How to make a 2D array Tic Tac Toe game in C?
Game of Tic Tac Toe with the following conditions A point system where a  move that leads...
Game of Tic Tac Toe with the following conditions A point system where a  move that leads to a winning game is given 1 point, a move that leads to a tie is given 0 point, and a  lead to a losing game will get -1 point. Grid size of 5x5 A timer that can be set for how long a game can be played 5 symbols in a row to get a point Connected lines cannot be crossed (No diagonal lines)...
Write a class (and a client class to test it) that encapsulates a tic-tac-toe board. A...
Write a class (and a client class to test it) that encapsulates a tic-tac-toe board. A tic-tac-toe board looks like a table of three rows and three columns partially or completely filled with the characters X and O. At any point, a cell of that table could be empty or could contain an X or an O. You should have one instance variable, a two-dimensional array of values representing the tic-tac-toe board. This game should involve one human player vs....
Write a class (and a client class to test it) that encapsulates a tic-tac-toe board. A...
Write a class (and a client class to test it) that encapsulates a tic-tac-toe board. A tic-tac-toe board looks like a table of three rows and three columns partially or completely filled with the characters X and O. At any point, a cell of that table could be empty or could contain an X or an O. You should have one instance variable, a two-dimensional array of values representing the tic-tac-toe board. This game should involve one human player vs....
In a game of tic tac toe. How do you check if all the positions in...
In a game of tic tac toe. How do you check if all the positions in a double array are taken, the double arrays are used to store the x's and o's?
please create a tic tac toe game with python using only graphics.py library
please create a tic tac toe game with python using only graphics.py library
If you were to write a game of tic-tac-toe, you may store the representation of the...
If you were to write a game of tic-tac-toe, you may store the representation of the game board as a two dimensional list such as   [['X', '', 'X'], ['O', 'X', ''], ['', 'O', 'X']] where each sublist is a row in the board.   Empty strings ('') denote a space that does not yet have a value. Assuming this representation, write functions (contained in the same file) that do the following: a) Create a new empty tic-tac-toe board. This function should...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT