Starting reformatting for brackets

src/client/src/TournamentOverview.js

@@ -5,6 +5,8 @@ import TournamentBar from "./components/TournamentBar";
 import { useParams } from 'react-router-dom'
 import { Button, Paper, Stack, CircularProgress, Box } from "@mui/material";
 import "./components/tournamentBracket.css";
+import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
+import DoDisturbIcon from '@mui/icons-material/DoDisturb';
 
 function MatchPair(props) {
   let match1 = <Match teams={props.teams} match={props.matches[0]} key={0} />;
@@ -29,12 +31,12 @@ function TournamentTier(props) {
   if (props.tier === 0) {
     // The final, just a single match without the bracket lines
     return (
-      <section className="round finals"><div className="winners">
+      <div className="round finals"><div className="winners">
         <div className="matchups">
           <Match teams={props.teams} match={props.matches[0]} key={0} />
         </div>
       </div>
-    </section>
+    </div>
     );
   } else {
     // The rest of the rounds/tiers, divide into pairs of two matches
@@ -45,9 +47,9 @@ function TournamentTier(props) {
     }
 
     return (
-      <section className={`round ${roundTypes[props.tier]}`}>
+      <div className={`round ${roundTypes[props.tier]}`}>
         {matchPairs}
-      </section>
+      </div>
     );
   }
 }
@@ -92,11 +94,11 @@ function Match(props) {
     <div className="matchup">
       <div className="participants">
         {/* Team 1 (Winner-status?) (Team name) */}
-        <div onClick={setWinner(props.match.team1Id)} className={`participant ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner" : ""}`}>
+        <div onClick={setWinner(props.match.team1Id)} className={`participant ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner"  : ""}`} endIcon={<EmojiEventsIcon />}>
           <span>{team1Name}</span>
         </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" : ""}`}>
+        <div onClick={setWinner(props.match.team2Id)} className={`participant ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : ""}`} endIcon={<DoDisturbIcon />}>
           <span>{team2Name}</span>
         </div>
       </div>

src/client/src/components/tournamentBracket.css

@@ -1,70 +1,113 @@
-/* https://codepen.io/semibran/pen/VjmPJd */
+html,body{
-html {
+	height:100%;
-	font-size: 1rem;
 }
 
-.bracket {
+.bracket{
-	display: inline-block;
+	display: flex;
-	position: absolute;
+	position: relative;
-	left: 50%;
+	flex-direction: row;
-	top: 50%;
+	justify-content: space-between;
-	transform: translate(-50%, -50%);
+	align-items: center;
-	white-space: nowrap;
+	width: 100%;
+	height: 100%;
+	padding:2%;
 }
 
-.bracket .round {
+.winners{
-	display: inline-block;
+	margin: 2rem;
-	vertical-align: middle;
 }
 
-.bracket .round .winners>div {
+.participants{
-	display: inline-block;
-	vertical-align: middle;
-}
-
-.bracket .round .winners>div.matchups .matchup:last-child {
-	margin-bottom: 0 !important;
-}
-
-.bracket .round .winners>div.matchups .matchup .participants {
 	border-radius: 0.25rem;
 	overflow: hidden;
 	border: 1px solid gray;
 }
-
+.participants .participant {
-.bracket .round .winners>div.matchups .matchup .participants .participant {
 	box-sizing: border-box;
 	color:  #404040;
-	border-left: 0.25rem solid #858585;
 	background: white;
 	width: 14rem;
 	height: 3rem;
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
 }
-
+.participants .participant span {
-.bracket .round .winners>div.matchups .matchup .participants .participant.winner {
-	color: green;
-	border-color: #60c645;
-}
-
-.bracket .round .winners>div.matchups .matchup .participants .participant.loser {
-	color: #dc563f;
-	border-color: #dc563f;
-}
-
-.bracket .round .winners>div.matchups .matchup .participants .participant:not(:last-child) {
-	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";
 	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;
+}
 
-.bracket .round .winners>div.connector.filled .line,
+.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: 1rem 0;
+}
+
+.winners{
+	display: flex;
+	justify-content: space-between;
+	flex-direction: row;
+	margin: 2rem 0;
+}
+
+.round{
+	height: 100%;
+}
+
+.round.thirtysecondfinals{
+	margin: 0 2rem;
+	height: 100%;
+}
+.round.sixteenthfinals{
+	margin: 0 2rem;
+	height: 100%;
+}
+.round.eighthfinals{
+	margin: 0 2rem;
+	height: 100%;
+}
+.round.quarterfinals{
+	margin: 0 2rem;
+	height: 100%;
+}
+.round.semifinals{
+	margin: 0 2rem;
+	height: 100%;
+}
+.round.finals{
+	margin: 0 2rem;
+}
+
+.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;
@@ -80,12 +123,12 @@ html {
 
 .bracket .round .winners>div.connector .line {
 	border-bottom: thin solid #c0c0c8;
-	height: 4rem;
+	height: 25%;
 }
 
 .bracket .round .winners>div.connector .merger {
 	position: relative;
-	height: 8rem;
+	height: 50%;
 }
 
 .bracket .round .winners>div.connector .merger:before,
@@ -107,36 +150,4 @@ html {
 .bracket .round .winners>div.connector .merger:after {
 	border-right-width: thin;
 	border-bottom-width: thin;
-}
+} */
-
-.bracket .round.quarterfinals .winners:not(:last-child) {
-	margin-bottom: 2rem;
-}
-
-.bracket .round.quarterfinals .winners .matchups .matchup:not(:last-child) {
-	margin-bottom: 2rem;
-}
-
-.bracket .round.semifinals .winners .matchups .matchup:not(:last-child) {
-	margin-bottom: 10rem;
-}
-
-.bracket .round.semifinals .winners .connector .merger {
-	height: 16rem;
-}
-
-.bracket .round.semifinals .winners .connector .line {
-	height: 8rem;
-}
-
-.bracket .round.finals .winners .connector .merger {
-	height: 3rem;
-}
-
-.bracket .round.finals .winners .connector .line {
-	height: 1.5rem;
-}
-
-.participant:hover {
-	background: lightgreen!important;
-}