The Flag Game

Partially rendered Argentina flag
Completely rendered Argentina flag

What it does

The Flag Game allows players to compete with each other in "rounds" of guessing the flag. Each player joins a round by paying an entry price (100 XLM), once the round starts, a flag starts to be revealed pixel by pixel. A player may guess the flag at any time, and if they win, they earn the NFT of the Flag they guessed plus everyone else's entry price! But beware, you have only 1 attempt per round, and if you don't get it right, you lose your XLM!

See the code

How we built it

The Flag Game has 3 components, all built with JavaScript.

The CLI (Command Line Interface), built with vanilla JavaScript, which converts flags into flagMaps (a description of each pixel's position and color), and creates the required stellar accounts and assets to play so it's repeatable (for instance after a testnet reset); a GAME MASTER account which holds the minted NFTs and pays them out to winners, an NFT ISSUER account which mints 1 NFT per flag, and then gets locked forever to ensure only 1 NFT per flag exists.

The API Server, built with Node and Express, which contains both an API with various endpoints and a WebSocket to keep all players informed of events in the round (Round open, started and finished) as well as sending 1 pixel at a time to be rendered.

The UI, built with Svelte, which renders the game and controls the presentation logic based on the player and round status, and reveals the flag pixel by pixel.

Challenges we ran into

Vite (used by Svelte Kit) had some issues getting stellar-sdk to play nicely. We fixed it with this config file. Keeping the flag secret from the frontend. Getting each pixel to render properly in a css grid. Math is hard. Making the application more fail-safe. Currently if a player wins, they will get a signed XDR to claim the prize, which the UI signs and submits. Failures haven't been considered.

Accomplishments that we're proud of

For a hackathon, the resulting code is pretty maintainable (no tests though) and can be easily modified to render things other than flags. The flag being rendered pixel by pixel is actually quite nice!