diff --git a/app/src/components/Hero.jsx b/app/src/components/Hero.jsx index 87089ac..1912757 100644 --- a/app/src/components/Hero.jsx +++ b/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"){