terrassumptions/client/src/components/screens/GamePanel/GamePanel.jsx

import React, { useState } from 'react';
import { sendGuess } from "../../../domain/GGSHService";
import Loading from '../../util/Loading';
import GuessPane from "./GuessPane";
import PositionedStreetView from "./PositionedStreetView";
import useRoundInfo from "./useRoundInfo";

const GamePanelContainer = ({ gameId, playerName, onRoundEnd, onGameEnd }) => {
  const [submitDisabled, setSubmitDisabled] = useState(false);
  const [selectedPoint, setSelectedPoint] = useState(null);
  const [finished, roundInfo] = useRoundInfo(gameId, playerName);

  if (finished) {
    onGameEnd();
    return <Loading/>
  }

  const { currentRound, targetPoint, roundSeconds } = roundInfo;
  if (!currentRound || !targetPoint || !roundSeconds) {
    return <Loading/>
  }

  const handleSubmitGuess = async () => {
    setSubmitDisabled(true);
    const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint || { timeout: true });
    onRoundEnd({
      roundNum: currentRound,
      selectedPoint,
      targetPoint,
      score,
      totalScore,
    });
  }

  return (
    <div className="game-panel">
      <div className="game-panel__streetview">
          <PositionedStreetView position={targetPoint} />
      </div>
      <GuessPane
        roundSeconds={roundSeconds}
        onTimeout={handleSubmitGuess}
        onSelectPoint={setSelectedPoint}
        onSubmitGuess={handleSubmitGuess}
        submitDisabled={submitDisabled || selectedPoint === null}
      />
    </div>
  );
}

export default GamePanelContainer;