dokonczenie listy

This commit is contained in:
unknown 2024-01-04 22:58:34 +01:00
parent 67917a2ab0
commit c50671e01a
2 changed files with 83 additions and 98 deletions

View File

@ -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){
@ -47,68 +49,20 @@ const Hero = () => {
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 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) {
@ -185,7 +184,6 @@ const Hero = () => {
} 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*/
@ -314,7 +299,6 @@ const Hero = () => {
<a href="#"> Wolej </a>
<a href="#"> Półwolej </a>
<a href="#"> Lob </a>
<a href="#"> Szczupak </a>
<a href="#"> Kopnięcie z góry </a>
<a href="#"> Piętka </a>
@ -363,7 +347,7 @@ const Hero = () => {
</div>
<div className="main-content" id = "field">
<div className="player-list" id = "list">
<div className="player-list" id = "list" >
</div>
<div className="field" id="footballField">

View File

@ -95,8 +95,9 @@
}
.player-list{
background-color: rgb(61, 38, 38);
width: 10vw;
width: 13vw;
height: calc(50vw*68/105);
overflow: scroll;
}
@ -123,7 +124,7 @@
height: 2em;
background-color: black;
border-radius: 50%;
position: absolute;
position: absolute
}
.defender{
width: 2em;