From cdaef9426c4a1c1522ca41417b679d7f3035b36a Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Wed, 13 Apr 2022 12:51:45 +0200 Subject: [PATCH 01/10] Starting reformatting for brackets --- src/client/src/TournamentOverview.js | 14 +- .../src/components/tournamentBracket.css | 167 ++++++++++-------- 2 files changed, 97 insertions(+), 84 deletions(-) diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index f89c410..78103d8 100644 --- a/src/client/src/TournamentOverview.js +++ b/src/client/src/TournamentOverview.js @@ -5,6 +5,8 @@ import TournamentBar from "./components/TournamentBar"; import { useParams } from 'react-router-dom' import { Button, Paper, Stack, CircularProgress, Box } from "@mui/material"; import "./components/tournamentBracket.css"; +import EmojiEventsIcon from '@mui/icons-material/EmojiEvents'; +import DoDisturbIcon from '@mui/icons-material/DoDisturb'; function MatchPair(props) { let match1 = ; @@ -29,12 +31,12 @@ function TournamentTier(props) { 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 @@ -45,9 +47,9 @@ function TournamentTier(props) { } return ( -
+
{matchPairs} -
+ ); } } @@ -92,11 +94,11 @@ function Match(props) {
{/* Team 1 (Winner-status?) (Team name) */} -
+
}> {team1Name}
{/* Team 2 (Winner-status?) (Team name) */} -
+
}> {team2Name}
diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css index 1bc3144..82c21f4 100644 --- a/src/client/src/components/tournamentBracket.css +++ b/src/client/src/components/tournamentBracket.css @@ -1,70 +1,113 @@ -/* https://codepen.io/semibran/pen/VjmPJd */ -html { - font-size: 1rem; +html,body{ + height:100%; } -.bracket { - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - white-space: nowrap; +.bracket{ + display: flex; + position: relative; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 100%; + padding:2%; } -.bracket .round { - display: inline-block; - vertical-align: middle; +.winners{ + margin: 2rem; } -.bracket .round .winners>div { - display: inline-block; - vertical-align: middle; -} - -.bracket .round .winners>div.matchups .matchup:last-child { - margin-bottom: 0 !important; -} - -.bracket .round .winners>div.matchups .matchup .participants { +.participants{ border-radius: 0.25rem; overflow: hidden; border: 1px solid gray; } - -.bracket .round .winners>div.matchups .matchup .participants .participant { +.participants .participant { box-sizing: border-box; color: #404040; - 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 { - color: green; - 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 { +.participants .participant span { margin: 0 1.25rem; 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; +} -.bracket .round .winners>div.connector.filled .line, +.participants .participant:hover{ + cursor: pointer; + background-color: #1ab35a; +} + +.matchups{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +.matchup{ + margin: 1rem 0; +} + +.winners{ + display: flex; + justify-content: space-between; + flex-direction: row; + margin: 2rem 0; +} + +.round{ + height: 100%; +} + +.round.thirtysecondfinals{ + margin: 0 2rem; + height: 100%; +} +.round.sixteenthfinals{ + margin: 0 2rem; + height: 100%; +} +.round.eighthfinals{ + margin: 0 2rem; + height: 100%; +} +.round.quarterfinals{ + margin: 0 2rem; + height: 100%; +} +.round.semifinals{ + margin: 0 2rem; + height: 100%; +} +.round.finals{ + margin: 0 2rem; +} + +.connector{ + display:none; + height: 100%; +} + +/* .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; @@ -80,12 +123,12 @@ html { .bracket .round .winners>div.connector .line { border-bottom: thin solid #c0c0c8; - height: 4rem; + height: 25%; } .bracket .round .winners>div.connector .merger { position: relative; - height: 8rem; + height: 50%; } .bracket .round .winners>div.connector .merger:before, @@ -107,36 +150,4 @@ html { .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; -} \ No newline at end of file +} */ \ No newline at end of file From ac71748bb3544f238da32d2b178dc2dbca8b96d8 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Sat, 16 Apr 2022 08:50:46 +0200 Subject: [PATCH 02/10] Minor updates to rendering --- src/client/src/TournamentCreator.js | 5 ++- src/client/src/TournamentOverview.js | 4 +-- .../src/components/tournamentBracket.css | 32 +++++++++---------- 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/client/src/TournamentCreator.js b/src/client/src/TournamentCreator.js index ae32d9a..b2b1cd2 100644 --- a/src/client/src/TournamentCreator.js +++ b/src/client/src/TournamentCreator.js @@ -100,8 +100,7 @@ function TournamentForm(props) { { value: 3, label: "8",}, { value: 4, label: "16",}, { value: 5, label: "32",}, - { value: 6, label: "64",}, - { value: 7, label: "128",} + { value: 6, label: "64",} ]; return ( @@ -147,7 +146,7 @@ function TournamentForm(props) { - + diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index 78103d8..0a1732e 100644 --- a/src/client/src/TournamentOverview.js +++ b/src/client/src/TournamentOverview.js @@ -94,11 +94,11 @@ function Match(props) {
{/* Team 1 (Winner-status?) (Team name) */} -
}> +
{team1Name}
{/* Team 2 (Winner-status?) (Team name) */} -
}> +
{team2Name}
diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css index 82c21f4..0672428 100644 --- a/src/client/src/components/tournamentBracket.css +++ b/src/client/src/components/tournamentBracket.css @@ -6,19 +6,19 @@ html,body{ display: flex; position: relative; flex-direction: row; - justify-content: space-between; + justify-content: center; align-items: center; - width: 100%; + width: 90vw; height: 100%; padding:2%; } .winners{ - margin: 2rem; + margin: 2vw; } .participants{ - border-radius: 0.25rem; + border-radius: 0.25vw; overflow: hidden; border: 1px solid gray; } @@ -26,12 +26,12 @@ html,body{ box-sizing: border-box; color: #404040; background: white; - width: 14rem; - height: 3rem; + width: 10vw; + height: 3vw; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12); } .participants .participant span { - margin: 0 1.25rem; + margin: 0 1.25vw; line-height: 3; font-size: 1rem; font-family: "Roboto Slab"; @@ -64,14 +64,14 @@ html,body{ } .matchup{ - margin: 1rem 0; + margin: 1vw 0; } .winners{ display: flex; - justify-content: space-between; + justify-content: center; flex-direction: row; - margin: 2rem 0; + margin: 2vh 0; } .round{ @@ -79,27 +79,27 @@ html,body{ } .round.thirtysecondfinals{ - margin: 0 2rem; + margin: 0vh 2vw; height: 100%; } .round.sixteenthfinals{ - margin: 0 2rem; + margin: 0vh 2vw; height: 100%; } .round.eighthfinals{ - margin: 0 2rem; + margin: 0vh 2vw; height: 100%; } .round.quarterfinals{ - margin: 0 2rem; + margin: 0vh 2vw; height: 100%; } .round.semifinals{ - margin: 0 2rem; + margin: 0vh 2vw; height: 100%; } .round.finals{ - margin: 0 2rem; + margin: 0vh 2vw; } .connector{ From 7f8ac6d3456642e744cddd4e1ff66ae5b35ef397 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Wed, 20 Apr 2022 10:54:56 +0200 Subject: [PATCH 03/10] Almost brackets working --- src/client/src/TournamentManager.js | 8 +- src/client/src/TournamentOverview.js | 55 +++-- .../src/components/tournamentBracket.css | 207 +++++------------- 3 files changed, 85 insertions(+), 185 deletions(-) diff --git a/src/client/src/TournamentManager.js b/src/client/src/TournamentManager.js index 1196c06..7abece4 100644 --- a/src/client/src/TournamentManager.js +++ b/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]); diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index 0a1732e..3a342ef 100644 --- a/src/client/src/TournamentOverview.js +++ b/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 = ; let match2 = ; - return
-
- {match1} - {match2} -
-
-
-
-
-
+ return ( + <> +
  • {match1}
    • +
  •  
    • +
  • {match2}
    • +
  •  
    • + + ) } 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 ( -
    -
    - -
    -
    -
    +
      +
    •  
      • + +
    ); } else { // The rest of the rounds/tiers, divide into pairs of two matches @@ -47,9 +43,10 @@ function TournamentTier(props) { } return ( -
    +
      +
    •  
      • {matchPairs} -
    + ); } } @@ -91,18 +88,18 @@ function Match(props) { } return ( -
    -
    + <> {/* Team 1 (Winner-status?) (Team name) */} -
    - {team1Name} -
    +
  • + {team1Name} +
    • +
  •  
    • {/* Team 2 (Winner-status?) (Team name) */} -
    - {team2Name} -
    -
    -
    +
  • + {team2Name} +
    • +
  •  
    • + ); } diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css index 0672428..e80d83b 100644 --- a/src/client/src/components/tournamentBracket.css +++ b/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{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; -} - -.matchup{ - margin: 1vw 0; -} - -.winners{ - display: flex; - justify-content: center; - flex-direction: row; - margin: 2vh 0; -} - -.round{ - height: 100%; -} - -.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; -} - -.connector{ - display:none; - height: 100%; -} - -/* .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; -} */ \ No newline at end of file + display:flex; + flex-direction:row; + } + .round{ + display:flex; + flex-direction:column; + justify-content:center; + 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; + } + + /* + * General Styles + */ + body{ + font-family:sans-serif; + font-size:small; + padding:10px; + line-height:1.4em; + } + + li.game{ + padding-left:20px; + } + + li.game.winner{ + font-weight:bold; + } + li.game span{ + float:right; + margin-right:5px; + } + + li.game-top{ border-bottom:1px solid #aaa; } + + li.game-spacer{ + border-right:1px solid #aaa; + min-height:40px; + } + + li.game-bottom{ + border-top:1px solid #aaa; + } + \ No newline at end of file From 9e17129c6b938fe97ce550b132fcb42c0fca9fc1 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Wed, 20 Apr 2022 12:53:03 +0200 Subject: [PATCH 04/10] 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 = ; - let match2 = ; + let team1 = ; + let team2 = ; return ( <> -
  • {match1}
    • +
  • Test 1
  •  
    • -
  • {match2}
    • -
  •  
    • +
  • Test 2
    • +
  •  
    • ) } @@ -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 ( -
      -
    •  
      • - -
    - ); - } else { + // 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 / 2; + let matchPairCount = props.matches.length; let matchPairs = []; for (let i = 0; i < matchPairCount; i++) { matchPairs.push(); @@ -44,11 +44,11 @@ function TournamentTier(props) { return (
      -
    •  
      • +
    •  
      • {matchPairs}
    ); - } + // } } function Match(props) { @@ -93,12 +93,12 @@ function Match(props) {
  • {team1Name}
    • -
  •  
    • +
  •  
    • {/* Team 2 (Winner-status?) (Team name) */}
  • {team2Name}
    • -
  •  
    • +
  •  
    • ); } 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; From 340beb9aa4a6466df5962aff5f952d82da2c5c97 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Wed, 20 Apr 2022 18:59:55 +0200 Subject: [PATCH 05/10] fixed dates for this branch --- src/client/src/TournamentCreator.js | 24 ++++------- src/client/src/TournamentManager.js | 63 ++++++++--------------------- 2 files changed, 25 insertions(+), 62 deletions(-) diff --git a/src/client/src/TournamentCreator.js b/src/client/src/TournamentCreator.js index b2b1cd2..00a6a8b 100644 --- a/src/client/src/TournamentCreator.js +++ b/src/client/src/TournamentCreator.js @@ -17,11 +17,11 @@ function postTournament(showError, tournamentName, tournamentDescription, tourna showError("Tournament description cannot be empty"); return; } - if (!tournamentStartDate || tournamentStartDate === "") { + if (!tournamentStartDate || tournamentStartDate === "" || tournamentStartDate === 0) { showError("Tournament start date cannot be empty"); return; } - if (!tournamentEndDate || tournamentEndDate === "") { + if (!tournamentEndDate || tournamentEndDate === "" || tournamentEndDate === 0) { showError("Tournament end date cannot be empty"); return; } @@ -75,15 +75,14 @@ function TournamentForm(props) { setMaxTeamsExponent(event.target.value); } - const [startTime, setStartTime] = React.useState([new Date(), new Date()]); - const [endTime, setEndTime] = React.useState([new Date(), new Date()]); + const [startTime, setStartTime] = React.useState(new Date()); + const [endTime, setEndTime] = React.useState(new Date()); function submitTournament(event) { event.preventDefault(); - console.log(maxTeamsExponent) let maxTeams = Math.pow(2, maxTeamsExponent); - let tournamentStart = new Date(startTime).toUTCString(); - let tournamentEnd = new Date(endTime).toUTCString(); + let tournamentStart = new Date(startTime).valueOf() - new Date().getTimezoneOffset() * 60000; + let tournamentEnd = new Date(endTime).valueOf() - new Date().getTimezoneOffset() * 60000; postTournament( props.showError, document.getElementById("nameInput").value, @@ -92,7 +91,6 @@ function TournamentForm(props) { tournamentEnd, maxTeams ); - console.log(tournamentStart, tournamentEnd); } const marks = [ @@ -116,10 +114,7 @@ function TournamentForm(props) { { - setStartTime(newValue); - // console.log(new Date(newValue).toUTCString()); - }} + onChange={setStartTime} renderInput={(params) => } /> @@ -128,10 +123,7 @@ function TournamentForm(props) { { - setEndTime(newValue); - // console.log(new Date(newValue).toUTCString()); - }} + onChange={setEndTime} renderInput={(params) => } /> diff --git a/src/client/src/TournamentManager.js b/src/client/src/TournamentManager.js index 7abece4..87db5eb 100644 --- a/src/client/src/TournamentManager.js +++ b/src/client/src/TournamentManager.js @@ -5,7 +5,7 @@ import AppBar from "./components/AsuraBar"; import TournamentBar from "./components/TournamentBar"; import { useParams } from "react-router-dom"; import { Button, TextField, Grid, Box, Container, Paper, Stack } from "@mui/material"; -import { Snackbar, IconButton, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"; +import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"; import CloseIcon from '@mui/icons-material/Close'; import DeleteIcon from '@mui/icons-material/Delete'; import DateTimePicker from '@mui/lab/DateTimePicker'; @@ -49,14 +49,13 @@ let submitChanges = curryTournamentId => event => { return; } - tournamentStartDate = new Date(tournamentStartDate).toUTCString(); - tournamentEndDate = new Date(tournamentEndDate).toUTCString(); + tournamentStartDate = new Date(tournamentStartDate).valueOf() - new Date().getTimezoneOffset() * 60 * 1000; + tournamentEndDate = new Date(tournamentEndDate).valueOf() - new Date().getTimezoneOffset() * 60 * 1000; let formData = new FormData(); formData.append("name", tournamentName); formData.append("description", tournamentDescription); - // formData.append("image", tournamentImageFile); formData.append("startDate", tournamentStartDate); formData.append("endDate", tournamentEndDate); // formData.append("teamLimit", tournamentMaxTeams); @@ -104,8 +103,8 @@ let deleteTournament = tournamentId => event => { function ManageTournament(props) { - const [startTime, setStartTime] = React.useState([null,null]); - const [endTime, setEndTime] = React.useState([null,null]); + const [startTime, setStartTime] = React.useState(new Date()); + const [endTime, setEndTime] = React.useState(new Date()); React.useEffect(() => { fetch( @@ -119,11 +118,18 @@ 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)); + // Get the time from the server, add the local timezone offset and set the input fields + let startDate = new Date(data.data.startTime.slice(0, 16)); + let endDate = new Date(data.data.endTime.slice(0, 16)); + let localTimeOffset = new Date().getTimezoneOffset() * 60*1000; // Minutes -> Milliseconds + startDate = new Date(startDate.getTime() - localTimeOffset); + endDate = new Date(endDate.getTime() - localTimeOffset); + + setStartTime(startDate); + setEndTime(endDate); }) .catch((err) => showError(err)); - }, [endTime, props.tournamentId, startTime]); + }, [props.tournamentId]); return ( <> @@ -136,10 +142,7 @@ function ManageTournament(props) { { - setStartTime(newValue); - console.log(new Date(newValue).toUTCString()); - }} + onChange={setStartTime} renderInput={(params) => } /> @@ -147,19 +150,13 @@ function ManageTournament(props) { { - setEndTime(newValue); - console.log(new Date(newValue).toUTCString()); - }} + onChange={setEndTime} renderInput={(params) => } /> - {/* - */} - @@ -175,30 +172,6 @@ function showError(error) { console.error(error); } -function ClipboardButton(props) { - const [open, setOpen] = React.useState(false); - function copyString() { - navigator.clipboard.writeText(props.clipboardContent || ""); - setOpen(true); - } - const handleClose = (event, reason) => { - if (reason === 'clickaway') { return } - setOpen(false); - }; - const closeAction = <> - - - - - - return ( - <> - - - - ); -} - export default function TournamentManager(props) { const { tournamentId } = useParams(); @@ -221,8 +194,6 @@ export default function TournamentManager(props) { - - From 24dcdd9c0a9ab523f68d293c24eb07041b941f61 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Wed, 20 Apr 2022 19:00:08 +0200 Subject: [PATCH 06/10] Vizualisation done, now to fix bugs --- src/client/src/TournamentOverview.js | 93 +++++++------------ .../src/components/tournamentBracket.css | 6 ++ 2 files changed, 39 insertions(+), 60 deletions(-) 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; From 3c9c4f70c076ec4c2ec7a7bb4ba3114cacbe41f6 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Wed, 20 Apr 2022 19:41:36 +0200 Subject: [PATCH 07/10] minor changes --- src/client/src/TournamentOverview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index 186dce1..9717fc6 100644 --- a/src/client/src/TournamentOverview.js +++ b/src/client/src/TournamentOverview.js @@ -68,12 +68,12 @@ function Match(props){ return ( <> {/* Team 1 (Winner-status?) (Team name) */} -
  • +
  • {team1Name}
  •  
    • {/* Team 2 (Winner-status?) (Team name) */} -
  • +
  • {team2Name}
  •  
    • From e3a81b9236005e7ec57884d1a5f1ee9c59a75140 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Wed, 20 Apr 2022 22:43:40 +0200 Subject: [PATCH 08/10] More minor changes to brackets --- src/client/src/TournamentOverview.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index 9717fc6..a1b3286 100644 --- a/src/client/src/TournamentOverview.js +++ b/src/client/src/TournamentOverview.js @@ -27,8 +27,6 @@ function TournamentTier(props){ ) } - - function Match(props){ let team1Name = "TBA"; let team2Name = "TBA"; @@ -79,8 +77,6 @@ function Match(props){
  •  
    • ); - - } function BracketViewer(props){ From 4e7ccde40a2438be86226551462200f16394dc7e Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Thu, 21 Apr 2022 11:48:51 +0200 Subject: [PATCH 09/10] Brackets being funky --- src/client/src/TournamentOverview.js | 30 +++++++++++++++---- .../src/components/tournamentBracket.css | 27 ++++++++++++----- 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index a1b3286..83852ad 100644 --- a/src/client/src/TournamentOverview.js +++ b/src/client/src/TournamentOverview.js @@ -3,10 +3,12 @@ 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, Grid } 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 showError(error) { alert("Something went wrong. \n" + error); @@ -44,6 +46,10 @@ function Match(props){ 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); @@ -66,13 +72,27 @@ function Match(props){ return ( <> {/* Team 1 (Winner-status?) (Team name) */} -
  • - {team1Name} +
  • + + + {team1Name} + + {/* */} + + {/* */} +
  •  
    • {/* Team 2 (Winner-status?) (Team name) */} -
  • - {team2Name} +
  • + + + {team2Name} + + {/* */} + + {/* */} +
  •  
    • diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css index 30a9c4e..b80c01a 100644 --- a/src/client/src/components/tournamentBracket.css +++ b/src/client/src/components/tournamentBracket.css @@ -25,30 +25,43 @@ /* * General Styles */ - body{ + /* body{ font-family:sans-serif; font-size:small; padding:10px; line-height:1.4em; + } */ + + .teamName{ + max-width: 5vw; + overflow: hidden; + word-wrap: none; } li.game{ padding-left:20px; } - li.game > span{ + .winnerTrophy{ visibility: hidden; } - - li.game.winner{ + li.game > .removeWinner{ + display: none; + } + + li.game.winner > .removeWinner{ + display:inline-flex; + } + + .teamName.winner{ font-weight:bold; } - li.game.winner > span{ + li.game.winner > div.winnerTrophy{ visibility: visible; } - li.game span{ + /* li.game .winnerTrophy{ float:right; margin-right:5px; - } + } */ li.game-top{ border-bottom:1px solid #aaa; } From 51a41ab2b7993d60e7bbf24050fa1a8892dd5ecf Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Thu, 21 Apr 2022 14:47:13 +0200 Subject: [PATCH 10/10] Lines working, time to merge --- src/client/src/TournamentOverview.js | 32 +++++++++++++------ .../src/components/tournamentBracket.css | 19 ++++------- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index 83852ad..732b02a 100644 --- a/src/client/src/TournamentOverview.js +++ b/src/client/src/TournamentOverview.js @@ -74,25 +74,37 @@ function Match(props){ {/* Team 1 (Winner-status?) (Team name) */}
  • - + {team1Name} - {/* */} - - {/* */} + { props.match.winnerId && (props.match.team1Id === props.match.winnerId) && + + } + { props.match.team1Id !== null && + + } + {/* { props.match.winnerId && (props.match.team1Id === props.match.winnerId) && + + } */}
  •  
    • {/* Team 2 (Winner-status?) (Team name) */}
  • - - + + {team2Name} - {/* */} - - {/* */} - + { props.match.winnerId && (props.match.team2Id === props.match.winnerId) && + + } + { props.match.team2Id !== null && + + } + {/* { props.match.winnerId && (props.match.team2Id === props.match.winnerId) && + + } */} +
  •  
    • diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css index b80c01a..844f186 100644 --- a/src/client/src/components/tournamentBracket.css +++ b/src/client/src/components/tournamentBracket.css @@ -13,11 +13,11 @@ width:200px; list-style:none; padding:0; + font-size: 2rem; } - .round .spacer{ flex-grow:1; } + .round .spacer{ flex-grow:1;} .round .spacer:first-child, .round .spacer:last-child{ flex-grow:.5; } - .round .game-spacer{ flex-grow:1; } @@ -25,15 +25,15 @@ /* * General Styles */ - /* body{ +/* body{ font-family:sans-serif; - font-size:small; + font-size:medium; padding:10px; line-height:1.4em; } */ .teamName{ - max-width: 5vw; + max-width: 7.5vw; overflow: hidden; word-wrap: none; } @@ -44,13 +44,6 @@ .winnerTrophy{ visibility: hidden; } - li.game > .removeWinner{ - display: none; - } - - li.game.winner > .removeWinner{ - display:inline-flex; - } .teamName.winner{ font-weight:bold; @@ -67,7 +60,7 @@ li.game-spacer{ border-right:1px solid #aaa; - min-height:40px; + min-height:10vh; } li.game-bottom{