diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index c17a7d0..186dce1 100644 --- a/src/client/src/TournamentOverview.js +++ b/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) { - let team1 = ; - let team2 = ; - - return ( - <> -
  • Test 1
  • -
  •  
  • -
  • Test 2
  • -
  •  
  • - - ) +function showError(error) { + alert("Something went wrong. \n" + error); + console.error(error); } -function TournamentTier(props) { - // One round/tier of the tournament, as used by BracketViewer +function TournamentTier(props){ let roundTypes = ["finals", "semifinals", "quarterfinals", "eighthfinals", "sixteenthfinals", "thirtysecondfinals"]; - - // 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 - let matchPairCount = props.matches.length; - let matchPairs = []; - for (let i = 0; i < matchPairCount; i++) { - matchPairs.push(); + let matches = []; + for (let i = 0; i < props.matches.length; i++) { + matches.push(); } - - return ( + return(
    •  
    • - {matchPairs} + {matches}
    - ); - // } + ) } -function Match(props) { - // A single match object, as used by MatchPair and TournamentTier + + +function Match(props){ 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) */} -
  • - {team1Name} +
  • + {team1Name}
  •  
  • {/* Team 2 (Winner-status?) (Team name) */} -
  • - {team2Name} +
  • + {team2Name}
  •  
  • ); + + } -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,23 +140,17 @@ function BracketViewer(props) { }) .catch(err => showError(err)); }, []); - return ( - (matches && teams) ? - //
    -
    - {matches.map(tier => { - let tierNum = tier[0].tier; - return - })} -
    - : - ); -} - -function showError(error) { - alert("Something went wrong. \n" + error); - console.error(error); + (matches && teams) ? + //
    +
    + {matches.map(tier => { + let tierNum = tier[0].tier; + return + })} +
    + : +); } export default function TournamentOverview(props) { diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css index f6ef4a0..30a9c4e 100644 --- a/src/client/src/components/tournamentBracket.css +++ b/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;