add points functionality

sth-frontend/src/Tournament.js

 import {useState} from "react";
 
 export default function Tournament() {
+    const [globalScore, setGlobalScore] = useState(Array(14).fill(0))
+    function handleChange(score, index) {
+        const tempCopy = globalScore.slice()
+        console.log(globalScore)
+        console.log(score)
+        tempCopy[index] = score
+        setGlobalScore(tempCopy)
+    }
+
     return (
         <div style={{display: "flex", flexDirection: "row", gap: "50px"}}>
             <div className="firstPhase" style={{display: "flex", flexDirection: "column", gap: "50px"}}>
                 <div className="match">
-                    <Bracket/>
-                    <Bracket/>
+                    <Bracket value={globalScore[0]} onScoreChange={handleChange} index={0}/>
+                    <Bracket value={globalScore[1]} onScoreChange={handleChange} index={1}/>
                 </div>
                 <div className="match">
-                    <Bracket/>
-                    <Bracket/>
+                    <Bracket value={globalScore[2]} onScoreChange={handleChange} index={2}/>
+                    <Bracket value={globalScore[3]} onScoreChange={handleChange} index={3}/>
                 </div>
                 <div className="match">
-                    <Bracket/>
-                    <Bracket/>
+                    <Bracket value={globalScore[4]} onScoreChange={handleChange} index={4}/>
+                    <Bracket value={globalScore[5]} onScoreChange={handleChange} index={5}/>
                 </div>
                 <div className="match">
-                    <Bracket/>
-                    <Bracket/>
+                    <Bracket value={globalScore[6]} onScoreChange={handleChange} index={6}/>
+                    <Bracket value={globalScore[7]} onScoreChange={handleChange} index={7}/>
                 </div>
             </div>
             <div className="secondPhase" style={{display: "flex", flexDirection:"column", justifyContent: "space-around"}}>
                 <div className="match">
-                    <Bracket/>
-                    <Bracket/>
+                    <Bracket value={globalScore[8]} onScoreChange={handleChange} index={8}/>
+                    <Bracket value={globalScore[9]} onScoreChange={handleChange} index={9}/>
                 </div>
                 <div className="match">
-                    <Bracket/>
-                    <Bracket/>
+                    <Bracket value={globalScore[10]} onScoreChange={handleChange} index={10}/>
+                    <Bracket value={globalScore[11]} onScoreChange={handleChange} index={11}/>
                 </div>
             </div>
             <div className="thirdPhase" style={{display: "flex", alignItems: "center"}}>
                 <div className="match">
-                    <Bracket/>
-                    <Bracket/>
+                    <Bracket value={globalScore[12]} onScoreChange={handleChange} index={12}/>
+                    <Bracket value={globalScore[13]} onScoreChange={handleChange} index={13}/>
                 </div>
             </div>
         </div>
     )
 }
 
-function Bracket({highlight, onScoreChange}) {
+function Bracket({value, highlight, onScoreChange, index}) {
     if (highlight) {
         document.getElementById('bracketWrapper').style.border = "3px solid black"
     }
@@ -51,8 +60,8 @@ function Bracket({highlight, onScoreChange}) {
             <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)}/>
+            <label htmlFor={"score"+index} style={{fontSize: "8pt"}}>score</label>
+            <input id={"score"+index} type="number" style={{width: "35px"}} value={value} onChange={() => onScoreChange(document.querySelector(`#score${index}`).value, index)}/>
         </div>
     </div>
 }
\ No newline at end of file