VOOZH about

URL: https://dev.to/gde/firebase-midsommer-madnesss-with-antigravity-cli-3geb

⇱ Firebase Midsommer Madnesss with Antigravity CLI - DEV Community

June Solstice Game Jam Submission

This is a submission for the June Solstice Game Jam

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!

👁 Image

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:

👁 Image

Just show me the Code!!!

GitHub Repo is here:

GitHub - xbill9/midsommer-firebase

Midsommer Madness with Firebase

So how can we use Firebase to enhance the project?

Github and Skills!

 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?

> 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 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:

> 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:

>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:

 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

Watch the Leader Board

Looks like Rolfe has been skilling up!

👁 Image

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:

> 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.