Handling Game Results

    case 'TICK': {
      if (state.phase !== 'PLAYING' || state.timers.isPaused) return state;

      const newTime = Math.max(0, state.timers.timeRemaining - 1);
      const { gameHour, gameMinute } = updateGameTime(newTime);

      // Customer arrival logic
      const arrivalRate = 0.5;
      const isPeakHour = gameHour === 7;
      const arrivalChance = isPeakHour ? Math.min(1, arrivalRate + 0.25) : arrivalRate;
      const newCustomer = Math.random() < arrivalChance ? 1 : 0;
      const newQueue = Math.min(state.config.maxQueue, state.shop.queueLength + newCustomer);

      // Satisfaction loss
      const satisfactionLoss = newQueue > 10 ? 2 : 0;
      const newSatisfaction = Math.max(0, state.resources.satisfaction - satisfactionLoss);

      // Check Loss Condition
      if (newQueue >= state.config.maxQueue) {
        return {
          ...state,
          phase: 'RESULTS',
          ui: { ...state.ui, screen: 'results' },
          result: { won: false, reason: 'Queue overflow!' }
        };
      }

      if (newTime === 0) {
        return {
          ...state,
          timers: { ...state.timers, timeRemaining: newTime, gameHour, gameMinute },
          shop: { ...state.shop, queueLength: newQueue },
          resources: { ...state.resources, satisfaction: newSatisfaction },
          phase: 'RESULTS',
          ui: { ...state.ui, screen: 'results' },
          result: { won: true, reason: 'Shift complete!' }
        };
      }

      return {
        ...state,
        timers: { ...state.timers, timeRemaining: newTime, gameHour, gameMinute },
        shop: { ...state.shop, queueLength: newQueue },
        resources: { ...state.resources, satisfaction: newSatisfaction }
      };
    }

import React from 'react';
import { useGameContext } from '../context/GameContext';
import './ResultsScreen.css';

export default function ResultsScreen() {
  const { state, dispatch } = useGameContext();
  const result = state.result || { won: false, reason: '', stats: { revenue: 0, customersServed: 0 } };

  const customersServed = result.stats?.customersServed ?? state.shop.customersServed;
  const revenue = result.stats?.revenue ?? state.shop.revenue;
  const beanStock = state.resources.coffeeBeans;

  return (
    <div className="results-screen">
      <div className="results-container">
        <div className={`results-header ${result.won ? 'won' : 'lost'}`}>
          <h1>{result.won ? '🎉 Shift Complete!' : '💥 Shift Failed'}</h1>
          <p className="results-reason">{result.reason}</p>
        </div>

        <div className="results-stats">
          <h3>Your Performance</h3>
          <div className="stats-grid">
            <div className="result-stat">
              <div className="stat-label">Revenue</div>
              <div className="stat-value">${revenue}</div>
            </div>
            <div className="result-stat">
              <div className="stat-label">Served</div>
              <div className="stat-value">{customersServed}</div>
            </div>
            <div className="result-stat">
              <div className="stat-label">Beans Left</div>
              <div className="stat-value">{beanStock}</div>
            </div>
          </div>
        </div>

        <div className="results-actions">
          <button
            className="primary-btn large-btn"
            onClick={() => dispatch({ type: 'START_GAME' })}
          >
            Start New Shift
          </button>
          <button
            className="neutral-btn"
            onClick={() => dispatch({ type: 'RESET' })}
          >
            Back to Menu
          </button>
        </div>
      </div>
    </div>
  );
}

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 = () => {
    dispatch({
      type: 'SET_SCREEN',
      payload: 'results'
    });
  };

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

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