Added countdown timers to tournaments

src/client/src/FrontPage.js

@@ -56,6 +56,34 @@ function TournamentListItem(props) {
       </Box>;
     }
   }
+
+  function Countdown() {
+    const [remainingTime, setremainingTime] = React.useState(Math.abs(props.tournament.startTime - new Date()))
+    React.useEffect(() => {
+      const interval = setInterval(() => 
+        setremainingTime(Math.abs(props.tournament.startTime - new Date()))
+      , 1000);
+      return () => {
+        clearInterval(interval);
+      };
+    }, []);
+
+    let remainingDays = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
+    let remainingHours = Math.floor(remainingTime / (1000 * 60 * 60)) - remainingDays * 24
+    let remainingMins = Math.floor(remainingTime / (1000 * 60)) - (remainingDays * 24 * 60 + remainingHours * 60)
+    let remainingSecs = Math.floor(remainingTime / 1000) - (remainingDays * 24 * 60 * 60 + remainingHours * 60 * 60 + remainingMins * 60)
+    if (props.tournament.startTime < new Date()) {
+      return (<Box>
+        <Typography variant="body"> Started! </Typography>
+        </Box>)
+    } else {
+      return(<Box>
+      <Typography variant="body"> Starts in: {remainingDays} Days, {remainingHours} Hours, {remainingMins} Minutes and {remainingSecs} Seconds </Typography>
+      </Box>
+      )
+    }
+  }
+  
   return (
         <Paper elevation={8} >
           <Card>
@@ -73,7 +101,7 @@ function TournamentListItem(props) {
                 <Typography variant="body"> End: {props.tournament.endTime.toLocaleString()} </Typography>
               </Box>
               
-              <Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
+              <Typography variant="h5" color="text.primary" gutterBottom> Players: {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
               <Description />
               
               <Box sx={{flexGrow: 1, marginTop: "20px"}}>
@@ -92,6 +120,8 @@ function TournamentListItem(props) {
                     </Grid>
                 </Grid>
               </Box>
+
+              <Countdown />
             </CardContent>
           </Card>     
         </Paper>

src/client/src/TournamentHistory.js

@@ -51,7 +51,7 @@ function shorten(description, maxLength) {
                   <Typography variant="body"> End: {props.tournament.endTime.toLocaleString()} </Typography>
                 </Box>
                 
-                <Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
+                <Typography variant="h5" color="text.primary" gutterBottom> Players: {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
                 <Description />
                 
                 <Box sx={{flexGrow: 1, marginTop: "20px"}}>