dodanie funkcji zczytyjacej pozycje zawodnikow / bez podpiecia do serwera

app/src/components/Hero.jsx

@@ -4,6 +4,7 @@ import { ComputersCanvas } from "./canvas";
 import { Link } from "react-router-dom";
 
 const Hero = () => {
+  
   const [isOpen, setIsOpen] = useState(false);
   const [gameMinute, setGameMinute] = useState('');
 
@@ -28,6 +29,17 @@ const Hero = () => {
   var shooterX = 12;
   var shooterY = 12;
 
+  var shooter = [0,0]
+  var goalkeeper = [0,0]
+  
+  var stricers = new Array;
+  var defenders = new Array;
+
+  var bodyPart = "";
+  var technique = "";
+  var actionType = "";
+  var possition = "";
+
 //zamiana procentowych pozycji na kartezyjskie
   function konwerturX(x){
     var fX = parseFloat(x.slice(0,-1))
@@ -99,11 +111,38 @@ const Hero = () => {
     }
   }
   
+  // funkcja zsczytuje pozycje zawodnikow przed wyslaniem zapytania do serwera 
+  function loadPlayers(){
+    var players = document.querySelectorAll('.player')
+
+    // wyczyszczenie list zawierajacych lokalizacje zawodnikow 
+    defenders = []
+    stricers = []
+    shooter = null
+    goalkeeper = null
+    //zebranie iformacji o kazdym z zawodnikow
+
+    players.forEach(function(player){
+      var type = player.getAttribute('type')
+      
+      if(type == 0){
+        shooter = player.getAttribute('possition')
+      }else if(type == 1 ){
+        goalkeeper = player.getAttribute('possition')
+      }else if(type == 2){
+        defenders.push(player.getAttribute('possition'))
+      }else {
+        stricers.push(player.getAttribute('possition'))
+      }
+    
+    })
+  }
   function addPlayer(possition, ball){ 
     //Zmiana stylu w zaleznosci czy zawodnik jest obronca/napastnikiem iyp.
     var pName = "Strzelec"
     //kolor kropki
     // kolor tła kafelka
+
     var pColor = "#fc0303"
     if(possition == 1){
       var pName = "Bramkarz"
@@ -115,9 +154,11 @@ const Hero = () => {
       var pName = "Napastnik"
       var pColor = "#fc6703"
     }
+
     var player = document.createElement('div');
     player.className = 'player';
     player.style.width = "inherit"
+    player.setAttribute("type",possition) 
     var list = document.getElementById("list")
     
     // div z nazwa gracza
@@ -129,7 +170,7 @@ const Hero = () => {
     var posytion = document.createElement('div')
     posytion.style.fontSize = "10px"
     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)])
     //div z przyciskiem usuwającym
     var btnDelete = document.createElement('button')
     btnDelete.innerHTML = 'Usun'
@@ -193,6 +234,7 @@ const Hero = () => {
         //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)]);
       bojo.addEventListener("mouseup", function(){
           ball.style.background = pColor
           bojo.removeEventListener("mousemove", whileMove)
@@ -205,6 +247,9 @@ const Hero = () => {
 
   // // Wyłanie zapytania do serwera
   function sentQuestion() {
+   
+    loadPlayers()
+    
     var ball = document.querySelector('.football');
 
     if (ball) {
@@ -213,7 +258,7 @@ const Hero = () => {
       shooterX = konwerturX(ball.style.left)
       shooterY = konwetujY(ball.style.top)
       console.log('Wysyłanie wartości: ', shooterX, shooterY);
-      fetch(`http://127.0.0.1:5000/get_model?x=${shooterX}&y=${shooterY}`).then(
+      fetch(`http://127.0.0.1:5000/get_model?x=${shooter[0]}&y=${shooter[1]}`).then(
         res => res.json()
       ).then(
         data => {