terrassumptions/client/src/components/screens/RoundSummary/RoundInfoPane.jsx

import React from "react";
import ClickToCopy from "../../util/ClickToCopy";
import Button from "../../util/Button";
import usePlayerScores from "../../../hooks/usePlayerScores";

const useTopScorer = (gameId, roundNum) => {
  const scores = usePlayerScores(gameId);
  const top = { topPlayer: null, topScore: null };

  if (scores === null) {
    return top;
  }

  scores
    .filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score)
    .forEach(({ name, guesses }) => {
      const score = guesses[roundNum].score;
      if (top.topScore === null || score > top.topScore) {
        top.topPlayer = name;
        top.topScore = score;
      }
    });
  
  return top;
}

export default ({ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }) => {
  const { topPlayer, topScore } = useTopScorer(gameId, roundNum);

  return (
    <div className="round-summary__info-pane">
      {selectedPoint 
        ? <span className="round-summary__guess">
            You selected: <ClickToCopy text={`${selectedPoint.lat}, ${selectedPoint.lng}`}/>
          </span> 
        : <span className="round-summary__guess round-summary__guess--timed-out">
            Timed out!
          </span>
      }
      <span className="round-summary__target-point">Target: <ClickToCopy text={`${targetPoint.lat}, ${targetPoint.lng}`}/></span>
      <span className="round-summary__round-score">Score For Round {roundNum}: {score}</span>
      <span className="round-summary__total-score">Running Total Score: {totalScore}</span>
      {topPlayer ? <span className="round-summary__top-score">Current best is {topPlayer} with {topScore}</span> : null}
      <Button className="round-summary__button" onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</Button>
    </div>
  );
}