dokonczenie listy

app/src/components/Hero.jsx

@@ -3,16 +3,14 @@ import { styles } from "../style";
 import { ComputersCanvas } from "./canvas";
 import { Link } from "react-router-dom";
 
-
 const Hero = () => {
-
   const [isOpen, setIsOpen] = useState(false);
   const [gameMinute, setGameMinute] = useState('');
 
   const toggleDropdown = () => setIsOpen(!isOpen);
   const handleMinuteChange = (e) => setGameMinute(e.target.value);
   
-  
+  const [data,setData] = useState([{}])
   //zmienne globalne
 
   //zmienna mówiąca który przycisk jest aktywny, jest ona wykorzystywana 
@@ -22,10 +20,14 @@ const Hero = () => {
   let number_of_defenders = 0;
   let number_of_strikers = 0;
   let idCounter = 0;
+  var eX = " ";
+  
+  var player_list = new Array;
+
+  // zmienne globalne bedace danymi wejsciowymi do modelu
+
   var shooterX = 0;
   var shooterY = 0;
-  var eX = " ";
-  // zmienne globalne bedace danymi wejsciowymi do modelu
 
 
   function changePlayer(a){
@@ -47,68 +49,20 @@ const Hero = () => {
 
     Leg_bbt = a
   }  
+  function konwersjaWspołrzednych(){
 
-
+  }
-  // function changeTechnique(a){
-
-  //   document.getElementById("bbt4").style.background = "#99FFCC";
-
-  //   technique_bbt = a
-  // }
-
-  // function is_one_on_one(a){
-
-  //   document.getElementById("bbt4").style.background = "#99FFCC";
-
-  //   technique_bbt = a
-  // }
-
-  // function is_aerial_won(a){
-
-  //   document.getElementById("bbt4").style.background = "#99FFCC";
-
-  //   technique_bbt = a
-  // }
-
-  // function is_first_time(a){
-
-  //   document.getElementById("bbt4").style.background = "#99FFCC";
-
-  //   technique_bbt = a
-  // }
-
-  // function is_redirect(a){
-
-  //   document.getElementById("bbt4").style.background = "#99FFCC";
-
-  //   technique_bbt = a
-  // }
-
-  // function is_kick_off(a){
-
-  //   document.getElementById("bbt4").style.background = "#99FFCC";
-
-  //   technique_bbt = a
-  // }
-
-  // function is_follows_dribble(a){
-
-  //   document.getElementById("bbt4").style.background = "#99FFCC";
-
-  //   technique_bbt = a
-  // }
-
-
-  
   // 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);
@@ -123,52 +77,97 @@ const Hero = () => {
         footballField.removeChild(ball)
       })
 
+      players.forEach(function(element) {
+        list.removeChild(element);
+      })
       number_of_defenders = 0
       number_of_strikers = 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)
+  }
   function addPlayer(x,y, possition, ball){ 
-    
-    
     //Zmiana stylu w zaleznosci czy zawodnik jest obronca/napastnikiem iyp.
     var pName = "Strzelec"
-    var pColor = "white"
+    //kolor kropki
+    var pColor = ball.style.background
+    // kolor tła kafelka
     var bColor = "rgb(16, 46, 29)"
     if(possition == 1){
       var pName = "Bramkarz"
-      var pColor = "white"
+
       var bColor = "rgb(16, 46, 29)"
     }else if(possition == 2){
       var pName = "Napastnik"
-      var pColor = "white"
+
-      var bColor = "rgb(16, 46, 29)"
+      var bColor = "rgb(4, 46, 29)"
     }else if (possition ==3){
       var pName = "Obrońca"
-      var pColor = "white"
-      var bColor = "rgb(16, 46, 29)"
-    }
      
+      var bColor = "rgb(10, 46, 29)"
+    }
     var player = document.createElement('div');
     player.className = 'player';
     player.style.width = "inherit"
-
     var list = document.getElementById("list")
     
+    // div z nazwa gracza
     var tekst = document.createElement('div')
     tekst.style.fontSize = "10px";
     tekst.innerHTML = pName;
+    
+    // div z pozycja gracza
+    var posytion = document.createElement('div')
+    posytion.style.fontSize = "10px"
+    posytion.innerHTML = ball.style.left + ball.style.top;
+    
+    //div z przyciskiem usuwającym
+    var btnDelete = document.createElement('button')
+    btnDelete.innerHTML = 'Usun'
+    btnDelete.style.fontSize = "10px"
+    btnDelete.style = 'background-color: #FFB266;color:#000000'
+    btnDelete.addEventListener("click",function(){deletePlayer(ball,player,possition)},false)
+    //dodanie elementów do kafelka
     player.appendChild(tekst)
+    player.appendChild(posytion)
+    player.appendChild(btnDelete)
     list.appendChild(player)
 
+    player.addEventListener("mouseover",function(){
+      ball.style.background = "#42f5d7"
+    })
+    player.addEventListener("mouseout",function(){
+      ball.style.background = pColor;
+    })
+
+    ball.addEventListener("mouseover",function(){
+      player.style.background = "#bf8e8e"
+      tekst.style.color = "black"
+      posytion.style.color = "black"
+    })
+    ball.addEventListener("mouseout",function(){
+      player.style.background = pColor;
+      tekst.style.color = "white"
+      posytion.style.color = "white"
+    })
+    ball.addEventListener("mousedown", function(){
+      ball.style.background = "orange"
+    })
+
+
   }
+
+
   // Wysłanie zapytania do serwera
-  const [data,setData] = useState([{}])
+
   function sentQuestion() {
     var ball = document.querySelector('.football');
       if (ball) {
@@ -185,7 +184,6 @@ const Hero = () => {
       } else {
           alert('Piłka nie jest obecnie na boisku.');
       }  
-      
   }
 
   /* Funkcja dodająca listener do boiska*/
@@ -205,7 +203,6 @@ const Hero = () => {
             ball.className = 'football';
             ball.style.left = x + 'px';
             ball.style.top = y + 'px';
-            ball.id = "ball_" + new Date().getTime().toString()
             addPlayer(shooterX,shooterY,0,ball)
             footballField.appendChild(ball);
         } else {
@@ -220,7 +217,7 @@ const Hero = () => {
           ball.className = 'goalkeeper';
           ball.style.left = x + 'px';
           ball.style.top = y + 'px';
-          addPlayer(shooterX,shooterY,1,ball.id)
+          addPlayer(shooterX,shooterY,1,ball)
           footballField.appendChild(ball);
         } else {
           alert('Możesz dodać tylko jednego bramkarza!');
@@ -234,7 +231,7 @@ const Hero = () => {
         ball.style.left = x + 'px';
         ball.style.top = y + 'px';
         footballField.appendChild(ball);
-        addPlayer(shooterX,shooterY,3,ball.id)
+        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
@@ -244,7 +241,7 @@ const Hero = () => {
         ball.style.left = x + 'px';
         ball.style.top = y + 'px';
         footballField.appendChild(ball);
-        addPlayer(shooterX,shooterY,2,ball.id)
+        addPlayer(shooterX,shooterY,2,ball)
         number_of_strikers = number_of_strikers + 1 
       }else{alert("zbyt duza liczba obroncow")}}
 
@@ -267,18 +264,6 @@ const Hero = () => {
       document.getElementById("bbt4").addEventListener("click",function(){
         changePlayer("bbt4")
       },false)
-      // document.getElementById("bbt5").addEventListener("click",function(){
-      //   changeLeg("bbt5")
-      // },false)
-      // document.getElementById("bbt6").addEventListener("click",function(){
-      //   changeLeg("bbt6")
-      // },false)
-      // document.getElementById("bbt7").addEventListener("click",function(){
-      //   changeLeg("bbt7")
-      // },false)
-      // document.getElementById("bbt8").addEventListener("click",function(){
-      //   changeLeg("bbt8")
-      // },false)
     },[]);
 
   /*zwracany komponent zawierajacy boisko*/
@@ -314,7 +299,6 @@ const Hero = () => {
                     <a href="#"> Wolej </a>
                     <a href="#"> Półwolej </a>
                     <a href="#"> Lob </a>     
-      
                     <a href="#"> Szczupak </a>
                     <a href="#"> Kopnięcie z góry </a>
                     <a href="#"> Piętka </a>
@@ -363,7 +347,7 @@ const Hero = () => {
           </div>
       
       <div className="main-content" id = "field">   
-          <div className="player-list" id = "list">
+          <div className="player-list" id = "list" >
             
           </div>
           <div className="field" id="footballField">   

app/src/index.css

@@ -95,8 +95,9 @@
         }
         .player-list{
           background-color: rgb(61, 38, 38);
-          width: 10vw;
+          width: 13vw;
           height: calc(50vw*68/105);
+          overflow: scroll;
 
 
         }
@@ -123,7 +124,7 @@
             height: 2em;
             background-color: black;
             border-radius: 50%;
-            position: absolute;
+            position: absolute
         }
         .defender{
           width: 2em;