First pass at countdown button on round start

client/src/components/screens/PreRound/PreRound.jsx

@@ -6,6 +6,7 @@ import Loading from "../../util/Loading";
 import PlayerNameInput from "../../util/PlayerNameInput";
 import LobbyPlayerList from "./LobbyPlayerList";
 import { joinGame } from "../../../domain/GGSHService";
+import useCountdown from "../../util/Timer/useCountdown";
 
 const InfoContainer = styled.div`
   flex: 3;
@@ -41,14 +42,34 @@ const getUrl = gameId => {
   return u.href;
 }
 
-const LobbyInfo = ({ gameId, playerName, onStart }) => (
-  <InfoContainer>
-    <Label>Playing as {playerName}</Label>
-    <Label>Use this link to invite other players:</Label>
-    <Label><ClickToCopy text={getUrl(gameId)} /></Label>
-    <FormButton onClick={onStart}>Start Game</FormButton>
-  </InfoContainer>
-);
+const CountdownButton = ({ onCancelled, onEnd }) => {
+  const [remaining, pause] = useCountdown(5, onEnd);
+  return (
+    <FormButton onClick={() => { pause(); onCancelled(); }}>
+      {remaining !== 0 ? JSON.stringify(remaining) : "Starting!"}
+    </FormButton>
+  );
+}
+
+const LobbyInfo = ({ gameId, playerName, onStart }) => {
+  const [delayed, setDelayed] = useState(false);
+
+  return (
+    <InfoContainer>
+      <Label>Playing as {playerName}</Label>
+      <Label>Use this link to invite other players:</Label>
+      <Label><ClickToCopy text={getUrl(gameId)} /></Label>
+      {
+        delayed 
+          ? <CountdownButton 
+              onCancelled={() => setDelayed(false)}
+              onEnd={() => { setDelayed(false); onStart(); }}
+            /> 
+          : <FormButton onClick={() => setDelayed(true)}>Start Game</FormButton>
+      }
+    </InfoContainer>
+  )
+};
 
 const JoinForm = ({ gameId, onGameJoined }) => {
   const [loading, setLoading] = useState(false);

client/src/components/util/Timer/Timer.jsx

@@ -13,7 +13,7 @@ const TimedOut = styled(TimerSpan)`
 `
 
 export default ({ seconds, onTimeout }) => {
-  const remaining = useCountdown(seconds, onTimeout);
+  const [remaining] = useCountdown(seconds, onTimeout);
 
   return remaining > 0 
     ? <TimerSpan>Time: {ms(remaining * 1000)}</TimerSpan> 

client/src/components/util/Timer/useCountdown.jsx

@@ -3,12 +3,13 @@ import { useEffect, useState, useRef } from "react";
 export default (seconds, onEnd) => {
   const [finished, setFinished] = useState(false);
   const [remaining, setRemaining] = useState(seconds);
+  const [paused, setPaused] = useState(false);
   const remainingMut = useRef(seconds);
 
   useEffect(() => {
-    const timer = setInterval(() => setRemaining(remainingMut.current -= 1), 1000);
+    const timer = setInterval(() =>{ if (!paused) { setRemaining(remainingMut.current -= 1) }}, 1000);
     return () => clearInterval(timer);
-  }, []);
+  }, [paused]);
 
   useEffect(() => {
     if (!finished && remaining <= 0) {
@@ -17,5 +18,5 @@ export default (seconds, onEnd) => {
     }
   }, [finished, remaining, onEnd])
 
-  return remaining;
+  return [remaining, () => setPaused(!paused)];
 }