Component to mange the racing logic and pop up

client/src/components/screens/GamePanel/GamePanel.module.css

@@ -53,6 +53,25 @@
   z-index: 1;
 }
 
+.cutoff {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 2;
+  background-color: #333;
+  padding: .2em 1em;
+  border-radius: 1em;
+
+  opacity: 1;
+  transition: opacity 2s;
+}
+
+.hidden {
+  opacity: 0;
+}
+
 @media only screen and (min-width: 600px) and (min-height: 600px) {
   .page {
     display: block;

client/src/components/screens/GamePanel/RaceMode.jsx

@@ -0,0 +1,43 @@
+import ms from 'pretty-ms';
+import React, { useEffect, useState } from 'react';
+import { useGameId, useCurrentRound, dispatch } from '../../../domain/gameStore';
+import { getFirstSubmitter } from '../../../domain/apiMethods';
+import styles from './GamePanel.module.css';
+
+export default ({ rate, cutoffTime }) => {
+  const [ first, setFirst ] = useState(null);
+  const gameId = useGameId();
+  const round = useCurrentRound();
+  useEffect(() => {
+    if (first !== null) {
+      return;
+    }
+    const update = async () => { 
+      const firstRes = await getFirstSubmitter(gameId, round);
+      if (firstRes !== null) {
+        dispatch.updateRoundSeconds(r => Math.min(r, cutoffTime));
+        setFirst(firstRes)
+      }
+    }
+    update();
+    const interval = setInterval(update, rate);
+    return () => clearInterval(interval);
+  }, [first, gameId, round, rate, cutoffTime]);
+  const [faded, setFaded] = useState(false);
+  useEffect(() => {
+    if (first !== null) {
+      const timeout = setTimeout(() => setFaded(true), 1000);
+      return () => clearTimeout(timeout);
+    }
+  }, [first]);
+  
+  if (first === null) {
+    return (<></>);
+  }
+
+  return (
+    <div className={`${styles.cutoff} ${faded ? styles.hidden : ''}`}>
+      You were cut off by {first}! Only {ms(cutoffTime * 1000)} left!
+    </div>
+  )
+};