From 1e9b30ba8e89f3d770414fa3edbdda9d76d931e2 Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Mon, 25 Apr 2022 21:52:35 +0200 Subject: [PATCH] MUI Scaling & Responsive Design Finished --- src/client/src/AdminsOverview.js | 20 +++--- src/client/src/FrontPage.js | 70 +++++++++---------- src/client/src/ProfilePage.js | 2 - src/client/src/TournamentCreator.js | 5 +- src/client/src/TournamentHistory.js | 6 +- src/client/src/TournamentManager.js | 6 +- src/client/src/TournamentOverview.js | 50 ++++++------- src/client/src/TournamentTeams.js | 6 +- src/client/src/components/AsuraBar.js | 8 +-- src/client/src/components/TournamentBar.js | 10 +-- .../src/components/tournamentBracket.css | 6 +- src/client/src/index.css | 2 - 12 files changed, 94 insertions(+), 97 deletions(-) diff --git a/src/client/src/AdminsOverview.js b/src/client/src/AdminsOverview.js index 5af86a4..c9a7962 100644 --- a/src/client/src/AdminsOverview.js +++ b/src/client/src/AdminsOverview.js @@ -39,17 +39,17 @@ function AdminCreator(props){ } return ( - +
- - {/* */} - + + {/* */} +
@@ -118,7 +118,7 @@ function UserList(props){ {/* TODO Drop down menu for selecting rank */} - Manager Admin diff --git a/src/client/src/FrontPage.js b/src/client/src/FrontPage.js index 36a9a8b..ea05bab 100644 --- a/src/client/src/FrontPage.js +++ b/src/client/src/FrontPage.js @@ -85,7 +85,7 @@ function TournamentListItem(props) { ) } else { return( - Starts in: + Starts in:
{ remainingDays > 0 ? {remainingDays} days : null } { remainingHours > 0 ? {remainingHours} hours : null } { remainingMins > 0 ? {remainingMins} mins : null } @@ -105,26 +105,26 @@ function TournamentListItem(props) { image="banner2.png" /> - {props.tournament.name} + {props.tournament.name} Start: {props.tournament.startTime.toLocaleString()} End: {props.tournament.endTime.toLocaleString()} - Players: {props.tournament.teamCount} / {props.tournament.teamLimit} + Particpants: {props.tournament.teamCount} / {props.tournament.teamLimit} Prize: {props.tournament.prize} - - { props.user.isLoggedIn ? + + { props.user.isLoggedIn && - : null + } @@ -182,7 +182,7 @@ function Home(props) { <> - + Tournaments { props.user.isLoggedIn ? : null @@ -205,36 +205,36 @@ let showError = (message) => {}; export default function App() { const [user, setUser] = React.useState({}); - let fetchUser = () => { - fetch(process.env.REACT_APP_API_URL + `/users/getSavedUser`) - .then(res => res.json()) - .then(data => { - if (data.status !== "OK") { - setUser({ isManager: false, isLoggedIn: false }); - console.log(data.data); // "No user logged in" - return; - } - let u = data.data; - u.isLoggedIn = true; - console.log("User is logged in") - setUser(u); - }) - .catch((err) => { - showError(err.message); - setUser({ isManager: false, isLoggedIn: false }); - }); - } - // // Debug mode, allow all: // let fetchUser = () => { - // setUser({ - // name: "TEST USERTEST", - // isManager: true, - // isLoggedIn: true, - // email: "testesen@gmail.com", - // asuraId: "123456789", - // googleId: "234" - // }); + // fetch(process.env.REACT_APP_API_URL + `/users/getSavedUser`) + // .then(res => res.json()) + // .then(data => { + // if (data.status !== "OK") { + // setUser({ isManager: false, isLoggedIn: false }); + // console.log(data.data); // "No user logged in" + // return; + // } + // let u = data.data; + // u.isLoggedIn = true; + // console.log("User is logged in") + // setUser(u); + // }) + // .catch((err) => { + // showError(err.message); + // setUser({ isManager: false, isLoggedIn: false }); + // }); // } + // Debug mode, allow all: + let fetchUser = () => { + setUser({ + name: "TEST USERTEST", + isManager: true, + isLoggedIn: true, + email: "testesen@gmail.com", + asuraId: "123456789", + googleId: "234" + }); + } React.useEffect(() => { fetchUser(); diff --git a/src/client/src/ProfilePage.js b/src/client/src/ProfilePage.js index 16f1ee2..39195bf 100644 --- a/src/client/src/ProfilePage.js +++ b/src/client/src/ProfilePage.js @@ -12,7 +12,6 @@ export default function ProfilePage(props) { return (<> -

Your profile

@@ -23,6 +22,5 @@ export default function ProfilePage(props) {
- ) } \ No newline at end of file diff --git a/src/client/src/TournamentCreator.js b/src/client/src/TournamentCreator.js index ca3fe6a..93e3c02 100644 --- a/src/client/src/TournamentCreator.js +++ b/src/client/src/TournamentCreator.js @@ -113,7 +113,7 @@ function TournamentForm(props) { - + - - + End: {props.tournament.endTime.toLocaleString()} - Players: {props.tournament.teamCount} / {props.tournament.teamLimit} + Participants: {props.tournament.teamCount} / {props.tournament.teamLimit} Prize: {props.tournament.prize} @@ -150,8 +150,8 @@ export default function TournamentHistory(props) { <> - - Past Tournaments + + Past Tournaments diff --git a/src/client/src/TournamentManager.js b/src/client/src/TournamentManager.js index 02f9a8e..d0cddba 100644 --- a/src/client/src/TournamentManager.js +++ b/src/client/src/TournamentManager.js @@ -134,13 +134,13 @@ function ManageTournament(props) { return ( <>
- + - + - + - -
  •  
    • + +   {matches} @@ -85,41 +85,43 @@ function Match(props){ return ( <> {/* Team 1 (Winner-status?) (Team name) */} -
  • - - + + + {team1Name} { props.match.winnerId && (props.match.team1Id === props.match.winnerId) && - + } + { props.match.team1Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn && - + } { props.match.team1Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn && - + } + -
    • -
  •  
    • +     +   {/* Team 2 (Winner-status?) (Team name) */} -
  • - - + + + {team2Name} { props.match.winnerId && (props.match.team2Id === props.match.winnerId) && - + } { props.match.team2Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn && - + } { props.match.team2Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn && - + } -
    • -
  •  
    • +     +   ); } @@ -146,21 +148,21 @@ function WinnerDisplay(props) { if (!props.team) { // Winner is not yet chosen return
    - + Winner is not chosen.
    Will it be you?
    ; } return ( -
    - +
    + {props.user.isLoggedIn && !props.tournament.hasEnded && } - Winner: - - {props.team.name} + + {props.team.name} +
    ) } diff --git a/src/client/src/TournamentTeams.js b/src/client/src/TournamentTeams.js index fe914bb..9ce878f 100644 --- a/src/client/src/TournamentTeams.js +++ b/src/client/src/TournamentTeams.js @@ -39,12 +39,12 @@ function TeamCreator(props) { } return ( - +
    - + {/* */} - + {props.name + " copied to clipboard"} @@ -40,7 +40,7 @@ function ClipboardButton(props) { function ButtonLink(props) { return ( - + ); } @@ -48,9 +48,9 @@ function ButtonLink(props) { export default function TournamentBar(props) { const { tournamentId } = useParams(); return ( - - - + + + diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css index 193154f..ac8f64f 100644 --- a/src/client/src/components/tournamentBracket.css +++ b/src/client/src/components/tournamentBracket.css @@ -67,9 +67,9 @@ li.game-bottom{ margin: auto 5px; padding: 10px; } -.winnerDisplay.winner { - border: 2px solid green; +.winnerDisplay > p.winner { + color:green; } -.winnerDisplay > h2 { +.winnerDisplay > div.winner { margin-right: 10px; } \ No newline at end of file diff --git a/src/client/src/index.css b/src/client/src/index.css index 8a0b7ef..6565c77 100644 --- a/src/client/src/index.css +++ b/src/client/src/index.css @@ -24,8 +24,6 @@ code { } .mainIcon{ - height: 65px; - width: 65px; border-radius: 50%; /* border: 5px dotted salmon; */ border: 3px solid #1ab35a;