๐ŸŽฒ
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...
1
git clone https://github.com/austintgriffith/scaffold-eth.git push-the-button-dev
2
โ€‹
3
cd push-the-button-dev
4
โ€‹
5
git checkout push-the-button-dev
Copied!
1
yarn install
Copied!
1
yarn start
Copied!
in a second terminal window:
1
cd push-the-button-dev
2
yarn chain
Copied!
in a third terminal window:
1
cd push-the-button-dev
2
yarn deploy
Copied!
๐Ÿ“ฑ 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:
1
yarn deploy
Copied!
โœ๏ธ 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...
1
# build it:
2
โ€‹
3
yarn build
4
โ€‹
5
# upload it:
6
โ€‹
7
yarn surge
8
โ€‹
9
OR
10
โ€‹
11
yarn s3
12
โ€‹
13
OR
14
โ€‹
15
yarn ipfs
Copied!
image
๐Ÿ‘ฉโ€โค๏ธโ€๐Ÿ‘จ Share your public url with a friend and invite them for a game!!