From 9e17129c6b938fe97ce550b132fcb42c0fca9fc1 Mon Sep 17 00:00:00 2001
From: Kristoffer Juelsen <kristoju@stud.ntnu.no>
Date: Wed, 20 Apr 2022 12:53:03 +0200
Subject: [PATCH] Rendering implemented

---
 src/client/src/TournamentOverview.js          | 38 +++++++++----------
 .../src/components/tournamentBracket.css      |  1 +
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js
index 3a342ef..c17a7d0 100644
--- a/src/client/src/TournamentOverview.js
+++ b/src/client/src/TournamentOverview.js
@@ -9,15 +9,15 @@ 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} />;
-  let match2 = <Match teams={props.teams} match={props.matches[1]} key={1} />;
+  let team1 = <Match teams={props.teams} match={props.matches[0]} key={0} />;
+  let team2 = <Match teams={props.teams} match={props.matches[1]} key={1} />;
 
   return (
     <>
-      <li className="game game-top">{match1}</li>
+      <li className="game game-top">Test 1</li>
       <li className="game game-spacer">&nbsp;</li>
-      <li className="game game-bottom">{match2}</li>
-      <li class="spacer">&nbsp;</li>
+      <li className="game game-bottom">Test 2</li>
+      <li className="spacer">&nbsp;</li>
     </>
   )
 }
@@ -26,17 +26,17 @@ 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 class="spacer">&nbsp;</li>
-        <Match teams={props.teams} match={props.matches[0]} key={0} />
-      </ul>
-    );
-  } else {
+  // 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 / 2;
+    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} />);
@@ -44,11 +44,11 @@ function TournamentTier(props) {
 
     return (
       <ul className={`round ${roundTypes[props.tier]}`}>
-        <li class="spacer">&nbsp;</li>
+        <li className="spacer">&nbsp;</li>
         {matchPairs}
       </ul>
     );
-  }
+  // }
 }
 
 function Match(props) {
@@ -93,12 +93,12 @@ function Match(props) {
         <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>
+        <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" : ""}`}>
           {team2Name}
         </li>
-        <li class="spacer">&nbsp;</li>
+        <li className="spacer">&nbsp;</li>
     </>
   );
 }
diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css
index e80d83b..f6ef4a0 100644
--- a/src/client/src/components/tournamentBracket.css
+++ b/src/client/src/components/tournamentBracket.css
@@ -4,6 +4,7 @@
 .bracket{
 	display:flex;
 	flex-direction:row;
+	justify-content: center;
   }
   .round{
 	display:flex;