Inspiration
Hurricane season is a reality for everybody in Tampa, but most people don't know what to actually do when a high category storm is close. I wanted to turn FEMA and other general emergency guidelines into something people would actually be able to learn with, so i decided that a high-stakes game where your decisions have consequences would be a good avenue.
What it does
The Surge drops you onto the USF Tampa campus as the Category 5 storm Hurricane Helios gets nearer. You have 12 hours (actions) to prepare.
Technical Deep Dive
Gathering Phase: Explore real USF locations (the Marshall Student Center, MUMA, Library, Beard Garage, the Chick-Fil-A, and a hidden Pizzo Elementary location, which is the official shelter to the general population) to scavenge for items, secure your vehicle, and stock up on food and water. Every item has weight, so you can't carry everything. Sprint Phase: The surge is about to hit. Choose where to park your car and which building to shelter in. Distance costs health. Gauntlet Phase: The hurricane makes landfall. Eight back to back survival events: flooding, power outages, structural damage, injuries, and more. Each event gives you three choices: a safe option that sometimes needs specific items, a risky gamble, and an AI-improvised option that depends on your actual current items. AI Dispatcher: A voice-enabled AI dispatcher you can radio at any time (if you have the radio item) for tactical advice. It knows your inventory, your stats, and the current crisis. It speaks using Google Cloud TTS. FEMA Resilience Report: Win or lose, the game ends with a full audit: what you did right, what nearly killed you, and what real emergency managers recommend. This way you can have a full rundown of your choices and how they might affect you in real life.
How we built it
React + Tailwind CSS for front end. Google Gemini API for the context aware smart dispatcher and the final audit report. Google Cloud Text-to-Speech API to give the dispatcher a natural male voice. Web Speech API for user microphone input Real USF campus geography: locations have accurate elevations, distances are modeled as a node hop graph, and shelter choices reflect actual building characteristics
Challenges we ran into
I accidentally deleted my whole project and had to start over. :( I wanted to try using Gemini TTS since it is a significant step up in quality, but I couldn't get it to work fast enough. I decided that speed mattered more than quality for this demo, so I went back to Google Cloud Neural2-D at 1.2x speed. I had a few bugs with the AI dispatcher interruption feature. Sometimes the prompt would play 2 or even 3 times based on the gamestate, and I unfortunately couldn't fix it in time.
Accomplishments that we're proud of
The AI dispatcher actually gives useful, contextual advice. It knows what event you're facing, what's in your bag, and what your real options are. This way, people can actively learn based on specific situations and not go through the same thing twice. Every single game outcome maps to a real FEMA recommendation, and the resilience report turns both wins and losses into a real learning moment. It's my first web game!
What we learned
How to integrate multiple Google Cloud APIs (Gemini for reasoning, Cloud TTS for voice) into a cohesive experience That losing your whole project is sad and you should continuously push and backup. How to make a web game.
What's next for The Surge - USF
Expand to other locations, improve map interactivity. Add multiplayer: coordinate survival with others in real-time Partner with university emergency management offices to distribute as an actual training tool Add more disaster types (tornado, wildfire, earthquake) using the same framework and turn it into a fully comprehensive learning simulation tool.
Built With
- google-cloud-text-to-speech
- google-gemini-api
- javascript
- react
- tailwind-css
- vite
- web-audio-api
- web-speech-api
Log in or sign up for Devpost to join the conversation.