Added front page styling and structure

src/client/package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "frontend",
+  "name": "tournament-server",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5494,6 +5494,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9177,6 +9185,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.2"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

src/client/package.json

@@ -1,5 +1,4 @@
 {
-
   "name": "tournament-server",
   "version": "1.0.0",
   "description": "DCST1008 Project - Server - Asura Tournament Management System",
@@ -8,6 +7,7 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

src/client/src/components/list_component.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-
-export default function ListElement(props) {
-  return (
-    <div className="ListElement">
-      {props.name}, {props.competitors} competitors, Date: {props.date}
-    </div>
-  );
-}

src/client/src/components/manage_button.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+
+export default function Manage_Button(props) {
+  return (
+    <button className="Manage_Button">
+      <Link to="/tournament/manage">Manage Tournament</Link>
+    </button>
+  );
+}

src/client/src/components/overview_button.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+
+export default function Overview_Button(props) {
+  return (
+    <button className="Overview_Button">
+      <Link to="/tournament">View Tournament</Link>
+    </button>
+  );
+}

src/client/src/front_page.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+import Manage_Button from "./components/manage_button";
+import Tournament_Manager from "./manage_tournament.js";
+
+function Overview_Button(props) {
+  return (
+    <button className="Overview_Button">
+      <Link to="/tournament">View Tournament</Link>
+    </button>
+  );
+}
+
+function ListElement(props) {
+  return (
+    <div>
+      <div className="ListElement">
+        <div className="tournamentDetails">
+          {props.name}, {props.competitors} competitors, Date: {props.date}
+        </div>
+        <Manage_Button />
+        <Overview_Button />
+      </div>
+    </div>
+  );
+}
+
+function Home() {
+  return (
+    <React.StrictMode>
+      <div id="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" />
+      </div>
+    </React.StrictMode>
+  );
+}
+
+export default function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/tournament/manage" element={<Tournament_Manager />} />
+      </Routes>
+    </Router>
+  );
+}

src/client/src/index.css

@@ -1,3 +1,8 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -13,13 +18,37 @@ code {
     monospace;
 }
 
+#tournamentList {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto auto;
+  margin-top: 25vh;
+  width: 80vw;
+}
 .ListElement {
   background-color: #073b4c;
-  width: 800px;
+  width: 100%;
-  height: 45px;
+  height: 7vh;
-  position: relative;
+  display: grid;
-  top: 250px;
+  grid-template-columns: 4fr 1fr 1fr;
-  left: 100px;
+  margin-bottom: 5vh;
-  margin-bottom: 10px;
+}
+
+.Manage_Button {
+  background-color: #ef476f;
+  display: inline;
+  width: 100%;
+  height: 100%;
+  color: #eeeeee;
+  padding-left: 5vh;
+}
+
+.Overview_Button {
+  background-color: #118ab2;
+  display: inline;
+  width: 100%;
+  height: 100%;
   color: #eeeeee;
 }

src/client/src/index.js

@@ -1,13 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import ListElement from "./components/list_component";
+import App from "./front_page.js";
 
 ReactDOM.render(
   <React.StrictMode>
-    <ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" />
+    <App />
-    <ListElement name="Saturday Showdown" competitors="8" date="30.04.2022" />
-    <ListElement name="Sunday Funday" competitors="64" date="01.05.2022" />
   </React.StrictMode>,
   document.getElementById("root")
 );

src/client/src/manage_tournament.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+
+export default function Tournament_Manager() {
+  return (
+    <React.Fragment>
+      <h1 className="pageHeader">Tournament</h1>
+      <br></br>
+      <input
+        className="Manage_Input"
+        type="text"
+        id="new_ame"
+        placeholder="Edit Name"
+      ></input>
+      <br></br>
+      <input
+        className="Manage_Input"
+        type="text"
+        id="new_description"
+        placeholder="Edit Name"
+      ></input>
+      <br></br>
+      <input
+        className="Manage_Input"
+        type="image"
+        id="new_image"
+        placeholder="Edit Image"
+      ></input>
+      <br></br>
+      <button>
+        <Link to="/">Save and Exit</Link>
+      </button>
+    </React.Fragment>
+  );
+}