Reorganizing the summary page and fixing some styling issues

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

@@ -10,7 +10,7 @@ const LinkedGameContainer = styled.div`
   justify-content: center;
   width: 100%;
   margin-top: 1em;
-  margin-bottom: 10em;
+  margin-bottom: 1em;
 `
 
 const StyledButton = styled(Button)`

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

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from "styled-components";
 import Loading from '../../util/Loading';
 import useGameInfo from '../../../hooks/useGameInfo';
 import ClickToCopy from '../../util/ClickToCopy';
 import SummaryMap from './SummaryMap';
 import LinkedGame from './LinkedGame';
-import RoundSelect from './RoundSelect';
 import ScoreBoard from './ScoreBoard';
 
 const Container = styled.div`
@@ -23,11 +22,7 @@ const Label = styled.span`
 
 export default () => {
   // poll the game state
-  const { gameId, players, coords, rounds, linkedGame }  = useGameInfo();
-
-  // set up round number selection
-  const [roundNum, setRoundNum] = useState("0");
-  const roundActive = rounds > 1 ? roundNum : "1";
+  const { gameId, players, coords, linkedGame }  = useGameInfo();
 
   // set up the summary URL
   const summaryURL = new URL(window.location.href);
@@ -39,8 +34,7 @@ export default () => {
 
   return (
     <Container>
-      { rounds > 1 ? <RoundSelect {...{ rounds, roundNum, setRoundNum }} /> : null }
-      <SummaryMap {...{ players, coords, roundActive }}/>
+      <SummaryMap {...{ players, coords }}/>
       <ScoreBoard {...{ players }} />
       <LinkedGame {...{ linkedGame, gameId }} />
       <Label><ClickToCopy text={summaryURL.href}>Click here to copy a link to this summary!</ClickToCopy></Label>

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

@@ -1,31 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const RoundSelectContainer = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: center;
-  width: 50%;
-  margin-bottom: 0.5em;
-`;
-
-const RoundSelectButton = styled.div`
-  background-color: ${({active}) => active ? "#777" : "#555"};
-  width: 2em;
-  height: 2em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export default ({ rounds, roundNum, setRoundNum }) => (
-  <RoundSelectContainer>
-    { 
-      // fun fact: es6 doesn't have a range(x) function
-      Array.from(Array(rounds).keys())
-        .map(r => (r + 1).toString())
-        .map(r => <RoundSelectButton active={r === roundNum} key={r} onClick={() => setRoundNum(r)}>{r}</RoundSelectButton>)
-    }
-  </RoundSelectContainer>
-);

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

@@ -1,25 +1,64 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import styled from "styled-components";
 import useMap from '../../../hooks/useMap';
 import useMarkersFromGuesses from '../../../hooks/useMarkersFromGuesses';
 
+const RoundSelectContainer = styled.div`
+  /* background-color: #444; */
+  height: 100%;
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+`;
+
+const RoundSelectButton = styled.div`
+  background-color: ${({active}) => active ? "#777" : "#555"};
+  height: 2em;
+  width: 2em;
+  margin-top: 1px;
+  margin-bottom: 2px;
+  border-radius: 0% 20% 20% 0%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ResetRoundSelectButton = styled(RoundSelectButton).attrs({
+  active: false,
+})`
+  margin-top: auto;
+  margin-bottom: 0px;
+`;
+
 const MapDiv = styled.div`
-  position: absolute;
-  height: 30%;
-  width: 90%;
+  height: 100%;
+  width: 60vw;
+  border: #555 solid 2px;
 `;
 
 const MapContainer = styled.div`
-  height: 100%;
+  height: 350px;
+  padding: 2px;
   display: flex;
   justify-content: center;
+  align-items: center;
 `;
 
-export default ({ players, coords, roundActive }) => {
+export default ({ players, coords }) => {
+  const rounds = Object.keys(coords).length;
+  const singleRound = rounds === 1;
+
   // create the map
   const mapDivRef = useRef(null);
   const mapRef = useMap(mapDivRef, 0, 0, 1);
 
+  // set up round number selection
+  const [roundNum, setRoundNum] = useState("0");
+  const roundActive = singleRound ? "1" : roundNum;
+
   // get the target point
   const targetPoint = coords?.[roundActive] ?? null;
 
@@ -28,14 +67,27 @@ export default ({ players, coords, roundActive }) => {
 
   // scroll the map to the target point
   useEffect(() => {
-    if (targetPoint && mapRef.current) {
-      mapRef.current.panTo(targetPoint);
-    }
+    mapRef.current && mapRef.current.panTo(targetPoint ?? { lat: 0, lng: 0 });
   }, [mapRef, targetPoint]);
 
+  const roundSelect = singleRound
+    ? null
+    : (
+      <RoundSelectContainer>
+        { 
+          // fun fact: es6 doesn't have a range(x) function
+          Array.from(Array(rounds).keys())
+            .map(r => (r + 1).toString())
+            .map(r => <RoundSelectButton active={r === roundNum} key={r} onClick={() => setRoundNum(r)}>{r}</RoundSelectButton>)
+        }
+        <ResetRoundSelectButton onClick={() => setRoundNum("0")}>X</ResetRoundSelectButton>
+      </RoundSelectContainer>
+    )
+
   return (
     <MapContainer>
       <MapDiv ref={mapDivRef}/>
+      { roundSelect }
     </MapContainer>
   );
 }