diff --git a/app/src/components/Hero.jsx b/app/src/components/Hero.jsx
index 894f7c9..c285fd9 100644
--- a/app/src/components/Hero.jsx
+++ b/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){
@@ -46,69 +48,21 @@ const Hero = () => {
document.getElementById(a).style.background = "#00CC66";
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 addPlayer(x,y, possition, ball){
-
-
+ 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) {
@@ -184,8 +183,7 @@ const Hero = () => {
document.getElementById("ex").innerHTML = "Współczynnik xG: "+ eX
} 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*/
@@ -313,8 +298,7 @@ const Hero = () => {
Zwykły
Wolej
Półwolej
- Lob
-
+ Lob
Szczupak
Kopnięcie z góry
Piętka
@@ -363,7 +347,7 @@ const Hero = () => {