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

Additions to button rendering

Browse Source
This commit is contained in:
Kristoffer Juelsenn 2022-04-22 14:08:07 +02:00
parent 617d42b957
commit fdb1a32aa3
2 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/client/src/TournamentOverview.js
View File

@ -69,19 +69,40 @@ function Match(props){
.catch(error => showError(error)); .catch(error => showError(error));
} }
const [endTime, setendTime] = React.useState(null);
React.useEffect(() => {
fetch(process.env.REACT_APP_API_URL + `/tournament/${props.tournamentId}`)
.then(res => res.json())
.then(data => {
if (data.status !== "OK") {
// Do your error thing
console.error(data);
return;
}
let endTime = data.data.endTime;
setendTime(endTime);
})
.catch(err => showError(err));
})
let today = new Date()
let yesterday = today.setDate(today.getDate() - 1)
let isComplete = new Date(endTime) < yesterday
return ( return (
<> <>
{/* Team 1 (Winner-status?) (Team name) */} {/* Team 1 (Winner-status?) (Team name) */}
<li className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : "loser"}`}> <li className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : "loser"}`}>
<Stack direction={"row"}> <Stack direction={"row"}>
<Typography className={`teamName`} align={'center'} sx={{fontSize:'1.5rem'}}> <Typography className={`teamName`} align={'center'} sx={{fontSize:'1.5rem', maxWidth:'15vw', overflow:'hidden', wordWrap:'none'}}>
{team1Name} {team1Name}
</Typography> </Typography>
{ props.match.winnerId && (props.match.team1Id === props.match.winnerId) && { props.match.winnerId && (props.match.team1Id === props.match.winnerId) && !isComplete ?
<IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> <IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> : null
} }
{ props.match.team1Id !== null && { props.match.team1Id !== null && !isComplete ?
<IconButton onClick={setWinner(props.match.team1Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton> <IconButton onClick={setWinner(props.match.team1Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton> : null
} }
{/* { props.match.winnerId && (props.match.team1Id === props.match.winnerId) && {/* { props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
<EmojiEventsIcon alt="A trohpy" color="gold" /> <EmojiEventsIcon alt="A trohpy" color="gold" />
@ -92,14 +113,14 @@ function Match(props){
{/* Team 2 (Winner-status?) (Team name) */} {/* Team 2 (Winner-status?) (Team name) */}
<li className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : "loser"}`}> <li className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : "loser"}`}>
<Stack direction={"row"} sx={{alignItems:'center'}}> <Stack direction={"row"} sx={{alignItems:'center'}}>
<Typography className={`teamName`} sx={{fontSize:'1.5rem'}}> <Typography className={`teamName`} sx={{fontSize:'1.5rem', maxWidth:'15vw', overflow:'hidden', wordWrap:'none'}}>
{team2Name} {team2Name}
</Typography> </Typography>
{ props.match.winnerId && (props.match.team2Id === props.match.winnerId) && { props.match.winnerId && (props.match.team2Id === props.match.winnerId) && !isComplete ?
<IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> <IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> : null
} }
{ props.match.team2Id !== null && { props.match.team2Id !== null && !isComplete ?
<IconButton onClick={setWinner(props.match.team2Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton> <IconButton onClick={setWinner(props.match.team2Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton> : null
} }
{/* { props.match.winnerId && (props.match.team2Id === props.match.winnerId) && {/* { props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
<EmojiEventsIcon alt="A trohpy" color="gold" /> <EmojiEventsIcon alt="A trohpy" color="gold" />

6
src/client/src/components/tournamentBracket.css
View File

@ -10,10 +10,10 @@
display:flex; display:flex;
flex-direction:column; flex-direction:column;
justify-content:center; justify-content:center;
width:200px; width:20vw;
list-style:none; list-style:none;
padding:0; padding:0;
font-size: 2rem; font-size: 1.5rem;
} }
.round .spacer{ flex-grow:1;} .round .spacer{ flex-grow:1;}
.round .spacer:first-child, .round .spacer:first-child,
@ -33,7 +33,7 @@
} */ } */
.teamName{ .teamName{
max-width: 7.5vw; max-width: 5vw;
overflow: hidden; overflow: hidden;
word-wrap: none; word-wrap: none;
} }