kilka mniejszych bledow

app/src/components/Hero.jsx

@@ -5,7 +5,6 @@ import { Link } from "react-router-dom";
 
 const Hero = () => {
   
-  const [isOpen, setIsOpen] = useState(false);
   const [gameMinute, setGameMinute] = useState('');
 
   const [firstShot, setfirstShot] = useState('');
@@ -15,7 +14,6 @@ const Hero = () => {
   const [afterDribbling, SetafterDribbling] = useState('');
   const [redirect, SetRedirect] = useState('');
 
-  const toggleDropdown = () => setIsOpen(!isOpen);
   const handleMinuteChange = (e) => setGameMinute(e.target.value);
 
   const handleFirstShotChange = (event) => {
@@ -106,9 +104,8 @@ const handleRedirectChange = (event) => {
       setNumberOfGoalkeppers(0)
       setNumberOfShooters(0)
       setGameMinute('')
+      document.getElementById("ex").innerHTML = 0;
   }
-
-
   //funkcja dodaje zawodnika do listy zawodnikow. zmienne x oraz y to wspolrzedne a position
   // to pozycja zawodnika 0 - strzelec, 1 - bramkarz, 2 - broniacy, 3 napastnik
   // ball - to odnosnik do punktu na boisku
@@ -121,9 +118,9 @@ const handleRedirectChange = (event) => {
     if(possition == 1){
       setNumberOfGoalkeppers(0)
     }else if(possition == 2){
-      setNumberOfDevenders(number_of_defenders-1) ;
+      setNumberOfDevenders(prev => prev -1 ) ;
     }else if (possition == 3){
-      setNumberOfStrikers(number_of_strikers-1) ;
+      setNumberOfStrikers(prev => prev -1  ) ;
     }else if(possition == 0){
       setNumberOfShooters(0)
     }
@@ -160,7 +157,6 @@ const handleRedirectChange = (event) => {
     var pName = "Strzelec"
     //kolor kropki
     // kolor tła kafelka
-
     var pColor = "#fc0303"
     if(possition == 1){
       var pName = "Bramkarz"
@@ -171,8 +167,9 @@ const handleRedirectChange = (event) => {
     }else if (possition ==3){
       var pName = "Napastnik"
       var pColor = "#fc6703"
+    }else{
+      setNumberOfShooters(prev => prev +1)
     }
-
     var player = document.createElement('div');
     player.className = 'player';
     player.style.width = "inherit"
@@ -252,7 +249,7 @@ const handleRedirectChange = (event) => {
         //var shooterX = konwerturX(ball.style.left) 
         //var shooterY = konwetujY(ball.style.top)
         posytion.innerHTML =  "x:" + konwerturX(ball.style.left) + "m " + "y:" + konwetujY(ball.style.top) + "m";
-        //player.setAttribute('possition',[konwerturX(ball.style.left),konwetujY(ball.style.top)]);
+        player.setAttribute('possition',[konwerturX(ball.style.left),konwetujY(ball.style.top)]);
       bojo.addEventListener("mouseup", function(){
           ball.style.background = pColor
           bojo.removeEventListener("mousemove", whileMove)
@@ -262,14 +259,6 @@ const handleRedirectChange = (event) => {
   
     })
   }
-
-  function updateXGMeter(xgValue) {
-    var xgMeter = document.querySelector('.xg-meter');
-    var greenIntensity = xgValue * 100; // Zakładając, że xgValue jest między 0 a 1
-    //xgMeter.style.background = `linear-gradient(to top, #006400 ${greenIntensity}%, #90EE90)`;
-}
- 
-
   // // Wyłanie zapytania do serwera
   function sentQuestion() {
     ///Dziwny Blad
@@ -286,7 +275,7 @@ const handleRedirectChange = (event) => {
           // Przenieś tę linię do środka bloku .then(), aby uniknąć błędów
           let eX = data.response;
           document.getElementById("ex").innerHTML = eX;
-          updateXGMeter(eX);
+          //updateXGMeter(eX);
         }
       ).catch(error => {
         console.error('Błąd:', error);
@@ -294,6 +283,7 @@ const handleRedirectChange = (event) => {
     } else {
       alert('Piłka nie jest obecnie na boisku.');
     } 
+   
   }
 
   
@@ -320,26 +310,25 @@ const handleRedirectChange = (event) => {
         addPlayer(0,ball)
         bojo.appendChild(ball)
         ball.style.background = "#fc0303"
-        setNumberOfShooters(number_of_shooters+1)
       }else{alert("mozesz dodac tylko jednego strzelca")}
     }else if(active_bbt == "bbt2"){
       if ( number_of_goalkeepers < 1){
         addPlayer(1,ball)
         bojo.appendChild(ball)
         ball.style.background = "#03e7fc"
-        setNumberOfGoalkeppers(number_of_goalkeepers+1)
+        setNumberOfGoalkeppers(prev => prev +1)
       }else{alert("mozesz dodac tylko jednego bramkarza")}
     }else if(active_bbt == "bbt3"){
-      if(number_of_defenders <= 10){
+      if(number_of_defenders < 10){
         addPlayer(2,ball);
-        setNumberOfDevenders(number_of_defenders+1)
+        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 < 10){
         addPlayer(3,ball);
-        setNumberOfStrikers(number_of_strikers+1);
+        setNumberOfStrikers(prev => prev + 1 );
         bojo.appendChild(ball)
         ball.style.background = "#fc6703"
       }else{alert("maksymalna liczba napastnikow")}
@@ -495,24 +484,6 @@ const handleRedirectChange = (event) => {
     Rykoszet
   </label>
 </div>
-
-
-     {/* <div className="ChoosingPlayer">
-      <button className="cho-one_on_one" id = "bbt8">Sam na sam</button>
-     </div>
-     <div className="ChoosingPlayer">
-      <button className="cho-first_time" id = "bbt12">Pierwszy w meczu</button>
-     </div>
-     <div className="ChoosingPlayer">
-      <button className="cho-aerial_won" id = "bbt13">Pojedynek powietrzny</button>
-     </div>
-     <div className="ChoosingPlayer">
-      <button className="cho-follows_dribble" id = "bbt14">Drybling</button>
-     </div>
-     <div className="ChoosingPlayer">
-      <button className="cho-redirect" id = "bbt15">Rykoszet</button>
-     </div> */}
-
 <div className="bottom-bar">
 
       <button className="cho-shooter" id = "bbt1">Strzelec</button>
@@ -522,8 +493,8 @@ const handleRedirectChange = (event) => {
       <button className="reset-button" onClick={resetField}>Reset</button>  
       <button className="info-button" onClick={sentQuestion}>xG</button>
      </div>
-     <div class="xg-meter">
+     <div className="xg-meter">
-      <b id="ex" class="xg-value"></b>
+      <b id="ex" className="xg-value">0</b>
     </div>
           </div>   
    </div>