Final Polish and Optimization: What You Will Build
You have a persistent profile and a dynamic menu from the previous lesson. As a quick reminder, the profile now updates after each run and survives reloads. In this lesson, you will focus on the final assembly and performance polish:
- Drive the real-time game loop safely with React hooks.
- Add visual feedback with a dedicated ShopView.
- Finish the reducer logic for
difficulty,auto-serve, and end conditions. - Tie everything together in the menu and action panels with a clean UI.
By the end, the game will feel responsive, readable, and production-ready.
Drive the Game Loop in GameScreen
src/components/GameScreen.jsx
Explanation:
- The effect sets a 1-second interval that dispatches
TICKonly while playing and not paused. This avoids wasted work and keeps timing stable. - Cleanup clears the interval to prevent memory leaks.
- The
End Shiftbutton dispatchesEND_SHIFT, moving to results immediately.
Visual Feedback with ShopView and CSS
src/components/ShopView.jsx
Explanation:
- Translates state into friendly labels: mood (by satisfaction), queue status (by length), and supply status (beans/milk thresholds).
- The emoji “visual” reacts to queue length, giving instant, lightweight feedback.
Core Logic: State and Helpers
src/reducers/gameReducer.js
Explanation:
- Constants and
getInitialStatedefine the "Day 0" shape of our world. - Helper functions like
getDifficultySettingsandupdateGameTimekeep the reducer lean and focused on state transitions rather than math.
Core Logic: The Reducer
src/reducers/gameReducer.js
UI Integration: Menu Screen
src/components/MenuScreen.jsx
Explanation:
- Shows lifetime stats pulled from the persistent profile.
- Difficulty buttons adjust game parameters via
SET_DIFFICULTYbefore starting.
UI Integration: Game Actions
src/components/GameActions.jsx
Explanation:
- Each card is a declarative source of truth for costs and logic.
- Buttons use the
enabledflag to visually communicate constraints (like not enough money or beans).
Summary and Next Steps
Great work. You:
- Drove the real-time loop with a clean, safe interval.
- Added a responsive
ShopViewwith clear, immediate feedback. - Finalized the reducer for
difficulty, auto-serving, satisfaction, and end states. - Polished the menu and actions so stats and controls feel cohesive.
You are ready to practice and make these patterns second nature. Let’s put the finishing touches into action.

Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal