From 8801b2d3fb48bbf0404cb0df14df6ea32024a9ee Mon Sep 17 00:00:00 2001
From: Jonas <jonas.fischer14@gmx.de>
Date: Mon, 13 Nov 2023 12:04:08 +0100
Subject: [PATCH] 13.11.23 add state for persistence #7
---
sth-frontend/src/Tournament.js | 66 ++++++++++++++++++++--------------
1 file changed, 39 insertions(+), 27 deletions(-)
diff --git a/sth-frontend/src/Tournament.js b/sth-frontend/src/Tournament.js
index dd1e04d..908ebbf 100644
--- a/sth-frontend/src/Tournament.js
+++ b/sth-frontend/src/Tournament.js
@@ -1,64 +1,76 @@
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)
+ const [teams, setTeams] = useState(Array(14).fill({name: '', score: 0}))
+
+ function handleChange(key, data, index) {
+ const tempCopy = teams.slice()
+ console.log(teams)
+ console.log(data)
+ if (key === 'score')
+ tempCopy[index].score = data
+ else
+ tempCopy[index].name = data
+ setTeams(tempCopy)
}
return (
<div style={{display: "flex", flexDirection: "row", gap: "50px"}}>
<div className="firstPhase" style={{display: "flex", flexDirection: "column", gap: "50px"}}>
<div className="match">
- <Bracket value={globalScore[0]} onScoreChange={handleChange} index={0}/>
- <Bracket value={globalScore[1]} onScoreChange={handleChange} index={1}/>
+ <Bracket value={teams[0]} onDataChange={handleChange} index={0}/>
+ <Bracket value={teams[1]} onDataChange={handleChange} index={1}/>
</div>
<div className="match">
- <Bracket value={globalScore[2]} onScoreChange={handleChange} index={2}/>
- <Bracket value={globalScore[3]} onScoreChange={handleChange} index={3}/>
+ <Bracket value={teams[2]} onDataChange={handleChange} index={2}/>
+ <Bracket value={teams[3]} onDataChange={handleChange} index={3}/>
</div>
<div className="match">
- <Bracket value={globalScore[4]} onScoreChange={handleChange} index={4}/>
- <Bracket value={globalScore[5]} onScoreChange={handleChange} index={5}/>
+ <Bracket value={teams[4]} onDataChange={handleChange} index={4}/>
+ <Bracket value={teams[5]} onDataChange={handleChange} index={5}/>
</div>
<div className="match">
- <Bracket value={globalScore[6]} onScoreChange={handleChange} index={6}/>
- <Bracket value={globalScore[7]} onScoreChange={handleChange} index={7}/>
+ <Bracket value={teams[6]} onDataChange={handleChange} index={6}/>
+ <Bracket value={teams[7]} onDataChange={handleChange} index={7}/>
</div>
</div>
- <div className="secondPhase" style={{display: "flex", flexDirection:"column", justifyContent: "space-around"}}>
+ <div className="secondPhase"
+ style={{display: "flex", flexDirection: "column", justifyContent: "space-around"}}>
<div className="match">
- <Bracket value={globalScore[8]} onScoreChange={handleChange} index={8}/>
- <Bracket value={globalScore[9]} onScoreChange={handleChange} index={9}/>
+ <Bracket value={teams[8]} onDataChange={handleChange} index={8}/>
+ <Bracket value={teams[9]} onDataChange={handleChange} index={9}/>
</div>
<div className="match">
- <Bracket value={globalScore[10]} onScoreChange={handleChange} index={10}/>
- <Bracket value={globalScore[11]} onScoreChange={handleChange} index={11}/>
+ <Bracket value={teams[10]} onDataChange={handleChange} index={10}/>
+ <Bracket value={teams[11]} onDataChange={handleChange} index={11}/>
</div>
</div>
<div className="thirdPhase" style={{display: "flex", alignItems: "center"}}>
<div className="match">
- <Bracket value={globalScore[12]} onScoreChange={handleChange} index={12}/>
- <Bracket value={globalScore[13]} onScoreChange={handleChange} index={13}/>
+ <Bracket value={teams[12]} onDataChange={handleChange} index={12}/>
+ <Bracket value={teams[13]} onDataChange={handleChange} index={13}/>
</div>
</div>
</div>
)
}
-function Bracket({value, highlight, onScoreChange, index}) {
- return <div id="bracketWrapper" style={{display: "flex",flexDirection:"row" ,padding: "10px", border: "1px solid black", width: "fit-content"}}>
+function Bracket({value, highlight, onDataChange, index}) {
+ 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"/>
+ <input id={`teamName${index}`} type="text" onChange={() => onDataChange('name', document.getElementById(`teamName${index}`).value, index)}/>
</div>
<div id="scoreWrapper" style={{display: "flex", flexDirection: "column", marginLeft: "10px"}}>
- <label htmlFor={"score"+index} style={{fontSize: "8pt"}}>score</label>
- <input id={"score"+index} type="number" min={0} style={{width: "35px"}} value={value} onChange={() => onScoreChange(document.querySelector(`#score${index}`).value, index)}/>
+ <label htmlFor={"score" + index} style={{fontSize: "8pt"}}>score</label>
+ <input id={`score${index}`} type="number" min={0} style={{width: "35px"}} value={value.score}
+ onChange={() => onDataChange('score', document.getElementById(`score${index}`).value, index)}/>
</div>
</div>
}
\ No newline at end of file
--
GitLab