In the previous lesson, you built a simple persistence layer and wired it into the app so the player profile can be saved and restored. In this lesson, you will put that to work by:

• Updating the reducer to record lifetime stats (totalRevenue, totalCustomersServed, bestRevenue, totalGamesPlayed, winStreak, and more).
• Reading those stats in the main menu and rendering them live.
• Adding a light polish pass to the menu styles.

By the end, the menu will show real-time stats that survive page reloads, creating a sense of progress.

You will connect profile updates into the core game loop. The reducer will increment totals after each game, update best revenue, and maintain a win streak. Because you restored the profile in the previous lesson, these updates will be written back to storage automatically.

src/reducer/gameReducer.js

The menu reads the profile from the global state and displays a quick snapshot. Buttons let the player start a game or navigate to settings.

src/components/MenuScreen.jsx

Explanation:

• useGameContext gives you state and dispatch. You read state.profile for the stats.
• The stat-pill elements show best revenue, total games, and the current win streak.
• Buttons dispatch reducer actions, so the menu reacts instantly.

These styles add structure, subtle animation, and clear call-to-action buttons.

src/components/MenuScreen.css

Explanation:

• The container uses a blurred, translucent panel for focus.
• stat-pill styles create compact badges for key metrics.
• large-btn provides strong visual affordance with hover/focus feedback.

You connected the saved profile to gameplay and surfaced it in the UI:

• The reducer now updates lifetime stats after each game (including best revenue, win streak, total revenue, customers served, and games played).
• The menu displays those stats in real time and looks polished.

This makes progress visible and motivating. Ready to lock it in? Head to the practice section — let’s make these changes feel second nature.