Flutter Midsommer Madnesss

This is a submission for the June Solstice Game Jam When you have a hammer- everything is a...

published: true series: midsommer

This is a submission for the June Solstice Game Jam

When you have a hammer- everything is a nail!

This installment brings a Flutter build to Midsommer Madness via Antigravity.

A complete Android APK is built with Flutter and some Joystick bugs are fixed!

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 on the GO!

Midsommer Madness now in as an Android APK!

Code

GitHub repo is here:

https://github.com/xbill9/midsommer-flutter

{% embed https://github.com/xbill9/midsommer-flutter %}

My Lingonberries are ripening- get to work!

 Appreciating Procedural Creation
  Midsommer Madness is a Swedish-themed retro action-arcade game built as a hybrid mobile/web application. The
  codebase combines a Flutter wrapper (serving as the native shell) with a Vanilla Web App (implementing the core
  game loop, visuals, and audio synthesis).
  Below is a detailed breakdown of how the application works, its files, and its core subsystems.
  ──────
  ### 🏛️ High-Level Architecture
    graph TD                                                                                                       
        A[Native Android/iOS App] -->|main.dart| B[WebViewWidget]                                                  
        B -->|Loads local asset| C[assets/index.html]                                                              
        C -->|Styles & Layout| D[assets/index.css]                                                                 
        C -->|Game Logic & Rendering| E[assets/game.js]                                                            
        E -->|Audio Synthesis| F[Web Audio API]                                                                    
        E -->|Drawing| G[HTML5 Canvas]                                                                             
  ──────
  ### 📱 1. Native Flutter Wrapper
  The Flutter container configures the device environment and embeds the web canvas in a native web view.

  • Orientation & Screen Lock: main.dart locks the screen orientation to Landscape ( DeviceOrientation.       
  landscapeLeft  /  DeviceOrientation.landscapeRight ).
  • Immersive Mode: It sets the system UI to a sticky immersive fullscreen mode ( SystemUiMode.immersiveSticky ),
  hiding status and navigation bars.
  • WebView Integration: A  WebViewWidget  loads the local asset index.html.
  • Audio Gesture Bypassing: On Android, webviews usually block autoplay sounds unless there is a physical user
  click. main.dart explicitly bypasses this restriction ( setMediaPlaybackRequiresUserGesture(false) ) so that
  background music and procedural SFX start seamlessly.
  • Mobile Styling Injector: Once the webpage loads, Flutter injects an  android-app  CSS class into the HTML root
  element ( document.documentElement ), enabling mobile-specific media styles and virtual joysticks configured in
  index.css.
  ──────
  ### 🎨 2. UI, Lore, & Styling (HTML/CSS)

  • Canvas Shell: index.html holds the  <canvas>  element surrounded by a Glassmorphism UI using Swedish
  national colors (blue and yellow).
  • HUD: A top HUD bar tracks current sundown limits (timers), level names, objectives, and music toggles. A bottom
  HUD panel displays Sven's current energy bar, surströmming ammo inventory, and final score.
  • Mobile Controls Overlay: Virtual touchscreen overlays (a virtual joystick zone and melee/ranged button zones)
  are embedded in index.html and dynamically activated on mobile/Android layouts.
  • Lore and Info Cards: Left and right sidebars on desktop teach the player how to play, detail power-ups
  (Köttbullar/Meatballs and Knäckebröd/Crispbread), and outline the level-by-level progress.
  ──────
  ### 🕹️ 3. Core Game Engine ( game.js )

  All game logic, physics, entity updates, and audio generation are written in vanilla JavaScript inside
  game.js.

  #### 🔁 Fixed-Timestep Game Loop

  To ensure gameplay runs consistently at 60Hz across both older mobile devices and high-refresh-rate monitors, the
  game.js class utilizes a fixed accumulator-based loop inside game.js:

    while (this.accumulator >= this.timestep) {                                                                    
        if (this.currentState === this.states.PLAYING) {                                                           
            this.update(this.timestep);                                                                            
        }                                                                                                          
        this.accumulator -= this.timestep;                                                                         
    }                                                                                                              
    this.render();                                                                                                 

  #### 🎵 Procedural Web Audio Synthesizer

  Instead of loading large MP3/WAV files, the game generates all audio procedurally via the Web Audio API using the
  game.js class:

  • Interactive Sound Effects: Custom waveforms (sine, triangle, sawtooth) are programmatically modulated using
  exponential ramps for pitch and gain to synthesize actions like swing swipes, explosions, and powerups.
  • Level-Specific Music: The background track adapts to the current level context by altering scale arrays (e.g. D-
  Dorian for the Swedish Pub level, A-Minor for Avicii Rave, or C-Minor Disco for the ABBA finale) and BPM tempos.

  #### ⚔️ Combat & Gameplay Mechanics

  • Objective: Sven must navigate each map and find the Exit Portal (or the Maypole in the final level) before the
  Level Timer reaches zero (sundown).
  • Game Over (Meltdown): If the timer runs out, Sven gets sacrificed to the pagan spirits (a node to Midsommar /
  The Wicker Man), resulting in a "Meltdown" Game Over.
  • Weapons:
      • Melee: Sven swings a hockey stick (implemented via game.js) to damage nearby enemies.
      • Ranged: Sven throws Surströmming Cans (game.js) which explode upon impact, releasing a green gas
      cloud (game.js) dealing Area-of-Effect (AoE) damage over time.
  • Power-Ups: Sven gathers meatballs ( MeatballItem  restores health/energy) and crispbread ( KnackebrodItem 
  awards shields and temporary speed boosts).

  #### 👾 Swedish-Themed Levels & Enemies

  Each of the 10 levels features custom background grids, colors, difficulty configurations, and specialized
  subclasses inheriting from game.js:

  1. IKEA Warehouse: Dodging flatpack-carrying shoppers (game.js).
  2. Systembolaget: Drunk Swedes throwing glass bottles (game.js).
  3. Lördagsgodis: Strung-out Swedish children throwing sweet candies (game.js).
  4. The Swedish Pub: Zappa fans throwing musical notes (game.js).
  5. Volvo Highway: Fast racing Volvos zooming across lanes (game.js) where survival-based crossing is key.
  6. Dalarna Forest: Wooden Dalarna Horses performing sudden dash attacks (game.js).
  7. Allemansrätten: Collecting cloudberries while dodging aggressive stomping elks (game.js).
  8. Kvinnafängelset: Escape the women's prison guarded by guards throwing handcuffs (game.js).
  9. Avicii Rave: Neon-glowing ravers throwing glowsticks (game.js).
  10. ABBA Disco: Metallic ABBA bots shooting laser balls (game.js) around the final Maypole objective.

Tack so Mycket!

How do you deploy this?

 The  make help  command was executed successfully. Here is the list of available commands for managing this
  project:

    ========================================================================
    🇸🇪  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 install-apk  - Install the compiled debug APK on a connected device/emulator
        make clean        - Clean Flutter build outputs and temporary caches
        make logcat       - Monitor application logs using Flutter logger
      ========================================================================

This is Fun! How do I add my own levels?

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

How I Built It

First - let's give antigravity some skills:

npx antigravity-awesome-skills

# Antigravity CLI slash commands (agy): ~/.gemini/antigravity-cli/skills/<skill>/SKILL.md
npx antigravity-awesome-skills --agy
Need to install the following packages:
antigravity-awesome-skills@12.1.0
Ok to proceed? (y) 
Cloning repository…
Cloning repository at v12.1.0…
Cloning into '/tmp/ag-skills-smWfsY'...
remote: Enumerating objects: 7516, done.
remote: Counting objects: 100% (7516/7516), done.
remote: Compressing objects: 100% (5375/5375), done.
remote: Total 7516 (delta 694), reused 5837 (delta 675), pack-reused 0 (from 0)
Receiving objects: 100% (7516/7516), 33.68 MiB | 51.63 MiB/s, done.
Resolving deltas: 100% (694/694), done.
Note: switching to '43af20cbe0dc298c40ff709993d8b4f7b4a274b6'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false


Installing for 1 target(s):

Antigravity:
  Updating existing install at /home/xbill/.agents/skills…
  ✓ Installed to /home/xbill/.agents/skills

Pick a bundle in docs/users/bundles.md and use @skill-name in your AI assistant.

If Antigravity hits context/truncation limits, see docs/users/agent-overload-recovery.md

For the agy CLI slash-command menu, install the Antigravity CLI layout with --agy.

For clone-based installs, use scripts/activate-skills.sh or scripts/activate-skills.bat

For Antigravity 2.0, OpenCode, or other .agents/skills installs, prefer a reduced install with --risk, --category, or --tags to avoid context overload.

Example: npx antigravity-awesome-skills --path .agents/skills --category development,backend --risk safe,none
Cloning repository…
Cloning repository at v12.1.0…
Cloning into '/tmp/ag-skills-Qc4vHc'...
remote: Enumerating objects: 7516, done.
remote: Counting objects: 100% (7516/7516), done.
remote: Compressing objects: 100% (5375/5375), done.
remote: Total 7516 (delta 694), reused 5837 (delta 675), pack-reused 0 (from 0)
Receiving objects: 100% (7516/7516), 33.68 MiB | 37.49 MiB/s, done.
Resolving deltas: 100% (694/694), done.
Note: switching to '43af20cbe0dc298c40ff709993d8b4f7b4a274b6'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false


Installing for 1 target(s):

Antigravity CLI:
  ✓ Installed to /home/xbill/.gemini/antigravity-cli/skills

Pick a bundle in docs/users/bundles.md and use @skill-name in your AI assistant.

Restart agy and type /skills or /<skill-name> to load installed Antigravity CLI skills.

Prize Category

Best Google AI Usage - Antigravity CLI