Moving DelayedButton to shared util

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

@@ -6,7 +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";
+import DelayedButton from "../../util/DelayedButton";
 
 const InfoContainer = styled.div`
   flex: 3;
@@ -28,6 +28,12 @@ const FormButton = styled(Button)`
   margin-top: 0.3em;
 `
 
+const StyledDelayButton = styled(DelayedButton)`
+  padding: 1em;
+  margin: 0.2em;
+  margin-top: 0.3em;
+`
+
 const PageContainer = styled.div`
   flex: 1;
   display: flex;
@@ -42,34 +48,19 @@ const getUrl = gameId => {
   return u.href;
 }
 
-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 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>
+    <StyledDelayButton 
+      onEnd={onStart} 
+      countDownFormatter={rem => `Click to cancel, ${rem}s...`}
+    >
+      Start Game
+    </StyledDelayButton>
+  </InfoContainer>
+);
 
 const JoinForm = ({ gameId, onGameJoined }) => {
   const [loading, setLoading] = useState(false);

client/src/components/util/DelayedButton.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import Button from "./Button";
+import useCountdown from "./Timer/useCountdown";
+
+const CountdownButton = ({ 
+  onCancelled, 
+  onEnd, 
+  formatter,
+  seconds,
+}) => {
+  const [remaining, pause] = useCountdown(seconds, onEnd);
+  
+  return (
+    <Button onClick={() => { pause(); onCancelled(); }}>
+      {remaining !== 0 ? formatter(remaining) : "Starting!"}
+    </Button>
+  );
+}
+
+const DelayedButton = ({
+  children,
+  onEnd,
+  countDownFormatter,
+  seconds,
+}) => {
+  const [delayed, setDelayed] = useState(false);
+
+  return delayed 
+    ? <CountdownButton 
+        onCancelled={() => setDelayed(false)}
+        onEnd={() => { setDelayed(false); onEnd(); }}
+        formatter={countDownFormatter ?? JSON.stringify}
+        seconds={seconds ?? 5}
+      /> 
+    : <Button onClick={() => setDelayed(true)}>
+        {children}
+      </Button>
+}
+
+export default DelayedButton;