Almost brackets working

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]);

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 = <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>
+  return (
+    <>
+      <li className="game game-top">{match1}</li>
+      <li className="game game-spacer">&nbsp;</li>
+      <li className="game game-bottom">{match2}</li>
+      <li class="spacer">&nbsp;</li>
+    </>
+  )
 }
 
 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 (
-      <div className="round finals"><div className="winners">
-        <div className="matchups">
+      <ul className="round finals">
+        <li class="spacer">&nbsp;</li>
         <Match teams={props.teams} match={props.matches[0]} key={0} />
-        </div>
-      </div>
-    </div>
+      </ul>
     );
   } else {
     // The rest of the rounds/tiers, divide into pairs of two matches
@@ -47,9 +43,10 @@ function TournamentTier(props) {
     }
 
     return (
-      <div className={`round ${roundTypes[props.tier]}`}>
+      <ul className={`round ${roundTypes[props.tier]}`}>
+        <li class="spacer">&nbsp;</li>
         {matchPairs}
-      </div>
+      </ul>
     );
   }
 }
@@ -91,18 +88,18 @@ function Match(props) {
   }
 
   return (
-    <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"  : ""}`}>
-          <span>{team1Name}</span>
-        </div>
+        <li onClick={setWinner(props.match.team1Id)} className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner"  : ""}`}>
+          {team1Name}
+        </li>
+        <li class="game game-spacer">&nbsp;</li>
         {/* 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>
+        <li onClick={setWinner(props.match.team2Id)} className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : ""}`}>
+          {team2Name}
+        </li>
+        <li class="spacer">&nbsp;</li>
+    </>
   );
 }
 

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{
+  .round{
 	display:flex;
 	flex-direction:column;
 	justify-content:center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
+	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;
 	}
   
-.matchup{
-	margin: 1vw 0;
+  /*
+   *  General Styles
+  */
+  body{
+	font-family:sans-serif;
+	font-size:small;
+	padding:10px;
+	line-height:1.4em;
   }
   
-.winners{
-	display: flex;
-	justify-content: center;
-	flex-direction: row;
-	margin: 2vh 0;
+  li.game{
+	padding-left:20px;
   }
   
-.round{
-	height: 100%;
+	li.game.winner{
+	  font-weight:bold;
+	}
+	li.game span{
+	  float:right;
+	  margin-right:5px;
 	}
   
-.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;
+	li.game-top{ border-bottom:1px solid #aaa; }
+  
+	li.game-spacer{ 
+	  border-right:1px solid #aaa;
+	  min-height:40px;
 	}
   
-.connector{
-	display:none;
-	height: 100%;
+	li.game-bottom{ 
+	  border-top:1px solid #aaa;
 	}
   
-/* .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;
-} */