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 TournamentBar from "./components/TournamentBar";
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 EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
import DoDisturbIcon from '@mui/icons-material/DoDisturb';
import BackspaceIcon from '@mui/icons-material/Backspace';
import AddCircleIcon from '@mui/icons-material/AddCircle';
function showError(error) {
alert("Something went wrong. \n" + error);
@ -44,6 +46,10 @@ function Match(props){
showError("No team selected");
return;
}
// if(props.match.winnerId === teamId){
// showError("Team already won");
// return;
// }
let formData = new FormData();
formData.append("winnerId",teamId);
let body = new URLSearchParams(formData);
@ -66,13 +72,27 @@ function Match(props){
return (
<>
{/* 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" : ""}`}>
{team1Name} <span><EmojiEventsIcon alt="A trohpy"/></span>
<li className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : "loser"}`}>
<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 className="game game-spacer">&nbsp;</li>
{/* 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" : ""}`}>
{team2Name} <span><EmojiEventsIcon alt="A trohpy"/></span>
<li className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : "loser"}`}>
<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 className="spacer">&nbsp;</li>
</>

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

@ -25,30 +25,43 @@
/*
* General Styles
*/
body{
/* body{
font-family:sans-serif;
font-size:small;
padding:10px;
line-height:1.4em;
} */
.teamName{
max-width: 5vw;
overflow: hidden;
word-wrap: none;
}
li.game{
padding-left:20px;
}
li.game > span{
.winnerTrophy{
visibility: hidden;
}
li.game.winner{
li.game > .removeWinner{
display: none;
}
li.game.winner > .removeWinner{
display:inline-flex;
}
.teamName.winner{
font-weight:bold;
}
li.game.winner > span{
li.game.winner > div.winnerTrophy{
visibility: visible;
}
li.game span{
/* li.game .winnerTrophy{
float:right;
margin-right:5px;
}
} */
li.game-top{ border-bottom:1px solid #aaa; }