Revert "Wrap game time into a subcomponent (#194)"

This reverts commit 67288b2.

Author: eltoder

src/components/GameSidebar.js

@@ -48,20 +48,15 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function GameTime({ startedAt, endedAt, pause }) {
-  const time = useMoment(endedAt ? 0 : 500);
+function GameSidebar({ game, scores, leaderboard, pause, endedAt }) {
+  const classes = useStyles();
+  const { pathname } = useLocation();
+  const time = useMoment(500);
   const gameTime = endedAt || time;
   const pauseEnd = pause?.end ?? gameTime;
   const pauseTime =
     (pause?.previous ?? 0) +
     (pause?.start < pauseEnd ? pauseEnd - pause.start : 0);
-  // Hide the sub-second time resolution while game is active.
-  return <>{formatTime(gameTime - startedAt - pauseTime, !endedAt)}</>;
-}
-
-function GameSidebar({ game, scores, leaderboard, pause, endedAt }) {
-  const classes = useStyles();
-  const { pathname } = useLocation();
 
   return (
     <Paper className={classes.sidebar}>
@@ -87,11 +82,9 @@ function GameSidebar({ game, scores, leaderboard, pause, endedAt }) {
           />
         )}
         <Typography variant="h4" align="center">
-          <GameTime
-            startedAt={game.startedAt}
-            endedAt={endedAt}
-            pause={pause}
-          />
+          {/* Hide the sub-second time resolution while game is active to
+          avoid stressing beginners. */}
+          {formatTime(gameTime - game.startedAt - pauseTime, !endedAt)}
         </Typography>
       </div>
       <Divider style={{ margin: "8px 0" }} />

src/hooks/useMoment.js

@@ -8,11 +8,11 @@ function useMoment(delay = 1000) {
   const [offset] = useFirebaseRef(".info/serverTimeOffset");
 
   useEffect(() => {
-    if (!delay) return;
-
     const id = setInterval(() => {
       setTime(moment(Date.now() + offset));
     }, delay);
+
+    // Clear any intervals that saw stale offsets
     return () => clearInterval(id);
   }, [offset, delay]);