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

import React, { useRef } from "react";
import styled from "styled-components";
import { useLastRound } from "../../../domain/gameStore";
import useMarkersFromGuesses from "../../../hooks/useMarkersFromGuesses";
import useMap from "../../../hooks/useMap";
import NextRoundButton from "./NextRoundButton";
import useClickToCheckScore from "./useClickToCheckScore";
import { usePlayers } from "../../../hooks/useGameInfo";
import usePreventNavigation from "../../../hooks/usePreventNavigation";

const SummaryDiv = styled.div`
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  background-color: #333;
  z-index: 1;
  bottom: 16px;
  right: 8px;
  padding: 8px;
`

const ScoreSpan = styled.span`
  padding-bottom: 2px;
`;

const MapDiv = styled.div`
  position: absolute;
  height: 100%;
  width: 100%;
`

export default () => {
  // get the info about the last round
  const { roundNum, score, totalScore, targetPoint } = useLastRound();

  // create the map
  const mapDivRef = useRef(null);
  const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);

  // live update with all the scores
  const players = usePlayers();

  // add the player guess markers
  useMarkersFromGuesses(mapRef, players, roundNum, targetPoint);

  // let the current player click the map to see a possible score
  useClickToCheckScore(mapRef, targetPoint);

  // warn the user if they navigate away
  usePreventNavigation();
  
  return (
    <div>
      <MapDiv ref={mapDivRef} />
      <SummaryDiv>
        <ScoreSpan>Score for Round {roundNum}: {score}</ScoreSpan>
        <ScoreSpan>Running Total: {totalScore}</ScoreSpan>
        <NextRoundButton/>
      </SummaryDiv>
    </div>
  );
};