start game button

downforacross · Jan 29, 2022 · 618a9b8 · 618a9b8 · vercel · Jan 29, 2022
1 parent aa928f0
commit 618a9b8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 28 deletions.
diff --git a/src/components/Fencing/Fencing.tsx b/src/components/Fencing/Fencing.tsx
@@ -223,29 +223,28 @@ export const Fencing: React.FC<{gid: string}> = (props) => {
       <Flex style={{flex: 1, overflow: 'auto'}}>
         <div className={classes.container}>
           <Helmet title={`Fencing ${gid}`} />
-          {gameState.loaded && gameState.started && (
-            <div style={{flex: 1}}>
-              <FencingCountdown gameState={gameState} gameEventsHook={eventsHook}>
-                <FencingToolbar toolbarActions={toolbarActions} />
-                <Player
-                  // eslint-disable-next-line react/jsx-props-no-spreading
-                  {...transformGameToPlayerProps(
-                    gameState.game!,
-                    _.values(gameState.users),
-                    playerActions,
-                    id,
-                    teamId
-                  )}
-                />
-              </FencingCountdown>
-            </div>
-          )}
+          <div style={{flex: 1}}>
+            <FencingCountdown playerActions={playerActions} gameState={gameState} gameEventsHook={eventsHook}>
+              {gameState.loaded && gameState.started && (
+                <>
+                  {' '}
+                  <FencingToolbar toolbarActions={toolbarActions} />
+                  <Player
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...transformGameToPlayerProps(
+                      gameState.game!,
+                      _.values(gameState.users),
+                      playerActions,
+                      id,
+                      teamId
+                    )}
+                  />
+                </>
+              )}
+            </FencingCountdown>
+          </div>
         </div>
         <Flex column style={{flexBasis: 500}}>
-          {!gameState.started && (
-            <button onClick={playerActions.startGame}>Start Game (wait for everyone to join!)</button>
-          )}
-
           {!gameState.loaded && <div>Loading your game...</div>}
           {gameState.game && (
             <Chat

diff --git a/src/components/Fencing/FencingCountdown.tsx b/src/components/Fencing/FencingCountdown.tsx
@@ -1,26 +1,47 @@
-import classes from '*.module.css';
-import {makeStyles} from '@material-ui/core';
+import {CircularProgress, makeStyles} from '@material-ui/core';
 import React, {useEffect, useState} from 'react';
 import {GameState} from '../../shared/gameEvents/types/GameState';
 import {GameEventsHook} from './useGameEvents';
+import {PlayerActions} from './usePlayerActions';
 
-export const FencingCountdown: React.FC<{gameState: GameState; gameEventsHook: GameEventsHook}> = (props) => {
+export const FencingCountdown: React.FC<{
+  playerActions: PlayerActions;
+  gameState: GameState;
+  gameEventsHook: GameEventsHook;
+}> = (props) => {
   const [renderCount, setRenderCount] = useState(0);
   const classes = useStyles();
   const serverTime = props.gameEventsHook.getServerTime();
   const GAME_START_DELAY_MS = 1000 * 10;
-  const loading =
+  const notLoaded = !props.gameState.loaded;
+  const notStarted = !props.gameState.loaded || !props.gameState.started;
+  const countingDown =
     !props.gameState.started ||
     (props.gameState.startedAt && serverTime < props.gameState.startedAt + GAME_START_DELAY_MS);
 
   useEffect(() => {
-    if (loading) {
+    if (countingDown) {
       requestAnimationFrame(() => {
         setRenderCount((x) => x + 1);
       });
     }
-  }, [renderCount]);
-  if (loading) {
+  }, [renderCount, countingDown]);
+
+  if (notLoaded) {
+    return (
+      <div className={classes.countdown}>
+        <CircularProgress />
+      </div>
+    );
+  }
+  if (notStarted) {
+    return (
+      <div className={classes.countdown}>
+        <button onClick={props.playerActions.startGame}>Start Game (wait for everyone to join!)</button>
+      </div>
+    );
+  }
+  if (countingDown) {
     return (
       <div className={classes.countdown}>
         Starting In