dodanie ograniczen dodawania pilkarzy

app/src/components/Hero.jsx

@@ -47,10 +47,24 @@ const handleRedirectChange = (event) => {
   //przez listener nanoszący zawodników na boisko. 1 - strzelec , 2 - bramkarz , 3 - obronca, 4 - napasnik. zmienna przez aktywacje przycskówk bb1, bb2, bb3 i bb4
 
   let active_bbt = "bbt1";
-  const [number_of_defenders, setNumberOfDevenders] = useState(0);
-  const [number_of_strikers, setNumberOfStrikers] = useState(0)
-  const [number_of_goalkeepers, setNumberOfGoalkeppers] = useState(0);
-  const [number_of_shooters,setNumberOfShooters] = useState(0);
+  const [number_of_defenders, setNumberOfDevenders] = useState(()=>{
+    return 0;
+  });
+
+  const [number_of_strikers, setNumberOfStrikers] = useState(() => {
+    return 0;
+  })
+  const [number_of_goalkeepers, setNumberOfGoalkeppers] = useState(()=>{
+    return 0;
+  });
+  const [number_of_shooters,setNumberOfShooters] = useState(() => {
+  return 0}
+  );
+
+  const number_of_shooters_rev = React.useRef(number_of_shooters)
+  const number_of_strikers_rev = React.useRef(number_of_strikers)
+  const number_of_goalkeepers_rev = React.useRef(number_of_goalkeepers)
+  const number_of_defenders_rev = React.useRef(number_of_defenders)
 
   // zmienne globalne bedace danymi wejsciowymi do modelu
 
@@ -87,7 +101,6 @@ const handleRedirectChange = (event) => {
 
   // Reset Boiska
   function resetField() {
-
       var footballField = document.getElementById('footballField');
       var footballs = document.querySelectorAll('.football');
       var list = document.getElementById('list')
@@ -99,11 +112,18 @@ const handleRedirectChange = (event) => {
       players.forEach(function(element) {
         list.removeChild(element);
       })
+
       setNumberOfDevenders(0);
       setNumberOfStrikers(0)
       setNumberOfGoalkeppers(0)
       setNumberOfShooters(0)
       setGameMinute('')
+
+      number_of_shooters_rev.current = 0;
+      number_of_goalkeepers_rev.current = 0;
+      number_of_defenders_rev.current = 0;
+      number_of_strikers_rev.current = 0;
+
       document.getElementById("ex").innerHTML = 0;
   }
   //funkcja dodaje zawodnika do listy zawodnikow. zmienne x oraz y to wspolrzedne a position
@@ -116,13 +136,13 @@ const handleRedirectChange = (event) => {
     list.removeChild(player)
     bojo.removeChild(ball)
     if(possition == 1){
-      setNumberOfGoalkeppers(0)
+      setNumberOfGoalkeppers(number_of_goalkeepers_rev.current -= 1);
     }else if(possition == 2){
-      setNumberOfDevenders(prev => prev -1 ) ;
+      setNumberOfDevenders(number_of_defenders_rev.current -= 1) ;
     }else if (possition == 3){
-      setNumberOfStrikers(prev => prev -1  ) ;
-    }else if(possition == 0){
-      setNumberOfShooters(0)
+      setNumberOfStrikers(number_of_strikers_rev.current -= 1);
+    }else if(possition == 0){ 
+      setNumberOfShooters(number_of_shooters_rev.current -= 1);
     }
   }
   
@@ -161,14 +181,17 @@ const handleRedirectChange = (event) => {
     if(possition == 1){
       var pName = "Bramkarz"
       var pColor = "#03e7fc"
+      setNumberOfGoalkeppers(number_of_goalkeepers_rev.current += 1);
     }else if(possition == 2){
       var pName = "Obrońca"
       var pColor = "#0324fc"
+      setNumberOfDevenders(number_of_defenders_rev.current += 1);
     }else if (possition ==3){
       var pName = "Napastnik"
       var pColor = "#fc6703"
+      setNumberOfStrikers(number_of_strikers_rev.current += 1);
     }else{
-      setNumberOfShooters(prev => prev +1)
+      setNumberOfShooters(number_of_shooters_rev.current += 1);
     }
     var player = document.createElement('div');
     player.className = 'player';
@@ -263,7 +286,7 @@ const handleRedirectChange = (event) => {
   function sentQuestion() {
     ///Dziwny Blad
     loadPlayers()
-    if (number_of_shooters == 1) {
+    if (number_of_shooters_rev.current == 1) {
       console.log('Wysyłanie wartości: ', bodyPart, technique, actionType, shooterPossition, gameMinute, firstShot);
       // Użyj backticksów zamiast zwykłych cudzysłowów
       fetch(`http://127.0.0.1:5000/get_model?shooter=${shooter}&goalkeeper=${goalkeeper}&defenders=${defenders}&strickers=${stricers}&bodyPart=${bodyPart}&technique=${technique}&actionType=${actionType}&shooterPossition=${shooterPossition}&gameMinute=${gameMinute}&shot_first_time=${firstShot}&shot_one_on_one=${oneOnOne}&shot_aerial_won=${afterAirDuel}&shot_open_goal=${openGoal}&shot_follows_dribble=${afterDribbling}&shot_redirect=${redirect}`).then(
@@ -306,29 +329,26 @@ const handleRedirectChange = (event) => {
     //dodanie zawodnika do listy oraz punktu do mapy w zaleznosci od aktywnosci przycisku 1,2,3 lub 4
     
     if(active_bbt=="bbt1"){
-      if(number_of_shooters < 1 ){
+      if(number_of_shooters_rev.current < 1 ){
         addPlayer(0,ball)
         bojo.appendChild(ball)
         ball.style.background = "#fc0303"
       }else{alert("mozesz dodac tylko jednego strzelca")}
     }else if(active_bbt == "bbt2"){
-      if ( number_of_goalkeepers < 1){
+      if ( number_of_goalkeepers_rev.current < 1){
         addPlayer(1,ball)
         bojo.appendChild(ball)
-        ball.style.background = "#03e7fc"
-        setNumberOfGoalkeppers(prev => prev +1)
+        ball.style.background = "#03e7fc"   
       }else{alert("mozesz dodac tylko jednego bramkarza")}
     }else if(active_bbt == "bbt3"){
-      if(number_of_defenders < 10){
+      if(number_of_defenders_rev.current < 10){
         addPlayer(2,ball);
-        setNumberOfDevenders(perv => prev +1 )
         bojo.appendChild(ball)
         ball.style.background = "#0324fc"
     }else{alert("maksymalna liczba obroncow")}
    }else if(active_bbt == "bbt4"){
-      if(number_of_strikers < 10){
+      if(number_of_strikers_rev.current < 10){
         addPlayer(3,ball);
-        setNumberOfStrikers(prev => prev + 1 );
         bojo.appendChild(ball)
         ball.style.background = "#fc6703"
       }else{alert("maksymalna liczba napastnikow")}