dokonczenie listy, zmiana sposobu dodawania zawodnikow z pozycji: absolut na relative, naprawa kilku mniejszych bledow

app/src/components/Hero.jsx

@@ -12,23 +12,32 @@ const Hero = () => {
   
   const [data,setData] = useState([{}])
   //zmienne globalne
-
   //zmienna mówiąca który przycisk jest aktywny, jest ona wykorzystywana 
   //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";
   let number_of_defenders = 0;
   let number_of_strikers = 0;
-  let idCounter = 0;
+  let  number_of_goalkeepers = 0;
   var eX = " ";
 
-  var player_list = new Array;
 
   // zmienne globalne bedace danymi wejsciowymi do modelu
 
   var shooterX = 0;
   var shooterY = 0;
 
+//zamiana procentowych pozycji na kartezyjskie
+  function konwerturX(x){
+    var fX = parseFloat(x.slice(0,-1))
+    return Math.round((fX*105))/100
+  }
+  function konwetujY(y){
+    var fY = parseFloat(y.slice(0,-1))
+    return Math.round(fY*68)/100
+  }
+
+
 
   function changePlayer(a){
 
@@ -49,70 +58,59 @@ const Hero = () => {
 
     Leg_bbt = a
   }  
-  function konwersjaWspołrzednych(){
 
-  }
   // Reset Boiska
   function resetField() {
 
       var footballField = document.getElementById('footballField');
       var footballs = document.querySelectorAll('.football');
-      var goalkeepers = document.querySelectorAll('.goalkeeper');
-      var strikers = document.querySelectorAll('.striker')
-      var defenders = document.querySelectorAll('.defender')
-      
       var list = document.getElementById('list')
       var players = document.querySelectorAll('.player')
 
       footballs.forEach(function (ball) {
           footballField.removeChild(ball);
       });
-      goalkeepers.forEach(function (ball) {
-        footballField.removeChild(ball);
-    });
-      strikers.forEach(function(ball){
-        footballField.removeChild(ball)
-      })
-      defenders.forEach(function(ball){
-        footballField.removeChild(ball)
-      })
-
       players.forEach(function(element) {
         list.removeChild(element);
       })
       number_of_defenders = 0
       number_of_strikers = 0 
+      number_of_goalkeepers = 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
+
   function deletePlayer(ball,player,possition){
     var list = document.getElementById('list');
     var bojo = document.getElementById('footballField');
     list.removeChild(player)
     bojo.removeChild(ball)
+    if(possition == 1){
+      number_of_goalkeepers = number_of_goalkeepers -1 
+    }else if(possition == 2){
+      number_of_defenders = number_of_defenders -1 ;
+    }else if (possition == 3){
+      number_of_strikers = number_of_strikers -1 ;
     }
-  function addPlayer(x,y, possition, ball){ 
+  }
+  function addPlayer(possition, ball){ 
     //Zmiana stylu w zaleznosci czy zawodnik jest obronca/napastnikiem iyp.
     var pName = "Strzelec"
     //kolor kropki
-    var pColor = ball.style.background
     // kolor tła kafelka
-    var bColor = "rgb(16, 46, 29)"
+    var pColor = "#fc0303"
     if(possition == 1){
       var pName = "Bramkarz"
-
+      var pColor = "#03e7fc"
-      var bColor = "rgb(16, 46, 29)"
     }else if(possition == 2){
       var pName = "Napastnik"
-
+      var pColor = "#0324fc"
-      var bColor = "rgb(4, 46, 29)"
     }else if (possition ==3){
       var pName = "Obrońca"
-     
+      var pColor = "#fc6703"
-      var bColor = "rgb(10, 46, 29)"
     }
     var player = document.createElement('div');
     player.className = 'player';
@@ -127,7 +125,7 @@ const Hero = () => {
     // div z pozycja gracza
     var posytion = document.createElement('div')
     posytion.style.fontSize = "10px"
-    posytion.innerHTML = ball.style.left + ball.style.top;
+    posytion.innerHTML = "x:" + konwerturX(ball.style.left) + "m " + "y:" + konwetujY(ball.style.top) + "m";
     
     //div z przyciskiem usuwającym
     var btnDelete = document.createElement('button')
@@ -154,20 +152,43 @@ const Hero = () => {
       posytion.style.color = "black"
     })
     ball.addEventListener("mouseout",function(){
-      player.style.background = pColor;
+      player.style.background = 'rgb(16, 46, 29)';
       tekst.style.color = "white"
       posytion.style.color = "white"
     })
+
+
+
+    // 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){
+
+    var ev = document.getElementById('footballField')
+    var bojo = document.getElementById('footballField')
+    var bnd = ev.target.getBoundingClientRect()
+    var x = ((ev.clientX - bnd.left)/bojo.offsetWidth)*100;
+    var y = ((ev.clientY - bnd.top)/bojo.offsetHeight)*100;
+    
+    ball.style.left = x + "%"
+    ball.style.top = y + "%"
   }
 
-
   // Wysłanie zapytania do serwera
-
   function sentQuestion() {
     var ball = document.querySelector('.football');
       if (ball) {
@@ -187,70 +208,59 @@ const Hero = () => {
   }
 
   /* Funkcja dodająca listener do boiska*/
-  function boiskoListener(){
+  function boiskoListener(ev){
+    ev.preventDefault()
+    var bojo = document.getElementById('footballField')
+    var bnd = ev.target.getBoundingClientRect()
 
-      var x = event.clientX - footballField.getBoundingClientRect().left;
+    // zapis od 0 - 1 w jakim procentowym miejscu boiska użytkownik kliknął
-      var y = event.clientY - footballField.getBoundingClientRect().top;
+    var x = ((ev.clientX - bnd.left)/bojo.offsetWidth)*100;
+    var y = ((ev.clientY - bnd.top)/bojo.offsetHeight)*100;
 
-      shooterX = (x * 105)/600
+    var ball = document.createElement('div');
-      shooterY = ((400 - y) * 69)/ 400
+    ball.className = "football";
-      // Przypadek kiedy zaznaczamy strzelca
+    ball.style.left = x + "%"
+    ball.style.top = y + "%"
+    
+    //dodanie zawodnika do listy oraz punktu do mapy w zaleznosci od aktywnosci przycisku 1,2,3 lub 4
     if(active_bbt=="bbt1"){
       let existingBall = document.querySelector('.football');
-
       if(!existingBall){
-            var ball = document.createElement('div');
+        addPlayer(0,ball)
-            ball.className = 'football';
+        bojo.appendChild(ball)
-            ball.style.left = x + 'px';
+        ball.style.background = "#fc0303"
-            ball.style.top = y + 'px';
+      }else{alert("mozesz dodac tylko jednego strzelca")}
-            addPlayer(shooterX,shooterY,0,ball)
-            footballField.appendChild(ball);
-        } else {
-            alert('Możesz dodać tylko jedną piłkę!');
-        }
-       // Przypadek kiedy zaznaczamy bramkarza
     }else if(active_bbt == "bbt2"){
-        let existingGoalkeeper = document.querySelector('.goalkeeper');
         
-        if (!existingGoalkeeper) {
+      if ( number_of_goalkeepers < 1){
-          var ball = document.createElement('div');
+        addPlayer(1,ball)
-          ball.className = 'goalkeeper';
+        bojo.appendChild(ball)
-          ball.style.left = x + 'px';
+        ball.style.background = "#03e7fc"
-          ball.style.top = y + 'px';
+        number_of_goalkeepers = number_of_goalkeepers + 1 
-          addPlayer(shooterX,shooterY,1,ball)
+      }else{alert("mozesz dodac tylko jednego bramkarza")}
-          footballField.appendChild(ball);
+    }else if(active_bbt == "bbt3"){
-        } else {
-          alert('Możesz dodać tylko jednego bramkarza!');
-        }
-      }
-      // Przypadek kiedy zaznaczamy obronce
-      else if(active_bbt == "bbt3"){ 
       if(number_of_defenders <= 10){
-        var ball = document.createElement('div');
+        addPlayer(2,ball);
-        ball.className = 'defender';
+        number_of_defenders = number_of_defenders +1;
-        ball.style.left = x + 'px';
+        bojo.appendChild(ball)
-        ball.style.top = y + 'px';
+        ball.style.background = "#0324fc"
-        footballField.appendChild(ball);
+    }else{alert("maksymalna liczba obroncow")}
-        addPlayer(shooterX,shooterY,3,ball)
-        number_of_defenders = number_of_defenders + 1} else {alert("zbyt duza liczba obronców")}
    }else if(active_bbt == "bbt4"){
-      // Przypadek kiedy zaznaczamy napastnika
       if(number_of_strikers <= 10){
-        var ball = document.createElement('div');
+        addPlayer(3,ball);
-        ball.className = 'striker';
+        number_of_strikers = number_of_strikers + 1;
-        ball.style.left = x + 'px';
+        bojo.appendChild(ball)
-        ball.style.top = y + 'px';
+        ball.style.background = "#fc6703"
-        footballField.appendChild(ball);
+      }else{alert("maksymalna liczba napastnikow")}
-        addPlayer(shooterX,shooterY,2,ball)
+    }
-        number_of_strikers = number_of_strikers + 1 
+    
-      }else{alert("zbyt duza liczba obroncow")}}
 
 }
 // funkcja działą po utworzeniu komponentów, dodaje listenry do elementów
 
   useEffect(()=>{
       var footballField = document.getElementById('footballField');
-      footballField.addEventListener('click', boiskoListener) 
+      footballField.addEventListener('contextmenu', boiskoListener,false) 
 
       document.getElementById("bbt1").addEventListener("click",function(){
         changePlayer("bbt1")
@@ -270,7 +280,6 @@ const Hero = () => {
 
   return (
 <div>
-
 <div className="container">
 {/* Listy zwijane */}
 

app/src/index.css

@@ -35,6 +35,7 @@
           position: relative;
           font-size: 7px;
           margin: 5px;
+          margin-top: 5vh ;
           width: 100%;
       }
 
@@ -54,6 +55,7 @@
         }
         
         .main-content {
+    
           display: flex;
           justify-content: space-between;
           align-items: center;
@@ -126,29 +128,6 @@
             border-radius: 50%;
             position: absolute
         }
-        .defender{
-          width: 2em;
-          height: 2em;
-          background-color: red;
-          border-radius: 50%;
-          position: absolute;
-      }
-
-      .striker{
-        width: 2em;
-        height: 2em;
-        background-color: blue;
-        border-radius: 50%;
-        position: absolute;
-    }
-    
-      .goalkeeper{
-        width: 2em;
-        height: 2em;
-        background-color: yellow;
-        border-radius: 50%;
-        position: absolute;
-    }
     
         .reset-button {
             position: relative;