📋 Devlog #2 – Bringing Order to Chaos: Building the Velocity Puck Menu System

Hey again, and welcome back to another devlog! If you read Devlog #1, you know that Velocity Puck started as a simple 2D air hockey prototype—one paddle, one puck, and a mission to just make it feel good.

In this update, I tackled a challenge that’s less glamorous than physics or explosions—but just as critical: player control and UI flow.

🧭 Why a Menu System?

As I started adding more features like:

• Custom paddle colors

• Arena color themes

• Light/Dark mode toggle

• Pause functionality

…it quickly became clear the UI was getting cluttered.

All these buttons were floating in different corners of the screen, and while it worked, it didn’t feel organized. So I decided to build a central menu system using a clean, responsive hamburger-style side panel.

🎨 Designing the Slide-Out Menu

Here’s what I added in this version:

📱 Hamburger Menu Button

A compact, modern button sits in the top-left corner. When clicked, it animates into an X and slides out a left-side panel.

html
<button class="menu-button">   
   <div class="menu-button-icon">                  
     <span></span>
     <span></span>
     <span></span>   
   <div class="menu-button-text">Menu</div>
</button>

The animations and transitions give it that polished "app-like" feel.

📂 Side Panel Contents

The slide-out menu includes:

• 🆕 New Game — resets the puck and scores

• 🎨 Colors — toggle paddle color options

• 🟩 Field Colors — toggle background themes

• 🌗 Toggle Theme — switches between Light and Dark mode

• ⏸️ Pause Game — halts the action

Each menu item is a simple <button> styled to blend with the game’s aesthetic. On light theme, it switches to brighter UI elements automatically.

🔄 JavaScript Interaction

When a player taps a menu item, it runs specific in-game logic:

js
menuItems.forEach((item, index) => {   
  item.addEventListener('click', () => {     
    // ...toggle menu off     
    switch(index) {       
      case 0: // New Game         
      playerScore = 0;         
      aiScore = 0;         
      resetPuck();         
      updateScore();         
      break;       
    // ...other cases     
   }   
 }); 
});

The system is fully modular, meaning I can easily add new options in the future—like difficulty settings, game modes, or even a shop menu.

✨ Why This Matters

This menu isn’t just for aesthetics. It’s the first step toward:

• A scalable game structure

• Cleaner UX for casual players

• Better accessibility across devices

It also gave me a chance to reinforce my goal: Velocity Puck isn’t just about fast gameplay—it’s about feeling sleek, polished, and fun to navigate.

🛣️ Next Steps

Coming up:

• Sound toggle + feedback system

• Animated transitions between game states

• Dynamic difficulty setting in the menu

• More detailed match setup options

Thanks for sticking with me on this journey! Velocity Puck is growing fast, and I’m excited to keep refining the experience.

Feel free to drop feedback or feature suggestions—I’m always looking to improve.

Until next time,
— Jordon McClain
 Steel Cyclone Studios LLC