Stable build, collaboration 29/03/2022

Co-authored-by: krloer <krloer@users.noreply.github.com>
Co-authored-by: SgtPodding <SgtPodding@users.noreply.github.com>
Co-authored-by: Felix Albrigtsen <felixalbrigtsen@gmail.com>

src/client/.env

@@ -1,2 +1,2 @@
-REACT_APP_API_URL=https://api.asura.feal.no
+REACT_APP_API_URL=https://asura.feal.no/api
 BROWSER=none

src/client/src/FrontPage.js

@@ -6,17 +6,16 @@ import TournamentManager from "./TournamentManager.js";
 import TournamentAnnouncement from "./TournamentAnnouncement";
 import TournamentMatches from "./TournamentMatches";
 import TournamentTeams from "./TournamentTeams";
-import Appbar from './components/appbar';
+import AppBar from './components/appbar';
-import { Button, Container, Typography, Box } from "@mui/material";
+import { Button, Container, Typography, Box, Stack, Card, CardContent, CardMedia, Paper, Grid } from "@mui/material";
-import { Card, CardContent, CardMedia, Paper } from "@mui/material";
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 
 function CreateButton(props) {
   return (
     <Link to="/create">
-      <Button variant="contained" color="success" style={{ margin: '2.5% 0 0 0'}}>
+      <Button variant="contained" color="success">
         <Box sx={{
-          marginRight: '2%',
+          paddingRight: '2%',
         }}>
           Create Tournament
         </Box>
@@ -28,8 +27,7 @@ function CreateButton(props) {
 
 function TournamentListItem(props) {
   return (
-    <Container maxWidth="lg" align="start" sx={{margin:'2.5% 0'}}>
+        <Paper elevation={8} >
-        <Paper elevation={8}>
           <Card>
             <CardMedia 
               component="img"
@@ -38,36 +36,32 @@ function TournamentListItem(props) {
               // image="Asura_Rex.png"
               image="banner2.png"
             />
-            <CardContent>
+            <CardContent align="left">
               <Typography variant="h3" component="div" align="center">{props.tournament.name} </Typography>
               <Typography variant="h5" color="text.primary">{props.tournament.description}</Typography>
               <Typography variant="body2" color="text.secondary"> Start: {props.tournament.startTime.toLocaleString()} </Typography>
               <Typography variant="body2" color="text.secondary"> End: {props.tournament.endTime.toLocaleString()} </Typography>
               <Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
 
-              <Box sx={{
+              <Box sx={{flexGrow: 1}}>
-                margin: 'auto',
+              <Grid container spacing={4} justifyContent="center" wrap="wrap">
-                display: 'flex',
+                  <Grid item sx={4}>
-                flexDirection: 'row',
-                justifyContent: 'center',
-                }} component="span">
-                  <Box sx={{margin: '0 2% 0 2%'}}>
                     <Link to={`/tournament/${props.tournament.id}/manage`}>
                       <Button className="ManageButton" variant="contained" color="primary">Manage Tournament</Button>
                     </Link>
-                  </Box>
+                  </Grid>
-                  <Box sx={{margin: '0 2% 0 2%'}}>
+                  <Grid item sx={4}>
                   <Link to={`/tournament/${props.tournament.id}`} >
                     <Button variant="contained" color="success">
                       View Tournament
                     </Button>
                   </Link>
-                  </Box>
+                  </Grid>
+              </Grid>
               </Box>
             </CardContent>
           </Card>     
         </Paper>
-    </Container>
   );
 }
 
@@ -95,49 +89,31 @@ function TournamentList() {
   }, []);
 
   return <>
+  <Stack spacing={3} sx={{margin: "10px auto"}}>
     {tournamentList && tournamentList.map((tournamentObject) => <TournamentListItem key={tournamentObject.id.toString()} tournament={tournamentObject} />)}
+  </Stack>
     
   </>;
 }
-
-//<ListElement name={data[i].name} competitors={data[i].teamLimit} date={data[i].startTime}/>
-
 function Home() {
   return (
-    <React.StrictMode>
+    <>
-      <Appbar pageTitle="Tournaments" />
+      <AppBar pageTitle="Asura Tournaments" />
-      <main>
+        <Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
-        <Container align="center">
+          <Box component={Stack} direction="row" align="center" justifyContent="space-between" alignItems="center" sx={{flexGrow: 1}}>
+            {/* <CreateButton /> */}
+            <Typography variant="h3">Tournaments</Typography>
             <CreateButton />
-            <Typography variant="h2" style={{margin:'2% 0'}}>
+          </Box>
-              Tournaments
-            </Typography>
           <TournamentList />
-          {/* <ListElement
-            name="Weekend Warmup"
-            competitors="16"
-            date="29.04.2022"
-          />
-          <ListElement
-            name="Saturday Showdown"
-            competitors="8"
-            date="30.04.2022"
-          />
-          <ListElement
-            name="Sunday Funday"
-            competitors="64"
-            date="01.05.2022"
-          /> */}
-          
         </Container>
-      </main>
+    </>
-      <footer className="footer"></footer>
-    </React.StrictMode>
   );
 }
 
 export default function App() {
   return (
+    <React.StrictMode>
       <Router>
       <Routes>
         <Route path="/" element={<Home />} />
@@ -152,5 +128,6 @@ export default function App() {
         />
       </Routes>
     </Router>
+    </React.StrictMode>
   );
 }

src/client/src/TournamentCreator.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
-import Appbar from "./components/appbar";
+import AppBar from "./components/appbar";
 
 import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material'
 import FileUploadIcon from '@mui/icons-material/FileUpload';
@@ -160,7 +160,7 @@ function TournamentForm(props) {
 export default function TournamentCreator(props) {
   return (
     <>
-      <Appbar pageTitle="New tournament" /> 
+      <AppBar pageTitle="New tournament" /> 
       <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 20px"}} component={Container} direction="column" align="center">
       <TournamentForm />
       </Paper>

src/client/src/TournamentManager.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 // import { AlertContainer, alert } from "react-custom-alert";
-import Appbar from "./components/appbar";
+import AppBar from "./components/appbar";
+import TournamentBar from "./components/tournamentbar";
 import { useParams } from "react-router-dom";
 import { Button, TextField, Grid, Box, Container, Paper, Stack} from "@mui/material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
@@ -171,7 +172,8 @@ export default function TournamentManager(props) {
   const { tournamentId } = useParams();
   return (
     <>
-    <Appbar pageTitle="Edit Tournament" />
+    <AppBar pageTitle="Edit Tournament" />
+    <TournamentBar pageTitle="Edit Tournament"/>
     <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center">
       <ManageTournament tournamentId={tournamentId} />
       {/* <AnnounceButton /> */}

src/client/src/TournamentOverview.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 import Appbar from './components/appbar';
+import TournamentBar from "./components/tournamentbar";
 import { useParams } from 'react-router-dom'
 import { Button, Paper, Stack } from "@mui/material";
 import "./components/tournamentBracket.css";
@@ -164,6 +165,7 @@ function BracketViewer(props) {
 
   return (
       (matches && teams) ?
+        // <div sx={{width: "100vw", height: "80vh", overflow: "scroll"}} className="bracket">
         <div className="bracket">
           {matches.map(tier => {
             let tierNum = tier[0].tier;
@@ -185,16 +187,7 @@ export default function TournamentOverview(props) {
   return (
     <>
       <Appbar pageTitle="Tournament matches" />
-      <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
+      <TournamentBar pageTitle="Tournament Matches" />
-        <Link to={`/tournament/${tournamentId}/manage`} >
-          <Button className="ManageButton" variant="contained" color="rackley" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
-        </Link>
-        <Link to={`/tournament/${tournamentId}/teams`} >
-          <Button className="OverviewButton" variant="contained" color="secondary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
-        </Link>
-      </Paper>
-     
-      
       <BracketViewer tournamentId={tournamentId} className="bracketViewer" />
     </>
   );

src/client/src/TournamentTeams.js

@@ -1,15 +1,30 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
 import Appbar from "./components/appbar";
+import TournamentBar from "./components/tournamentbar";
 import { Button, TextField, Stack, MenuItem, Box, InputLabel, Select, Container, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Paper, Typography} from "@mui/material";
 import AddCircleIcon from '@mui/icons-material/AddCircle';
-
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
 
 function showError(error) {
   alert("Something went wrong. \n" + error);
   console.error(error);
 }
 
+function ReturnButton() {
+  const { tournamentId } = useParams();
+  return(
+  <Link to={`/tournament/${tournamentId}`}>
+    <Button type="button" variant="contained" color="primary" >
+      <Box>
+        Return to Tournament
+      </Box>
+    </Button>
+  </Link>
+  )
+}
+
 function TeamCreator(props) {
   function postCreate() {
     let teamName = document.getElementById("teamNameInput").value;
@@ -77,8 +92,8 @@ function TeamList(props) {
               </b></TableCell>
               {/* <TableCell align="right">{team.members}</TableCell> */}
               <TableCell align="center">
-                <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setSelectedTeamId(team.id)}>Edit</Button>
+                <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setSelectedTeamId(team.id)} endIcon={<EditIcon />}>Edit</Button>
-                <Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {props.onDelete(team.id); }}>Delete</Button>
+                <Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {props.onDelete(team.id); }} endIcon={<DeleteIcon />}>Delete</Button>
               </TableCell>
             </TableRow>
 
@@ -196,6 +211,8 @@ export default function TournamentTeams(props) {
   return (
     <>
     <Appbar pageTitle="Edit teams" />
+    <TournamentBar pageTitle="Edit Teams" />
+    <ReturnButton />
     <div className="tournamentTeams">
       <TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} />
       <TeamList teams={teams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />

src/client/src/components/appbar.js

@@ -1,39 +1,40 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
-import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton } from "@mui/material"
+import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid } from "@mui/material"
-import Menu from '@mui/icons-material/Menu'
+import MenuIcon from '@mui/icons-material/Menu';
 import HomeImage from "./homeimage";
 
 export default function Appbar(props) {
     return (
     <>
     <CssBaseline />
-    <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static" color="primary">
         <Toolbar>
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2} justifyContent="space-between" alignItems="center" align="center">
+              <Grid item xs={2}>
                 <HomeImage sx={{width: "10%"}} />
-          <Typography variant="h6" component="div" sx={{ marginLeft: '2vw', width: "20%;" }}>
+                {/* <Typography variant="h6" component="div">
-              <Link to="/" style={{ textDecoration:'none', color:'white'}}>
+                  <Link to="/" style={{ color:'white'}}>
                     Asura Tournaments
                   </Link>
-          </Typography>
+                </Typography> */}
-          {/* <Button sx={{width: "5%", color: "white"}} onClick={History.goBack}>Back</Button> */}
+              </Grid>
-
+              <Grid item xs={8}>
-          <Typography component="div" sx={{margin: "auto auto"}}><h2>{props.pageTitle || ""}</h2></Typography>
+                <Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
-
+              </Grid>
-          <IconButton
+              <Grid item xs={2}>
-            size="large"
+                <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ width: "5%", padding: "5% 10%" }}>
-            edge="start"
+                  <MenuIcon />
-            color="inherit"
-            aria-label="menu"
-            sx={{ marginRight: 2, width: "5%", marginLeft: "30%" }}
-          >
-            <Menu />
                 </IconButton>
+              </Grid>
+                
+              {/* <Button sx={{width: "5%", color: "white"}} onClick={History.goBack}>Back</Button> */}
               {/* <Button color="inherit">Login</Button> */}
+            </Grid>
+          </Box>
         </Toolbar>
       </AppBar>
-    </Box>
     </>
     );
 }

src/client/src/components/nosuchpage.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+import Home from '../FrontPage';
+
+export default function NoSuchPage() {
+    
+}
+
+

src/client/src/components/tournamentbar.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { useParams } from "react-router-dom";
+import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
+import { Stack, Paper, Typography, Box, Button, Grid } from "@mui/material"
+
+export default function TournamentBar(props) {
+    const { tournamentId } = useParams()
+    if (props.pageTitle == "Edit Tournament") {
+        return(
+            <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
+                <Link to={`/tournament/${tournamentId}/manage`} >
+                <Button className="ManageButton" variant="contained" color="primary" disabled={true} sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
+                </Link>
+                <Link to={`/tournament/${tournamentId}/teams`} >
+                    <Button className="OverviewButton" variant="contained" color="secondary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
+                </Link>
+                <Link to={`/tournament/${tournamentId}`} >
+                    <Button className="OverviewButton" variant="contained" color="success" sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
+                </Link>
+            </Paper>
+            )
+        } else if (props.pageTitle == "Tournament Matches") {
+            return(
+                <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
+                    <Link to={`/tournament/${tournamentId}/manage`} >
+                    <Button className="ManageButton" variant="contained" color="primary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
+                    </Link>
+                    <Link to={`/tournament/${tournamentId}/teams`} >
+                        <Button className="OverviewButton" variant="contained" color="secondary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
+                    </Link>
+                    <Link to={`/tournament/${tournamentId}`} >
+                        <Button className="OverviewButton" variant="contained" color="success"  disabled={true} sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
+                    </Link>
+                </Paper>
+                ) 
+        } else if (props.pageTitle == "Edit Teams") {
+            return(
+                <Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
+                    <Link to={`/tournament/${tournamentId}/manage`} >
+                    <Button className="ManageButton" variant="contained" color="primary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
+                    </Link>
+                    <Link to={`/tournament/${tournamentId}/teams`} >
+                        <Button className="OverviewButton" variant="contained" color="secondary" disabled={true} sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
+                    </Link>
+                    <Link to={`/tournament/${tournamentId}`} >
+                        <Button className="OverviewButton" variant="contained" color="success" sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
+                    </Link>
+                </Paper>
+            ) 
+        }
+}