Fix bracket graphics
This commit is contained in:
parent
2205d07585
commit
522277b911
|
|
@ -1 +1,2 @@
|
|||
REACT_APP_BACKEND_URL="http://demiurgen.pvv.ntnu.no:3000"
|
||||
REACT_APP_BACKEND_URL=http://localhost:3001
|
||||
BROWSER=none
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from "react";
|
||||
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
|
||||
import { AppBar, Typography, Toolbar, CssBaseline, Button, Box, IconButton } from "@mui/material"
|
||||
import { AppBar, Typography, Toolbar, CssBaseline, Box, IconButton } from "@mui/material"
|
||||
import Menu from '@mui/icons-material/Menu'
|
||||
import HomeImage from "./homeimage";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* https://codepen.io/semibran/pen/VjmPJd */
|
||||
html {
|
||||
font-size: 1rem; }
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.bracket {
|
||||
display: inline-block;
|
||||
|
|
@ -9,19 +10,27 @@ html {
|
|||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
white-space: nowrap;
|
||||
background: #f0f2f2 !important;
|
||||
}
|
||||
|
||||
.bracket .round {
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div {
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.matchups .matchup:last-child {
|
||||
margin-bottom: 0 !important; }
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.matchups .matchup .participants {
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden; }
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.matchups .matchup .participants .participant {
|
||||
box-sizing: border-box;
|
||||
color: #858585;
|
||||
|
|
@ -29,58 +38,104 @@ html {
|
|||
background: white;
|
||||
width: 14rem;
|
||||
height: 3rem;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12); }
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.matchups .matchup .participants .participant.winner {
|
||||
color: #60c645;
|
||||
border-color: #60c645; }
|
||||
border-color: #60c645;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.matchups .matchup .participants .participant.loser {
|
||||
color: #dc563f;
|
||||
border-color: #dc563f; }
|
||||
border-color: #dc563f;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.matchups .matchup .participants .participant:not(:last-child) {
|
||||
border-bottom: thin solid #f0f2f2; }
|
||||
border-bottom: thin solid #f0f2f2;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.matchups .matchup .participants .participant span {
|
||||
margin: 0 1.25rem;
|
||||
line-height: 3;
|
||||
font-size: 1rem;
|
||||
font-family: "Roboto Slab"; }
|
||||
.bracket .round .winners > div.connector.filled .line, .bracket .round .winners > div.connector.filled.bottom .merger:after, .bracket .round .winners > div.connector.filled.top .merger:before {
|
||||
border-color: #60c645; }
|
||||
.bracket .round .winners > div.connector .line, .bracket .round .winners > div.connector .merger {
|
||||
font-family: "Roboto Slab";
|
||||
overflow: ellipsis;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.connector.filled .line,
|
||||
.bracket .round .winners>div.connector.filled.bottom .merger:after,
|
||||
.bracket .round .winners>div.connector.filled.top .merger:before {
|
||||
border-color: #60c645;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.connector .line,
|
||||
.bracket .round .winners>div.connector .merger {
|
||||
box-sizing: border-box;
|
||||
width: 2rem;
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.connector .line {
|
||||
border-bottom: thin solid #c0c0c8;
|
||||
height: 4rem; }
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.connector .merger {
|
||||
position: relative;
|
||||
height: 8rem; }
|
||||
.bracket .round .winners > div.connector .merger:before, .bracket .round .winners > div.connector .merger:after {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.connector .merger:before,
|
||||
.bracket .round .winners>div.connector .merger:after {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
border: 0 solid;
|
||||
border-color: #c0c0c8; }
|
||||
border-color: #c0c0c8;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.connector .merger:before {
|
||||
border-right-width: thin;
|
||||
border-top-width: thin; }
|
||||
border-top-width: thin;
|
||||
}
|
||||
|
||||
.bracket .round .winners>div.connector .merger:after {
|
||||
border-right-width: thin;
|
||||
border-bottom-width: thin; }
|
||||
border-bottom-width: thin;
|
||||
}
|
||||
|
||||
.bracket .round.quarterfinals .winners:not(:last-child) {
|
||||
margin-bottom: 2rem; }
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.bracket .round.quarterfinals .winners .matchups .matchup:not(:last-child) {
|
||||
margin-bottom: 2rem; }
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.bracket .round.semifinals .winners .matchups .matchup:not(:last-child) {
|
||||
margin-bottom: 10rem; }
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.bracket .round.semifinals .winners .connector .merger {
|
||||
height: 16rem; }
|
||||
height: 16rem;
|
||||
}
|
||||
|
||||
.bracket .round.semifinals .winners .connector .line {
|
||||
height: 8rem; }
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.bracket .round.finals .winners .connector .merger {
|
||||
height: 3rem; }
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.bracket .round.finals .winners .connector .line {
|
||||
height: 1.5rem; }
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.participant:hover {
|
||||
background: lightgreen!important;
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import './tournamentBracket.css';
|
||||
|
||||
|
||||
//
|
||||
export default function TournamentBracket(props) {
|
||||
return <>
|
||||
<section class="round quarterfinals">
|
||||
<div class="winners">
|
||||
<div class="matchups">
|
||||
<div class="matchup">
|
||||
<div class="participants">
|
||||
<div class="participant winner"><span>Uno</span></div>
|
||||
<div class="participant"><span>Ocho</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="matchup">
|
||||
<div class="participants">
|
||||
<div class="participant"><span>Dos</span></div>
|
||||
<div class="participant winner"><span>Siete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="connector">
|
||||
<div class="merger"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="winners">
|
||||
<div class="matchups">
|
||||
<div class="matchup">
|
||||
<div class="participants">
|
||||
<div class="participant"><span>Treis</span></div>
|
||||
<div class="participant winner"><span>Seis</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="matchup">
|
||||
<div class="participants">
|
||||
<div class="participant"><span>Cuatro</span></div>
|
||||
<div class="participant winner"><span>Cinco</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="connector">
|
||||
<div class="merger"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="round semifinals">
|
||||
<div class="winners">
|
||||
<div class="matchups">
|
||||
<div class="matchup">
|
||||
<div class="participants">
|
||||
<div class="participant winner"><span>Uno</span></div>
|
||||
<div class="participant"><span>Dos</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="matchup">
|
||||
<div class="participants">
|
||||
<div class="participant winner"><span>Seis</span></div>
|
||||
<div class="participant"><span>Cinco</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="connector">
|
||||
<div class="merger"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="round finals">
|
||||
<div class="winners">
|
||||
<div class="matchups">
|
||||
<div class="matchup">
|
||||
<div class="participants">
|
||||
<div class="participant winner"><span>Uno</span></div>
|
||||
<div class="participant"><span>Seis</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
}
|
||||
|
|
@ -7,8 +7,8 @@ import TournamentAnnouncement from "./tournamentannouncement";
|
|||
import TournamentMatches from "./tournamentmatches";
|
||||
import TeamEditor from "./teameditor";
|
||||
import Appbar from './components/appbar';
|
||||
import { Button, Container, Typography, Grid, Box } from "@mui/material";
|
||||
import { Card, CardActions,CardACtionsArea, CardContent, CardHeader, CardMedia, Collapse, Paper } from "@mui/material";
|
||||
import { Button, Container, Typography, Box } from "@mui/material";
|
||||
import { Card, CardContent, CardMedia, Paper } from "@mui/material";
|
||||
import AddCircleIcon from '@mui/icons-material/AddCircle';
|
||||
|
||||
function CreateButton(props) {
|
||||
|
|
@ -73,16 +73,13 @@ function TournamentListItem(props) {
|
|||
}
|
||||
|
||||
function TournamentList() {
|
||||
let [data, setData] = React.useState(null);
|
||||
let [tournamentList, setTournamentList] = React.useState([]);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetch(process.env.REACT_APP_BACKEND_URL + "/api/tournament/getTournaments")
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
if (data.status != "OK") {
|
||||
// Do your error thing
|
||||
if (data.status !== "OK") {
|
||||
console.error(data);
|
||||
return;
|
||||
}
|
||||
|
|
@ -99,7 +96,6 @@ function TournamentList() {
|
|||
}, []);
|
||||
|
||||
return <>
|
||||
{/* {tournamentList && tournamentList.map((tournamentObject, i) => <TournamentListItem key={tournamentObject.id.toString()} name={tournamentObject.name} description={tournamentObject.description} startDate={tournamentObject.startTime} endDate={tournamentObject.endTime} teamLimit={tournamentObject.teamLimit} />)} */}
|
||||
{tournamentList && tournamentList.map((tournamentObject) => <TournamentListItem key={tournamentObject.id.toString()} tournament={tournamentObject} />)}
|
||||
|
||||
</>;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ function ManageTournament(props) {
|
|||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
if (data.status != "OK") {
|
||||
if (data.status !== "OK") {
|
||||
// Do your error thing
|
||||
console.error(data.data);
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,65 +1,120 @@
|
|||
import * as React from "react";
|
||||
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
import Appbar from './components/appbar';
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Button } from "@mui/material";
|
||||
import TournamentBracket from "./components/tournamentBracket";
|
||||
import AddCircleIcon from '@mui/icons-material/AddCircle';
|
||||
import "./components/tournamentBracket.css";
|
||||
|
||||
function TournamentTier(props) {
|
||||
let roundTypes = ["finals", "semifinals", "quarterfinals", "eighthfinals"];
|
||||
let connector;
|
||||
if (props.tier != 0) {
|
||||
connector = <div className="connector">
|
||||
function MatchPair(props) {
|
||||
let match1 = <Match teams={props.teams} match={props.matches[0]} key={0} />;
|
||||
let match2 = <Match teams={props.teams} match={props.matches[1]} key={1} />;
|
||||
|
||||
return <div className="winners">
|
||||
<div className="matchups">
|
||||
{match1}
|
||||
{match2}
|
||||
</div>
|
||||
<div className="connector">
|
||||
<div className="merger"></div>
|
||||
<div className="line"></div>
|
||||
</div>;
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
return <section className={`round ${roundTypes[props.tier]}`}><div className="winners">
|
||||
function TournamentTier(props) {
|
||||
// One round/tier of the tournament, as used by BracketViewer
|
||||
let roundTypes = ["finals", "semifinals", "quarterfinals", "eighthfinals", "sixteenthfinals", "thirtysecondfinals"];
|
||||
|
||||
if (props.tier === 0) {
|
||||
// The final, just a single match without the bracket lines
|
||||
return (
|
||||
<section className="round finals"><div className="winners">
|
||||
<div className="matchups">
|
||||
{props.matches.map((match, i) => {
|
||||
return <Match teams={props.teams} match={match} key={i} />
|
||||
})}
|
||||
<Match teams={props.teams} match={props.matches[0]} key={0} />
|
||||
</div>
|
||||
{connector}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
} else {
|
||||
// The rest of the rounds/tiers, divide into pairs of two matches
|
||||
let matchPairCount = props.matches.length / 2;
|
||||
let matchPairs = [];
|
||||
for (let i = 0; i < matchPairCount; i++) {
|
||||
matchPairs.push(<MatchPair teams={props.teams} matches={props.matches.slice(i * 2, i * 2 + 2)} key={i} />);
|
||||
}
|
||||
return (
|
||||
<section className={`round ${roundTypes[props.tier]}`}>
|
||||
{matchPairs}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Match(props) {
|
||||
let team1;
|
||||
let team2;
|
||||
if (props.match.team1Id != null) {
|
||||
team1 = <div className='participant'><span>{props.match.team1Id}</span></div>;
|
||||
} else {
|
||||
team1 = <div className='participant'><span>TBA</span></div>;
|
||||
// A single match object, as used by MatchPair and TournamentTier
|
||||
let team1Name = "TBA";
|
||||
let team2Name = "TBA";
|
||||
if (props.match.team1Id !== null) {
|
||||
team1Name = props.teams.find(team => team.id === props.match.team1Id).name;
|
||||
}
|
||||
if (props.match.team2Id !== null) {
|
||||
team2Name = props.teams.find(team => team.id === props.match.team2Id).name;
|
||||
}
|
||||
|
||||
if (props.match.team2Id != null) {
|
||||
team2 = <div className='participant'><span>{props.match.team2Id}</span></div>;
|
||||
let setWinner = curryTeamId => event => {
|
||||
let teamId = curryTeamId;
|
||||
console.log(teamId);
|
||||
if (!teamId || teamId == null) {
|
||||
console.log("oops");
|
||||
return;
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append("winnerId",teamId);
|
||||
let body = new URLSearchParams(formData);
|
||||
fetch(process.env.REACT_APP_BACKEND_URL + `/api/match/${props.match.id}/setWinner`, {
|
||||
method: "POST",
|
||||
body: body
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === "OK") {
|
||||
//Refresh when winner is set successfully
|
||||
window.location.reload();
|
||||
} else {
|
||||
team2 = <div className='participant'><span>TBA</span></div>;
|
||||
showError(data.data)
|
||||
}
|
||||
})
|
||||
.catch(error => showError(error));
|
||||
}
|
||||
|
||||
return <div className="matchup">
|
||||
return (
|
||||
<div className="matchup">
|
||||
<div className="participants">
|
||||
{/* <div class="participant winner"><span>{if (props.match.team1Id) { props.match.team1Id} else { "TBA" }}</span></div>
|
||||
<div class="participant"><span>{props.match.team2Id}</span></div> */}
|
||||
{team1}
|
||||
{team2}
|
||||
{/* Team 1 (Winner-status?) (Team name) */}
|
||||
<div onClick={setWinner(props.match.team1Id)} className={`participant ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : ""}`}>
|
||||
<span>{team1Name}</span>
|
||||
</div>
|
||||
</div>;
|
||||
{/* Team 2 (Winner-status?) (Team name) */}
|
||||
<div onClick={setWinner(props.match.team2Id)} className={`participant ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : ""}`}>
|
||||
<span>{team2Name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BracketViewer(props) {
|
||||
const [tournament, setTournament] = React.useState(null);
|
||||
const [matches, setMatches] = React.useState([]);
|
||||
const [teams, setTeams] = React.useState([]);
|
||||
const [matches, setMatches] = React.useState(null);
|
||||
const [teams, setTeams] = React.useState(null);
|
||||
|
||||
// One fetch statement for each of the three state variables
|
||||
React.useEffect(() => {
|
||||
fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status != "OK") {
|
||||
if (data.status !== "OK") {
|
||||
// Do your error thing
|
||||
console.error(data);
|
||||
return;
|
||||
|
|
@ -73,14 +128,15 @@ function BracketViewer(props) {
|
|||
fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}/getMatches`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status != "OK") {
|
||||
if (data.status !== "OK") {
|
||||
// Do your error thing
|
||||
console.error(data);
|
||||
return;
|
||||
}
|
||||
let matches = data.data;
|
||||
// Group all matches by their round/tier
|
||||
let tiers = matches.reduce((tiers, match) => {
|
||||
if (tiers[match.tier] == undefined) {
|
||||
if (!tiers[match.tier]) {
|
||||
tiers[match.tier] = [];
|
||||
}
|
||||
tiers[match.tier].push(match);
|
||||
|
|
@ -97,24 +153,61 @@ function BracketViewer(props) {
|
|||
fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}/getTeams`)
|
||||
.then(res => res.json())
|
||||
.then(data=>{
|
||||
if(data.status != "OK"){
|
||||
if(data.status !== "OK"){
|
||||
console.error(data)
|
||||
return;
|
||||
}
|
||||
console.log(data);
|
||||
let teams = data.data;
|
||||
setTeams(teams);
|
||||
})
|
||||
.catch((err) => console.log(err.message));
|
||||
|
||||
}, []);
|
||||
|
||||
return <div className="bracket">
|
||||
return (
|
||||
(matches && teams) ?
|
||||
<div className="bracket">
|
||||
{matches.map(tier => {
|
||||
let tierNum = tier[0].tier;
|
||||
return <TournamentTier key={tierNum} tier={tierNum} matches={tier} teams={teams} />
|
||||
|
||||
})}
|
||||
</div>;
|
||||
</div>
|
||||
: <div className="loader"><h2>Loading...</h2></div>
|
||||
);
|
||||
}
|
||||
|
||||
// // api.post("/match/:matchId/setWinner"
|
||||
// function SelectWinnerButton(props) {
|
||||
// const setWinner = function() {
|
||||
// let formData = new FormData();
|
||||
// formData.append("winner", props.teamId);
|
||||
// let body = new URLSearchParams(formData);
|
||||
|
||||
// fetch(process.env.REACT_APP_BACKEND_URL + `/api/match/${props.matchId}`, {
|
||||
// method: "POST",
|
||||
// body: body
|
||||
// })
|
||||
// .then(response => response.json())
|
||||
// .then(data => {
|
||||
// if (data.status === "OK") {
|
||||
// alert("Tournament created successfully");
|
||||
// window.location.href = "/";
|
||||
// } else {
|
||||
// showError(data.data)
|
||||
// }
|
||||
// })
|
||||
// .catch(error => showError(error));
|
||||
// }
|
||||
// return (
|
||||
// <Button className="selectWinnerButton" variant="contained" color="success" onClick={setWinner} disabled={props.disableButton} >
|
||||
// +
|
||||
// </Button>
|
||||
// );
|
||||
// }
|
||||
|
||||
function showError(error) {
|
||||
alert("Something went wrong. \n" + error);
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
export default function TournamentOverview(props) {
|
||||
|
|
@ -128,9 +221,7 @@ export default function TournamentOverview(props) {
|
|||
<Button className="ManageButton" variant="contained" color="rackley">Manage Tournament</Button>
|
||||
</Link>
|
||||
<Link to={`/tournament/${tournamentId}/teams`}>
|
||||
<Button className="OverviewButton" variant="contained" color="grape">
|
||||
Manage Teams
|
||||
</Button>
|
||||
<Button className="OverviewButton" variant="contained" color="grape">Manage Teams</Button>
|
||||
</Link>
|
||||
|
||||
<BracketViewer tournamentId={tournamentId} className="bracketViewer" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue