Intro In this article we are going to create a chess game with React. I based this article off of another article that I read recently by Varun Pujari. Here's the to that if you want to check it out. link We'll use a package called , which will give us an easy way to display the chess game. On top of that we will use the library to implement moves and how the game should be played. chessboardjsx chess.js This chess game will have one player playing against an AI that will make a random move for every turn. Lastly, we will add a timer to our chess game so we can time how fast we beat the AI! Setup Setup is pretty simple. First, we'll run a couple commands in the terminal/command prompt to get everything installed. Run . You can also run but yarn worked better for me. I was getting an error saying my create-react-app was out of date. Every time I would uninstall and try to run the npx command I would get the same out of date error. So yarn was what I went with. yarn create react-app chess-game --template typescript npx create-react-app chess-game --template typescript Next we'll install with this command. chessboard.jsx yarn add chessboardjsx Now let's install the brains of the game. Run . This package is what we will use for the AI logic. yarn add chess.js Since we are also using typescript we have to add types for . We can do this by running . chess.js yarn add @types/chess.js Lastly, I was thinking it would be cool to add a timer to this game so we can see how long the game took. Let's set that up by running . yarn add react-compound-timer Code Now for the fun part, the actual code behind the game. Below you will find the code for the only file you'll need to edit in this project, the file. I've tried to comment on the main parts so it's easier to understand what is going on. App.tsx import React, { useState } from ;
import ;
import Timer from ; import Chessboard from ; { ChessInstance, ShortMove } from ;

const Chess = require( );

const paddingStyle = { }

const marginStyle = { }

const App: React.FC = () => {
  const [chess] = useState ( new Chess( )
  );

  const [fen, setFen] = useState(chess.fen()); const handleMove = (move: ShortMove) => { if (chess.move(move)) {
      setTimeout(() => {
        const moves = chess.moves(); if (moves.length > ) {
          const computerMove = moves[Math.floor(Math.random() * moves.length)];
          chess.move(computerMove);
          setFen(chess.fen());
        }
      }, ); setFen(chess.fen());
    }
  };

  return ( Random Chess Game handleMove({ move.sourceSquare, move.targetSquare, ,
          })
        }
      />
      { } { }
        {({ start, resume, pause, stop, reset, timerState } : {start:any, resume:any, pause:any, stop:any, reset:any, timerState:any}) => ( minutes seconds milliseconds {timerState} Start Pause Resume Stop Reset )} );
};

export default App; "react" "./App.css" "react-compound-timer" // Lines 5-8: Bring in chessboard and chess.js stuff "chessboardjsx" import "chess.js" "chess.js" padding: 5 margin: 5 <ChessInstance> // Set initial state to FEN layout "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" // Logic for the setting up the random computer move. // Line 29 validates the user move. // Lines 33-28: Computer random move. 0 300 // Sets state of chess board <div className="flex-center"> <h1> </h1> <Chessboard
        width={ }
        position={fen}
        // onDrop prop tracks everytime a piece is moved.
        // The rest is handled in the the handleMove function.
        onDrop={(move) => 400 from: to: // This promotion attribute changes pawns to a queen if they reach the other side of the board. promotion: "q" /* Timer code */ <Timer initialTime={ } startImmediately={false}> 0 /* I thought this was weird. Definitely a better way to do this, but I just wanted it to work. */ <> <div> <span style={paddingStyle}> <Timer.Minutes /> </span> <span style={paddingStyle}> <Timer.Seconds /> </span> <span style={paddingStyle}> <Timer.Milliseconds /> </span> </div> <div style={paddingStyle}> </div> <br /> <div> <button style={marginStyle} onClick={start}> </button> <button style={marginStyle} onClick={pause}> </button> <button style={marginStyle} onClick={resume}> </button> <button style={marginStyle} onClick={stop}> </button> <button style={marginStyle} onClick={reset}> </button> </div> </> </Timer> </div> Once you have updated your file to look like this you should be able to run your project with and play chess against an AI that you created. Don't forget to start the timer and see how quick you can win! App.tsx yarn start FEN (Forsyth-Edwards Notation) One thing I thought was really interesting about this project was , or FEN. It is the notation that describes a chess position. You'll notice it being used on line 21 of the code. It stood out to me because when I first saw it I was certain it was just a bunch of gibberish. Forsyth-Edwards Notation App.tsx Can you figure out what the letters on the initial starting state of the Forsyth-Edwards Notation mean? I'm sure you'll pick it up quick, but if you need a hint, it has to do with names of the pieces on the chess board. Conclusion Welp, that’s about it. Pretty short and simple. I hope you enjoyed making this chess game and hopefully have more fun playing it. If you want a little bit of extra credit, try deploying this out online somewhere and see how fast your friends and family can beat the AI. I would recommend deploying it to Netlify. That's my go to hosting service. Like always, happy coding! Love y'all. Peace. Also published on: https://dev.to/tyry327/create-a-chess-game-with-react-and-chessboardjsx-214e

BUNCH

The Coder's Gambit: Create a Chess Game with React and Chessboardjsx

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Primer on Data Scraping

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

Darwin's Hybrid Intelligence to Align AI & Human Goals for Startups & VCs

The Noonification: White Man (11/26/2022)

The Noonification: The Metaverse is a Sh*tshow (11/2/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

A Quick Primer on Data Scraping

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

Darwin's Hybrid Intelligence to Align AI & Human Goals for Startups & VCs

The Noonification: White Man (11/26/2022)

The Noonification: The Metaverse is a Sh*tshow (11/2/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps