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:
- The opponents public address (
address
) - The chess pgn string containing the move the player made (
string
) - The move number (
uint256
) - 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
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@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 theextends
list