Hello, fellow developers! Today, I’m thrilled to guide you through creating a decentralized Tic Tac Toe game using Stackr Labs and Micro Rollups (MRUs). This guide will take you through each step, from setting up your project to deploying your game on the blockchain. Let’s get started!

Stackr Labs gives your dapp a turbo boost! With Micro-Rollups (MRUs), helps developers build fast, scalable apps. Think of it like preparing food at home for a trip—most of the work happens off-chain, ensuring a smoother experience on the blockchain!

1. Prerequisites

2. Setting Up Your Project

3. Creating the State Machine

4. Implementing the Game Logic

5. Frontend Integration

6. Testing Your Game

7. Conclusion

Before we dive in, make sure you have the following tools installed:

• Node.js: Download and install from Node.js

• Git: Download and install from Git

• Bun: Installation guide can be found here

• Stackr CLI: Install globally using:

  bun install -g @stackr/cli
  

mkdir tic-tac-toe
cd tic-tac-toe

bunx @stackr/cli@latest init

You can use the following .env values:

# PRIVATE_KEY is the hex-encoded private key of the Ethereum address that will act as the rollup operator.
PRIVATE_KEY= --YOUR DEVELOPMENT PRIVATE KEY--

# L1_RPC is the RPC endpoint of the L1 chain. Can be found in the network config docs above.
L1_RPC=https://rpc2.sepolia.org/

# VULCAN_RPC is the RPC endpoint of the Vulcan network. Can be found in the network config docs above.
VULCAN_RPC=https://sepolia.vulcan.stf.xyz/

# REGISTRY_CONTRACT is the address of the Stackr registry contract on the L1 chain. Can be found in the network config docs above.
REGISTRY_CONTRACT=0x985bAfb3cAf7F4BD13a21290d1736b93D07A1760

# DATABASE_URI is the connection URI of the SQL database.
DATABASE_URI=./db.sqlite

# NODE_ENV is the current environment (production or development). Relevant for express.js server.
NODE_ENV=development

In this section, we’ll define the game state using Stackr’s state management.

import { BytesLike, solidityPackedKeccak256 } from "ethers";
import { State } from "@stackr/sdk/machine";

// Define the structure of a Tic Tac Toe game
interface Game {
  gameId: string;
  owner: string; // Player X's address
  playerO: string; // Player O's address
  board: string[]; // 9 cells represented as a string array
  currentPlayer: "X" | "O";
  winner: "X" | "O" | "Draw" | null;
  startedAt: number;
  endedAt: number | null;
}

// Define the overall application state
export interface AppState {
  games: Record<string, Game>;
}

// Initial state of the application
export const initialState: AppState = {
  games: {},
};

// TicTacToeState class extends the State class from @stackr/sdk
export class TicTacToeState extends State<AppState> {
  constructor(state: AppState) {
    super(state);
  }

  // Generate a root hash of the current state
  // This is used for state verification and integrity checks
  getRootHash(): BytesLike {
    return solidityPackedKeccak256(
      ["string"],
      [JSON.stringify(this.state.games)]
    );
  }
}

• We define an interface Game to represent the state of the Tic Tac Toe game.

• The initialState sets up the initial conditions, including an empty board and the starting player.

• A State instance is created to manage the game state.

Next, we’ll add the logic to handle player moves and check for wins.

import { StateMachine } from "@stackr/sdk/machine";
import { TicTacToeState, initialState } from "./state";
import { transitions } from "./transitions";

// Define the State Machine for Tic Tac Toe
const machine = new StateMachine({
  id: "tic-tac-toe", // Unique identifier for this state machine
  stateClass: TicTacToeState, // The state class used by this machine
  initialState, // Initial state
  on: transitions, // Transitions that can be applied to the state
});

export { machine 

• StateMachine: Initializes the state machine with an ID, state class, initial state, and available transitions.

src/stackr/transitions.ts

Define the possible actions/transitions in the game.

Explanation:

• createGame Transition: Initializes a new Tic Tac Toe game with two players.

• makeMove Transition: Processes a player's move, updates the board, checks for a winner or draw, and switches the current player.

• resetGame Transition: Resets an existing game to its initial state.

Initialize and configure the Stackr Micro-Rollup (MRU) instance.

import { MicroRollup } from "@stackr/sdk";
import { stackrConfig } from "../../stackr.config";
import { machine } from "./machine";

// Create a new MRU instance
const mru = await MicroRollup({
  config: stackrConfig, // Configuration for the MRU
  stateMachines: [machine], // State machines used by the MRU
});

export { mru };

Explanation:

• MicroRollup: Represents the Stackr MRU instance.

• stateMachines: Array of state machines the MRU will manage.

Set up the Express server, define API endpoints, and integrate with Stackr.

Explanation:

• /info Endpoint: Provides information about the MRU's domain and schemas.

• /:reducerName Endpoint: Accepts actions to perform state transitions (e.g., createGame, makeMove, resetGame).

• /games & /games/:gameId Endpoints: Retrieve all games or a specific game respectively.

• CORS: Enabled for all routes to allow cross-origin requests.

• Static Files: Serves the frontend from the public directory.

Create a public directory inside your project root to store frontend files.

mkdir src/public
touch src/public/tic-tac-toe.html

Create the HTML and JavaScript frontend for the Tic Tac Toe game.

• Connect to MetaMask: Requests the user to connect their wallet.

• Deterministic Wallet: Generates a deterministic wallet based on the user's signature to avoid signing every transaction.

• Create Game: Allows the user to create a new game by specifying Player O's Ethereum address.

• Make Move: Enables players to make moves on the board by clicking on empty cells.

• Reset Game: Resets the game to its initial state.

• Fetch Game State: Retrieves the current state of the game to update the UI accordingly.

After setting up the backend and frontend, you can start your development server:

bun start

Open your browser and navigate to http://localhost:3012 to see your Tic Tac Toe game in action!

Congratulations! 🎉 You’ve successfully built a decentralized Tic Tac Toe game using Stackr Labs and Micro Rollups. This project showcases how to manage game state on the blockchain while providing a simple and engaging user interface.

Feel free to extend the game further, add features like multiplayer support, or improve the UI. Happy coding! If you have any questions or need further assistance, please feel free to contact me. You can connect with me on X / Twitter or LinkedIn.

Hello, fellow developers! Today, I’m thrilled to guide you through creating a decentralized Tic Tac Toe game using Stackr Labs and Micro Rollups (MRUs). This guide will take you through each step, from setting up your project to deploying your game on the blockchain. Let’s get started!

Stackr Labs gives your dapp a turbo boost! With Micro-Rollups (MRUs), helps developers build fast, scalable apps. Think of it like preparing food at home for a trip—most of the work happens off-chain, ensuring a smoother experience on the blockchain!

1. Prerequisites

2. Setting Up Your Project

3. Creating the State Machine

4. Implementing the Game Logic

5. Frontend Integration

6. Testing Your Game

7. Conclusion

Before we dive in, make sure you have the following tools installed:

• Node.js: Download and install from Node.js

• Git: Download and install from Git

• Bun: Installation guide can be found here

• Stackr CLI: Install globally using:

  bun install -g @stackr/cli
  

mkdir tic-tac-toe
cd tic-tac-toe

bunx @stackr/cli@latest init

You can use the following .env values:

# PRIVATE_KEY is the hex-encoded private key of the Ethereum address that will act as the rollup operator.
PRIVATE_KEY= --YOUR DEVELOPMENT PRIVATE KEY--

# L1_RPC is the RPC endpoint of the L1 chain. Can be found in the network config docs above.
L1_RPC=https://rpc2.sepolia.org/

# VULCAN_RPC is the RPC endpoint of the Vulcan network. Can be found in the network config docs above.
VULCAN_RPC=https://sepolia.vulcan.stf.xyz/

# REGISTRY_CONTRACT is the address of the Stackr registry contract on the L1 chain. Can be found in the network config docs above.
REGISTRY_CONTRACT=0x985bAfb3cAf7F4BD13a21290d1736b93D07A1760

# DATABASE_URI is the connection URI of the SQL database.
DATABASE_URI=./db.sqlite

# NODE_ENV is the current environment (production or development). Relevant for express.js server.
NODE_ENV=development

In this section, we’ll define the game state using Stackr’s state management.

import { BytesLike, solidityPackedKeccak256 } from "ethers";
import { State } from "@stackr/sdk/machine";

// Define the structure of a Tic Tac Toe game
interface Game {
  gameId: string;
  owner: string; // Player X's address
  playerO: string; // Player O's address
  board: string[]; // 9 cells represented as a string array
  currentPlayer: "X" | "O";
  winner: "X" | "O" | "Draw" | null;
  startedAt: number;
  endedAt: number | null;
}

// Define the overall application state
export interface AppState {
  games: Record<string, Game>;
}

// Initial state of the application
export const initialState: AppState = {
  games: {},
};

// TicTacToeState class extends the State class from @stackr/sdk
export class TicTacToeState extends State<AppState> {
  constructor(state: AppState) {
    super(state);
  }

  // Generate a root hash of the current state
  // This is used for state verification and integrity checks
  getRootHash(): BytesLike {
    return solidityPackedKeccak256(
      ["string"],
      [JSON.stringify(this.state.games)]
    );
  }
}

• We define an interface Game to represent the state of the Tic Tac Toe game.

• The initialState sets up the initial conditions, including an empty board and the starting player.

• A State instance is created to manage the game state.

Next, we’ll add the logic to handle player moves and check for wins.

import { StateMachine } from "@stackr/sdk/machine";
import { TicTacToeState, initialState } from "./state";
import { transitions } from "./transitions";

// Define the State Machine for Tic Tac Toe
const machine = new StateMachine({
  id: "tic-tac-toe", // Unique identifier for this state machine
  stateClass: TicTacToeState, // The state class used by this machine
  initialState, // Initial state
  on: transitions, // Transitions that can be applied to the state
});

export { machine 

• StateMachine: Initializes the state machine with an ID, state class, initial state, and available transitions.

src/stackr/transitions.ts

Define the possible actions/transitions in the game.

Explanation:

• createGame Transition: Initializes a new Tic Tac Toe game with two players.

• makeMove Transition: Processes a player's move, updates the board, checks for a winner or draw, and switches the current player.

• resetGame Transition: Resets an existing game to its initial state.

Initialize and configure the Stackr Micro-Rollup (MRU) instance.

import { MicroRollup } from "@stackr/sdk";
import { stackrConfig } from "../../stackr.config";
import { machine } from "./machine";

// Create a new MRU instance
const mru = await MicroRollup({
  config: stackrConfig, // Configuration for the MRU
  stateMachines: [machine], // State machines used by the MRU
});

export { mru };

Explanation:

• MicroRollup: Represents the Stackr MRU instance.

• stateMachines: Array of state machines the MRU will manage.

Set up the Express server, define API endpoints, and integrate with Stackr.

Explanation:

• /info Endpoint: Provides information about the MRU's domain and schemas.

• /:reducerName Endpoint: Accepts actions to perform state transitions (e.g., createGame, makeMove, resetGame).

• /games & /games/:gameId Endpoints: Retrieve all games or a specific game respectively.

• CORS: Enabled for all routes to allow cross-origin requests.

• Static Files: Serves the frontend from the public directory.

Create a public directory inside your project root to store frontend files.

mkdir src/public
touch src/public/tic-tac-toe.html

Create the HTML and JavaScript frontend for the Tic Tac Toe game.

• Connect to MetaMask: Requests the user to connect their wallet.

• Deterministic Wallet: Generates a deterministic wallet based on the user's signature to avoid signing every transaction.

• Create Game: Allows the user to create a new game by specifying Player O's Ethereum address.

• Make Move: Enables players to make moves on the board by clicking on empty cells.

• Reset Game: Resets the game to its initial state.

• Fetch Game State: Retrieves the current state of the game to update the UI accordingly.

After setting up the backend and frontend, you can start your development server:

bun start

Open your browser and navigate to http://localhost:3012 to see your Tic Tac Toe game in action!

Congratulations! 🎉 You’ve successfully built a decentralized Tic Tac Toe game using Stackr Labs and Micro Rollups. This project showcases how to manage game state on the blockchain while providing a simple and engaging user interface.

Feel free to extend the game further, add features like multiplayer support, or improve the UI. Happy coding! If you have any questions or need further assistance, please feel free to contact me. You can connect with me on X / Twitter or LinkedIn.