sahishnu / nyu-chess-frontend Goto Github PK

Clone the repo

https://github.com/sahishnu/nyu-chess-frontend.git

Install dependencies

npm i

Run the dev server

npm run dev

To run a local network, we must run the hardhat node from our dApp repo - nyu-eth-chess.

Follow the setup instructions there. And from the repo run:

npx hardhat node

To interact with or deploy a solidity contract from our application, we need the compiled contracts ABI and byte code. This is found in the solidity projects artifacts/contracts/<ContractName>/<ContractName>.json file. This is generated by running the npx hardhat compile command in the solidity project. You may need to run npx hardhat clean to delete the old artifact and generate a new artifact.

Copy the ABI to the assets/abi.json in this repo.

Copy the byte code to the assets/byteCode.ts in this repo.

This deploys a contract to the network. The contract requires the user to provide a wager amount (as the msg.value) and the timeout length. The player that deploys the contract will be player1 and will play as WHITE.

This joins a player to the game as player 2. The player must provide the correct wager amount that matches player 1's wager as the msg.value. Player 2 will play as BLACK.

The Chess board GUI acts as a helper for players to see the current state of the board, make a valid move and export the state of the board as in PGN format (e.g. '1. d3 e6 2. Qd2 Qg5 3. Qxg5 Bd6 4. Qf4')

A player can paste the PGN string into the input box and click Load moves (PGN). This will apply the list of moves to the chess board.

The chess board should show an arrow indicating the last move made, the current player turn, and allow the user to make a valid move by dragging and dropping a piece.

When the player makes a move, the current state of the board is shown in PGN format (e.g. '1. d3 e6 2. Qd2 Qg5 3. Qxg5 Bd6 4. Qf4'). The player can paste this into the ENCODE MESSAGE form when constructing a message.

A form is provided to help the player construct and sign a valid message. The valid message contains:

1. The opponents public address (address)
2. The chess pgn string containing the move the player made (string)
3. The move number (uint256)
4. The address of the contract on the network, which identifies the game itself (address)

This message should be signed by the player. When sending the signed message to the player, all of the un-encoded field values should also be sent to the opponent so they can verify the contents of the message against your public key.

A form is provided to help the player decode and verify the contents of a message from their opponent. The decoded message unpacks the fields listed above. The PGN string from the decoded message can be used to load the current board state before making a move.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list