my goal
create a turn-based game that is fully playable in a Farcaster frame in two days
result
we're live, play in Warpcast here, gameplay video below.
four days after opening the dungeon we had 150 players in 218 battles.
players randomly meet one of 7 opponents who each have two unique attacks.
why a game in a frame?
I wanted to build a frame that goes beyond trivial one-click interactions. I didn't see many frames using the benefits of the Lego block:
user brings context: the frame knows the user's Farcaster identity, their connected onchain addresses and on which cast a user interacts with it
one click to start: the frame appears in the Farcaster feed and the player can start it. no app store downloads or additional login needed
post anywhere, but play one game: a frame can be posted many times. the game keeps the state of each player's progress independent from where it appears
prototyping
I wanted to get a grasp of the game flow, so I started with some rough sketches in excalidraw. kept this as my the source of truth while developing. I got a sequence of the core game loop locked down after a lot of simplification.
tech stack
backend
runs on python using django framework. I wanted something fast and I'm fluent in the python & django stack. Struggled with some project templates for an hour, because I wanted to get fancy and have async workers from the start. None of it worked when I deployed it, so scrapped everything, copy-pasted an old project and went from there. Built in admin dashboard provides an easy overview of the player activity.
frame / frontend
runs on typescript using frames.js. I had previously used frames.js, so wanted to test if frog.fm had any upside that I missed out on. summary: hell no. I failed miserably to built any non-trivial frames because of the URL size limit. Never got to render a user's profile picture or anything beyond a box with two lines of text. Switched to frames.js, merged a few templates that the team provides with my previous code and five minutes later had the battle frame showing up. highly recommend the custom image worker example.
neynar API provides the player info, mostly name and profile picture.
what's next
add custom player attacks via text input
add a public leaderboard
add exploration mode to walk around 🤩
