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

Brackets being funky

This commit is contained in:
Kristoffer Juelsenn 2022-04-21 11:48:51 +02:00
parent e3a81b9236
commit 4e7ccde40a
2 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,12 @@ import { Link } from "react-router-dom";
import Appbar from './components/AsuraBar'; import Appbar from './components/AsuraBar';
import TournamentBar from "./components/TournamentBar"; import TournamentBar from "./components/TournamentBar";
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import { Button, Paper, Stack, CircularProgress, Box, Grid } from "@mui/material"; import { Button, IconButton, Paper, Stack, CircularProgress, Box, Grid, Typography, Container } from "@mui/material";
import "./components/tournamentBracket.css"; import "./components/tournamentBracket.css";
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents'; 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 AddCircleIcon from '@mui/icons-material/AddCircle';
function showError(error) { function showError(error) {
alert("Something went wrong. \n" + error); alert("Something went wrong. \n" + error);
@ -44,6 +46,10 @@ function Match(props){
showError("No team selected"); showError("No team selected");
return; return;
} }
// if(props.match.winnerId === teamId){
// showError("Team already won");
// return;
// }
let formData = new FormData(); let formData = new FormData();
formData.append("winnerId",teamId); formData.append("winnerId",teamId);
let body = new URLSearchParams(formData); let body = new URLSearchParams(formData);
@ -66,13 +72,27 @@ function Match(props){
return ( return (
<> <>
{/* Team 1 (Winner-status?) (Team name) */} {/* Team 1 (Winner-status?) (Team name) */}
<li onClick={setWinner(props.match.team1Id)} className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : ""}`}> <li className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : "loser"}`}>
{team1Name} <span><EmojiEventsIcon alt="A trohpy"/></span> <Stack direction={"row"}>
<Typography className={`teamName`}>
{team1Name}
</Typography>
{/* <IconButton className="removeWinner" color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> */}
<IconButton onClick={setWinner(props.match.team1Id)} className="selectWinner" color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
{/* <Box className="winnerTrophy"><EmojiEventsIcon alt="A trohpy" color="gold" /></Box> */}
</Stack>
</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 onClick={setWinner(props.match.team2Id)} className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : ""}`}> <li className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : "loser"}`}>
{team2Name} <span><EmojiEventsIcon alt="A trohpy"/></span> <Stack direction={"row"}>
<Typography className={`teamName`}>
{team2Name}
</Typography>
{/* <IconButton className="removeWinner" color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> */}
<IconButton onClick={setWinner(props.match.team1Id)} className="selectWinner" color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
{/* <Box className="winnerTrophy"><EmojiEventsIcon alt="A trohpy" color="gold" /></Box> */}
</Stack>
</li> </li>
<li className="spacer">&nbsp;</li> <li className="spacer">&nbsp;</li>
</> </>

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

@ -25,30 +25,43 @@
/* /*
* General Styles * General Styles
*/ */
body{ /* body{
font-family:sans-serif; font-family:sans-serif;
font-size:small; font-size:small;
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;
} }
li.game > span{ .winnerTrophy{
visibility: hidden; visibility: hidden;
} }
li.game > .removeWinner{
display: none;
}
li.game.winner{ li.game.winner > .removeWinner{
display:inline-flex;
}
.teamName.winner{
font-weight:bold; font-weight:bold;
} }
li.game.winner > span{ li.game.winner > div.winnerTrophy{
visibility: visible; visibility: visible;
} }
li.game span{ /* li.game .winnerTrophy{
float:right; float:right;
margin-right:5px; margin-right:5px;
} } */
li.game-top{ border-bottom:1px solid #aaa; } li.game-top{ border-bottom:1px solid #aaa; }