felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added countdown timers to tournaments

This commit is contained in:
Kristoffer Longva Eriksen 2022-04-21 13:35:06 +02:00
parent eb8019d22e
commit e572d64160
2 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/client/src/FrontPage.js
View File

@ -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>

2
src/client/src/TournamentHistory.js
View File

@ -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"}}>