From 402836f36ccde67f2685eda2b65e7d5a512bf2fc Mon Sep 17 00:00:00 2001
From: Jonas <jonas.fischer14@gmx.de>
Date: Thu, 9 Nov 2023 20:38:36 +0100
Subject: [PATCH] add provisional tournament component without functionality
---
sth-frontend/src/App.js | 22 +++----------
sth-frontend/src/Tournament.js | 58 ++++++++++++++++++++++++++++++++++
2 files changed, 62 insertions(+), 18 deletions(-)
create mode 100644 sth-frontend/src/Tournament.js
diff --git a/sth-frontend/src/App.js b/sth-frontend/src/App.js
index 3784575..a0cb063 100644
--- a/sth-frontend/src/App.js
+++ b/sth-frontend/src/App.js
@@ -1,25 +1,11 @@
import logo from './logo.svg';
import './App.css';
+import Tournament from "./Tournament";
function App() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
- );
+ return <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+ <Tournament />
+ </div>
}
export default App;
diff --git a/sth-frontend/src/Tournament.js b/sth-frontend/src/Tournament.js
new file mode 100644
index 0000000..c913d57
--- /dev/null
+++ b/sth-frontend/src/Tournament.js
@@ -0,0 +1,58 @@
+import {useState} from "react";
+
+export default function Tournament() {
+ return (
+ <div style={{display: "flex", flexDirection: "row", gap: "50px"}}>
+ <div className="firstPhase" style={{display: "flex", flexDirection: "column", gap: "50px"}}>
+ <div className="match">
+ <Bracket/>
+ <Bracket/>
+ </div>
+ <div className="match">
+ <Bracket/>
+ <Bracket/>
+ </div>
+ <div className="match">
+ <Bracket/>
+ <Bracket/>
+ </div>
+ <div className="match">
+ <Bracket/>
+ <Bracket/>
+ </div>
+ </div>
+ <div className="secondPhase" style={{display: "flex", flexDirection:"column", justifyContent: "space-around"}}>
+ <div className="match">
+ <Bracket/>
+ <Bracket/>
+ </div>
+ <div className="match">
+ <Bracket/>
+ <Bracket/>
+ </div>
+ </div>
+ <div className="thirdPhase" style={{display: "flex", alignItems: "center"}}>
+ <div className="match">
+ <Bracket/>
+ <Bracket/>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+function Bracket({highlight, onScoreChange}) {
+ if (highlight) {
+ document.getElementById('bracketWrapper').style.border = "3px solid black"
+ }
+ return <div id="bracketWrapper" style={{display: "flex",flexDirection:"row" ,padding: "10px", border: "1px solid black", width: "fit-content"}}>
+ <div id="teamNameWrapper" style={{display: "flex", flexDirection: "column"}}>
+ <label htmlFor="teamName" style={{fontSize: "8pt"}}>teamname</label>
+ <input id="teamName" type="text"/>
+ </div>
+ <div id="scoreWrapper" style={{display: "flex", flexDirection: "column", marginLeft: "10px"}}>
+ <label htmlFor="score" style={{fontSize: "8pt"}}>score</label>
+ <input id="score" type="number" style={{width: "35px"}} onChange={() => onScoreChange(document.getElementById('score').value)}/>
+ </div>
+ </div>
+}
\ No newline at end of file
--
GitLab