Tic-Tac-Toe on Solana

This project demonstrates how to use the Solana Javascript API to build, deploy, and interact with programs on the Solana blockchain, implementing an interactive tic-tac-toe game between two users. To see the final product, go to https://solana-example-tictactoe.herokuapp.com/ and wait for another player to join. (Simply direct a second browser window to the web app to play against yourself.)

The project comprises:

The on-chain Tic-Tac-Toe program, a BPF program written in C: program-bpf/
Easy program build and deployment using the @solana/web3.js library
Command-line and web front-end: src/

Getting Started

First fetch the npm dependencies, including @solana/web3.js, by running:

$ npm install

Select a Network

The example connects to a local Solana network by default.

To start a local Solana network run:

$ npx solana-localnet update
$ npm run localnet:up

Solana network logs are available with:

$ npx solana-localnet logs -f

For more details on working with a local network, see the full instructions.

Alternatively to connect to the public testnet, export LIVE=1 in your environment before running a front-end.

Build the BPF C program

$ V=1 make -C program-bpf

$ npm run build:bpf

Compiled files can be found in dist/program. Compiler settings are configured in the Solana SDK

Run the Command-Line Front End

After building the program,

$ npm run start

This script uses the Solana Javascript API BpfLoader to deploy your Tic-Tac-Toe program to the blockchain. Once the deploy transaction is confirmed on the chain, the script calls the program to instantiate a new dashboard to track your open and completed games (findDashboard), and starts a new game (dashboard.startGame), waiting for an opponent.

To play the game, open a second terminal and again run the npm run start script.

To see the program or game state on the blockchain, send a getAccountInfo JSON-RPC request to the cluster, using the id printed by the script, eg.:

Dashboard programId: HFA4x4oZKWeGcRVbUYaCHM59i5AFfP3nCfc4NkrBvVtP
Dashboard: HmAEDrGpsRK2PkR51E9mQrKQG7Qa3iyv4SvZND9uEkdR
Advertising our game (Gx1kjBieYgaPgDhaovzvvZapUTg5Mz6nhXTLWSQJpNMv)

Run the WebApp Front End

After building the program,

$ npm run dev

This script deploys the program to the blockchain, and also boots up a local webserver for game play.

To instantiate a dashboard and game, open your browser to http://localhost:8080/.

Customizing the Program

To customize Tic-Tac-Toe, make changes to the program in program-bpf/src and rebuild. Now when you run npm run start, you should see your changes.

To deploy a program with a different name, edit src/server/config.js.

sunnygleason / example-tictactoe