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 (
Score for Round {roundNum}: {score} Running Total: {totalScore}
); };