Push The Button - Multi-player Turn Based Game - Scaffold-eth

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!!

👨‍🎤 PunkWallet.io

radwallet.io

Last modified 9mo ago

Copy link

On this page

Branch Info

🏃‍♀️ Quick Start

📡 Deploy the game!

⚔️ Side Quests

🛳 Ship the app!