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

MUI Scaling + Styling

This commit is contained in:
Kristoffer Juelsenn 2022-04-24 22:27:40 +02:00
parent 8ce7607cee
commit 58256fa42b
2 changed files with 39 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,20 +10,23 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
import DoDisturbIcon from '@mui/icons-material/DoDisturb'; import DoDisturbIcon from '@mui/icons-material/DoDisturb';
import BackspaceIcon from '@mui/icons-material/Backspace'; import BackspaceIcon from '@mui/icons-material/Backspace';
import AddCircleIcon from '@mui/icons-material/AddCircle'; import AddCircleIcon from '@mui/icons-material/AddCircle';
import { fontSize } from "@mui/system";
function TournamentTier(props){ function TournamentTier(props){
let roundTypes = ["winner","finals", "semifinals", "quarterfinals", "eighthfinals", "sixteenthfinals", "thirtysecondfinals"]; let roundTypes = ["finals", "semifinals", "quarterfinals", "eighthfinals", "sixteenthfinals", "thirtysecondfinals"];
let matches = []; let matches = [];
for (let i = 0; i < props.matches.length; i++) { for (let i = 0; i < props.matches.length; i++) {
matches.push(<Match tournament={props.tournament} user={props.user} teams={props.teams} match={props.matches[i]} key={i} />); matches.push(<Match tournament={props.tournament} user={props.user} tier={props.tier} roundTypes={roundTypes} teams={props.teams} match={props.matches[i]} key={i} />);
}
return(
<>
<Box className={`round ${roundTypes[props.tier]}`} sx={{width:['50px', '150px', '200px', '250px', '300px']}}>
<li className="spacer">&nbsp;</li>
{matches}
</Box>
</>
)
} }
return(
<ul className={`round ${roundTypes[props.tier]}`}>
<li className="spacer">&nbsp;</li>
{matches}
</ul>
)
}
function Match(props){ function Match(props){
let team1Name = "TBA"; let team1Name = "TBA";
@ -62,11 +65,11 @@ function Match(props){
}; };
let curryUnsetContestant = teamId => (e) => { let curryUnsetContestant = teamId => (e) => {
console.log("wack") // console.log("wack")
let formData = new FormData(); let formData = new FormData();
formData.append("teamId", teamId); formData.append("teamId", teamId);
let body = new URLSearchParams(formData); let body = new URLSearchParams(formData);
console.log(props.match) // console.log(props.match)
fetch(process.env.REACT_APP_API_URL + `/match/${props.match.id}/unsetContestant`, { fetch(process.env.REACT_APP_API_URL + `/match/${props.match.id}/unsetContestant`, {
method: "POST", method: "POST",
body: body body: body
@ -74,7 +77,7 @@ function Match(props){
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.status === "OK") { if (data.status === "OK") {
console.log("wacky smacky"); // console.log("wacky smacky");
window.location.reload(); window.location.reload();
} }
}) })
@ -84,16 +87,16 @@ function Match(props){
return ( return (
<> <>
{/* Team 1 (Winner-status?) (Team name) */} {/* Team 1 (Winner-status?) (Team name) */}
<li className={`game game-top ${props.match.winnerId !== null ? (props.match.team1Id === props.match.winnerId) ? "winner" : "loser" : ""}`}> <li className={`game game-top`}>
<Stack direction={"row"}> <Stack direction={"row"} alignItems="center" spacing={1}>
<Typography className={`teamName`} align={'center'} sx={{fontSize:'1.5rem', maxWidth:'15vw', overflow:'hidden', wordWrap:'none'}}> <Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team1Id === props.match.winnerId) ? "winner" : "loser" : ""}`} align={'center'} sx={{ maxWidth:'70%', overflow:'hidden', wordWrap:'none', fontSize:['2vh', '1vh', '1.5vh', '2vh', '2.5vh', '3vh']}}>
{team1Name} {team1Name}
</Typography> </Typography>
{ 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" />
} }
{ props.match.team1Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn && { props.match.team1Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn &&
<IconButton color="error" aria-label="remmove winner" component="span" onClick={curryUnsetContestant(props.match.team1Id)}><BackspaceIcon /></IconButton> <IconButton color="error" aria-label="remove winner" component="span" onClick={curryUnsetContestant(props.match.team1Id)}><BackspaceIcon /></IconButton>
} }
{ props.match.team1Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn && { props.match.team1Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn &&
<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>
@ -102,16 +105,16 @@ function Match(props){
</li> </li>
<li className="game game-spacer">&nbsp;</li> <li className="game game-spacer">&nbsp;</li>
{/* Team 2 (Winner-status?) (Team name) */} {/* Team 2 (Winner-status?) (Team name) */}
<li className={`game game-bottom ${props.match.winnerId !== null ? (props.match.team1Id === props.match.winnerId) ? "winner" : "loser" : ""}`}> <li className={`game game-bottom`}>
<Stack direction={"row"} sx={{alignItems:'center'}}> <Stack direction={"row"} alignItems="center">
<Typography className={`teamName`} sx={{fontSize:'1.5rem', maxWidth:'15vw', overflow:'hidden', wordWrap:'none'}}> <Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team2Id === props.match.winnerId) ? "winner" : "loser" : ""}`} sx={{maxWidth:'70%', overflow:'hidden', wordWrap:'none',fontSize:['2vh', '1vh', '1.5vh', '2vh', '2.5vh', '3vh']}}>
{team2Name} {team2Name}
</Typography> </Typography>
{ 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" />
} }
{ props.match.team2Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn && { props.match.team2Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn &&
<IconButton color="error" aria-label="remmove winner" component="span" onClick={curryUnsetContestant(props.match.team2Id)}><BackspaceIcon /></IconButton> <IconButton color="error" aria-label="remove winner" component="span" onClick={curryUnsetContestant(props.match.team2Id)}><BackspaceIcon /></IconButton>
} }
{ props.match.team2Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn && { props.match.team2Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn &&
<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>
@ -144,6 +147,7 @@ function BracketViewer(props){
tiers[match.tier] = []; tiers[match.tier] = [];
} }
tiers[match.tier].push(match); tiers[match.tier].push(match);
console.log(tiers)
return tiers; return tiers;
}, {}); }, {});
@ -167,14 +171,18 @@ function BracketViewer(props){
.catch(err => showError(err)); .catch(err => showError(err));
}, []); }, []);
return ( return (
(props.tournament && matches && teams) ? (props.tournament && matches && teams) ?
// <div sx={{width: "100vw", height: "80vh", overflow: "scroll"}} className="bracket"> // <div sx={{width: "100vw", height: "80vh", overflow: "scroll"}} className="bracket">
<>
<div className="bracket"> <div className="bracket">
{matches.map(tier => { {matches.map(tier => {
let tierNum = tier[0].tier; let tierNum = tier[0].tier;
return <TournamentTier user={props.user} tournament={props.tournament} key={tierNum} tier={tierNum} matches={tier} teams={teams} /> return <TournamentTier user={props.user} tournament={props.tournament} key={tierNum} tier={tierNum} matches={tier} teams={teams} />
})} })}
</div> </div>
</>
: <Box sx={{display:'flex', justifyContent:'center', alignItems:'center', position:'relative', marginTop:'5%'}}><CircularProgress size={"20vw"}/></Box> : <Box sx={{display:'flex', justifyContent:'center', alignItems:'center', position:'relative', marginTop:'5%'}}><CircularProgress size={"20vw"}/></Box>
); );
} }

28
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:20vw; /* width:20vw; */
list-style:none; list-style:none;
padding:0; padding:0;
font-size: 1.5rem; /* font-size: 1.5rem; */
} }
.round .spacer{ flex-grow:1;} .round .spacer{ flex-grow:1;}
.round .spacer:first-child, .round .spacer:first-child,
@ -31,30 +31,18 @@
padding:10px; padding:10px;
line-height:1.4em; line-height:1.4em;
} */ } */
.teamName{
max-width: 5vw;
overflow: hidden;
word-wrap: none;
}
li.game{ li.game{
padding-left:20px; padding-left:20px;
} }
.winnerTrophy{
visibility: hidden;
}
.teamName.winner{ .winner{
font-weight:bold; color:green;
font-weight: bold;
}
.loser{
color:grey;
} }
li.game.winner > div.winnerTrophy{
visibility: visible;
}
/* li.game .winnerTrophy{
float:right;
margin-right:5px;
} */
li.game-top{ border-bottom:1px solid #aaa; } li.game-top{ border-bottom:1px solid #aaa; }