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 TICK only while playing and not paused. This avoids wasted work and keeps timing stable.
  • Cleanup clears the interval to prevent memory leaks.
  • The End Shift button dispatches END_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 getInitialState define the "Day 0" shape of our world.
  • Helper functions like getDifficultySettings and updateGameTime keep 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_DIFFICULTY before 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 enabled flag 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 ShopView with 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.

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