This guide explains step by step how to enhance your completed tic-tac-toe game using components, styles, and how to distribute your game.
- 1. Stage 1: Time Travel
- 2. Stage 2: Componentization
- 3. Stage 3: Player Names and Avatars
- 4. Stage 4: Styling
- 5. Stage 5: Distribution
Rename handleClick in Square to onSquareClick to clarify that the logic for updating state lives at a higher level (Board and ultimately Game).
function Square({ value, onSquareClick }) {
return (
<button className="square" onClick={onSquareClick}>
{value}
</button>
);
}Add a new props to Board to allow a new Game component to manage the game state. This will allow the time travel component to also have access to the game state.
function Board({ xIsNext, squares, onPlay }) {Update handleClick to use the newly passed in onPlay function to tell the parent component what changes to make to the board. This is needed because the parent component is now managing the game state. Do this by replacing the setSquares and setXIsNext calls with onPlay
function handleClick(index) {
//...
const nextSquares = squares.slice();
if (xIsNext) {
nextSquares[index] = 'X';
} else {
nextSquares[index] = 'O';
}
// Hand off the new squares state to the parent
onPlay(nextSquares);
}Update the Square component declarations in the return statement of Board to use the new prop name onSquareClick
<Square value={squares[0]} onSquareClick={() => handleClick(0)} />Now that we have prepared Square and Board, it is time to create a new parent component that will manage the game state. We will name this component Game.
function Game() {
//...
}Remove the useState calls from the top of Board and add new ones to Game.
const [history, setHistory] = useState([Array(9).fill(null)]);
const [currentMove, setCurrentMove] = useState(0);
const xIsNext = currentMove % 2 === 0;
const currentSquares = history[currentMove];Create the functions handlePlay and jumpTo inside Game.
// Called when a new move is made
function handlePlay(nextSquares) {
const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
setHistory(nextHistory);
setCurrentMove(nextHistory.length - 1);
} // Jump to a particular point in the game’s history
function jumpTo(nextMove) {
setCurrentMove(nextMove);
}Add code to calculate the time travel state and components to Game.
// Render a list of moves for time travel
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = 'Go to move #' + move;
} else {
description = 'Go to game start';
}
return (
<li key={move}>
<button onClick={() => jumpTo(move)}>{description}</button>
</li>
);
});Move calculateWinner from Board to be beneath Game.
Finally add the jsx return statement to Game.
return (
<div className="game">
<div className="game-board">
{/* Pass the necessary props to Board */}
<Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
</div>
<div className="game-info">
<ol>{moves}</ol>
</div>
</div>
);Don't forget to export our new component as default instead of Board.
export default Game;Save and test in the browser.
Splitting the Code into Multiple Components
- What's changing? Instead of keeping the
Board,Square, status display, and time travel buttons all in one or two files, each piece will now be in its own component file:Board.jsx,Square.jsx,Status.jsx,TimeControl.jsx, andTimeControlButton.jsx. - Why? This separation makes the code more modular, easier to maintain, and simpler to reuse or modify without affecting the entire application.
Create a new folder named components.
src/
components/
Board.jsx
Square.jsx
Status.jsx
TimeControl.jsx
TimeControlButton.jsx
App.jsx
index.js
Note: The code for each new component (e.g.,
Board.jsx,Square.jsx, etc.) will be provided separately. Make sure to remove or update any old code from Stage 1 so it doesn’t conflict with the new component-based structure.
import { useState } from 'react';
import Board from "./components/Board";
import TimeControl from './components/TimeControl';
function Game() {
const [history, setHistory] = useState([Array(9).fill(null)]);
const [currentMove, setCurrentMove] = useState(0);
const xIsNext = currentMove % 2 === 0;
const currentSquares = history[currentMove];
function handlePlay(nextSquares) {
const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
setHistory(nextHistory);
setCurrentMove(nextHistory.length - 1);
}
return (
<div className="game">
<Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
<TimeControl history={history} setMove={setCurrentMove} />
</div>
);
}
export default Game;function Square({ value, onSquareClick }) {
return (
<button className="square" onClick={onSquareClick}>
{value}
</button>
);
}
export default Square;import Status from "./Status"
import Square from "./Square"
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 Board({ xIsNext, squares, onPlay }) {
function handleClick(index) {
if (calculateWinner(squares) || squares[index]) {
return;
}
const nextSquares = squares.slice();
if (xIsNext) {
nextSquares[index] = 'X';
} else {
nextSquares[index] = 'O';
}
onPlay(nextSquares);
}
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
}
return (
<div className="game-board">
<Status status={status}></Status>
<div className="board-row">
<Square value={squares[0]} onSquareClick={() => handleClick(0)} />
<Square value={squares[1]} onSquareClick={() => handleClick(1)} />
<Square value={squares[2]} onSquareClick={() => handleClick(2)} />
</div>
<div className="board-row">
<Square value={squares[3]} onSquareClick={() => handleClick(3)} />
<Square value={squares[4]} onSquareClick={() => handleClick(4)} />
<Square value={squares[5]} onSquareClick={() => handleClick(5)} />
</div>
<div className="board-row">
<Square value={squares[6]} onSquareClick={() => handleClick(6)} />
<Square value={squares[7]} onSquareClick={() => handleClick(7)} />
<Square value={squares[8]} onSquareClick={() => handleClick(8)} />
</div>
</div>
);
}
export default Board;function Status({ status }) {
return <div className="status">{status}</div>
}
export default Statusimport TimeControlButton from "./TimeControlButton";
function TimeControl({ history, setMove }) {
return (
<div className="game-info">
<ol>{history.map((i, move) => <TimeControlButton key={i} jumpTo={setMove} move={move} />)}</ol>
</div>
);
}
export default TimeControl;function TimeControlButton({ move, jumpTo }) {
let description;
if (move > 0) {
description = 'Go to mnove #' + move;
} else {
description = 'Go to game start';
}
return (
<li key={move}>
<button onClick={() => jumpTo(move)}>{description}</button>
</li>
);
}
export default TimeControlButton;Now that our code has been broken into distinct files for each component we will continue adding new features.
Save and test in the browser.
Create the following files in the component folder: Game.jsx, Roster.jsx, RosterItem.jsx, and StartScreen.jsx.
First move Game and the imports out of App.jsx and into its own file. This will leave App.jsx empty. Make sure to update the import paths.
Next create components for the player list and list items.
import RosterItem from "./RosterItem";
function Roster({ names }) {
return (
<div className="roster">
<ol>
{names.map((name, index) => <RosterItem key={index} name={name} />)}
</ol>
</div>
)
}export default Roster;function RosterItem({name}){
const url = "https://api.dicebear.com/9.x/adventurer/svg?seed=" + name
return (
<li>
<img width={100} src={url}></img>
<span>{name}</span>
</li>
);
}export default RosterItem;Create a new main menu component file named StartScreen
import { useState } from "react";
function StartScreen({setPlayers}){
//...
}
export default StartScreen;Add the state.
const [ p1Name, setP1Name ] = useState("")
const [ p2Name, setP2Name ] = useState("")
const [ status, setStatus ] = useState("Please enter the players names.")Add the jsx return statement.
return (
<div>
<div>{status}</div>
<div><input placeholder="Player 1" value={p1Name} onChange={(e)=>setP1Name(e.target.value)}></input></div>
<div><input placeholder="Player 2" value={p2Name} onChange={(e)=>setP2Name(e.target.value)}></input></div>
<button type="submit" onClick={(e)=> {
e.preventDefault();
if(p1Name.length != 0){
if(p2Name.length != 0){
setPlayers([p1Name, p2Name])
} else {
setStatus("Please enter a name for player 2")
}
} else {
setStatus("Please enter a name for player 1")
}
}}>Start Game</button>
</div>
);Update App.jsx to use the new StartScreen component and the recently moved Game component
import { useState } from "react";
import Game from "./components/Game"
import StartScreen from "./components/StartScreen"
function App() {
//...
}
export default App;Add state.
const [ players, setPlayers ] = useState(null);Add the jsx. Notice that it switches between the game and start screen based on the presence of the players names.
let output
if (players != null){
output = <Game players={players}></Game>
} else {
output = <StartScreen setPlayers={setPlayers}></StartScreen>
}
return output;Next add the player roster to Game.
function Game({players}) {<Roster names={players}></Roster>- Add a background color to the screen and game board styles.
- Add a minimum width to the board row styles.
- Create styling for the start screen.
body {
font-family: sans-serif;
margin: 20px;
padding: 0;
background-color: cadetblue;
}.board-row:after {
clear: both;
content: '';
display: table;
min-width: 100px;
}.game {
background-color: aliceblue;
padding: 2em;
margin: 0 auto;
max-width: 750px;
display: grid;
grid-template-columns: auto auto auto;
border-radius: 15px;
}.startScreen {
background-color: aliceblue;
padding: 2em;
margin: 0 auto;
max-width: 750px;
border-radius: 15px;
}Feel free to continue tweaking the game code to your liking. Add features and styles to make it yours
- Challenge: Update the code to allow the computer to play with you.
Finally when you are finished with development and are ready to distribute the game, simply run:
npm run buildThis will create a folder named dist with files that can be uploaded to a web server