State Driven View Management

// src/App.jsx
import React from 'react';
import { GameProvider, useGameContext } from './context/GameContext';
import GameScreen from './components/GameScreen';
import MenuScreen from './components/MenuScreen';
import ResultsScreen from './components/ResultsScreen';
import SettingsScreen from './components/SettingsScreen';
import './App.css';

// Provide fallback components if not present (for teaching/demo continuity)
function FallbackComponent({ name }) {
  return <div style={{ padding: 40, textAlign: 'center', color: '#888' }}>{name} not implemented</div>;
}

// If these components are not implemented, use fallback for demo/runnable code
const SafeGameScreen = GameScreen || (() => <FallbackComponent name="GameScreen" />);
const SafeMenuScreen = MenuScreen || (() => <FallbackComponent name="MenuScreen" />);
const SafeResultsScreen = ResultsScreen || (() => <FallbackComponent name="ResultsScreen" />);
const SafeSettingsScreen = SettingsScreen || (() => <FallbackComponent name="SettingsScreen" />);

function AppContent() {
  const { state } = useGameContext();

  const renderScreen = () => {
    switch (state.ui.screen) {
      case 'menu':
        return <SafeMenuScreen />;
      case 'game':
        return <SafeGameScreen />;
      case 'results':
        return <SafeResultsScreen />;
      case 'settings':
        return <SafeSettingsScreen />;
      default:
        return <SafeMenuScreen />;
    }
  };

  return (
    <div className="app">
      {renderScreen()}
    </div>
  );
}

function App() {
  return (
    <GameProvider>
      <AppContent />
    </GameProvider>
  );
}

export default App;

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

export default function MenuScreen() {
  const { dispatch } = useGameContext();

  return (
    <div className="menu-screen">
      <div className="menu-container">
        <h1 className="game-title">Game Menu</h1>
        <div className="menu-actions">
          <button
            className="large-btn"
            onClick={() => dispatch({ type: 'SET_SCREEN', payload: 'game' })}
          >
            Start Game
          </button>
          <button
            className="large-btn"
            onClick={() => dispatch({ type: 'SET_SCREEN', payload: 'settings' })}
          >
            Settings
          </button>
        </div>
      </div>
    </div>
  );
}

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

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

  return (
    <div className="game-screen">
      <div className="game-container">
        <h1>Game Screen</h1>
        <p>The game is running...</p>
        <button
          onClick={() => dispatch({ type: 'SET_SCREEN', payload: 'results' })}
        >
          Finish Game
        </button>
        <button
          onClick={() => dispatch({ type: 'SET_SCREEN', payload: 'menu' })}
          className="quit-btn"
        >
          Quit to Menu
        </button>
      </div>
    </div>
  );
}