Inskribbl
A Pictionary game, reinvented for web3
Demo
About
The problem it solves ## Introduction Web3 games aren't fun to play and often times focus too much on the financial aspect rather than on the gameplay. We wanted to take inspiration from web2 browser games, that don't require to install any software and are often quite popular (like [agar.io](https://agar.io)). ## Inskribbl For this hackathon we took inspiration from [Skribbl.io](https://skribbl.io/), a Pictionary game (word guessing) where one player picks a word and draws it while the others have to guess. ### Gameplay In our version the gameplay works as follows: 0. if no game is active, a user has to create one 1. the user submits a hashed secret word and gets the "host" status on the peerjs connection 2. other users join the game, see the drawing in real time broadcasted via websockets and try to guess the word 3. guesses are submitted as hashes on-chain with a bet in ETH 4. if the hashes matches the secret word one, they win the entire pot, otherwise their bet goes in the pot 5. if no one guesses, the pot is put into the new game ### Architecture The smart contract is pretty simple, allowing users to create a new game (only one active at a time possible) or to join one. Joining a game doesn't require any transaction, but sending guesses does. This choice was made to limit the amount of stateful transactions sent as much as possible. The smart contract acts as a relay server, allowing peerjs to identify the host of the game (the game creator) by its wallet address, that acts as a unique peer id. Other users then connect to the host and see the drawing streamed in real time on their devices. No central server is used for that thanks to direct websockets connections across the single players. Since the data packets sent are very small, just a numeric array, the system can support a large number of users concurrently connected. Finally, guesses hashes are sent on-chain and if correct, the pot is automatically disbursed to the winner who also receives a real-time alert.
How it's made
Challenges we ran into ## Areas of improvement Definitely the frontend, it is still a bit clunky and not as smooth as a browser game should be, then the counter to show how much time is left until the deadline is reached. Lastly, some moderation features to block abusive users. ### Specific challenges * Peerjs is a beautiful but really complicated piece of tech, it took a while to set up cross-peer connections and use smart contracts instead of signalling servers to make a fully decentralised and serverless web app. * Thirdweb MetaMask connector sometimes miscalculates the gas fee and transactions are sent with 10-100x less gas than needed.