Game Loop and Time Management

In the previous lesson, you wired up player actions and reducer updates. As a quick reminder, your GameActions component dispatches events, and the reducer applies guarded, immutable updates. Today, you will make the café feel alive by introducing time. You will create a game loop that dispatches a TICK every second, pause it based on state, and clean up intervals to avoid leaks.

We attach the loop in the screen component with a useEffect that sets up a setInterval. The interval dispatches TICK once per second only when the game is running and not paused. Cleanup ensures we stop the timer when the component unmounts or the dependencies change.

src/components/GameScreen.jsx

import React, { useEffect } from 'react';
import { useGameContext } from '../context/GameContext';
import GameHUD from './GameHUD';
import GameActions from './GameActions';
import './GameScreen.css';

export default function GameScreen() {
  const { state, dispatch } = useGameContext();

  useEffect(() => {
    if (state.phase !== 'PLAYING' || state.timers.isPaused) {
      return;
    }

    const interval = setInterval(() => {
      dispatch({ type: 'TICK' });
    }, 1000);

    return () => clearInterval(interval);
  }, [state.phase, state.timers.isPaused, dispatch]);

  const handleBackToMenu = () => {
    if (window.confirm('Are you sure you want to quit? Progress will be lost.')) {
      dispatch({ type: 'RESET' });
    }
  };

  return (
    <div className="game-screen">
      <div className="game-container">
        <GameHUD />
        <GameActions />

        <button
          className="neutral-btn quit-btn"
          onClick={handleBackToMenu}
        >
          End Shift
        </button>
      </div>
    </div>
  );
}

What is happening:

• Guard clause: If we are not in the PLAYING phase or the game is paused, do not start an interval.
• Interval: Dispatches { type: 'TICK' } every 1000 ms.
• Cleanup: clearInterval prevents memory leaks and duplicate timers.
• Dependency array: Restarting the interval when phase or isPaused changes ensures the loop tracks the current state.

The reducer is still the “brain.” For now, each tick reduces the remaining time and converts real seconds to in-game hours and minutes (1 sec = 3 game minutes). You will expand this logic in the next unit.

src/reducers/gameReducer.js

    case 'TICK': {
      // Basic Tick Logic (Will be expanded in the next unit)
      if (state.phase !== 'PLAYING' || state.timers.isPaused) return state;

      const newTime = Math.max(0, state.timers.timeRemaining - 1);

      // Simple game time calculation
      const totalMinutes = 180 - newTime;
      const gameMinutesElapsed = totalMinutes * 3; // 1 real sec = 3 game mins
      const gameHour = 6 + Math.floor(gameMinutesElapsed / 60);
      const gameMinute = gameMinutesElapsed % 60;

      return {
        ...state,
        timers: {
          ...state.timers,
          timeRemaining: newTime,
          gameHour,
          gameMinute
        }
      };
    }

Key ideas:

• Guard early if not PLAYING or paused to keep updates predictable.
• Convert remaining real-time seconds into a fast-forwarded in-game clock.
• Return a new state object to maintain immutability and clean re-renders.

You now have a reliable game loop:

• A useEffect-backed interval that ticks only when the game is active.
• Proper cleanup to avoid multiple overlapping timers.
• A reducer that updates time consistently and safely.

Next, you will practice making the loop feel real with events and dynamic state. Let’s head to the practice section and bring more motion into the café.