15-Puzzle Game using Scaffold-ETH2

The 15-Puzzle game is a classic sliding puzzle that challenges players to arrange numbered tiles in sequential order within a 4x4 grid, with one tile missing to allow for movement. This project is a modern web implementation of the game, utilizing Scaffold-ETH2.

Features

• Interactive Puzzle Grid: A dynamic and responsive grid that allows players to slide tiles by clicking.
• State Management: Utilizes Scaffold-ETH2's Zustand implemenation for efficient and centralized state management across components.
• Game Status Tracking: Keeps track of moves and provides visual feedback when the puzzle is solved.
• Write Scores to the Blockchain: Option to record your score when solving a puzzle.

Puzzle Game Structure

The puzzle game is structured into several key components and utility functions, each serving a specific purpose in the functionality and presentation of the game. Below is an overview of where to find these files and what each file controls:

Components

• Puzzle Components: Located at /packages/nextjs/components/puzzle, these are the main React components that make up the user interface of the puzzle game.
  • EndPuzzle.tsx: This component is displayed when the puzzle is completed. It allows the user to end the game and can be customized for different end-game actions.
  • StartPuzzle.tsx: This component provides a button to start or restart the puzzle game. It initializes the game state and shuffles the puzzle squares to begin gameplay.
  • PuzzleGrid.tsx: This component renders the grid layout of the puzzle, displaying each square and handling click events to move squares within the grid.
  • Puzzle.tsx: The main container component that orchestrates the puzzle game, managing state and coordinating interactions between the other components.

State Management

• Zustand Global Store: Located at /packages/nextjs/services/store/store.ts, this file defines the global state management for the puzzle game using Zustand. It includes state variables for the squares, move count, and puzzle status, along with setters for updating these states.

Types

• Grid Prop Types and Square[]: Located at /packages/nextjs/utils/puzzle/puzzleUtils.ts, this file contains TypeScript type definitions related to the puzzle game, such as the properties for each puzzle square and the props for the PuzzleGrid component.

Game Logic

• Puzzle Utilities: Located at /packages/nextjs/utils/puzzle/puzzleUtils.ts, this file includes essential utility functions for the puzzle game logic, such as generating the initial squares, shuffling the squares, checking solvability, and determining when the puzzle is solved.

Modifying the Game

Each of these files controls distinct aspects of the puzzle game, making it easy to modify specific parts:

• To alter the appearance or functionality of the UI components, modify the corresponding files in the components/puzzle directory.
• To change how the game state is managed or introduce new state variables, update the store.ts file.
• For custom types or to extend the properties of puzzle squares, adjust the types in utils.ts.
• To adjust the game's logic, such as the shuffle algorithm or the criteria for a puzzle being solved, modify the functions in puzzleUtils.ts.

This structure is designed to keep the game modular and maintainable, allowing for easy updates and modifications.

Upcoming Features and Solutions

• Anti-Cheat Mechanisms: Introduce server-side validation techniques to prevent cheating, enhancing game integrity and fairness.
• Player Management: Develop functionalities to assign unique puzzle IDs (bytes32 puzzleId) to players, map these IDs to player profiles, and retrieve player statistics, thereby personalizing the gaming experience.
• Gameplay Tracking: Implement methods to monitor and record gameplay activities, ensuring a comprehensive understanding of player engagement and game dynamics.
• Subgraph Integration: Incorporate 'Ponder' as a layer to enable subgraph functionalities, facilitating efficient data indexing and querying capabilities for enhanced analytics.
• API Documentation: Provide comprehensive API documentation to enable external developers to efficiently interact with 'Ponder', ensuring ease of access to game data.
• Social Sharing Features: Enable players to share their rankings, individual game statistics, and puzzle achievements, fostering community engagement
• ERC721 Integration: Introduce a Non-Fungible Token (NFT) requirement that players must possess to qualify for reward tokens, adding a layer of value and exclusivity to game participation.
• ERC1155 Implementation: Create a fungible NFT voucher system that players can mint upon completing puzzles, introducing a tangible reward mechanism.
• Enhanced Randomness with Chainlink VRF: Utilize Chainlink's Verifiable Random Function (VRF) to introduce unpredictability in the rarity of the burnable NFT vouchers, ensuring fairness and transparency.
• Strategic Randomness: Implement a logic that biases randomness in favor of ERC721 NFT holders and players scoring below 150, promoting inclusivity and balance in gameplay rewards.
• ERC20 Token Rewards: Introduce an in-game ERC20 token that players can earn and redeem by burning their ERC1155 NFTs, adding a layer of reward strategy.
• Voucher Redemption: Add a burnVoucher function to facilitate the burning of ERC1155 vouchers and redemption of earned tokens, which are then held in an escrow contract for added security.
• Secure Withdrawals: Implement a pullPayment function that allows players to securely withdraw their earned tokens post-ERC1155 voucher burn, ensuring a trustworthy reward collection process.

🏗 Scaffold-ETH 2

🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.

⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.

• ✅ Contract Hot Reload: Your frontend auto-adapts to your smart contract as you edit it.
• 🔥 Burner Wallet & Local Faucet: Quickly test your application with a burner wallet and local faucet.
• 🔐 Integration with Wallet Providers: Connect to different wallet providers and interact with the Ethereum network.

Contents

• Requirements
• Quickstart
• Deploying your Smart Contracts to a Live Network
• Deploying your NextJS App
• Interacting with your Smart Contracts: SE-2 Custom Hooks
• Disabling Type & Linting Error Checks
  • Disabling commit checks
  • Deploying to Vercel without any checks
  • Disabling Github Workflow
• Contributing to Scaffold-ETH 2

Requirements

Before you begin, you need to install the following tools:

• Node (v18 LTS)
• Yarn (v1 or v2+)
• Git

Quickstart

To get started with Scaffold-ETH 2, follow the steps below:

1. Clone this repo & install dependencies

git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
yarn install

1. Run a local network in the first terminal:

yarn chain

This command starts a local Ethereum network using Hardhat. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in hardhat.config.ts.

1. On a second terminal, deploy the test contract:

yarn deploy

This command deploys a test smart contract to the local network. The contract is located in packages/hardhat/contracts and can be modified to suit your needs. The yarn deploy command uses the deploy script located in packages/hardhat/deploy to deploy the contract to the network. You can also customize the deploy script.

1. On a third terminal, start your NextJS app:

yarn start

Visit your app on: http://localhost:3000. You can interact with your smart contract using the contract component or the example ui in the frontend. You can tweak the app config in packages/nextjs/scaffold.config.ts.

Run smart contract test with yarn hardhat:test

• Edit your smart contract YourContract.sol in packages/hardhat/contracts
• Edit your frontend in packages/nextjs/pages
• Edit your deployment scripts in packages/hardhat/deploy

Deploying your Smart Contracts to a Live Network

Once you are ready to deploy your smart contracts, there are a few things you need to adjust.

1. Select the network

By default, yarn deploy will deploy the contract to the local network. You can change the defaultNetwork in packages/hardhat/hardhat.config.ts. You could also simply run yarn deploy --network target_network to deploy to another network.

Check the hardhat.config.ts for the networks that are pre-configured. You can also add other network settings to the hardhat.config.ts file. Here are the Alchemy docs for information on specific networks.

Example: To deploy the contract to the Sepolia network, run the command below:

yarn deploy --network sepolia

1. Generate a new account or add one to deploy the contract(s) from. Additionally you will need to add your Alchemy API key. Rename .env.example to .env and fill the required keys.

ALCHEMY_API_KEY="",
DEPLOYER_PRIVATE_KEY=""

The deployer account is the account that will deploy your contracts. Additionally, the deployer account will be used to execute any function calls that are part of your deployment script.

You can generate a random account / private key with yarn generate or add the private key of your crypto wallet. yarn generate will create a random account and add the DEPLOYER_PRIVATE_KEY to the .env file. You can check the generated account with yarn account.

1. Deploy your smart contract(s)

Run the command below to deploy the smart contract to the target network. Make sure to have some funds in your deployer account to pay for the transaction.

yarn deploy --network network_name

1. Verify your smart contract

You can verify your smart contract on Etherscan by running:

yarn verify --network network_name

eg: yarn verify --network sepolia

This uses etherscan-verify from hardhat-deploy to verify all the deployed contracts.

You can alternatively use hardhat-verify to verify your contracts, passing network name, contract address and constructor arguments (if any): yarn hardhat-verify --network network_name contract_address "Constructor arg 1"

If the chain you're using is not supported by any of the verifying methods, you can add new supported chains to your chosen method, either etherscan-verify or hardhat-verify.

Deploying your NextJS App

Hint: We recommend connecting your GitHub repo to Vercel (through the Vercel UI) so it gets automatically deployed when pushing to main.

If you want to deploy directly from the CLI, run yarn vercel and follow the steps to deploy to Vercel. Once you log in (email, github, etc), the default options should work. It'll give you a public URL.

If you want to redeploy to the same production URL you can run yarn vercel --prod. If you omit the --prod flag it will deploy it to a preview/test URL.

Make sure your packages/nextjs/scaffold.config.ts file has the values you need.

Interacting with your Smart Contracts: SE-2 Custom Hooks

Scaffold-ETH 2 provides a collection of custom React hooks designed to simplify interactions with your deployed smart contracts. These hooks are wrappers around wagmi, automatically loading the necessary contract ABI and address. They offer an easy-to-use interface for reading from, writing to, and monitoring events emitted by your smart contracts.

To help developers get started with smart contract interaction using Scaffold-ETH 2, we've provided the following custom hooks:

• useScaffoldContractRead: for reading public variables and getting data from read-only functions of your contract.
• useScaffoldContractWrite: for sending transactions to your contract to write data or perform an action.
• useScaffoldEventSubscriber: for subscribing to your contract events and receiving real-time updates when events are emitted.
• useScaffoldEventHistory: for retrieving historical event logs for your contract, providing past activity data.
• useDeployedContractInfo: for fetching details from your contract, including the ABI and address.
• useScaffoldContract: for obtaining a contract instance that lets you interact with the methods of your deployed smart contract.

These hooks offer a simplified and streamlined interface for interacting with your smart contracts. If you need to interact with external contracts, you can use wagmi directly, or add external contract data to your deployedContracts.ts file.

useScaffoldContractRead:

Use this hook to read public variables and get data from read-only functions of your smart contract.

const { data: totalCounter } = useScaffoldContractRead({
  contractName: "YourContract",
  functionName: "getGreeting",
  args: ["ARGUMENTS IF THE FUNCTION ACCEPTS ANY"],
});

This example retrieves the data returned by the getGreeting function of the YourContract smart contract. If the function accepts any arguments, they can be passed in the args array. The retrieved data is stored in the data property of the returned object.

useScaffoldContractWrite:

Use this hook to send a transaction to your smart contract to write data or perform an action.

const { writeAsync, isLoading, isMining } = useScaffoldContractWrite({
  contractName: "YourContract",
  functionName: "setGreeting",
  args: ["The value to set"],
  // For payable functions, expressed in ETH
  value: "0.01",
  // The number of block confirmations to wait for before considering transaction to be confirmed (default : 1).
  blockConfirmations: 1,
  // The callback function to execute when the transaction is confirmed.
  onBlockConfirmation: (txnReceipt) => {
    console.log("Transaction blockHash", txnReceipt.blockHash);
  },
});

To send the transaction, you can call the writeAsync function returned by the hook. Here's an example usage:

<button className="btn btn-primary" onClick={writeAsync}>
  Send TX
</button>

This example sends a transaction to the YourContract smart contract to call the setGreeting function with the arguments passed in args. The writeAsync function sends the transaction to the smart contract, and the isLoading and isMining properties indicate whether the transaction is currently being processed by the network.

useScaffoldEventSubscriber:

Use this hook to subscribe to events emitted by your smart contract, and receive real-time updates when these events are emitted.

useScaffoldEventSubscriber({
  contractName: "YourContract",
  eventName: "GreetingChange",
  // The listener function is called whenever a GreetingChange event is emitted by the contract.
  // It receives the parameters emitted by the event, for this example: GreetingChange(address greetingSetter, string newGreeting, bool premium, uint256 value);
  listener: (greetingSetter, newGreeting, premium, value) => {
    console.log(greetingSetter, newGreeting, premium, value);
  },
});

This example subscribes to the GreetingChange event emitted by the YourContract smart contract, and logs the parameters emitted by the event to the console whenever it is emitted. The listener function accepts the parameters emitted by the event, and can be customized according to your needs.

useScaffoldEventHistory:

Use this hook to retrieve historical event logs for your smart contract, providing past activity data.

const {
  data: events,
  isLoading: isLoadingEvents,
  error: errorReadingEvents,
  } = useScaffoldEventHistory({
  contractName: "YourContract",
  eventName: "GreetingChange",
  // Specify the starting block number from which to read events, this is a bigint.
  fromBlock: 31231n,
  blockData: true,
  // Apply filters to the event based on parameter names and values { [parameterName]: value },
  filters: { premium: true }
  // If set to true it will return the transaction data for each event (default: false),
  transactionData: true,
  // If set to true it will return the receipt data for each event (default: false),
  receiptData: true
});

This example retrieves the historical event logs for the GreetingChange event of the YourContract smart contract, starting from block number 31231 and filtering events where the premium parameter is true. The data property of the returned object contains an array of event objects, each containing the event parameters and (optionally) the block, transaction, and receipt data. The isLoading property indicates whether the event logs are currently being fetched, and the error property contains any error that occurred during the fetching process (if applicable).

useDeployedContractInfo:

Use this hook to fetch details about a deployed smart contract, including the ABI and address.

// ContractName: name of the deployed contract
const { data: deployedContractData } = useDeployedContractInfo(contractName);

This example retrieves the details of the deployed contract with the specified name and stores the details in the deployedContractData object.

useScaffoldContract:

Use this hook to get your contract instance by providing the contract name. It enables you interact with your contract methods. For reading data or sending transactions, it's recommended to use useScaffoldContractRead and useScaffoldContractWrite.

const { data: yourContract } = useScaffoldContract({
  contractName: "YourContract",
});
// Returns the greeting and can be called in any function, unlike useScaffoldContractRead
await yourContract?.greeting();

// Used to write to a contract and can be called in any function
import { useWalletClient } from "wagmi";

const { data: walletClient } = useWalletClient();
const { data: yourContract } = useScaffoldContract({
  contractName: "YourContract",
  walletClient,
});
const setGreeting = async () => {
  // Call the method in any function
  await yourContract?.setGreeting("the greeting here");
};

This example uses the useScaffoldContract hook to obtain a contract instance for the YourContract smart contract. The data property of the returned object contains the contract instance that can be used to call any of the smart contract methods.

Disabling type and linting error checks

Hint Typescript helps you catch errors at compile time, which can save time and improve code quality, but can be challenging for those who are new to the language or who are used to the more dynamic nature of JavaScript. Below are the steps to disable type & lint check at different levels

Disabling commit checks

We run pre-commit git hook which lints the staged files and don't let you commit if there is an linting error.

To disable this, go to .husky/pre-commit file and comment out yarn lint-staged --verbose

- yarn lint-staged --verbose
+ # yarn lint-staged --verbose

Deploying to Vercel without any checks

By default, Vercel runs types and lint checks before building your app. The deployment will fail if there are any types or lint errors.

To ignore these checks while deploying from the CLI, use:

yarn vercel:yolo

If your repo is connected to Vercel, you can set NEXT_PUBLIC_IGNORE_BUILD_ERROR to true in a environment variable.

Disabling Github Workflow

We have github workflow setup checkout .github/workflows/lint.yaml which runs types and lint error checks every time code is pushed to main branch or pull request is made to main branch

To disable it, delete .github directory

Contributing to Scaffold-ETH 2

We welcome contributions to Scaffold-ETH 2!

Please see CONTRIBUTING.MD for more information and guidelines for contributing to Scaffold-ETH 2.