From 13363f8e7894adf139197d14456ce915cd1d767d Mon Sep 17 00:00:00 2001
From: andriluccahannes <lb214@hdm-stuttgart.de>
Date: Thu, 21 Dec 2023 11:45:03 +0100
Subject: [PATCH] Frontend
---
sth-frontend/src/App.jsx | 1 -
sth-frontend/src/components/Test.jsx | 7 -------
.../tournament/components/BracketingRound.jsx | 16 ++++++++++++++++
.../tournament/components/BracketingTree.jsx | 16 ++++++++++++++++
.../src/features/tournament/components/Match.jsx | 8 ++++++++
.../src/features/tournament/components/Team.jsx | 0
.../tournament/components/Tournament.jsx | 12 ++++++++++++
sth-frontend/src/features/tournament/index.jsx | 2 ++
sth-frontend/src/index.jsx | 2 +-
sth-frontend/src/{ => utils}/router.jsx | 6 ++----
10 files changed, 57 insertions(+), 13 deletions(-)
delete mode 100644 sth-frontend/src/components/Test.jsx
create mode 100644 sth-frontend/src/features/tournament/components/BracketingRound.jsx
create mode 100644 sth-frontend/src/features/tournament/components/BracketingTree.jsx
create mode 100644 sth-frontend/src/features/tournament/components/Match.jsx
create mode 100644 sth-frontend/src/features/tournament/components/Team.jsx
create mode 100644 sth-frontend/src/features/tournament/components/Tournament.jsx
create mode 100644 sth-frontend/src/features/tournament/index.jsx
rename sth-frontend/src/{ => utils}/router.jsx (72%)
diff --git a/sth-frontend/src/App.jsx b/sth-frontend/src/App.jsx
index a3a7e25..44798e3 100644
--- a/sth-frontend/src/App.jsx
+++ b/sth-frontend/src/App.jsx
@@ -1,7 +1,6 @@
import Navbar from "./layouts/Navbar";
import {Outlet} from "react-router-dom";
import "./index.css"
-import Test from "./components/Test";
function App() {
return (
diff --git a/sth-frontend/src/components/Test.jsx b/sth-frontend/src/components/Test.jsx
deleted file mode 100644
index daad32d..0000000
--- a/sth-frontend/src/components/Test.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Test({style}) {
- return (
- <div className={`font-bold ${style}`}>
- <h1>Test</h1>
- </div>
- )
-}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/BracketingRound.jsx b/sth-frontend/src/features/tournament/components/BracketingRound.jsx
new file mode 100644
index 0000000..65603ce
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/BracketingRound.jsx
@@ -0,0 +1,16 @@
+import Match from "./Match";
+
+export default function BracketingRound({matchesNum}) {
+ const matches = [];
+
+ for (let i = 0; i < matchesNum; i++) {
+ matches.push(<Match style={i + 1} key={i} />)
+
+ }
+
+ return(
+ <div className={'flex-col justify-around w-40 h-[500px] bg-blue-500 border-spacing-1 border-2 m-3 border-amber-500 flex'}>
+ {matches}
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/BracketingTree.jsx b/sth-frontend/src/features/tournament/components/BracketingTree.jsx
new file mode 100644
index 0000000..9e2aabf
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/BracketingTree.jsx
@@ -0,0 +1,16 @@
+import BracketingRound from "./BracketingRound";
+
+export default function BracketingTree({roundsNum}) {
+
+ const rounds = [];
+
+ for (let i = 0; i < roundsNum; i++) {
+ rounds.push(<BracketingRound key={i} matchesNum={roundsNum - i * 2 } />)
+ }
+
+ return (
+ <div className={'flex flex-row justify-center'}>
+ {rounds}
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/Match.jsx b/sth-frontend/src/features/tournament/components/Match.jsx
new file mode 100644
index 0000000..71c6538
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/Match.jsx
@@ -0,0 +1,8 @@
+
+export default function Match({style}) {
+ return(
+ <div className={`bg-green-600 w-24 h-12 border-2 border-b-fuchsia-600`}>
+
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/Team.jsx b/sth-frontend/src/features/tournament/components/Team.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/sth-frontend/src/features/tournament/components/Tournament.jsx b/sth-frontend/src/features/tournament/components/Tournament.jsx
new file mode 100644
index 0000000..6f0858c
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/Tournament.jsx
@@ -0,0 +1,12 @@
+import BracketingTree from "./BracketingTree";
+
+
+export default function Tournament() {
+
+
+ return(
+ <div>
+ <BracketingTree roundsNum={4}/>
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/index.jsx b/sth-frontend/src/features/tournament/index.jsx
new file mode 100644
index 0000000..139597f
--- /dev/null
+++ b/sth-frontend/src/features/tournament/index.jsx
@@ -0,0 +1,2 @@
+
+
diff --git a/sth-frontend/src/index.jsx b/sth-frontend/src/index.jsx
index 50e232e..e81e3b1 100644
--- a/sth-frontend/src/index.jsx
+++ b/sth-frontend/src/index.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import {RouterProvider} from "react-router-dom";
-import router from "./router";
+import router from "./utils/router";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
diff --git a/sth-frontend/src/router.jsx b/sth-frontend/src/utils/router.jsx
similarity index 72%
rename from sth-frontend/src/router.jsx
rename to sth-frontend/src/utils/router.jsx
index 4e67c2d..e5eb6de 100644
--- a/sth-frontend/src/router.jsx
+++ b/sth-frontend/src/utils/router.jsx
@@ -1,6 +1,6 @@
import {createBrowserRouter} from "react-router-dom";
-import Tournament from "./pages/Tournament";
-import App from "./App";
+import Tournament from "../features/tournament/components/Tournament";
+import App from "../App";
const router = createBrowserRouter([
{
@@ -10,8 +10,6 @@ const router = createBrowserRouter([
{path: "", element: <Tournament/>},
]
},
-
-
])
--
GitLab