Flashcard Royale: Battle to Learn!

Imagine flashcards, but way more exciting. That’s the core idea behind Flashcard Royale, a web game we built in just 24 hours at a college hackathon. We wanted to combine the engaging strategy of auto-battler games with the education of flashcards. This resulted in a game where your knowledge literally fuels your army!

From Flashcards to Fighting Units

In Flashcard Royale, the aim of the game is to study flashcards while using them to build a battling team! The game lets you import flashcard decks so you can build out your own themes, like history, science, or even coding terms. The game turns each card into a unique fighting unit.

Play at
flashcard-royale.vercel.app!

Screenshot of Flashcard Royale Card Unit.

When building your deck, you can’t see the cards’ front or back, but you can see the unit’s stats and attacks. In this prep phase, you can select from a variety of upgrades to add to your units. These upgrades all have a cost, and you only get a certain budget at the start of the game. Each of the upgrades has different effects on your unit’s stats and attacks.

Screenshot of Flashcard Royale Card Unit Upgrades.

The gameplay is all about strategy and knowledge. Once you’ve built your deck, you send your flashcard units into automated battles against opponents. When your card goes to attack, you need to correctly write what’s on the back of the card. Correctly answering the flashcard prompt for each unit powers up their attacks! Get it right, and your unit unleashes a blow. Misremember the answer, and your attack will miss entirely, and your opponent will have the chance to attack you.

It’s a fun, engaging way to test your knowledge and learn new things, all wrapped up in a competitive game.

LLM-Powered Card Stats with Gemini ¹

To handle deciding the stats of new cards, we integrated Google Gemini ¹ to automatically generate stats for each flashcard unit. Based on the flashcard’s content and difficulty, Gemini assigns values for health and attack.

This means more challenging flashcards can become powerful units, while simpler cards might be weaker.

This LLM-powered stat generation adds a layer of automation to the game that allows deck building using any flashcards you can import. You have to think not just about the flashcard content, but also how Gemini ² might interpret its difficulty and assign stats. It’s a dynamic system that makes every deck unique.

Built in 24 Hours with SvelteKit and Firebase

The clock was ticking! We had just 24 hours to go from idea to a working game at the hackathon. To make it happen, we chose SvelteKit ³ for our full-stack framework. For backend and user authentication, we relied on Firebase ⁴ and Firestore ⁵ .

Challenges and Learnings

Building a game like this in 24 hours was definitely a rush! We faced a few challenges and learned a lot along the way. 24 hours is not a lot of time to build a full-stack web app! We had to be super efficient with our time, prioritize features, and make quick decisions. We had a pretty good strategy of splitting the work by frontend & backend. We also handled the teamwork under pressure well and effectively managed the scope of the project.

For some of us on the team, Firebase ⁴ was new territory. We had to quickly learn how to integrate it for user accounts and data storage. While the two people who knew Firebase spent the most time with it, everyone got to dabble and gained practical experience with Firebase backend services and client-side Firestore database interactions.

Working in a team of four, sleep-deprived and on a tight deadline, tested our collaboration skills. We were able to effectively manage our time by doing periodic communications to keep track of what needed to be done at every point in the project. These collaborative problem-solving skills in a fast-paced development environment were invaluable and helped us get the project done on time.

Key Contributions