CSS module for SummaryMap

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

@@ -1,53 +1,25 @@
-import React, { useRef, useEffect, useState } from "react";
-import styled from "styled-components";
+import React, { useEffect, useRef, useState } from 'react';
 import useMap from '../../../hooks/useMap';
 import useMarkersFromGuesses from '../../../hooks/useMarkersFromGuesses';
-
-const RoundSelectContainer = styled.div`
-  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 ? "#888" : "#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,
-})`
-  width: calc(2em - 2px);
-  margin-left: 2px;
-  margin-top: auto;
-  margin-bottom: 0px;
-  border-radius: 20%;
-`;
-
-const MapDiv = styled.div`
-  height: 100%;
-  width: 60vw;
-  border: #888 solid 4px;
-`;
-
-const MapContainer = styled.div`
-  height: 350px;
-  padding: 2px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
+import styles from './SummaryMap.module.css';
+
+const RoundSelect = ({ rounds, selected, onSelect }) => (
+  <div className={styles.tabs}>
+    {// fun fact: es6 doesn't have a range(x) function
+    Array.from(Array(rounds).keys()).map((r) => (r + 1).toString()).map((r) => (
+      <div
+        className={`${styles.tab} ${r === selected ? styles['tab--active'] : ''}`}
+        key={r}
+        onClick={() => onSelect(r)}
+      >
+        {r}
+      </div>
+    ))}
+    <div className={styles.tab} onClick={() => onSelect('0')}>
+      X
+    </div>
+  </div>
+);
 
 export default ({ players, coords }) => {
   const rounds = Object.keys(coords).length;
@@ -58,8 +30,8 @@ export default ({ players, coords }) => {
   const mapRef = useMap(mapDivRef, 0, 0, 1);
 
   // set up round number selection
-  const [roundNum, setRoundNum] = useState("0");
-  const roundActive = singleRound ? "1" : roundNum;
+  const [ roundNum, setRoundNum ] = useState('0');
+  const roundActive = singleRound ? '1' : roundNum;
 
   // get the target point
   const targetPoint = coords?.[roundActive] ?? null;
@@ -68,28 +40,17 @@ export default ({ players, coords }) => {
   useMarkersFromGuesses(mapRef, players, roundActive, targetPoint);
 
   // scroll the map to the target point
-  useEffect(() => {
-    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>
-    )
+  useEffect(
+    () => {
+      mapRef.current && mapRef.current.panTo(targetPoint ?? { lat: 0, lng: 0 });
+    },
+    [ mapRef, targetPoint ]
+  );
 
   return (
-    <MapContainer>
-      <MapDiv ref={mapDivRef}/>
-      { roundSelect }
-    </MapContainer>
+    <div className={styles.container}>
+      <div className={styles.map} ref={mapDivRef} />
+      {singleRound || <RoundSelect rounds={rounds} selected={roundNum} onSelect={setRoundNum} />}
+    </div>
   );
-}
+};

client/src/components/screens/PlayerScores/SummaryMap.module.css

@@ -0,0 +1,47 @@
+.container {
+  height: 350px;
+  padding: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.map {
+  height: 100%;
+  width: 60vw;
+  border: #888 solid 4px;
+}
+
+.tabs {
+  height: 100%;
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+}
+
+.tab {
+  background-color: #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;
+}
+
+.tab--active {
+  background-color: #888;
+}
+
+.tabs .tab:last-child {
+  width: calc(2em - 2px);
+  margin-left: 2px;
+  margin-top: auto;
+  margin-bottom: 0px;
+  border-radius: 20%;
+}