Adding a map and getting the styling right

client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from "styled-components";
 import Loading from '../../util/Loading';
 import Button from "../../util/Button";
@@ -8,6 +8,7 @@ import ClickToCopy from '../../util/ClickToCopy';
 import { useGameId, dispatch } from '../../../domain/gameStore';
 import { linkGame } from '../../../domain/apiMethods';
 import GameCreationForm from '../../util/GameCreationForm';
+import useMap from '../../../hooks/useMap';
 
 const Container = styled.div`
   display: flex;
@@ -45,12 +46,31 @@ const StyledButton = styled(Button)`
   margin-top: 0.5em;
 `
 
+const MapDiv = styled.div`
+  position: absolute;
+  height: 30%;
+  width: 90%;
+`;
+
+const MapContainer = styled.div`
+  height: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
 const getUrl = gameId => {
   const u = new URL(window.location.href);
   u.searchParams.append("summary", gameId);
   return u.href;
 }
 
+const SummaryMap = () => {
+  // create the map
+  const mapDivRef = useRef(null);
+  const mapRef = useMap(mapDivRef, 0, 0, 1);
+  return <MapDiv ref={mapDivRef} />
+}
+
 export default () => {
   const gameId = useGameId();
   const { players, linkedGame }  = useGameInfo();
@@ -61,6 +81,9 @@ export default () => {
 
   return (
     <Container>
+      <MapContainer>
+        <SummaryMap/>
+      </MapContainer>
       <ScoreBoard>
         {
           players