In the last lessons, you set up a global store with useReducer + Context and drove screens from state. As a quick reminder, your UI now depends on a single state tree, and navigation is just dispatching actions. In this lesson, you will build the GameHUD (Heads-Up Display) to read from that state and compute “derived” values during render (like time text, queue colors, and progress widths).

You already built most of the reducer in the previous unit; the new part here is a simple TOGGLE_PAUSE action that the HUD will dispatch. The rest of this file mirrors what you have, shown here as context.

Explanation:

• TOGGLE_PAUSE flips timers.isPaused without touching other fields. It is a pure update and keeps the reducer focused.
• You will dispatch this from the HUD’s Pause/Resume button.

Now create the HUD that consumes the global state and derives UI values on the fly (no extra component state needed). You read from Context, compute display values, and conditionally style elements.

You connected the UI to state in a clean way:

• Added TOGGLE_PAUSE to the reducer.
• Built GameHUD to compute derived values (time text, queue color, bar width) at render time.

You are ready to practice and make this HUD feel alive. Let’s jump in and bring more of the game state to the screen.