Building the Game HUD

// src/reducers/gameReducer.js
const RUSH_DURATION = 180; 
const MAX_QUEUE = 20;

export function getInitialState(profile = null) {
  return {
    phase: 'IDLE',
    ui: { screen: 'menu' },
    config: {
      difficulty: 'normal',
      maxQueue: MAX_QUEUE,
      startingResources: {
        easy: { money: 100, coffeeBeans: 50, milk: 40, energy: 100 },
        normal: { money: 80, coffeeBeans: 40, milk: 30, energy: 100 },
        hard: { money: 60, coffeeBeans: 30, milk: 20, energy: 100 }
      },
      customerArrivalRate: { easy: 0.3, normal: 0.5, hard: 0.7 }
    },
    timers: {
      timeRemaining: RUSH_DURATION,
      isPaused: false,
      gameHour: 6,
      gameMinute: 0
    },
    resources: {
      money: 80,
      coffeeBeans: 40,
      milk: 30,
      energy: 100,
      satisfaction: 100
    },
    shop: {
      queueLength: 0,
      customersServed: 0,
      ordersCompleted: 0,
      revenue: 0,
      tempBaristaActive: 0
    },
    profile: profile || {
      totalRevenue: 0,
      totalCustomersServed: 0,
      bestRevenue: 0,
      hardestDifficultyBeaten: null,
      totalGamesPlayed: 0,
      winStreak: 0
    },
    history: { past: [], actionLog: [] },
    result: null
  };
}

export function gameReducer(state, action) {
  switch (action.type) {
    case 'SET_SCREEN': {
      return {
        ...state,
        ui: { ...state.ui, screen: action.payload }
      };
    }
    case 'START_GAME': {
      // Reset state but keep profile
      return {
        ...getInitialState(state.profile),
        phase: 'PLAYING',
        ui: { screen: 'game' }
      };
    }
    case 'TOGGLE_PAUSE': {
      return {
        ...state,
        timers: {
          ...state.timers,
          isPaused: !state.timers.isPaused
        }
      };
    }
    default:
      return state;
  }
}

// src/components/GameHUD.jsx
import React from 'react';
import { useGameContext } from '../context/GameContext';
import './GameHUD.css';

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

  const formatGameTime = () => {
    const hour = state.timers.gameHour;
    const minute = Math.floor(state.timers.gameMinute);
    const ampm = hour >= 12 ? 'PM' : 'AM';
    const displayHour = hour > 12 ? hour - 12 : hour;
    return `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`;
  };

  const getQueueColor = () => {
    const percentage = (state.shop.queueLength / state.config.maxQueue) * 100;
    if (percentage < 30) return '#4CAF50';
    if (percentage < 60) return '#FFC107';
    if (percentage < 80) return '#FF9800';
    return '#F44336';
  };

  const isRushHour = state.timers.gameHour === 7;

  return (
    <div className={`game-hud${isRushHour ? ' rush-hour' : ''}`}>
      <div className="hud-section time-section">
        <h2 className={isRushHour ? 'pulse-fast' : ''}>
          🕐 {formatGameTime()}
        </h2>
        <p className="hud-label">{isRushHour ? '⚡ RUSH HOUR ⚡' : 'Morning Shift'}</p>
        <button
          className="neutral-btn small-btn"
          onClick={() => dispatch({ type: 'TOGGLE_PAUSE' })}
        >
          {state.timers.isPaused ? '▶️ Resume' : '⏸️ Pause'}
        </button>
      </div>

      <div className="hud-section resources-section">
        <div className="resource-item">
          <span className="resource-icon">💰</span>
          <div>
            <div className="resource-value">${state.resources.money}</div>
            <div className="resource-label">Cash</div>
          </div>
        </div>
        <div className="resource-item">
          <span className="resource-icon">☕</span>
          <div>
            <div className="resource-value">{state.resources.coffeeBeans}</div>
            <div className="resource-label">Beans</div>
          </div>
        </div>
        <div className="resource-item">
          <span className="resource-icon">🥛</span>
          <div>
            <div className="resource-value">{state.resources.milk}</div>
            <div className="resource-label">Milk</div>
          </div>
        </div>
        <div className="resource-item">
          <span className="resource-icon">⚡</span>
          <div>
            <div className="resource-value">{state.resources.energy}</div>
            <div className="resource-label">Energy</div>
          </div>
        </div>
        <div className="resource-item">
          <span className="resource-icon">😊</span>
          <div>
            <div className="resource-value">{state.resources.satisfaction}</div>
            <div className="resource-label">Satisfaction</div>
          </div>
        </div>
      </div>

      <div className="hud-section queue-section">
        <div className="queue-header">
          <span>👥 Customer Queue</span>
          <span style={{ color: getQueueColor() }}>
            {state.shop.queueLength} / {state.config.maxQueue}
          </span>
        </div>
        <div className="queue-bar" style={{ background: '#eee', borderRadius: 8, height: 16, marginTop: 4 }}>
          <div 
            className="queue-fill"
            style={{
              width: `${(state.shop.queueLength / state.config.maxQueue) * 100}%`,
              backgroundColor: getQueueColor(),
              height: '100%',
              borderRadius: 8,
              transition: 'width 0.3s'
            }}
          />
        </div>
      </div>
    </div>
  );
}