Merge branch 'client-kristofferTournament' into 'client'

Merging brackets into client

See merge request felixalb/dcst1008-2022-group1!1

src/client/src/TournamentOverview.js

@@ -3,72 +3,53 @@ 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, IconButton, Paper, Stack, CircularProgress, Box, Grid, Typography, Container } from "@mui/material";
 import "./components/tournamentBracket.css";
+import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
+import DoDisturbIcon from '@mui/icons-material/DoDisturb';
+import BackspaceIcon from '@mui/icons-material/Backspace';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 
-function MatchPair(props) {
+function showError(error) {
-  let match1 = <Match teams={props.teams} match={props.matches[0]} key={0} />;
+  alert("Something went wrong. \n" + error);
-  let match2 = <Match teams={props.teams} match={props.matches[1]} key={1} />;
+  console.error(error);
-
-  return <div className="winners">
-    <div className="matchups">
-      {match1}
-      {match2}
-    </div>
-    <div className="connector">
-      <div className="merger"></div>
-      <div className="line"></div>
-    </div>
-  </div>
 }
 
-function TournamentTier(props) {
+function TournamentTier(props){
-  // One round/tier of the tournament, as used by BracketViewer
   let roundTypes = ["finals", "semifinals", "quarterfinals", "eighthfinals", "sixteenthfinals", "thirtysecondfinals"];
-  
+    let matches = [];
-  if (props.tier === 0) {
+    for (let i = 0; i < props.matches.length; i++) {
-    // The final, just a single match without the bracket lines
+      matches.push(<Match teams={props.teams} match={props.matches[i]} key={i} />);
-    return (
-      <section className="round finals"><div className="winners">
-        <div className="matchups">
-          <Match teams={props.teams} match={props.matches[0]} key={0} />
-        </div>
-      </div>
-    </section>
-    );
-  } else {
-    // The rest of the rounds/tiers, divide into pairs of two matches
-    let matchPairCount = props.matches.length / 2;
-    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(
-    return (
+      <ul className={`round ${roundTypes[props.tier]}`}>
-      <section className={`round ${roundTypes[props.tier]}`}>
+        <li className="spacer">&nbsp;</li>
-        {matchPairs}
+        {matches}
-      </section>
+      </ul>
-    );
+    )
-  }
 }
 
-function Match(props) {
+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;
     }
+    // if(props.match.winnerId === teamId){
+    //   showError("Team already won");
+    //   return;
+    // }
     let formData = new FormData();
     formData.append("winnerId",teamId);
     let body = new URLSearchParams(formData);
@@ -89,27 +70,52 @@ 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" : ""}`}>
+        <li className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner"  : "loser"}`}>
-          <span>{team1Name}</span>
+          <Stack direction={"row"}>
-        </div>
+              <Typography className={`teamName`} align={'center'} sx={{fontSize:'1.5rem'}}>
+                {team1Name}
+              </Typography>
+              { props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
+              <IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton>
+              }
+              { props.match.team1Id !== null &&
+              <IconButton onClick={setWinner(props.match.team1Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
+              }
+              {/* { props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
+              <EmojiEventsIcon alt="A trohpy" color="gold" />
+              } */}
+          </Stack>
+        </li>
+        <li className="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" : ""}`}>
+        <li className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : "loser"}`}>
-          <span>{team2Name}</span>
+        <Stack direction={"row"} sx={{alignItems:'center'}}>
-        </div>
+              <Typography className={`teamName`} sx={{fontSize:'1.5rem'}}>
-      </div>
+                {team2Name}
-    </div>
+              </Typography>
+              { props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
+              <IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton>
+              }
+              { props.match.team2Id !== null &&
+              <IconButton onClick={setWinner(props.match.team2Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
+              }
+              {/* { props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
+              <EmojiEventsIcon alt="A trohpy" color="gold" />
+              } */}
+            </Stack>
+        </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())
@@ -162,7 +168,6 @@ function BracketViewer(props) {
       })
       .catch(err => showError(err));
   }, []);
-
   return (
       (matches && teams) ?
         // <div sx={{width: "100vw", height: "80vh", overflow: "scroll"}} className="bracket">

src/client/src/components/tournamentBracket.css

@@ -1,142 +1,69 @@
-/* https://codepen.io/semibran/pen/VjmPJd */
+/*
-html {
+ *  Flex Layout Specifics
-	font-size: 1rem;
+*/
-}
+.bracket{
+	display:flex;
+	flex-direction:row;
+	justify-content: center;
+  }
+  .round{
+	display:flex;
+	flex-direction:column;
+	justify-content:center;
+	width:200px;
+	list-style:none;
+	padding:0;
+	font-size: 2rem;
+  }
+	.round .spacer{ flex-grow:1;}
+	.round .spacer:first-child,
+	.round .spacer:last-child{ flex-grow:.5; }
+	.round .game-spacer{
+	  flex-grow:1;
+	}
   
-.bracket {
+  /*
-	display: inline-block;
+   *  General Styles
-	position: absolute;
+  */
-	left: 50%;
+/* body{
-	top: 50%;
+	font-family:sans-serif;
-	transform: translate(-50%, -50%);
+	font-size:medium;
-	white-space: nowrap;
+	padding:10px;
-}
+	line-height:1.4em;
+  } */
 
-.bracket .round {
+  .teamName{
-	display: inline-block;
+	  max-width: 7.5vw;
-	vertical-align: middle;
+	  overflow: hidden;
-}
+	  word-wrap: none;
+  }
   
-.bracket .round .winners>div {
+  li.game{
-	display: inline-block;
+	padding-left:20px;
-	vertical-align: middle;
+  }
-}
+  .winnerTrophy{
+	visibility: hidden;
+  }
 	
-.bracket .round .winners>div.matchups .matchup:last-child {
+	.teamName.winner{
-	margin-bottom: 0 !important;
+	  font-weight:bold;
-}
+	}
+	li.game.winner > div.winnerTrophy{
+		visibility: visible;
+	  }
+	/* li.game .winnerTrophy{
+	  float:right;
+	  margin-right:5px;
+	} */
   
-.bracket .round .winners>div.matchups .matchup .participants {
+	li.game-top{ border-bottom:1px solid #aaa; }
-	border-radius: 0.25rem;
-	overflow: hidden;
-	border: 1px solid gray;
-}
   
-.bracket .round .winners>div.matchups .matchup .participants .participant {
+	li.game-spacer{ 
-	box-sizing: border-box;
+	  border-right:1px solid #aaa;
-	color:  #404040;
+	  min-height:10vh;
-	border-left: 0.25rem solid #858585;
+	}
-	background: white;
-	width: 14rem;
-	height: 3rem;
-	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
-}
   
-.bracket .round .winners>div.matchups .matchup .participants .participant.winner {
+	li.game-bottom{ 
-	color: green;
+	  border-top:1px solid #aaa;
-	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;
-}
-
-.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: 4rem;
-}
-
-.bracket .round .winners>div.connector .merger {
-	position: relative;
-	height: 8rem;
-}
-
-.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;
-}
-
-.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;
-}