diff --git a/src/client/src/TournamentManager.js b/src/client/src/TournamentManager.js
index 1196c06..7abece4 100644
--- a/src/client/src/TournamentManager.js
+++ b/src/client/src/TournamentManager.js
@@ -104,8 +104,8 @@ let deleteTournament = tournamentId => event => {
function ManageTournament(props) {
- const [startTime, setStartTime] = React.useState([new Date(),null]);
- const [endTime, setEndTime] = React.useState([new Date(),null]);
+ const [startTime, setStartTime] = React.useState([null,null]);
+ const [endTime, setEndTime] = React.useState([null,null]);
React.useEffect(() => {
fetch(
@@ -119,8 +119,8 @@ function ManageTournament(props) {
document.getElementById("editName").value = data.data.name;
document.getElementById("editDesc").value = data.data.description;
- setStartTime(data.data.startTime.slice(0, 16));
- setEndTime(data.data.endTime.slice(0, 16));
+ // setStartTime(data.data.startTime.slice(0, 16));
+ // setEndTime(data.data.endTime.slice(0, 16));
})
.catch((err) => showError(err));
}, [endTime, props.tournamentId, startTime]);
diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js
index 0a1732e..3a342ef 100644
--- a/src/client/src/TournamentOverview.js
+++ b/src/client/src/TournamentOverview.js
@@ -3,7 +3,7 @@ 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 } from "@mui/material";
+import { Button, Paper, Stack, CircularProgress, Box, Grid } from "@mui/material";
import "./components/tournamentBracket.css";
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
import DoDisturbIcon from '@mui/icons-material/DoDisturb';
@@ -12,16 +12,14 @@ function MatchPair(props) {
let match1 = ;
let match2 = ;
- return
-
- {match1}
- {match2}
-
-
-
+ return (
+ <>
+ {match1}
+
+ {match2}
+
+ >
+ )
}
function TournamentTier(props) {
@@ -31,12 +29,10 @@ function TournamentTier(props) {
if (props.tier === 0) {
// The final, just a single match without the bracket lines
return (
-
+
);
} else {
// The rest of the rounds/tiers, divide into pairs of two matches
@@ -47,9 +43,10 @@ function TournamentTier(props) {
}
return (
-
+
);
}
}
@@ -91,18 +88,18 @@ function Match(props) {
}
return (
-
-
+ <>
{/* Team 1 (Winner-status?) (Team name) */}
-
- {team1Name}
-
+
+ {team1Name}
+
+
{/* Team 2 (Winner-status?) (Team name) */}
-
- {team2Name}
-
-
-
+
+ {team2Name}
+
+
+ >
);
}
diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css
index 0672428..e80d83b 100644
--- a/src/client/src/components/tournamentBracket.css
+++ b/src/client/src/components/tournamentBracket.css
@@ -1,153 +1,56 @@
-html,body{
- height:100%;
-}
-
+/*
+ * Flex Layout Specifics
+*/
.bracket{
- display: flex;
- position: relative;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- width: 90vw;
- height: 100%;
- padding:2%;
-}
-
-.winners{
- margin: 2vw;
-}
-
-.participants{
- border-radius: 0.25vw;
- overflow: hidden;
- border: 1px solid gray;
-}
-.participants .participant {
- box-sizing: border-box;
- color: #404040;
- background: white;
- width: 10vw;
- height: 3vw;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
-}
-.participants .participant span {
- margin: 0 1.25vw;
- line-height: 3;
- font-size: 1rem;
- font-family: "Roboto Slab";
- overflow: ellipsis;
-}
-.participants .participant:not(:last-child) {
- border-bottom: thin solid #dcdddd;
-}
-.participants .participant.loser {
- color: #dc563f;
- border-color: #dc563f;
-}
-.participants .participant.winner {
- color: white;
- background-color: #1ab35a;
-}
-
-.participants .participant:hover{
- cursor: pointer;
- background-color: #1ab35a;
-}
-
-.matchups{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
-}
-
-.matchup{
- margin: 1vw 0;
-}
-
-.winners{
- display: flex;
- justify-content: center;
- flex-direction: row;
- margin: 2vh 0;
-}
-
-.round{
- height: 100%;
-}
-
-.round.thirtysecondfinals{
- margin: 0vh 2vw;
- height: 100%;
-}
-.round.sixteenthfinals{
- margin: 0vh 2vw;
- height: 100%;
-}
-.round.eighthfinals{
- margin: 0vh 2vw;
- height: 100%;
-}
-.round.quarterfinals{
- margin: 0vh 2vw;
- height: 100%;
-}
-.round.semifinals{
- margin: 0vh 2vw;
- height: 100%;
-}
-.round.finals{
- margin: 0vh 2vw;
-}
-
-.connector{
- display:none;
- height: 100%;
-}
-
-/* .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;
-}
-
-.bracket .round .winners>div.connector .line {
- border-bottom: thin solid #c0c0c8;
- height: 25%;
-}
-
-.bracket .round .winners>div.connector .merger {
- position: relative;
- height: 50%;
-}
-
-.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;
-}
-
-.bracket .round .winners>div.connector .merger:before {
- border-right-width: thin;
- border-top-width: thin;
-}
-
-.bracket .round .winners>div.connector .merger:after {
- border-right-width: thin;
- border-bottom-width: thin;
-} */
\ No newline at end of file
+ display:flex;
+ flex-direction:row;
+ }
+ .round{
+ display:flex;
+ flex-direction:column;
+ justify-content:center;
+ width:200px;
+ list-style:none;
+ padding:0;
+ }
+ .round .spacer{ flex-grow:1; }
+ .round .spacer:first-child,
+ .round .spacer:last-child{ flex-grow:.5; }
+
+ .round .game-spacer{
+ flex-grow:1;
+ }
+
+ /*
+ * General Styles
+ */
+ body{
+ font-family:sans-serif;
+ font-size:small;
+ padding:10px;
+ line-height:1.4em;
+ }
+
+ li.game{
+ padding-left:20px;
+ }
+
+ li.game.winner{
+ font-weight:bold;
+ }
+ li.game span{
+ float:right;
+ margin-right:5px;
+ }
+
+ li.game-top{ border-bottom:1px solid #aaa; }
+
+ li.game-spacer{
+ border-right:1px solid #aaa;
+ min-height:40px;
+ }
+
+ li.game-bottom{
+ border-top:1px solid #aaa;
+ }
+
\ No newline at end of file