dokonczenie listy, zmiana sposobu dodawania zawodnikow z pozycji: absolut na relative, naprawa kilku mniejszych bledow
This commit is contained in:
parent
c50671e01a
commit
bdafb95511
@ -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 bColor = "rgb(16, 46, 29)"
|
||||
var pColor = "#03e7fc"
|
||||
}else if(possition == 2){
|
||||
var pName = "Napastnik"
|
||||
|
||||
var bColor = "rgb(4, 46, 29)"
|
||||
var pColor = "#0324fc"
|
||||
}else if (possition ==3){
|
||||
var pName = "Obrońca"
|
||||
|
||||
var bColor = "rgb(10, 46, 29)"
|
||||
var pColor = "#fc6703"
|
||||
}
|
||||
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;
|
||||
var y = event.clientY - footballField.getBoundingClientRect().top;
|
||||
// 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;
|
||||
|
||||
shooterX = (x * 105)/600
|
||||
shooterY = ((400 - y) * 69)/ 400
|
||||
// Przypadek kiedy zaznaczamy strzelca
|
||||
if(active_bbt == "bbt1"){
|
||||
let existingBall = document.querySelector('.football');
|
||||
|
||||
if (!existingBall) {
|
||||
var ball = document.createElement('div');
|
||||
ball.className = 'football';
|
||||
ball.style.left = x + 'px';
|
||||
ball.style.top = y + 'px';
|
||||
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) {
|
||||
var ball = document.createElement('div');
|
||||
ball.className = 'goalkeeper';
|
||||
ball.style.left = x + 'px';
|
||||
ball.style.top = y + 'px';
|
||||
addPlayer(shooterX,shooterY,1,ball)
|
||||
footballField.appendChild(ball);
|
||||
} 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');
|
||||
ball.className = 'defender';
|
||||
ball.style.left = x + 'px';
|
||||
ball.style.top = y + 'px';
|
||||
footballField.appendChild(ball);
|
||||
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
|
||||
var ball = document.createElement('div');
|
||||
ball.className = "football";
|
||||
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){
|
||||
addPlayer(0,ball)
|
||||
bojo.appendChild(ball)
|
||||
ball.style.background = "#fc0303"
|
||||
}else{alert("mozesz dodac tylko jednego strzelca")}
|
||||
}else if(active_bbt == "bbt2"){
|
||||
|
||||
if ( number_of_goalkeepers < 1){
|
||||
addPlayer(1,ball)
|
||||
bojo.appendChild(ball)
|
||||
ball.style.background = "#03e7fc"
|
||||
number_of_goalkeepers = number_of_goalkeepers + 1
|
||||
}else{alert("mozesz dodac tylko jednego bramkarza")}
|
||||
}else if(active_bbt == "bbt3"){
|
||||
if(number_of_defenders <= 10){
|
||||
addPlayer(2,ball);
|
||||
number_of_defenders = number_of_defenders +1;
|
||||
bojo.appendChild(ball)
|
||||
ball.style.background = "#0324fc"
|
||||
}else{alert("maksymalna liczba obroncow")}
|
||||
}else if(active_bbt == "bbt4"){
|
||||
if(number_of_strikers <= 10){
|
||||
var ball = document.createElement('div');
|
||||
ball.className = 'striker';
|
||||
ball.style.left = x + 'px';
|
||||
ball.style.top = y + 'px';
|
||||
footballField.appendChild(ball);
|
||||
addPlayer(shooterX,shooterY,2,ball)
|
||||
number_of_strikers = number_of_strikers + 1
|
||||
}else{alert("zbyt duza liczba obroncow")}}
|
||||
addPlayer(3,ball);
|
||||
number_of_strikers = number_of_strikers + 1;
|
||||
bojo.appendChild(ball)
|
||||
ball.style.background = "#fc6703"
|
||||
}else{alert("maksymalna liczba napastnikow")}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// 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 */}
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user