First pass at rendering static map after each round

ui/src/App.js

@@ -95,7 +95,13 @@ class Game extends React.Component {
   }
 
   render() {
-    const { gameState, gameId, playerName } = this.state;
+    const { 
+      gameState, 
+      gameId, 
+      playerName, 
+      targetPoint, 
+      selectedPoint,
+    } = this.state;
 
     switch (gameState) {
       case LOADING:
@@ -116,7 +122,7 @@ class Game extends React.Component {
           onStart={() => this.updateRoundState()}
         />
       case IN_ROUND:
-        const { targetPoint, selectedPoint, roundTimer } = this.state;
+        const { roundTimer } = this.state;
         return <GamePanel
           onSelectPoint={latLng => this.setState({selectedPoint: latLng})}
           onSubmitGuess={() => this.handleSubmitGuess()}
@@ -133,6 +139,8 @@ class Game extends React.Component {
           totalScore={totalScore}
           onAdvanceState={() => this.updateRoundState()}
           buttonText={currentRound === "5" ? "View Summary" : "Next Round"}
+          selectedPoint={selectedPoint}
+          targetPoint={targetPoint}
         />
       case POST_GAME:
         const { players } = this.state;

ui/src/components/game-panel.component.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { compose, withProps } from "recompose";
 import { withScriptjs, withGoogleMap, StreetViewPanorama, GoogleMap, Marker } from "react-google-maps";
-import { GOOGLE_MAPS_URL } from "../config";
+import { GOOGLE_API_KEY } from "../config";
 import RoundTimer from "./round-timer.component";
 
+// TODO want a button for moving the pano back to start somehow
+
 const PositionedStreetView = compose(
   withProps({
-    googleMapURL: GOOGLE_MAPS_URL,
+    googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
     loadingElement: <div style={{ height: `100%` }} />,
     containerElement: <div style={{ height: `70vh` }} />,
     mapElement: <div style={{ height: `100%` }} />,
@@ -27,7 +29,7 @@ const PositionedStreetView = compose(
 
 const SelectionMap = compose(
   withProps({
-    googleMapURL: GOOGLE_MAPS_URL,
+    googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
     loadingElement: <div style={{ height: `100%` }} />,
     containerElement: <div style={{ height: `250px` }} />,
     mapElement: <div style={{ height: `100%` }} />,
@@ -78,7 +80,7 @@ const GamePanel = ({
     }}>
       <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
       <SelectionMap
-        onClick={({ latLng }) => onSelectPoint(latLng)}
+        onClick={({ latLng }) => onSelectPoint({ lat: latLng.lat(), lng: latLng.lng() })}
         markerPosition={selectedPoint}
       />
       <button

ui/src/components/player-scores.component.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 // TODO render this as a nice score page
+// TODO live updates?
 
 const PlayerScores = ({ players, onReturnToStart }) => {
   const elems = players

ui/src/components/round-summary.component.jsx

@@ -1,24 +1,44 @@
 import React from "react";
+import { GOOGLE_API_KEY } from "../config";
 
 // TODO eventually we want this to query and show other players
 // TODO also should show the actual location of the last round
 
+const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?key=${GOOGLE_API_KEY}`;
+
 const RoundSummary = ({
   roundNum, 
   score, 
   totalScore,
   onAdvanceState,
   buttonText,
-}) => (
-  <div>
-    <p>Score For Round {roundNum}: {score}</p>
-    <p>Running Total Score: {totalScore}</p>
-    <button
-      onClick={onAdvanceState}>
-      {buttonText}
-    </button>
-  </div>
-);
+  selectedPoint,
+  targetPoint,
+}) => {
+  // TODO determine zoom and center dynamically
+  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={onAdvanceState}>
+        {buttonText}
+      </button>
+    </div>
+  );
+}
   
 export default RoundSummary;