Posted October 14, 2025 by Grinstba
This week’s focus was all about building more UI on the client.
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.
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.
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.
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.
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.