From e572d64160e590099c304712f9d36014f63b0c52 Mon Sep 17 00:00:00 2001
From: Kristoffer Longva Eriksen <krisleri@stud.ntnu.no>
Date: Thu, 21 Apr 2022 13:35:06 +0200
Subject: [PATCH] Added countdown timers to tournaments

---
 src/client/src/FrontPage.js         | 32 ++++++++++++++++++++++++++++-
 src/client/src/TournamentHistory.js |  2 +-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/client/src/FrontPage.js b/src/client/src/FrontPage.js
index 99687b5..3cfc07d 100644
--- a/src/client/src/FrontPage.js
+++ b/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>
diff --git a/src/client/src/TournamentHistory.js b/src/client/src/TournamentHistory.js
index e874523..5845096 100644
--- a/src/client/src/TournamentHistory.js
+++ b/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"}}>