Devlog #8: Expanding Interface Foundation

This week’s focus was all about building more UI on the client. 

Toolbar, Sidebar & Profile Drawer

I implemented a responsive client-side toolbar and sidebar system, with a profile drawer that ties into the user’s authentication state.

• The toolbar dynamically adapts between collapsed and expanded views.

• The sidebar and drawers are wired into a Redux store state, meaning they open, close, and react seamlessly to login/logout events.

• Players can access settings and profile info from here.

Authentication Flow & State Handling

A full login / logout flow is now supported:

• Axios requests automatically handle authentication headers.

• The Redux store tracks the current auth token and session state.

• Hooks make it simple for any component to react to state changes.

This architecture also sets the stage for guest play sessions and persistent user sessions.

Providers & State Management

Added several key React context providers to handle app-wide features:

• PopupProvider — for small contextual popups and modals.

• ThemeProvider — future dark/light theming support. SCSS now supported too

• ToastProvider — global feedback and alerts.

Routing & Layouts

I added React Router to manage pages, and introduced two main layout types:

• MainLayout – used for most non-game pages.

• GameLayout – a focused full-screen mode dedicated to launching and playing Pixel Odyssey.

Next Steps

Up next, I’ll be wiring these systems into actual player sessions (character creation, character selection), adding game menus, and allowing guest play and account linking. I'll also be looking into deployment options to allow you all to play very soon.