๐ŸŽฒ
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!!
Copy link
On this page
Branch Info
๐Ÿƒโ€โ™€๏ธ Quick Start
๐Ÿ“ก Deploy the game!
โš”๏ธ Side Quests
๐Ÿ›ณ Ship the app!