dodanie mozliwosci przesuwania zawodnikow, istenieje blad przy najezdzie kursorem na innego zawodnika

app/src/components/Hero.jsx

@@ -147,41 +147,63 @@ const Hero = () => {
       ball.style.background = pColor;
     })
 
-    ball.addEventListener("mouseover",function(){
+    ball.addEventListener("mouseover",function podswietl(){
       player.style.background = "#bf8e8e"
       tekst.style.color = "black"
       posytion.style.color = "black"
     })
-    ball.addEventListener("mouseout",function(){
+    ball.addEventListener("mouseout",function (){
       player.style.background = 'rgb(16, 46, 29)';
       tekst.style.color = "white"
       posytion.style.color = "white"
     })
 
-
+    var bojo = document.getElementById('footballField')
 
     // listenery pozwalające na przesuwanie punktu
-    ball.addEventListener("mousedown", function(){
-      ball.style.background = "orange"
-      ball.addEventListener("mousemove", whileMove(ball))
-    })
-
-    ball.addEventListener('mousemove', function(){
-
-    })
     
-    ball.addEventListener("mouseup", function(){
-      ball.style.background = pColor
-    })
-    ball.addEventListener("mouseout", function(){
-      ball.style.background = pColor
-    })
-  }
-  function whileMove(ball){
   
+    
+    
+    ball.addEventListener("mousedown", function przesuwanie(){
+      
+      ball.style.background = "orange"
+      player.style.background = 'rgb(16, 46, 29)';
+      tekst.style.color = "white"
+      posytion.style.color = "white"
+
+      bojo.addEventListener("mousemove", function whileMove(ev){
+        var bojo = document.getElementById('footballField')
+        var bnd = ev.target.getBoundingClientRect()
+        // zapis od 0 - 1 w jakim procentowym miejscu boiska użytkownik kliknął
+        var x = ((ev.clientX - bnd.left)/bojo.offsetWidth)*100;
+        var y = ((ev.clientY - bnd.top)/bojo.offsetHeight)*100;
+       
+        player.style.background = 'rgb(16, 46, 29)';
+        tekst.style.color = "white"
+        posytion.style.color = "white"
+        
+        x = parseFloat(x) + 1
+        y = parseFloat(y) + 1 
+        
+        if(bojo.parentNode.querySelector(":hover")){
+          ball.style.left = x + "%"
+          ball.style.top = y + "%"
+        }
+        posytion.innerHTML =  "x:" + konwerturX(ball.style.left) + "m " + "y:" + konwetujY(ball.style.top) + "m";
+      bojo.addEventListener("mouseup", function(){
+          ball.style.background = pColor
+          bojo.removeEventListener("mousemove", whileMove)
+          }) 
+      
+      })   
+  
+    })
   }
 
-  // Wysłanie zapytania do serwera
+
+
+  // Wyłanie zapytania do serwera
   function sentQuestion() {
     var ball = document.querySelector('.football');
       if (ball) {
@@ -221,7 +243,7 @@ const Hero = () => {
         addPlayer(0,ball)
         bojo.appendChild(ball)
         ball.style.background = "#fc0303"
-        umer_od_shooters = numer_od_shooters + 1 
+        numer_od_shooters = numer_od_shooters + 1
       }else{alert("mozesz dodac tylko jednego strzelca")}
     }else if(active_bbt == "bbt2"){