How to build a Tic Tac Toe game on Calimero

This beginner tutorial will guide you through the process of creating a Tic Tac Toe decentralized application (dApp) using the Calimero network. You'll learn how to set up your environment, build a smart contract, deploy it to the Calimero shard, and interact with the dApp.

Prerequisites

Before you begin, make sure you have the following prerequisites:

• Set up your Calimero private shard.
• Install a code editor like VSCode.
• Install the NEAR CLI tool.
• Install Node.js and npm on your machine.
• Set up the Rust and WebAssembly (WASM) toolchain.

Step 1: Build the Smart Contract

1. Clone the Calimero examples repository by running the following command in your terminal:

git clone https://github.com/calimero-is-near/calimero-examples

2. Navigate to the tic-tac-toe folder and then the contracts/calimero-tictactoe directory:

cd calimero-examples/tic-tac-toe/contracts/calimero-tictactoe

3. Compile the Rust smart contract to WebAssembly (WASM) by running the build script:

./build.sh

Once the compilation is complete, you'll find the compiled .wasm file of the contract at: target/wasm32-unknown-unknown/release/tictactoe.wasm.

Step 2: Generate an Auth Token

Before deploying the Tic Tac Toe game, you need to generate a Calimero auth token. This token will authenticate and authorize external applications to communicate with your shard.

Follow the steps provided here to generate an auth token for your Calimero shard.

Step 3: Set up the NEAR CLI

To interact with your Calimero shard using NEAR CLI, you need to set the token value using the near set-api-key command.

Follow the steps provided here to set up the NEAR CLI.

Step 4: Create a Keypair

A keypair for a shard account consists of a public key and a corresponding private key. To generate a new keypair for the shard account, follow these steps:

1. Set the SHARD_ID environment variable in your command-line interface:

export SHARD_ID="your_shard_name"

Make sure to replace "your_shard_name" with the name of your shard.

2. Run the near generate-key command to generate a key for your shard:

near generate-key $SHARD_ID.calimero.testnet --networkId $SHARD_ID-calimero-testnet

3. Navigate to the ~/.near-credentials/ folder to locate the generated keypair file in .json format. Alternatively, you can use the following command in your terminal:

cd ~/.near-credentials/network-id/account-id.json

info

Take note of the account_id, private_key, and public_key values from the .json file.

Step 5: Create a Sub Account

Create a sub account that will be used to deploy the previously built contract. This sub account should be created from the Custodial account in the Calimero Console, and the public key obtained from the generated keypair should be added to the sub account.

Follow the steps here to set up the sub account and add the public key.

Step 6: Deploy Your NEAR Contract

To deploy your contract to the private shard, follow these steps:

1. In your cloned repository's directory, open the deploy_calimero.sh file. You'll see this command:

near deploy \
  --accountId "tictactoe.$destination_master_account" \
  --initFunction new --initArgs {} \
  --wasmFile target/wasm32-unknown-unknown/release/tic_tac_toe.wasm \
  --nodeUrl "https://api.calimero.network/api/v1/shards/$shard_id-calimero-testnet/neard-rpc/" \
  --networkId "$shard_id-calimero-testnet"

2. Set the SHARD_ID environment variable in your command-line interface:

export SHARD_ID="your_shard_name"

Make sure to replace "your_shard_name" with the name of your shard.

3. Run the following command in your terminal to deploy the contract:

./deploy_calimero.sh $SHARD_ID

This command will deploy the application to the NEAR contract using the provided parameters.

You can check the deployed contract on the Explorer > Transactions page.

Step 7: Set up Environment Variables

Navigate to the ui folder in the repository. Open the .env.local file and adjust the environment variables based on your setup:

• NEXT_PUBLIC_SHARD_ID: Your Calimero shard ID.
• NEXT_PUBLIC_WALLET_URL: Link to testnet myNearWallet
• NEXT_PUBLIC_CALMERA_URL: RPC endpoint obtained from the Calimero Console dashboard.
• NEXT_PUBLIC_CALMERA_TOKEN: Auth token you generated earlier from the console.
• NEXT_PUBLIC_CONTRACT_ID: Your sub account located under the custodial account.

Step 8: Install Dependencies and Start the Application

1. Open the terminal and navigate to the ui folder.
2. Run the following commands to install the necessary dependencies and start the application on localhost:3000:

yarn install && yarn dev

3. Open your browser and go to localhost:3000 to access the application.

Step 9: Login and Start a New Game

1. In the application, click on Login with NEAR.
2. Select the account associated with the tic-tac-toe account.
3. Wait for the login process to complete.

Note: Two player accounts will be created for this game.

4. Check the transactions to ensure everything synced correctly, including the creation of the accounts on the Calmero shard and the testnet.

Step 10: Create Second Player

1. Open a different browser and click on Login with NEAR.
2. Select the second account associated with the tic-tac-toe account.
3. Wait for the login process to complete.

4. Check the transactions to ensure everything synced correctly, including the creation of the second player account on the Calmero shard and the testnet.

Step 11: Start Playing the Game

1. Go back to the first account and enter the account ID of the player you want to play with (e.g., _simple-tic-tac-toe-2).
2. Click Start New Game.

3. Approve and close the transaction.

4. Similarly, start a new game from the second account and play with the other player (e.g., _simple-tic-tac-toe-1).

5. Approve and close the transaction.

Step 12: View Game Setup

1. You can view the game setup for the first player.

2. And the game setup for the second player.

Step 12: Continue Playing

1. Click Continue Game on both accounts to continue playing.

2. Make your moves on both boards and refresh the pages to see the updated moves.

3. Continue playing until the game finishes, and the winner will be displayed. You can also check the past games section for a full overview of completed games.

Conclusion

Congratulations! You have successfully created a simple tic-tac-toe game with two players on the blockchain using the Calmero private shard. This example demonstrates how smart contracts and blockchain can be implemented into a decentralized application or game.