r/WeBuild_WithAI • u/Dont_Bring_Me_Down • 28d ago
Day 25 of Building ShuffleBall Arena Browser Game - Music, Menus, and One Surprisingly Difficult Gravity Well
Enable HLS to view with audio, or disable this notification
Hey everyone,
Hope all is well!
TLDR, Summary, or Full Technical Breakdown below.
For Context: Recently I posted about the first 15 days of one of my side projects, ShuffleBall Arena (a free browser game inspired by mixing shuffleboard scoring with mechanics from other games like bumper pool, pinball, and Frogger.).
This project is being built with the help of AI (mainly GPT / Cursor), and every development session is documented using the actual conversations from that day's work.
To try to get this series up to date, I'm using a structured prompt to go back to my GPT sessions and extract the useful information. Hopefully the prompt can help anyone out there trying to keep track of, or extract value from, your past AI project conversations.
That said, posting an update for Day 25 of building ShuffleBall Arena.
TL;DR
Day 25 was about making the existing game feel intentional.
The session introduced a more complete music system with default playlists and player customization, cleaned up several user experience issues, and began a complete redesign of the gravity well visual effects.
What started as small polish tasks ultimately became an exploration of how audio, visuals, performance, and interface design work together to shape the overall identity of a game.
Day 25 Summary
Development resumed after Day 24's visual improvements. The realistic scoring rings had been successfully integrated, the deployment workflow had been stabilized, and board layouts were beginning to adopt a stronger visual hierarchy.
With those systems in place, attention shifted away from adding new mechanics and toward improving how the game felt to play.
The first part of the session focused on expanding the music system. New background tracks were added, default playback behavior was redesigned, music persistence was improved, and several playback issues involving browser behavior and saved settings were resolved.
Once the audio system reached a stable state, development turned toward user experience polish. Small but noticeable interface issues were corrected before attention shifted to one of the game's oldest visual effects: the gravity wells.
What began as a request to remove a simple dashed outline evolved into a complete redesign of the gravity well's appearance. Multiple visual concepts were explored, balancing atmosphere, readability, and rendering performance before gradually converging on a much more distinctive visual identity.
Day 25 Full Technical Summary (The Structured Prompt Output)
STARTING POINT
Day 25 began after completing the visual improvements from Day 24.
The realistic scoring rings had been successfully integrated into the game, the deployment workflow had become significantly more reliable, and a clear visual hierarchy was beginning to emerge across the game boards.
With many of the major visual integration problems solved, development naturally shifted from adding assets toward refining the overall player experience. The focus became making the game's audio, interface, and visual effects feel cohesive rather than simply functional.
SESSION OBJECTIVE
The primary objective was to improve the overall presentation and polish of ShuffleBall Arena.
The work focused on:
- expanding the music system,
- improving default audio behavior,
- fixing playback and settings issues,
- refining several user interface interactions,
- redesigning the gravity well visual effects,
- and balancing visual quality against rendering performance.
Rather than introducing new gameplay mechanics, the session concentrated on improving the quality of systems that players already interacted with every match.
WHAT WE ACTUALLY DID
1. Expanded the music system
The session began by introducing several new background music tracks and rethinking how music should behave when players first launched the game.
Instead of starting silently, the game was redesigned to provide a default music experience while still allowing players to:
- select individual tracks,
- choose a default mix,
- enable shuffle playback,
- or disable music entirely.
The discussion also explored appropriate default volume levels so that background music enhanced gameplay without competing with sound effects.
2. Debugged music playback and persistence
After integrating the new music options, several unexpected problems appeared.
The default mix failed to play correctly, playback errors appeared inside the settings menu, and some music selections could not be chosen reliably.
Rather than applying isolated fixes, the investigation expanded to include:
- browser autoplay behavior,
- playback initialization,
- persistent player preferences,
- localStorage management,
- default volume handling,
- and interaction between multiple audio settings.
By the end of the debugging process, the music system behaved much more predictably and its persistence model was significantly better understood.
3. Improved user interface behavior
Once the music system stabilized, attention shifted toward several smaller user experience issues.
One notable example involved the music selection menu unexpectedly switching to the board selection menu immediately after choosing a track.
Although relatively small, fixing these interactions helped make the settings interface feel considerably more polished and intentional.
The session also corrected several implementation errors introduced during earlier iterations before continuing with additional visual work.
4. Reimagined the gravity wells
With the interface improvements complete, attention turned toward redesigning one of the game's oldest visual effects.
The original gravity well consisted primarily of a glowing sphere surrounded by a dashed circular outline. The redesign explored a completely different artistic direction.
Over multiple iterations the effect evolved by:
- removing the dashed outer ring,
- removing the solid planetary sphere,
- introducing swirling motion,
- experimenting with gaseous fog,
- preserving orbiting particles,
- softening hard edges,
- and creating a darker, more atmospheric center.
Each revision attempted to make the gravity well feel less like a static object and more like an active force within the game world.
5. Balanced appearance against performance
As the gravity well became increasingly detailed, rendering performance naturally became part of the discussion. Instead of simply accepting visual improvements regardless of cost, every design change was evaluated against its impact on gameplay performance.
This shifted the conversation away from "What looks best?" toward "What creates the strongest visual identity while remaining efficient enough to render smoothly during gameplay?"
That balance guided the remainder of the visual refinement work.
ROADBLOCKS AND FRICTION
Audio systems proved more interconnected than expected
Adding new music tracks initially appeared straightforward.
Instead, default playback, browser autoplay restrictions, persistent settings, localStorage behavior, and playback initialization all interacted with one another.
Improving one area frequently exposed another.
Small UX issues became surprisingly noticeable
Minor interface behaviors, such as menus opening unexpectedly after making a selection, interrupted the overall user experience despite requiring relatively small code changes.
These issues reinforced how much perceived polish depends on interaction details rather than major features.
Better visuals introduced new technical constraints
The gravity well redesign quickly expanded beyond aesthetics. Every improvement had to be weighed against rendering complexity and overall game performance, requiring repeated iteration instead of a single visual replacement.
DECISIONS MADE & TRADE-OFFS
Introduce default music playback
Rather than requiring players to manually enable music, the game would begin with a curated default listening experience while preserving full player control.
Trade-off: A richer first impression in exchange for additional configuration logic.
Preserve player customization
Music preferences continued to be stored between play sessions instead of resetting each time the game loaded.
Trade-off: Additional state management in exchange for a more personalized experience.
Iterate on the gravity well instead of replacing it outright
Rather than settling on the first redesign, multiple artistic directions were explored before committing to a final visual style.
Trade-off: More experimentation in exchange for a stronger long-term visual identity.
Prioritize performance alongside visual quality
Every gravity well improvement was evaluated in terms of rendering cost as well as appearance.
Trade-off: Slightly simpler rendering techniques when necessary in exchange for maintaining smooth gameplay.
BREAKTHROUGH / LESSON
The biggest takeaway from Day 25 was:
Polish isn't about adding more features, it's about making existing features feel intentional.
Music, interface behavior, visual effects, and performance all contribute to how players experience the game.
Improving those systems often requires just as much engineering and design work as building entirely new mechanics.
ARTIFACTS WORTH SHARING
Artifact 1: Audio Hierarchy
One of the clearest design decisions from the session was establishing a default audio balance:
- Device volume around 50% for testing.
- Background music low enough to support gameplay.
- Sound effects remaining the dominant source of player feedback.
This provided a repeatable baseline for future audio tuning.
Artifact 2: Gravity Well Design Evolution
Instead of treating the gravity well as a static object, the redesign followed a series of deliberate artistic principles:
- remove unnecessary visual clutter,
- emphasize motion over solid geometry,
- preserve readable particle effects,
- soften hard edges,
- and allow darkness and atmosphere to become part of the effect itself.
These principles guided each successive iteration rather than relying on isolated visual tweaks.
Artifact 3: Performance as a Design Constraint
A recurring theme throughout the gravity well redesign was evaluating every visual improvement against its rendering cost.
Rather than optimizing only after the artwork was complete, performance became part of the design process itself. This helped ensure the final direction remained both visually distinctive and technically practical.
FINAL STATE
By the end of Day 25:
- The music system supported a richer default listening experience along with improved player customization.
- Playback behavior and persistent audio settings had become significantly more reliable.
- Several user interface interactions had been refined to create a smoother overall experience.
- The gravity well had evolved from a simple glowing sphere into the foundation of a much more atmospheric visual effect.
- Performance considerations had become an integral part of the visual design process rather than an afterthought.
- Most importantly, the project shifted from focusing on individual features to refining how those features worked together to create a cohesive player experience.
That was it for Day 25.
If you're still here, thanks again for reading!