CSS module for StartGame

client/src/components/screens/Lobby/StartGame.jsx

@@ -1,30 +1,17 @@
-import React from "react";
-import styled from "styled-components";
-import DelayedButton from "../../util/DelayedButton";
-import { dispatch, usePlayerName } from "../../../domain/gameStore";
-
-const Label = styled.span`
-  padding: 0.2em;
-`
-
-const StyledDelayButton = styled(DelayedButton)`
-  padding: 1em;
-  margin: 0.2em;
-  margin-top: 0.3em;
-`
+import React from 'react';
+import { dispatch, usePlayerName } from '../../../domain/gameStore';
+import DelayedButton from '../../util/DelayedButton';
+import styles from './Lobby.module.css';
 
 export default () => {
   const playerName = usePlayerName();
 
   return (
     <>
-      <Label>Playing as {playerName}</Label>
-      <StyledDelayButton 
-        onEnd={dispatch.startRound} 
-        countDownFormatter={rem => `Click to cancel, ${rem}s...`}
-      >
+      <span className={styles.label}>Playing as {playerName}</span>
+      <DelayedButton autoFocus onEnd={dispatch.startRound} countDownFormatter={(rem) => `Click to cancel, ${rem}s...`}>
         Start Game
-      </StyledDelayButton>
+      </DelayedButton>
     </>
-  )
+  );
 };

client/src/components/util/DelayedButton.jsx

@@ -6,11 +6,13 @@ const CountdownButton = ({
   onEnd, 
   formatter,
   seconds,
+  autoFocus,
+  buttonClass,
 }) => {
   const [remaining, pause] = useCountdown(seconds, onEnd);
 
   return (
-    <button onClick={() => { pause(); onCancelled(); }}>
+    <button className={buttonClass} autoFocus={autoFocus} onClick={() => { pause(); onCancelled(); }}>
       {remaining !== 0 ? formatter(remaining) : "Starting!"}
     </button>
   );
@@ -21,6 +23,8 @@ const DelayedButton = ({
   onEnd,
   countDownFormatter,
   seconds,
+  autoFocus,
+  buttonClass,
 }) => {
   const [delayed, setDelayed] = useState(false);
 
@@ -30,8 +34,10 @@ const DelayedButton = ({
         onEnd={() => { setDelayed(false); onEnd(); }}
         formatter={countDownFormatter ?? JSON.stringify}
         seconds={seconds ?? 5}
+        autoFocus={autoFocus}
+        buttonClass={buttonClass}
       /> 
-    : <button onClick={() => setDelayed(true)}>
+    : <button className={buttonClass} autoFocus={autoFocus} onClick={() => setDelayed(true)}>
         {children}
       </button>
 }

client/src/index.css

@@ -25,6 +25,15 @@ button {
   cursor: pointer;
 }
 
+button:focus { 
+  outline: none;
+  border: 1px solid #999;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
 button:disabled {
   color: #777;
   background-color: #333;