dodanie automatycznego liczenie eX , naprawa bledu zlego generowania kafelkow zawodnikow

app/src/components/Hero.jsx

@@ -14,31 +14,39 @@ const Hero = () => {
   const [afterDribbling, SetafterDribbling] = useState('');
   const [redirect, SetRedirect] = useState('');
 
-  const handleMinuteChange = (e) => setGameMinute(e.target.value);
+  const handleMinuteChange = (e) => { setGameMinute(e.target.value);
+    sentQuestion()
+  }
 
   const handleFirstShotChange = (event) => {
     setfirstShot(event.target.checked);
+    sentQuestion();
 };
 
 const handleOneOnOneChange = (event) => {
     SetoneOnOne(event.target.checked);
-};
+    sentQuestion()
+  };
 
 const handleAfterAirDuelChange = (event) => {
     SetafterAirDuele(event.target.checked);
-};
+    sentQuestion()
+  };
 
 const handleOpenGoalChange = (event) => {
     SetOpenGoal(event.target.checked);
-};
+    sentQuestion();
+  };
 
 const handleAfterDribblingChange = (event) => {
     SetafterDribbling(event.target.checked);
-};
+    sentQuestion();
+  };
 
 const handleRedirectChange = (event) => {
     SetRedirect(event.target.checked);
-};
+    sentQuestion();
+  };
 
   
   const [data, setData] = useState("");
@@ -144,6 +152,7 @@ const handleRedirectChange = (event) => {
     }else if(possition == 0){ 
       setNumberOfShooters(number_of_shooters_rev.current -= 1);
     }
+    sentQuestion()
   }
   
   // funkcja zsczytuje pozycje zawodnikow przed wyslaniem zapytania do serwera 
@@ -207,7 +216,7 @@ const handleRedirectChange = (event) => {
     // div z pozycja gracza
     var posytion = document.createElement('div')
     posytion.style.fontSize = "12px"
-    posytion.innerHTML = "Lokalizacja: " + konwerturX(ball.style.left) + " m, " + konwetujY(ball.style.top) + " m";
+    posytion.innerHTML = konwerturX(ball.style.left) + " m, " + konwetujY(ball.style.top) + " m";
     player.setAttribute('possition',[konwerturX(ball.style.left),konwetujY(ball.style.top)])
     //div z przyciskiem usuwającym
     var btnDelete = document.createElement('button')
@@ -262,8 +271,8 @@ const handleRedirectChange = (event) => {
         tekst.style.color = "white"
         posytion.style.color = "white"
         
-        x = parseFloat(x) -2
-        y = parseFloat(y) -2  
+        x = parseFloat(x) -3
+        y = parseFloat(y) -3  
         
         if(bojo.parentNode.querySelector(":hover")){
           ball.style.left = x + "%"
@@ -273,14 +282,19 @@ const handleRedirectChange = (event) => {
         //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)]);
-      bojo.addEventListener("mouseup", function(){
+      bojo.addEventListener("mouseup", function afterUp(){
           ball.style.background = pColor
           bojo.removeEventListener("mousemove", whileMove)
+          bojo.removeEventListener("mouseup", afterUp)
           }) 
-      
+      })
+      bojo.addEventListener("mouseup", function reload(){
+        sentQuestion();
+        bojo.removeEventListener("mouseup",reload)
       })
   
     })
+    sentQuestion();
   }
   // // Wyłanie zapytania do serwera
   function sentQuestion() {
@@ -353,8 +367,6 @@ const handleRedirectChange = (event) => {
         ball.style.background = "#fc6703"
       }else{alert("maksymalna liczba napastnikow")}
     }
-    
-
 }
 // funkcja działą po utworzeniu komponentów, dodaje listenry do elementów
 
@@ -383,11 +395,12 @@ const handleRedirectChange = (event) => {
 <div className="container">
 {/* Listy zwijane */}
 
-<div className="top-bar">
+<div className="top-bar" id = "top-bar">
 
 <form className="dropdown" id = "bodyPartList">
             <select className="dropbtn"
-            onChange={event => setBodyPart(event.target.value)}
+            onChange={event => {setBodyPart(event.target.value);
+                                sentQuestion}}
             defaultValue={bodyPart}>
                     <option value = "Right Foot">Noga Prawa</option>
                     <option value = "Left Foot">Noga Lewa</option>
@@ -400,7 +413,9 @@ const handleRedirectChange = (event) => {
 
 
         <form className="dropdown" id = "shootTypeList">
-            <select className="dropbtn" onChange={event => setTechnique(event.target.value)}
+            <select className="dropbtn" onChange={event => {setTechnique(event.target.value);
+                                                            sentQuestion()
+                                                            }}
             defaultValue = {technique}>
                     <option value="Normal"> Zwykły </option>
                     <option value = "Volley"> Wolej </option>
@@ -412,7 +427,8 @@ const handleRedirectChange = (event) => {
                     </select>      
         </form>
 
-     <form className="dropdown" id = "actionTypeList" onChange={event => setActionType(event.target.value)}
+     <form className="dropdown" id = "actionTypeList" onChange={event => {setActionType(event.target.value);
+                                                                          sentQuestion}}
     defaultValue={technique}>
             <select className="dropbtn">
                     <option value = "Open Play"> Atak Pozycyjny </option>
@@ -422,7 +438,8 @@ const handleRedirectChange = (event) => {
             </select>      
         </form>
         <form className="dropdown" id = "possitionList"
-        onChange={event => setPossition(event.target.value)}
+        onChange={event => {setPossition(event.target.value);
+                            sentQuestion}}
         defaultValue={shooterPossition}>
             <select className="dropbtn">
             <option value="Right Center Forward">Prawy Środkowy Napastnik</option>
@@ -477,7 +494,7 @@ const handleRedirectChange = (event) => {
         </div>
     </div>
 
-    <div className="additional-parameters">
+  <div className="additional-parameters">
   <h3>Parametry strzału</h3>
   <label>
     <input type="checkbox" id="firstShot" onChange={handleFirstShotChange} />