Vizualisation done, now to fix bugs

src/client/src/TournamentOverview.js

@@ -8,62 +8,40 @@ import "./components/tournamentBracket.css";
 import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import DoDisturbIcon from '@mui/icons-material/DoDisturb';
 
-function MatchPair(props) {
+function showError(error) {
-  let team1 = <Match teams={props.teams} match={props.matches[0]} key={0} />;
+  alert("Something went wrong. \n" + error);
-  let team2 = <Match teams={props.teams} match={props.matches[1]} key={1} />;
+  console.error(error);
+}
 
-  return (
+function TournamentTier(props){
-    <>
+  let roundTypes = ["finals", "semifinals", "quarterfinals", "eighthfinals", "sixteenthfinals", "thirtysecondfinals"];
-      <li className="game game-top">Test 1</li>
+    let matches = [];
-      <li className="game game-spacer">&nbsp;</li>
+    for (let i = 0; i < props.matches.length; i++) {
-      <li className="game game-bottom">Test 2</li>
+      matches.push(<Match teams={props.teams} match={props.matches[i]} key={i} />);
+    }
+    return(
+      <ul className={`round ${roundTypes[props.tier]}`}>
         <li className="spacer">&nbsp;</li>
-    </>
+        {matches}
+      </ul>
     )
 }
 
-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 (
-  //     <ul className="round finals">
-  //       <li className="spacer">&nbsp;</li>
-  //       <Match teams={props.teams} match={props.matches[0]} key={0} />
-  //     </ul>
-  //   );
-  // } else {
-    // The rest of the rounds/tiers, divide into pairs of two matches
-    let matchPairCount = props.matches.length;
-    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 (
+function Match(props){
-      <ul className={`round ${roundTypes[props.tier]}`}>
-        <li className="spacer">&nbsp;</li>
-        {matchPairs}
-      </ul>
-    );
-  // }
-}
-
-function Match(props) {
-  // A single match object, as used by MatchPair and TournamentTier
   let team1Name = "TBA";
   let team2Name = "TBA";
-  if (props.match.team1Id !== null) {
+  if(props.match.team1Id !== null) {
     team1Name = props.teams.find(team => team.id === props.match.team1Id).name;
   }
-  if (props.match.team2Id !== null) {
+  if(props.match.team2Id !== null) {
     team2Name = props.teams.find(team => team.id === props.match.team2Id).name;
   }
 
   let setWinner = curryTeamId => event => {
     let teamId = curryTeamId;
+    console.log(teamId)
     if (!teamId || teamId == null) {
       showError("No team selected");
       return;
@@ -90,25 +68,26 @@ function Match(props) {
   return (
     <>
         {/* Team 1 (Winner-status?) (Team name) */}
-        <li onClick={setWinner(props.match.team1Id)} className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner"  : ""}`}>
+        <li id={props.match.team1Id} onClick={setWinner(props.match.team1Id)} className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner"  : ""}`}>
-          {team1Name}
+          {team1Name} <span><EmojiEventsIcon alt="A trohpy"/></span>
         </li>
         <li className="game game-spacer">&nbsp;</li>
         {/* Team 2 (Winner-status?) (Team name) */}
-        <li onClick={setWinner(props.match.team2Id)} className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : ""}`}>
+        <li id={props.match.team2Id} onClick={setWinner(props.match.team2Id)} className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : ""}`}>
-          {team2Name}
+          {team2Name} <span><EmojiEventsIcon alt="A trohpy"/></span>
         </li>
         <li className="spacer">&nbsp;</li>
     </>
   );
+
+
 }
 
-function BracketViewer(props) {
+function BracketViewer(props){
   const [tournament, setTournament] = React.useState(null);
   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_API_URL + `/tournament/${props.tournamentId}`)
       .then(res => res.json())
@@ -161,7 +140,6 @@ function BracketViewer(props) {
       })
       .catch(err => showError(err));
   }, []);
-
   return (
     (matches && teams) ?
       // <div sx={{width: "100vw", height: "80vh", overflow: "scroll"}} className="bracket">
@@ -172,12 +150,7 @@ function BracketViewer(props) {
         })}
       </div>
     : <Box sx={{display:'flex', justifyContent:'center', alignItems:'center', position:'relative', marginTop:'5%'}}><CircularProgress size={"20vw"}/></Box>   
-  );
+);
-}
-
-function showError(error) {
-  alert("Something went wrong. \n" + error);
-  console.error(error);
 }
 
 export default function TournamentOverview(props) {

src/client/src/components/tournamentBracket.css

@@ -35,10 +35,16 @@
   li.game{
 	padding-left:20px;
   }
+  li.game > span{
+	visibility: hidden;
+  }
   
 	li.game.winner{
 	  font-weight:bold;
 	}
+	li.game.winner > span{
+		visibility: visible;
+	  }
 	li.game span{
 	  float:right;
 	  margin-right:5px;