frontend bracketing structure mockkup

BinTree/src/main/java/Main.java

+
+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() );
+    }
+
+}

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>
     )

sth-frontend/src/features/tournament/components/BracketingTree.jsx

 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 (

sth-frontend/src/features/tournament/components/Match.jsx

+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

sth-frontend/src/features/tournament/components/Score.jsx

+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

sth-frontend/src/features/tournament/components/Team.jsx

+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