diff --git a/src/components/GameSidebar.js b/src/components/GameSidebar.js index 3276c98..9e6f639 100644 --- a/src/components/GameSidebar.js +++ b/src/components/GameSidebar.js @@ -48,15 +48,20 @@ const useStyles = makeStyles((theme) => ({ }, })); -function GameSidebar({ game, scores, leaderboard, pause, endedAt }) { - const classes = useStyles(); - const { pathname } = useLocation(); - const time = useMoment(500); +function GameTime({ startedAt, endedAt, pause }) { + const time = useMoment(endedAt ? 0 : 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 ( @@ -82,9 +87,11 @@ function GameSidebar({ game, scores, leaderboard, pause, endedAt }) { /> )} - {/* Hide the sub-second time resolution while game is active to - avoid stressing beginners. */} - {formatTime(gameTime - game.startedAt - pauseTime, !endedAt)} + diff --git a/src/hooks/useMoment.js b/src/hooks/useMoment.js index 88ed038..c3aae4b 100644 --- a/src/hooks/useMoment.js +++ b/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]);