/* @component-map
 * App — Main container, handles view switching between lobby and game
 * Lobby — Room name input and join functionality
 * GameArea — Main game container with status bar, phases, and round management
 * HangmanCanvas — Canvas drawing of the hangman figure
 * WordDisplay — Letter slots showing guessed/hidden letters
 * Keyboard — On-screen keyboard for letter guessing
 * @end-component-map */

import { Lobby } from './components/Lobby.jsx';
import { GameArea } from './components/GameArea.jsx';

function App() {
  const [room, setRoom] = useState(null);
  const [myId, setMyId] = useState(null);
  const [myName, setMyName] = useState(null);

  const handleJoin = (roomName, userId, userName) => {
    setRoom(roomName);
    setMyId(userId);
    setMyName(userName);
  };

  return (
    <div className="container">
      <h1>Hangman Duel</h1>
      <p className="subtitle">2-player hangman — take turns setting words &amp; guessing</p>
      {!room ? (
        <Lobby onJoin={handleJoin} />
      ) : (
        <GameArea room={room} myId={myId} myName={myName} />
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);