Learn how to build a multiplayer chess game with React

Helo dan selamat datang! ??

Hari ini saya membawakan tutorial untuk membimbing anda membina permainan catur berbilang pemain menggunakan SuperViz. Permainan berbilang pemain memerlukan penyegerakan masa nyata dan interaksi antara pemain, menjadikannya aplikasi ideal untuk keupayaan SuperViz.

Tutorial ini akan menunjukkan kepada anda cara mencipta permainan catur di mana dua pemain boleh bermain menentang satu sama lain dalam masa nyata, melihat pergerakan satu sama lain semasa ia berlaku.

Kami akan menunjukkan cara menyediakan papan catur menggunakan perpustakaan papan catur bertindak balas, mengurus keadaan permainan dengan chess.js dan menyegerakkan pergerakan pemain dengan SuperViz. Persediaan ini membolehkan berbilang peserta menyertai permainan catur, bergerak dan mengalami persekitaran permainan catur yang lancar dan interaktif. Jom mulakan!

---

Prasyarat

Untuk mengikuti tutorial ini, anda memerlukan akaun SuperViz dan token pembangun. Jika anda sudah mempunyai akaun dan token pembangun, anda boleh meneruskan ke langkah seterusnya.

Buat Akaun

Untuk membuat akaun, pergi ke Pendaftaran SuperViz dan buat akaun menggunakan sama ada Google atau e-mel/kata laluan. Adalah penting untuk ambil perhatian bahawa apabila menggunakan e-mel/kata laluan, anda akan menerima pautan pengesahan yang perlu anda klik untuk mengesahkan akaun anda.

Mendapatkan semula Token Pembangun

Untuk menggunakan SDK, anda perlu menyediakan token pembangun, kerana token ini penting untuk mengaitkan permintaan SDK dengan akaun anda. Anda boleh mendapatkan kedua-dua pembangunan dan pengeluaran token SuperViz daripada papan pemuka. Salin dan simpan token pembangun, kerana anda memerlukannya dalam langkah seterusnya dalam tutorial ini.

---

Langkah 1: Sediakan Aplikasi React Anda

Untuk bermula, anda perlu menyediakan projek React baharu di mana kami akan menyepadukan SuperViz.

1. Buat Projek React Baharu

Mula-mula, buat aplikasi React baharu menggunakan Create React App dengan TypeScript.

npm create vite@latest chess-game -- --template react-ts
cd chess-game

2. Pasang Perpustakaan yang Diperlukan

Seterusnya, pasang perpustakaan yang diperlukan untuk projek kami:

npm install @superviz/sdk react-chessboard chess.js uuid

• @superviz/sdk: SDK untuk menyepadukan ciri kerjasama masa nyata, termasuk penyegerakan.
• papan catur bertindak balas: Pustaka untuk memaparkan papan catur dalam aplikasi React.
• catur.js: Perpustakaan untuk mengurus logik dan peraturan permainan catur.
• uuid: Pustaka untuk menjana pengecam unik, berguna untuk mencipta ID peserta unik.

3. Konfigurasikan tailwind

Dalam tutorial ini, kami akan menggunakan rangka kerja css Tailwind. Mula-mula, pasang pakej tailwind.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Kami kemudiannya perlu mengkonfigurasi laluan templat. Buka tailwind.config.js dalam akar projek dan masukkan kod berikut.

/** @type  {import('tailwindcss').Config} */
export  default  {
content:  [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme:  {
extend:  {},
},
plugins:  [],

}

Kemudian kita perlu menambah arahan tailwind pada fail CSS global. (src/index.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Sediakan Pembolehubah Persekitaran

Buat fail .env dalam akar projek anda dan tambahkan kunci pembangun SuperViz anda. Kunci ini akan digunakan untuk mengesahkan aplikasi anda dengan perkhidmatan SuperViz.

VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

---

Langkah 2: Laksanakan Aplikasi Utama

Dalam langkah ini, kami akan melaksanakan logik aplikasi utama untuk memulakan SuperViz dan mengendalikan pergerakan catur masa nyata.

1. Laksanakan Komponen Apl

Buka src/App.tsx dan sediakan komponen aplikasi utama menggunakan SuperViz untuk mengurus persekitaran kolaboratif.

import  { v4 as generateId }  from  'uuid';
import  { useCallback, useEffect, useRef, useState }  from  "react";
import SuperVizRoom,  { Realtime, RealtimeComponentEvent, RealtimeMessage, WhoIsOnline }  from  '@superviz/sdk';
import  { Chessboard }  from  "react-chessboard";
import  { Chess, Square }  from  'chess.js';

Penjelasan:

• Import: Import komponen yang diperlukan daripada React, SuperViz SDK, react-chessboard, chess.js dan UUID untuk mengurus keadaan, memulakan SuperViz, memaparkan papan catur dan menjana pengecam unik.

2. Tentukan Pemalar

Tentukan pemalar untuk kunci API, ID bilik dan ID pemain.

const apiKey =  import.meta.env.VITE_SUPERVIZ_API_KEY  as  string;
const  ROOM_ID  =  'chess-game';
const  PLAYER_ID  =  generateId();

Penjelasan:

• apiKey: Mendapatkan semula kunci API SuperViz daripada pembolehubah persekitaran.
• BILIK_ID: Mentakrifkan ID bilik untuk sesi SuperViz.
• PLAYER_ID: Menjana ID pemain unik menggunakan pustaka uuid.

3. Tentukan Jenis Mesej Catur

Buat jenis untuk mengendalikan mesej gerak catur.

type  ChessMessageUpdate  = RealtimeMessage &  {
 data:  {
     sourceSquare: Square;
     targetSquare: Square;
  };
};

Penjelasan:

• ChessMessageUpdate: Memanjangkan RealtimeMessage untuk memasukkan sumber dan petak sasaran untuk gerakan catur.

4. Cipta Komponen Apl

Sediakan komponen Apl utama dan mulakan pembolehubah keadaan.

export  default  function  App()  {
    const  [initialized, setInitialized]  =  useState(false);
    const  [gameState, setGameState]  =  useState<Chess>(new  Chess());
    const  [gameFen, setGameFen]  =  useState<string>(gameState.fen());

    const channel =  useRef<any  |  null>(null);

Penjelasan:

• initialized: A state variable to track whether the SuperViz environment has been set up.
• gameState: A state variable to manage the chess game state using the chess.js library.
• gameFen: A state variable to store the FEN (Forsyth-Edwards Notation) string representing the current game position.
• channel: A ref to store the real-time communication channel.

5. Initialize SuperViz and Real-Time Components

Create an initialize function to set up the SuperViz environment and configure real-time synchronization.

const initialize = useCallback(async () => {
    if (initialized) return; 
    const superviz = await SuperVizRoom(apiKey, { 
    roomId: ROOM_ID, 
    participant: { 
        id: PLAYER_ID, 
        name: 'player-name', 
    }, 
    group: { 
        id: 'chess-game', 
        name: 'chess-game', 
    } 
}); 

const realtime = new Realtime(); 
const whoIsOnline = new WhoIsOnline(); 

superviz.addComponent(realtime); 
superviz.addComponent(whoIsOnline); 

setInitialized(true); 

realtime.subscribe(RealtimeComponentEvent.REALTIME_STATE_CHANGED, () => { 
    channel.current = realtime.connect('move-topic'); 
    channel.current.subscribe('new-move', handleRealtimeMessage); 
    }); 
}, [handleRealtimeMessage, initialized]);

Explanation:

• initialize: An asynchronous function that initializes the SuperViz room and checks if it's already initialized to prevent duplicate setups.
• SuperVizRoom: Configures the room, participant, and group details for the session.
• Realtime Subscription: Connects to the move-topic channel and listens for new moves, updating the local state accordingly.

6. Handle Chess Moves

Create a function to handle chess moves and update the game state.

const makeMove = useCallback((sourceSquare: Square, targetSquare: Square) => { 
    try { 
        const gameCopy = gameState; 
        gameCopy.move({ from: sourceSquare, to: targetSquare, promotion: 'q' }); 

        setGameState(gameCopy); 
        setGameFen(gameCopy.fen()); 

        return true; 
    } catch (error) { 
        console.log('Invalid Move', error); 
        return false; 
    }
}, [gameState]);

Explanation:

• makeMove: Attempts to make a move on the chessboard, updating the game state and FEN string if the move is valid.
• Promotion: Automatically promotes a pawn to a queen if it reaches the last rank.

7. Handle Piece Drop

Create a function to handle piece drop events on the chessboard.

const onPieceDrop = (sourceSquare: Square, targetSquare: Square) => { 
    const result = makeMove(sourceSquare, targetSquare); 

    if (result) { 
        channel.current.publish('new-move', { 
            sourceSquare, 
            targetSquare, 
        });
    } 
     return result; 
};

Explanation:

• onPieceDrop: Handles the logic for when a piece is dropped on a new square, making the move and publishing it to the SuperViz channel if valid.

8. Handle Real-Time Messages

Create a function to handle incoming real-time messages for moves made by other players.

const handleRealtimeMessage =  useCallback((message: ChessMessageUpdate)  =>  {
  if  (message.participantId ===  PLAYER_ID)  return;

  const  { sourceSquare, targetSquare }  = message.data;
  makeMove(sourceSquare, targetSquare);
},  [makeMove]);

Explanation:

• handleRealtimeMessage: Listens for incoming move messages and updates the game state if the move was made by another participant.

9. Use Effect Hook for Initialization

Use the useEffect hook to trigger the initialize function on component mount.

useEffect(()  =>  {
  initialize();
},  [initialize]);

Explanation:

• useEffect: Calls the initialize function once when the component mounts, setting up the SuperViz environment and real-time synchronization.

10. Render the Application

Return the JSX structure for rendering the application, including the chessboard and collaboration features.

return ( 
    <div className='w-full h-full bg-gray-200 flex items-center justify-center flex-col'>
        <header className='w-full p-5 bg-purple-400 flex items-center justify-between'> 
            <h1 className='text-white text-2xl font-bold'>SuperViz Chess Game</h1> 
        </header> 
        <main className='w-full h-full flex items-center justify-center'> 
            <div className='w-[500px] h-[500px] shadow-sm border-2 border-gray-300 rounded-md'>
                <Chessboard position={gameFen} onPieceDrop={onPieceDrop} /> 
                <div className='w-[500px] h-[50px] bg-gray-300 flex items-center justify-center'> 
                    <p className='text-gray-800 text-2xl font-bold'>Turn: {gameState.turn() === 'b' ? 'Black' : 'White'}</p> 
                </div> 
            </div> 
        </main> 
    </div>
);

Explanation:

• Header: Displays the title of the application.
• Chessboard: Renders the chessboard using the Chessboard component, with gameFen as the position and onPieceDrop as the event handler for piece drops.
• Turn Indicator: Displays the current player's turn (Black or White).

---

Step 3: Understanding the Project Structure

Here's a quick overview of how the project structure supports a multiplayer chess game:

1. App.tsx
   • Initializes the SuperViz environment.
   • Sets up participant information and room details.
   • Handles real-time synchronization for chess moves.
2. Chessboard
   • Displays the chessboard and manages piece movements.
   • Integrates real-time communication to synchronize moves between players.
3. Chess Logic
   • Uses chess.js to manage game rules and validate moves.
   • Updates the game state and FEN string to reflect the current board position.

---

Step 4: Running the Application

1. Start the React Application

To run your application, use the following command in your project directory:

npm run dev

This command will start the development server and open your application in the default web browser. You can interact with the chessboard and see moves in real-time as other participants join the session.

2. Test the Application

• Real-Time Chess Moves: Open the application in multiple browser windows or tabs to simulate multiple participants and verify that moves made by one player are reflected in real-time for others.
• Collaborative Interaction: Test the responsiveness of the application by making moves and observing how the game state updates for all participants.

---

Summary

In this tutorial, we built a multiplayer chess game using SuperViz for real-time synchronization. We configured a React application to handle chess moves, enabling multiple players to collaborate seamlessly on a shared chessboard. This setup can be extended and customized to fit various scenarios where game interaction is required.

Feel free to explore the full code and further examples in the GitHub repository for more details.

The above is the detailed content of Learn how to build a multiplayer chess game with React. For more information, please follow other related articles on the PHP Chinese website!