CSS module for RoundSummary

client/src/components/screens/RoundSummary/NextRoundButton.jsx

@@ -1,30 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { dispatch, useCurrentRound } from "../../../domain/gameStore";
-import DelayedButton from "../../util/DelayedButton";
-
-
-const FinishedButton = styled.button`
-  margin-top: 5px;
-  padding: 1em;
-`
-
-const NextButton = styled(DelayedButton)`
-  margin-top: 5px;
-  padding: 1em;
-`
-
-export default () => {
-  // check the current round to see if game is done
-  const currentRound = useCurrentRound();
-
-  return (
-    currentRound
-      ? <NextButton onEnd={dispatch.startRound} countDownFormatter={rem => `Click to cancel, ${rem}s...`}>
-          Next Round
-        </NextButton>
-      : <FinishedButton onClick={() => dispatch.goToSummary()}>
-          View Summary
-        </FinishedButton>
-  );
-}

client/src/components/screens/RoundSummary/RoundSummary.jsx

@@ -1,33 +1,32 @@
-import React, { useRef } from "react";
-import styled from "styled-components";
-import { useLastRound } from "../../../domain/gameStore";
-import useMarkersFromGuesses from "../../../hooks/useMarkersFromGuesses";
-import useMap from "../../../hooks/useMap";
-import NextRoundButton from "./NextRoundButton";
-import useClickToCheckScore from "./useClickToCheckScore";
-import { usePlayers } from "../../../hooks/useGameInfo";
-import usePreventNavigation from "../../../hooks/usePreventNavigation";
-
-const SummaryDiv = styled.div`
-  position: absolute;
-  display: flex;
-  flex-flow: column nowrap;
-  background-color: #333;
-  z-index: 1;
-  bottom: 16px;
-  right: 8px;
-  padding: 8px;
-`
-
-const ScoreSpan = styled.span`
-  padding-bottom: 2px;
-`;
-
-const MapDiv = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-`
+import React, { useRef } from 'react';
+import { dispatch, useCurrentRound, useLastRound } from '../../../domain/gameStore';
+import { usePlayers } from '../../../hooks/useGameInfo';
+import useMap from '../../../hooks/useMap';
+import useMarkersFromGuesses from '../../../hooks/useMarkersFromGuesses';
+import usePreventNavigation from '../../../hooks/usePreventNavigation';
+import DelayedButton from '../../util/DelayedButton';
+import styles from './RoundSummary.module.css';
+import useClickToCheckScore from './useClickToCheckScore';
+
+const NextRoundButton = () => {
+  // check the current round to see if game is done
+  const currentRound = useCurrentRound();
+
+  return currentRound ? (
+    <DelayedButton
+      autoFocus
+      buttonClass={styles.next}
+      onEnd={dispatch.startRound}
+      countDownFormatter={(rem) => `Click to cancel, ${rem}s...`}
+    >
+      Next Round
+    </DelayedButton>
+  ) : (
+    <button autoFocus className={styles.next} onClick={() => dispatch.goToSummary()}>
+      View Summary
+    </button>
+  );
+};
 
 export default () => {
   // get the info about the last round
@@ -48,15 +47,17 @@ export default () => {
 
   // warn the user if they navigate away
   usePreventNavigation();
-  
+
   return (
     <div>
-      <MapDiv ref={mapDivRef} />
-      <SummaryDiv>
-        <ScoreSpan>Score for Round {roundNum}: {score}</ScoreSpan>
-        <ScoreSpan>Running Total: {totalScore}</ScoreSpan>
-        <NextRoundButton/>
-      </SummaryDiv>
+      <div className={styles.map} ref={mapDivRef} />
+      <div className={styles.panel}>
+        <span className={styles.score}>
+          Score for Round {roundNum}: {score}
+        </span>
+        <span className={styles.score}>Running Total: {totalScore}</span>
+        <NextRoundButton />
+      </div>
     </div>
   );
 };

client/src/components/screens/RoundSummary/RoundSummary.module.css

@@ -0,0 +1,25 @@
+.panel {
+  position: absolute;
+  display: flex;
+  flex-flow: column nowrap;
+  background-color: #333;
+  z-index: 1;
+  bottom: 16px;
+  right: 8px;
+  padding: 8px;
+}
+
+.score {
+  padding-bottom: 2px;
+}
+
+.next {
+  margin-top: 5px;
+  padding: 1em;
+}
+
+.map {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}