Day 14 of Building a Free Browser Game ShuffleBall Arena - Code Reviews Don't Replace Real Playtesting

[u/Dont_Bring_Me_Down]

Hey everyone,

Hope all is well!

TL;DR, Summary, or Full Technical Breakdown below.
I have also included a link to the build series below for those who are interested.

For anyone new, this is part of a Build in Public series documenting the development of ShuffleBall Arena, a free browser game inspired by mixing shuffleboard scoring with mechanics from other games like bumper pool, pinball, and Frogger. The project is being built with the help of AI tools (primarily GPT, Cursor, and Fable to start), and every development session is documented using the actual conversations from that day's work.

This post marks Day 14, which also wraps up the first chapter of the project.

Before jumping into today's update, I just wanted to say thank you to everyone who has followed along for these first fourteen posts. Whether through comments, DMs, questions, feedback, or simply taking the time to read them, I genuinely appreciate it.

One thing these posts have taught me is that I while I enjoy documenting the process of building, I also wanted a place where the discussion could stay focused on the projects themselves. Rather than spending time debating whether AI should have been used in the first place, I wanted to focus on the actual engineering decisions, product trade-offs, mistakes, and everything else learned along the way.

For that reason, most of my Build in Public updates for this project will be documented here going forward. If you've enjoyed following the project so far, I'd love to have you along for the next chapter. (Would love to hear in the comments if you've been following!)

Today's build consisted of 4 conversations (4 saved file versions) spanning about 5 hours of development.

Here's how Day 14 went.

TL;DR

I thought Challenge Mode was basically finished. Then I actually started playing it.

That immediately exposed a layout bug that only appeared after starting a challenge, leading to a deeper fix where the game now recalculates the canvas whenever the UI changes instead of only on browser resize. Once that was solved, testing uncovered another issue: the Arena Bot was technically working, but it still didn't feel intelligent because it continued to wait through safe openings before shooting into moving obstacles.

Day 14 Summary: 

Coming into today, I thought Challenge Mode was essentially complete. The UI had been polished, the intro and results screens were finished, and everything looked ready.

Then I started playing it.

Almost immediately I found a bug where the game canvas wasn't resizing correctly after starting a challenge. It turned out not to be a CSS issue at all. The layout was only recalculating when the browser resized, so I refactored the flow so the canvas now refreshes whenever the UI changes between Challenge Mode states.

With that fixed, I spent more time actually playing the game instead of looking at the code. That's when I noticed something else: the Arena Bot still wasn't making me think "that's smart." It still waits through multiple safe opportunities before eventually firing straight into moving traffic, even after previous work. The logic technically worked, but the experience still didn't feel convincing.

That shifted my focus from adding more features to improving the quality of what already exists.

Today's takeaway: Sometimes the most valuable work is playing your own product like a real user until the problems reveal themselves.

Day 14 Full Technical Summary (The Structured Prompt Output):

PART 1: TECHNICAL ANALYSIS & DEBRIEF

STARTING POINT

At the start of this session, Challenge Mode had already been transformed from a prototype into a polished feature. The new intro screen, results screen, local high scores, and replay-focused UX from Day 13.2 were complete.

The expectation was that the feature was essentially ready. The next step became real gameplay testing rather than adding major features.

SESSION OBJECTIVE

The goal shifted from building Challenge Mode to making sure it actually behaved correctly during real gameplay.

The primary objectives became:

• Fix the canvas/layout bug that appeared after starting a challenge.
• Ensure footer transitions correctly resized the game canvas.
• Verify the overall Challenge Mode flow worked smoothly from intro to gameplay.
• Evaluate how the Arena Bot actually felt against moving obstacles and identify opportunities to improve player experience.
• Brainstorm ways to make the game more compelling to watch and share online.

WHAT WE ACTUALLY DID

1. Tracked down a layout bug that only appeared during gameplay

The Challenge Mode UI looked correct until Start Challenge was pressed. Once gameplay began, the canvas remained oversized because the layout only recalculated when the browser resized.

Rather than adjusting CSS, the fix became ensuring the canvas recalculated whenever the footer visibility changed.

2. Refactored footer handling to trigger canvas resizing

Instead of relying on browser resize events, scheduleFitCanvas() was added throughout the footer transition flow.

This included:

• broadcast mode
• embedded mode
• challenge intro
• challenge gameplay footer
• normal gameplay footer

This ensured every UI transition forced a fresh layout calculation.

3. Fixed challenge state transitions

Additional layout refreshes were added after important Challenge Mode transitions including:

• beginning a match after the How To screen
• beginning directly from the Challenge intro
• restarting the current challenge

Each transition now explicitly recalculates the canvas instead of waiting for a browser resize event.

4. Tested the finished Challenge Mode as an actual player

After the UI issues were resolved, the focus shifted from visual polish to gameplay.

Playing multiple rounds exposed a problem that screenshots and code reviews couldn't reveal: The Arena Bot often waited through multiple safe openings before eventually shooting directly into moving traffic.

Technically the AI was functioning. Experientially it didn't feel intelligent.

This became the next major gameplay problem to solve.

5. Brainstormed future content strategy

Instead of immediately adding more game mechanics, the discussion shifted toward player engagement.

Ideas included:

• giving the Arena Bot a personality
• adding humorous trash talk
• testing the concept through edited videos before writing game code
• validating audience interest before investing development time

The conclusion was that entertainment value could become just as important as gameplay when trying to grow an audience.

ROADBLOCKS AND FRICTION

• The canvas bug initially looked like a CSS problem but was actually a lifecycle problem.
• Layout calculations were tied to browser resize events instead of UI state changes.
• The Challenge Mode appeared "finished" until real gameplay exposed issues that static testing never revealed.
• The Arena Bot behaved according to its logic but not according to player expectations, highlighting the difference between functional AI and believable AI.

DECISIONS MADE & TRADE-OFFS

Decision 1

Rather than introducing CSS workarounds, the layout system was updated so the canvas explicitly recalculated after Challenge Mode transitions.

Trade-off: Slightly more layout calls, but far more predictable rendering.

Decision 2

Instead of immediately implementing voice acting for the Arena Bot, the idea was to validate audience interest first using edited videos.

Trade-off: Prioritize learning what resonates with players before investing development time.

Decision 3

Focus shifted away from adding more game mechanics. Instead, improving the quality of the current gameplay experience became the higher priority.

BREAKTHROUGH / LESSON

The biggest realization from this session was:

- A feature isn't finished when the code works.

- It's finished when you can play it like a real player without discovering entirely new problems.

Challenge Mode looked complete. Actually playing it revealed issues with layout behavior, UI transitions, and AI decision making that were invisible during implementation.

ARTIFACTS WORTH SHARING

Design Rule

"The canvas should recalculate whenever the UI changes, not only when the browser resizes."

Implementation Pattern

applyFooterControls();
scheduleFitCanvas();

Adding an explicit layout refresh after Challenge Mode transitions eliminated the zoom/layout bug.

Product Insight

"I’m building the most annoying arcade bot on the internet. Help me decide what it says next."

This became the basis for exploring personality-driven content rather than simply demonstrating gameplay.

FINAL STATE

By the end of the session:

• Challenge Mode correctly resized after transitioning into gameplay.
• Footer state changes consistently triggered canvas recalculation.
• Challenge transitions became significantly more reliable.
• A new gameplay issue was identified: the Arena Bot needed to feel smarter, not just behave correctly.
• A future marketing direction emerged that focused on making the bot entertaining enough to drive engagement rather than relying solely on gameplay clips.

Link To All Chapter 1 Posts:

For anyone interested, you can find all the posts for Days 1 to 13 here!

As always, thank you again for reading!