dokonczenie listy
This commit is contained in:
parent
67917a2ab0
commit
c50671e01a
|
|
@ -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 = () => {
|
|||
<a href="#"> Zwykły </a>
|
||||
<a href="#"> Wolej </a>
|
||||
<a href="#"> Półwolej </a>
|
||||
<a href="#"> Lob </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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue