From 580bd2f8807b0ba3c1b03f1e0ebbfac7b0c8a019 Mon Sep 17 00:00:00 2001
From: andriluccahannes <lb214@hdm-stuttgart.de>
Date: Mon, 8 Jan 2024 17:50:39 +0100
Subject: [PATCH] frontend bracketing structure mockkup
---
BinTree/src/main/java/Main.java | 12 ++++++++++++
.../tournament/components/BracketingRound.jsx | 2 +-
.../tournament/components/BracketingTree.jsx | 6 +++---
.../src/features/tournament/components/Match.jsx | 16 +++++++++++++---
.../src/features/tournament/components/Score.jsx | 13 +++++++++++++
.../src/features/tournament/components/Team.jsx | 12 ++++++++++++
6 files changed, 54 insertions(+), 7 deletions(-)
create mode 100644 BinTree/src/main/java/Main.java
create mode 100644 sth-frontend/src/features/tournament/components/Score.jsx
diff --git a/BinTree/src/main/java/Main.java b/BinTree/src/main/java/Main.java
new file mode 100644
index 0000000..a939dc7
--- /dev/null
+++ b/BinTree/src/main/java/Main.java
@@ -0,0 +1,12 @@
+
+public class Main {
+ public static void main(String[] args) {
+
+ BinTreeNode btn = BinTreeNode.bin( new BinTreeNode(), "1", new BinTreeNode() );
+
+ BinTreeNode btn2 = BinTreeNode.bin( btn, "2", btn );
+
+ System.out.println( btn2.left().getNodeValue() );
+ }
+
+}
diff --git a/sth-frontend/src/features/tournament/components/BracketingRound.jsx b/sth-frontend/src/features/tournament/components/BracketingRound.jsx
index 65603ce..b20d07c 100644
--- a/sth-frontend/src/features/tournament/components/BracketingRound.jsx
+++ b/sth-frontend/src/features/tournament/components/BracketingRound.jsx
@@ -9,7 +9,7 @@ export default function BracketingRound({matchesNum}) {
}
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'}>
+ <div className={'flex-col justify-around m-3 hover:shadow flex'}>
{matches}
</div>
)
diff --git a/sth-frontend/src/features/tournament/components/BracketingTree.jsx b/sth-frontend/src/features/tournament/components/BracketingTree.jsx
index 9e2aabf..1e5c154 100644
--- a/sth-frontend/src/features/tournament/components/BracketingTree.jsx
+++ b/sth-frontend/src/features/tournament/components/BracketingTree.jsx
@@ -1,11 +1,11 @@
import BracketingRound from "./BracketingRound";
export default function BracketingTree({roundsNum}) {
-
+ const matches = roundsNum;
const rounds = [];
-
+ roundsNum = Math.log2(roundsNum) + 1
for (let i = 0; i < roundsNum; i++) {
- rounds.push(<BracketingRound key={i} matchesNum={roundsNum - i * 2 } />)
+ rounds.push(<BracketingRound key={i} matchesNum={matches / Math.pow(2, i)} />)
}
return (
diff --git a/sth-frontend/src/features/tournament/components/Match.jsx b/sth-frontend/src/features/tournament/components/Match.jsx
index 71c6538..c988981 100644
--- a/sth-frontend/src/features/tournament/components/Match.jsx
+++ b/sth-frontend/src/features/tournament/components/Match.jsx
@@ -1,8 +1,18 @@
+import Team from "./Team";
+import {useState} from "react";
-export default function Match({style}) {
- return(
- <div className={`bg-green-600 w-24 h-12 border-2 border-b-fuchsia-600`}>
+export default function Match() {
+
+ const [teamOneScore, setTeamOneScore] = useState(0);
+ const [teamTwoScore, setTeamTwoScore] = useState(0);
+ const teamOneWinning = teamOneScore > teamTwoScore;
+ const teamTwoWinning = teamTwoScore > teamOneScore;
+
+ return(
+ <div className={`m-2 hover:shadow-lg border-4 rounded-xl`}>
+ <Team name={'Lucca'} score={teamOneScore} setScore={setTeamOneScore} winning={teamOneWinning}/>
+ <Team name={'Jonas'} score={teamTwoScore} setScore={setTeamTwoScore} winning={teamTwoWinning}/>
</div>
)
}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/Score.jsx b/sth-frontend/src/features/tournament/components/Score.jsx
new file mode 100644
index 0000000..954cdc2
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/Score.jsx
@@ -0,0 +1,13 @@
+import {useState} from "react";
+
+export default function Score({score, setScore}) {
+
+
+ return(
+ <div>
+ <button className={'w-6 rounded hover:bg-gray-100 bg-gray-300 mr-1'} onClick={() => setScore(score - 1)}>-</button>
+ <input className={'w-6'} type={"text"} value={score}/>
+ <button className={'w-6 rounded hover:bg-gray-100 bg-gray-300 ml-1'} onClick={() => setScore(score + 1)}>+</button>
+ </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
index e69de29..bb762e8 100644
--- a/sth-frontend/src/features/tournament/components/Team.jsx
+++ b/sth-frontend/src/features/tournament/components/Team.jsx
@@ -0,0 +1,12 @@
+import {useState} from "react";
+import Score from "./Score";
+
+export default function Team({name, score, setScore, winning}) {
+
+ return(
+ <div className={'flex w-40 m-3'}>
+ <div className={`mr-4 rounded flex justify-center ` + (winning ? 'bg-green-300' : 'bg-gray-100')}>{name}</div>
+ <Score setScore={setScore} score={score}/>
+ </div>
+ )
+}
\ No newline at end of file
--
GitLab