From 7f8ac6d3456642e744cddd4e1ff66ae5b35ef397 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Wed, 20 Apr 2022 10:54:56 +0200 Subject: [PATCH] Almost brackets working --- src/client/src/TournamentManager.js | 8 +- src/client/src/TournamentOverview.js | 55 +++-- .../src/components/tournamentBracket.css | 207 +++++------------- 3 files changed, 85 insertions(+), 185 deletions(-) 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 ( -
    +
      +
    •  
      • {matchPairs} -
    + ); } } @@ -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