terrassumptions/client/src/components/round-summary.component.jsx

import React from "react";
import withGoogleApiKey from "./with-google-key.component";

// TODO eventually we want this to query and show other players

const RoundSummary = ({ googleApiKey, round, onNext }) => {
  const {
    roundNum,
    selectedPoint,
    targetPoint,
    score,
    totalScore,
  } = round;
  // TODO determine zoom and center dynamically, or make this a dynamic map
  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?key=${googleApiKey}`;
  const size = `&size=600x400`
  const zoom = `&zoom=5`;
  const centerOnTarget = `&center=${targetPoint.lat},${targetPoint.lng}`;
  const targetMarker = `&markers=color:blue|label:T|${targetPoint.lat},${targetPoint.lng}`;
  const selectedMarker = selectedPoint ? `&markers=color:red|label:S|${selectedPoint.lat},${selectedPoint.lng}` : ""

  return (
    <div>
      <img 
        src={mapUrl + size + zoom + centerOnTarget + targetMarker + selectedMarker}
        alt={`Map pointing to ${targetPoint.lat},${targetPoint.lng}`}
      />
      {selectedPoint ? <p>You Selected: {`${selectedPoint.lat},${selectedPoint.lng}`}</p> : <p>Timed out!</p>}
      <p>Target: {targetPoint.lat},{targetPoint.lng}</p>
      <p>Score For Round {roundNum}: {score}</p>
      <p>Running Total Score: {totalScore}</p>
      <button
        onClick={onNext}>
        {roundNum === "5" ? "View Summary" : "Next Round"}
      </button>
    </div>
  );
}

const RoundSummaryWithApiKey = withGoogleApiKey(RoundSummary);
  
export default RoundSummaryWithApiKey;