Firebase Midsommer Madnesss with Antigravity CLI

--- published: true series: midsommer --- *This is a submission for the [June Solstice Game Jam](https://dev.to/challenges/june-game-jam-2026-06-03)* This installment brings a Firebase build to Midsommer Madness via Antigravity CLI. The Midsommer Madness web app is deployed to Firebase Web Hosting and the Maypole was saved!  ### What I Built When it comes to Summar Solstace — the place to be is Sweden. It is one of the highlights of the calendar. This project aimed to recreate some of the mystique around the event- just in time for some fresh surestromming! Now you can get it with Firebase enhancements! #### FireBase Console The full project was imported to the Firebase Console:  #### Just show me the Code!!! GitHub Repo is here: [GitHub - xbill9/midsommer-firebase](https://github.com/xbill9/midsommer-firebase) ### Midsommer Madness with Firebase So how can we use Firebase to enhance the project? Github and Skills! ```plaintext The GitHub repository has been successfully linked to your Firebase project midsommer-madness . ### What was configured: 1. GitHub Secrets: A service account ( github-action-1273534909 ) with Firebase Hosting admin permissions was created, and its credentials were uploaded to your GitHub repository secrets as FIREBASE_SERVICE_ACCOUNT_MIDSOMMER_MADNESS . 2. GitHub Actions Workflows: Two workflow files were generated and pushed to your GitHub repository: • firebase-hosting-pull-request.yml: Deploys a preview channel of the game whenever a PR is created against the master branch. • firebase-hosting-merge.yml: Automatically deploys the latest version to the live Firebase Hosting site whenever a PR is merged (or a commit is pushed) to the master branch. 3. Agent Skills: Installed Firebase Agent Skills in the repository to make it easier for agents to help you with Firebase configurations in the future. > /skills ⎿ Exited /skills command ``` What else? ```plaintext > how is firebase enhancing the project ● Read(/home/xbill/midsommer-firebase/lib/main.dart) (ctrl+o to expand) Firebase enhances the Midsommer Madness project in four primary ways, turning it from a simple local game into a connected, production-ready mobile application: ### 1. 🏆 Global Cloud Leaderboard (Cloud Firestore) • Real-Time Synchronization: Instead of keeping scores local to one device, it uses Firestore to sync high scores globally. Players are ranked in real time against others on a Top 10 leaderboard. • Offline Resiliency: It acts as a fallback system. If a player is offline, the app saves scores to device cache ( SharedPreferences on mobile, localStorage on web). Once connectivity returns, it synchronizes gracefully without crashing or interrupting gameplay. ### 2. 📊 Gameplay Analytics (Firebase Analytics) • Event Tracking: Telemetry events like leaderboard_fetched and high score submissions are tracked. • Player Behavior: It records details such as the submitted score, the levels played, and character names, providing insight into game balance, player engagement, and high score distributions. ### 3. 🔍 Error Tracking & Stability (Firebase Crashlytics) • Dart & Flutter Crash Reporting: Captures native app crashes or Flutter rendering exceptions instantly. • JavaScript Bridge Error Logging: Uncaught JavaScript errors inside the WebView game loop are caught by game. js and forwarded to Crashlytics via the LeaderboardChannel JavaScript channel. This allows you to debug client-side web bugs directly inside the Firebase Console. ### 4. ⚡ Performance Metrics (Firebase Performance Monitoring) • Custom Network Traces: Measures the request latency of fetching and saving leaderboard scores (using custom traces get_leaderboard_scores and save_leaderboard_score ). • Slow Load Detection: Ensures that network calls to Firestore do not freeze the UI or lag the 60Hz physics update loop of the game. ``` #### My Lingonberries are ripening- get to work! How do you deploy this? ```make > make help ● Bash(make help) (ctrl+o to expand) Here is the updated output of the make help command: ======================================================================== 🇸🇪 Midsommer Madness Flutter Build & Development Controls 🇸🇪 ======================================================================== Available commands: make dev - Start the local web server for browser play (from assets/) make build-apk - Compile the Flutter App and build Debug APK make build-ios - Compile the Flutter App and build iOS app (no codesign) make clean - Clean Flutter build outputs and temporary caches make logcat - Monitor application logs using Flutter logger make deploy - Deploy the game to Firebase Hosting (manual bypass) make firebase-logs - Fetch the latest cloud logs from Google Cloud / Firebase make firebase-emulators - Start local Firebase Emulator Suite (Firestore & Hosting) make deploy-preview - Deploy a temporary preview channel to Firebase Hosting make firebase-status - Check current Firebase project configurations make deploy-rules - Deploy security rules for Cloud Firestore Note: Pushing/merging to 'master' on GitHub automatically triggers deployment. ======================================================================== ``` Getting Firebase logs: ```plaintext > make firebase-logs ● Bash(make firebase-logs) (ctrl+o to expand) Here are the latest Firebase/GCP cloud logs fetched from your project: TIMESTAMP SEVERITY TYPE TEXT_PAYLOAD MESSAGE 2026-06-18T16:34:32.784748Z NOTICE audited_resource 2026-06-18T16:33:37.512215Z NOTICE audited_resource 2026-06-18T16:11:41.516983584Z NOTICE service_account 2026-06-18T16:11:40.698356Z NOTICE project 2026-06-18T16:11:40.054007713Z ERROR service_account 2026-06-18T16:10:45.753536986Z ERROR service_account 2026-06-18T16:10:29.417088907Z NOTICE service_account 2026-06-18T15:43:46.907263Z NOTICE audited_resource 2026-06-18T15:38:51.598698444Z NOTICE audited_resource 2026-06-18T15:38:49.452718Z NOTICE audited_resource 2026-06-18T15:32:56.365232Z NOTICE audited_resource 2026-06-18T15:32:37.077690Z NOTICE audited_resource 2026-06-18T15:31:45.425200Z NOTICE project 2026-06-18T15:31:43.935218Z ERROR project 2026-06-18T15:31:42.933069Z ERROR project 2026-06-18T15:28:42.228633Z NOTICE project 2026-06-18T15:28:41.473570627Z NOTICE service_account 2026-06-18T15:27:38.230991Z NOTICE project 2026-06-18T15:27:37.538742814Z NOTICE audited_resource 2026-06-18T15:27:37.168036Z NOTICE audited_resource ``` Getting Firebase Status: ```console > make firebase-status ● Bash(make firebase-status) (ctrl+o to expand) Here is the output of the make firebase-status command: Checking active Firebase project list... npx -y firebase-tools projects:list - Preparing the list of your Firebase projects ✔ Preparing the list of your Firebase projects make install-apk - Install the compiled debug APK on a connected device/emulator ✔ Preparing the list of your Firebase projects ┌──────────────────────┬─────────────────────────────┬────────────────┬──────────────────────┐ │ Project Display Name │ Project ID │ Project Number │ Resource Location ID │ ├──────────────────────┼─────────────────────────────┼────────────────┼──────────────────────┤ │ Midsommer Madness │ midsommer-madness (current) │ 8002619985 │ [Not specified] │ └──────────────────────┴─────────────────────────────┴────────────────┴──────────────────────┘ The active project is correctly marked as midsommer-madness (current). ``` #### App Debugging The local Antigravity CLI has full access to the source code and with the Firebase skills — it can be use for remote debugging: ```plaintext I found the root causes of the freeze/shaking behavior on Game Over: ### 1. 🐛 HTML Nesting Bug (Why it didn't end / show Game Over) There was a missing closing </div> tag for the #screenIntro (Level Intro) overlay in index.html. • The issue: Because the intro screen div was never closed, the Game Over Screen ( #screenGameOver ) and Victory Screen ( #screenVictory ) divs were parsed as nested children of the intro screen. • The result: Since the intro screen is hidden ( display: none; ) during gameplay, the Game Over screen was also hidden by inheritance—even when the game engine correctly updated its class to .active ! The screen stayed blank, showing only the canvas background. ### 2. 📳 Screen Shake Jitter Loop (Why it stayed "gittery") • The issue: When you die or take damage, the game triggers a screen shake ( shakeIntensity > 0 ). This intensity is normally decremented and decayed back to 0 inside the game's update() loop. • The result: However, on death, the game state immediately transitions to GAMEOVER , which halts the update() loop. Because update() was no longer running, shakeIntensity was never decremented, causing the rendering engine to render the canvas with a randomized shake offset on every frame forever. ### 🚀 Solution Applied: • HTML Fix: Correctly closed the #screenIntro overlay in index.html so that the Game Over card sits on its own layer. • State Manager Fix: Added shakeIntensity = 0; to both the GAMEOVER and VICTORY state transitions in game.js to immediately neutralize any ongoing screen shake when the game ends. These fixes have been committed and pushed to master , and the live version at https://midsommer- madness.web.app is currently auto-updating. Try refreshing the game page in a minute to test the fix! ──────────────────────────────────────────────────────────── > how can I test local You can test the game locally in a few different ways depending on what you want to test: ### 1. 🌐 Test Web Game in Browser (Fastest) To test game changes locally in your browser: make dev • What it does: Starts a lightweight HTTP server on your machine serving the static files inside the assets/ directory. • How to play: Open your browser and go to the local address outputted in your console (e.g., http://localhost:8080 ). ────── ### 2. 🔥 Test Firebase Features Locally (Emulators) To test Firestore leaderboard database sync and mock hosting without touching production data: make firebase-emulators • What it does: Starts the local Firebase Emulator Suite (hosting, firestore database, etc.) on your machine. • How to play: Open the local hosting emulator link printed in your terminal. You can check the database records in the emulator UI dashboard (usually http://localhost:4000 ). ────── ### 📱 3. Test the Android App Wrapper If you have an Android device or emulator running: 1. Build the debug APK: make build-apk 2. Install it on your device/emulator: make install-apk 3. Monitor the live app logs for errors/messages: make logcat ──────────────────────────────────────────────────────────── > make dev ● Bash(make dev) ● ManageTask(Task: cccfd6c1-93d3-48aa-be84-ea0d884dfe4f/task-323) (ctrl+o to expand) The local development server has been started in the background. You can play and test the game locally in your browser at: 👉 http://127.0.0.1:8081 ──────────────────────────────────────────────────────────── > ok local version works. how do I test web ● Bash(gh run list --limit 3) (ctrl+o to expand) The automated GitHub Action deployment workflow for your latest fix ("Fix nested screenGameOver...") has already completed successfully! You can play and test the live web version right now at: 👉 https://midsommer-madness.web.app (Note: If you don't see the changes immediately, you may need to force-refresh your browser—usually Ctrl + F5 or Cmd + Shift + R —to clear your browser's local asset cache). ``` #### Run it on the Web! The current version is now available at: [Midsommer Madness - Swedish Retro Arcade](https://midsommer-madness.web.app/) ```plaintext https://midsommer-madness.web.app ``` #### Watch the Leader Board Looks like Rolfe has been skilling up!  #### Level Design The key levels include: 1. **IKEA Warehouse:** Battle crowded, flatpack-carrying shoppers who throw box projectiles at you. 2. **Systembolaget:** The state-owned liquor shop crowded with drunk Swedes stumbling and lobbing green beer bottles. 3. **Lördagsgodis:** Sugar rush Saturday! Dodge hyperactive, strung-out Swedish kids throwing sweet candy projectiles. 4. **The Swedish Pub:** Sing along with Frank Zappa fans singing “Bobby Brown” (shouting and firing glowing letters B, O, B, B, Y). 5. **Volvo Highway:** A survival lane-crossing level where… #### This is Fun! How do I add my own levels? Antigravity CLI has full visibility into the game: ```plaintext > add a godis level where strung out kids throw lordagsgodis ▸ Thought for 2s, 525 tokens Considering Level Placement I will search for level ID checks referencing level 9 in game.js to prepare for adding a 10th level. ● Search(Search for lvl.id === 9 checks) (ctrl+o to expand) I will view lines 495 to 585 in game.js to inspect the current level configurations. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) ▸ Thought for 2s, 1.8k tokens Sequencing the Levels I will view the setLevelAudioMode method in game.js to prepare for adding Level 3 "Lördagsgodis". ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will update the setLevelAudioMode method in game.js to map the scales and tempos for the 10-level layout. ● Edit(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view the current level checks in tickSequencer inside game.js to prepare the next set of replacements. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will shift the level conditionals in the music sequencer tickSequencer method to accommodate the 10-level progression. ● Edit(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 920 to 935 of game.js to locate the exact Maypole check in initLevel . ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 1060 to 1070 of game.js. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 1290 to 1300 of game.js. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 1360 to 1375 of game.js. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 1370 to 1385 of game.js. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 1460 to 1475 of game.js. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will update the level ID checks for the final Maypole level from 9 to 10 and register the candy-throwing kids target name in the HUD. ● Edit(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view the start of the levels array in game.js to prepare the level insertion edit. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 545 to 585 of game.js. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) ▸ Thought for 3s, 1.2k tokens Refining The Level Design I will update the levels array in game.js to insert Lördagsgodis as Level 3, shift subsequent level IDs, and re-calculate scores. ● Edit(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 950 to 985 of game.js to locate the spawnEnemy switch statement. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 985 to 1010 of game.js. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will add the "kid" case to the spawnEnemy switch block. ● Edit(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) ▸ Thought for 3s, 2.1k tokens Considering Projectile Design I will search for class ZappaFan in game.js to locate a suitable place to insert CandyKid and Lordagsgodis . ● Search(Search for ZappaFan in game.js) (ctrl+o to expand) I will view lines 2120 to 2145 in game.js. ● Read(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will insert the CandyKid and Lordagsgodis class definitions in game.js right after the Drunkard class. ● Edit(/home/xbill/midsommer-madness/game.js) (ctrl+o to expand) I will view lines 275 to 325 of index.html. ● Read(/home/xbill/midsommer-madness/index.html) (ctrl+o to expand) I will update index.html to add Level 3 Lördagsgodis to the sidebar levels tracker and update levels 4 through 10. ● Edit(/home/xbill/midsommer-madness/index.html) (ctrl+o to expand) I will run a syntax check on game.js using node to ensure the new classes and level configurations are syntax-error free. ● Bash(node -c game.js) (ctrl+o to expand) I will view lines 20 to 45 of game_overview.md to inspect the levels sequence list. ● Read(/home/xbill/.gemini/antigravity-cli/brain/a...2ba-4622-b252-003672e1b73f/game_overview.md) (ctrl+o to expand) I will update game_overview.md to describe the 10-level layout including Lördagsgodis. ● Edit(/home/xbill/.gemini/antigravity-cli/brain/a...2ba-4622-b252-003672e1b73f/game_overview.md) (ctrl+o to expand) I have successfully added the Lördagsgodis level to Midsommer Madness, featuring hyperactive, sugar-rushed children throwing Saturday candy at Sven! ``` ### Summary of Changes 1. Level Setup ( game.js ): \* Inserted Lördagsgodis as game.js in the levels array, shifting following levels up to Level 10 (ABBA Disco). \* Updated all final-level check logic throughout game.js from Level 9 to Level 10. 2. Added CandyKid & Lordagsgodis Classes ( game.js ): \* Defined game.js and game.js right after the Drunkard class. \* Behavior: \* CandyKid has high speed (1.8), low health (35), and throws sweets rapidly. \* Kids shiver/vibrate rapidly on screen to depict their extreme sugar rush. \* Lordagsgodis are fast-moving candy projectiles (round jelly drops, square sweet gel blocks, and candy star crosses) that rotate in flight and come in a variety of bright colors. 3. Music & Audio: \* Modified game.js to include a happy, hyperactive 150 BPM C Major chiptune track for Level 3 (Lördagsgodis). \* Shifted level conditions in game.js to map Levels 8, 9, and 10 to their respective custom chiptune hooks. 4. UI & Documentation: \* renumerated the sidebar tracker list in index.html to show the 10-level layout. \* Updated the level progression descriptions in game\_overview.md. #### Phew! That was a lot! This installment covered extending the Midsommer madness app with Firebase tools to back the web based versions. Future enhancements under consideration include using crashalytics across mobile platforms.