s478993/fantastyczne_gole
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

dokonczenie listy, zmiana sposobu dodawania zawodnikow z pozycji: absolut na relative, naprawa kilku mniejszych bledow

Browse Source
This commit is contained in:
unknown 2024-01-05 01:08:50 +01:00
parent c50671e01a
commit bdafb95511
2 changed files with 100 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
app/src/components/Hero.jsx
View File

@ -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 */}

25
app/src/index.css
View File

@ -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;