🎲

Push The Button - Multi-player Turn Based Game

Branch Info

Author: Amogh Jahagirdar Source code: https://github.com/austintgriffith/scaffold-eth/tree/push-the-button-dev Intended audience: Beginners/Intermediate Topics: Scaffold-eth basics, Gaming

🏃‍♀️ Quick Start

A base template for multiplayer turn-based game on Ethereum...
git clone https://github.com/austintgriffith/scaffold-eth.git push-the-button-dev
cd push-the-button-dev
git checkout push-the-button-dev
yarn install
yarn start
in a second terminal window:
cd push-the-button-dev
yarn chain
in a third terminal window:
cd push-the-button-dev
yarn deploy
📱 Open http://localhost:3000 to see the app
What you are seeing right now is the default “push the button template” from minesweeper.js
👛 Open an incognito window and navigate to http://localhost:3000 (You'll notice it has a new wallet address).
⛽️ Grab some gas for each account using the faucet:
image
🎟 Stake the ETH from each account:
image
You'll see the Pool Value, Player Count and the Participants list update
Start a round by pressing Start Game, you'll see something like this 👇🏽
image
The game here on is pretty straightforward
  • The goal is to generate the largest number by sheer luck
  • The account whose turn it is to play is allowed to click the "Spin the Roulette wheel" button
  • Once he clicks the button, a random number is generated via the commit-reveal scheme
  • The winning number is updated if this number is the largest yet.
  • There is 30 second deadline before he loses his turn
  • If he loses his turn, anybody but him can "Skip Turn" for him
  • When everyone is done playing, the winner is declared and everyone can withdraw their winnings
🕵🏻‍♂️ Inspect the Debug Contracts tab to figure out what address is the owner of YourCollectible?
💼 Edit your deployment script deploy.js in packages/hardhat/scripts
🔏 Edit your game variables and working fro, YourContract.sol in packages/hardhat/contracts
📝 Edit your frontend PushTheButton.jsx in packages/react-app/src/views

📡 Deploy the game!

🛰 Ready to deploy to a testnet?
Change the defaultNetwork in packages/hardhat/hardhat.config.js
image
🔐 Generate a deploy account with yarn generate
image
👛 View your deployer address using yarn account (You'll need to fund this account. Hint: use an instant wallet to fund your account via QR code)
image
👨‍🎤 Deploy your game:
yarn deploy
✏️ Edit your frontend App.jsx in packages/react-app/src to change the targetNetwork to wherever you deployed your contract:
image
You should see the correct network in the frontend:
image

⚔️ Side Quests

🐟 Integrate L2 solutions for ETH
While playing a game, the ETH network often feels slow, integrate a L2 solution like MATIC (this one’s already done for you, try others)
💰 Redesign the rewards system
Currently the user gets heavily penalised if he misses a turn, be more kind to your players or they might not come back 😢
🔶 Infura
You will need to get a key from infura.io and paste it into constants.js in packages/react-app/src:
image

🛳 Ship the app!

⚙️ build and upload your frontend and share the url with your friends...
# build it:
yarn build
# upload it:
yarn surge
OR
yarn s3
OR
yarn ipfs
image
👩‍❤️‍👨 Share your public url with a friend and invite them for a game!!