First pass on the GamePanel component

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

@@ -0,0 +1,102 @@
+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";
+
+const PositionedStreetView = compose(
+  withProps({
+    googleMapURL: GOOGLE_MAPS_URL,
+    loadingElement: <div style={{ height: `100%` }} />,
+    containerElement: <div style={{ height: `70vh` }} />,
+    mapElement: <div style={{ height: `100%` }} />,
+  }),
+  withScriptjs,
+  withGoogleMap
+)(({ point }) => 
+  <StreetViewPanorama 
+    defaultPosition={{"lat":42.57343,"lng":1.58651}} 
+    options={{
+      addressControl: false,
+      showRoadLabels: false,
+      clickToGo: true,
+      // linksControl: false,
+    }}
+    visible
+  />
+);
+
+const SelectionMap = compose(
+  withProps({
+    googleMapURL: GOOGLE_MAPS_URL,
+    loadingElement: <div style={{ height: `100%` }} />,
+    containerElement: <div style={{ height: `250px` }} />,
+    mapElement: <div style={{ height: `100%` }} />,
+  }),
+  withScriptjs,
+  withGoogleMap
+)(({onClick, markerPosition}) => 
+  <GoogleMap
+    defaultZoom={0}
+    defaultCenter={{ lat: 25, lng: -25}}
+    clickableIcons={false}
+    options={{
+      disableDefaultUI: true,
+      fullscreenControl: true,
+    }}
+    onClick={onClick}>
+      {markerPosition ? <Marker
+        clickable={false}
+        draggable={false}
+        position={markerPosition}
+      /> : null}
+  </GoogleMap>
+);
+
+class GamePanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      markerPosition: null
+    }
+  }
+
+  handleSubmitGuess() {
+    // TODO
+    console.log(JSON.stringify(this.state.markerPosition));
+    this.setState({markerPosition: null});
+  }
+
+  render() {
+    const { markerPosition } = this.state;
+    return (
+      <div style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }}>
+        <div style={{ flexGrow: 3 }}>
+          {/* <PositionedStreetView /> */}
+        </div>
+        <div style={{ 
+          flexGrow: 1, 
+          display: "flex", 
+          flexDirection: "column", 
+          justifyContent:"space-around",
+        }}>
+          {/* <SelectionMap
+            onClick={({latLng}) => this.setState({markerPosition: latLng})}
+            markerPosition={markerPosition}
+          /> */}
+          <button 
+            onClick={() => this.handleSubmitGuess()}
+            disabled={this.state.markerPosition === null}
+          >
+            Submit Guess
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default GamePanel;