dodanie nowych parametrów do apki plus edycja UI
This commit is contained in:
parent
cd5efc6921
commit
f93d8c5c67
BIN
app/src/assets/bramka.jpeg
Normal file
BIN
app/src/assets/bramka.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 87 KiB |
@ -148,18 +148,18 @@ const Hero = () => {
|
|||||||
|
|
||||||
// div z nazwa gracza
|
// div z nazwa gracza
|
||||||
var tekst = document.createElement('div')
|
var tekst = document.createElement('div')
|
||||||
tekst.style.fontSize = "10px";
|
tekst.style.fontSize = "12px";
|
||||||
tekst.innerHTML = pName;
|
tekst.innerHTML = pName;
|
||||||
|
|
||||||
// div z pozycja gracza
|
// div z pozycja gracza
|
||||||
var posytion = document.createElement('div')
|
var posytion = document.createElement('div')
|
||||||
posytion.style.fontSize = "10px"
|
posytion.style.fontSize = "12px"
|
||||||
posytion.innerHTML = "x:" + konwerturX(ball.style.left) + "m " + "y:" + konwetujY(ball.style.top) + "m";
|
posytion.innerHTML = "Lokalizacja: " + konwerturX(ball.style.left) + " m, " + konwetujY(ball.style.top) + " m";
|
||||||
player.setAttribute('possition',[konwerturX(ball.style.left),konwetujY(ball.style.top)])
|
player.setAttribute('possition',[konwerturX(ball.style.left),konwetujY(ball.style.top)])
|
||||||
//div z przyciskiem usuwającym
|
//div z przyciskiem usuwającym
|
||||||
var btnDelete = document.createElement('button')
|
var btnDelete = document.createElement('button')
|
||||||
btnDelete.innerHTML = 'Usun'
|
btnDelete.innerHTML = 'Usuń'
|
||||||
btnDelete.style.fontSize = "10px"
|
btnDelete.style.fontSize = "12px"
|
||||||
btnDelete.style = 'background-color: #FFB266;color:#000000'
|
btnDelete.style = 'background-color: #FFB266;color:#000000'
|
||||||
btnDelete.addEventListener("click",function(){deletePlayer(ball,player,possition)},false)
|
btnDelete.addEventListener("click",function(){deletePlayer(ball,player,possition)},false)
|
||||||
//dodanie elementów do kafelka
|
//dodanie elementów do kafelka
|
||||||
@ -219,6 +219,7 @@ const Hero = () => {
|
|||||||
//var shooterX = konwerturX(ball.style.left)
|
//var shooterX = konwerturX(ball.style.left)
|
||||||
//var shooterY = konwetujY(ball.style.top)
|
//var shooterY = konwetujY(ball.style.top)
|
||||||
posytion.innerHTML = "x:" + konwerturX(ball.style.left) + "m " + "y:" + konwetujY(ball.style.top) + "m";
|
posytion.innerHTML = "x:" + konwerturX(ball.style.left) + "m " + "y:" + konwetujY(ball.style.top) + "m";
|
||||||
|
//player.setAttribute('possition',[konwerturX(ball.style.left),konwetujY(ball.style.top)]);
|
||||||
bojo.addEventListener("mouseup", function(){
|
bojo.addEventListener("mouseup", function(){
|
||||||
ball.style.background = pColor
|
ball.style.background = pColor
|
||||||
bojo.removeEventListener("mousemove", whileMove)
|
bojo.removeEventListener("mousemove", whileMove)
|
||||||
@ -229,6 +230,11 @@ const Hero = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateXGMeter(xgValue) {
|
||||||
|
var xgMeter = document.querySelector('.xg-meter');
|
||||||
|
var greenIntensity = xgValue * 100; // Zakładając, że xgValue jest między 0 a 1
|
||||||
|
//xgMeter.style.background = `linear-gradient(to top, #006400 ${greenIntensity}%, #90EE90)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// // Wyłanie zapytania do serwera
|
// // Wyłanie zapytania do serwera
|
||||||
@ -236,6 +242,7 @@ const Hero = () => {
|
|||||||
///Dziwny Blad
|
///Dziwny Blad
|
||||||
loadPlayers()
|
loadPlayers()
|
||||||
if (number_of_shooters == 1) {
|
if (number_of_shooters == 1) {
|
||||||
|
console.log('Wysyłanie wartości: ', bodyPart, technique);
|
||||||
// Użyj backticksów zamiast zwykłych cudzysłowów
|
// Użyj backticksów zamiast zwykłych cudzysłowów
|
||||||
fetch(`http://127.0.0.1:5000/get_model?shooter=${shooter}&goalkeeper=${goalkeeper}&defenders=${defenders}&strickers=${stricers}&bodyPart=${bodyPart}&technique=${technique}&actionType=${actionType}&shooterPossition=${shooterPossition}`).then(
|
fetch(`http://127.0.0.1:5000/get_model?shooter=${shooter}&goalkeeper=${goalkeeper}&defenders=${defenders}&strickers=${stricers}&bodyPart=${bodyPart}&technique=${technique}&actionType=${actionType}&shooterPossition=${shooterPossition}`).then(
|
||||||
res => res.json()
|
res => res.json()
|
||||||
@ -245,7 +252,8 @@ const Hero = () => {
|
|||||||
console.log(data);
|
console.log(data);
|
||||||
// Przenieś tę linię do środka bloku .then(), aby uniknąć błędów
|
// Przenieś tę linię do środka bloku .then(), aby uniknąć błędów
|
||||||
let eX = data.response;
|
let eX = data.response;
|
||||||
document.getElementById("ex").innerHTML = "Współczynnik xG: " + eX;
|
document.getElementById("ex").innerHTML = eX;
|
||||||
|
updateXGMeter(eX);
|
||||||
}
|
}
|
||||||
).catch(error => {
|
).catch(error => {
|
||||||
console.error('Błąd:', error);
|
console.error('Błąd:', error);
|
||||||
@ -275,6 +283,7 @@ const Hero = () => {
|
|||||||
ball.style.top = y + "%"
|
ball.style.top = y + "%"
|
||||||
|
|
||||||
//dodanie zawodnika do listy oraz punktu do mapy w zaleznosci od aktywnosci przycisku 1,2,3 lub 4
|
//dodanie zawodnika do listy oraz punktu do mapy w zaleznosci od aktywnosci przycisku 1,2,3 lub 4
|
||||||
|
|
||||||
if(active_bbt=="bbt1"){
|
if(active_bbt=="bbt1"){
|
||||||
if(number_of_shooters < 1 ){
|
if(number_of_shooters < 1 ){
|
||||||
addPlayer(0,ball)
|
addPlayer(0,ball)
|
||||||
@ -283,7 +292,6 @@ const Hero = () => {
|
|||||||
setNumberOfShooters(number_of_shooters+1)
|
setNumberOfShooters(number_of_shooters+1)
|
||||||
}else{alert("mozesz dodac tylko jednego strzelca")}
|
}else{alert("mozesz dodac tylko jednego strzelca")}
|
||||||
}else if(active_bbt == "bbt2"){
|
}else if(active_bbt == "bbt2"){
|
||||||
|
|
||||||
if ( number_of_goalkeepers < 1){
|
if ( number_of_goalkeepers < 1){
|
||||||
addPlayer(1,ball)
|
addPlayer(1,ball)
|
||||||
bojo.appendChild(ball)
|
bojo.appendChild(ball)
|
||||||
@ -358,7 +366,7 @@ const Hero = () => {
|
|||||||
<option value = "Volley"> Wolej </option>
|
<option value = "Volley"> Wolej </option>
|
||||||
<option value = "Half Volley"> Półwolej </option>
|
<option value = "Half Volley"> Półwolej </option>
|
||||||
<option value = "Lob"> Lob </option>
|
<option value = "Lob"> Lob </option>
|
||||||
<option value = "Diving Head"> Szczupak </option>
|
<option value = "Diving Header"> Szczupak </option>
|
||||||
<option value = "Overhead Kick"> Kopnięcie z góry </option>
|
<option value = "Overhead Kick"> Kopnięcie z góry </option>
|
||||||
<option value = "Backheel"> Piętka </option>
|
<option value = "Backheel"> Piętka </option>
|
||||||
</select>
|
</select>
|
||||||
@ -371,18 +379,37 @@ const Hero = () => {
|
|||||||
<option value = "Free Kick"> Rzut Wolny </option>
|
<option value = "Free Kick"> Rzut Wolny </option>
|
||||||
<option value = "Penalty"> Rzut Karny </option>
|
<option value = "Penalty"> Rzut Karny </option>
|
||||||
<option value= "Corner"> Rzut Rozny </option>
|
<option value= "Corner"> Rzut Rozny </option>
|
||||||
<option value="rozpoczecie"> Rozpoczęcie </option>
|
|
||||||
</select>
|
</select>
|
||||||
</form>
|
</form>
|
||||||
<form className="dropdown" id = "possitionList"
|
<form className="dropdown" id = "possitionList"
|
||||||
onChange={event => setPossition(event.target.value)}
|
onChange={event => setPossition(event.target.value)}
|
||||||
defaultValue={shooterPossition}>
|
defaultValue={shooterPossition}>
|
||||||
<select className="dropbtn">
|
<select className="dropbtn">
|
||||||
<option value= "Center Forward" > Napastnik </option>
|
<option value="Right Center Forward">Prawy Środkowy Napastnik</option>
|
||||||
|
<option value="Left Center Forward">Lewy Środkowy Napastnik</option>
|
||||||
|
<option value="Secondary Striker">Drugi Napastnik</option>
|
||||||
|
<option value="Center Forward">Środkowy Napastnik</option>
|
||||||
|
<option value="Center Midfield">Środkowy Pomocnik</option>
|
||||||
|
<option value="Left Center Midfield">Lewy Środkowy Pomocnik</option>
|
||||||
|
<option value="Right Center Midfield">Prawy Środkowy Pomocnik</option>
|
||||||
|
<option value="Left Midfield">Lewy Pomocnik</option>
|
||||||
|
<option value="Center Attacking Midfield">Środkowy Ofensywny Pomocnik</option>
|
||||||
|
<option value="Left Defensive Midfield">Lewy Defensywny Pomocnik</option>
|
||||||
|
<option value="Left Attacking Midfield">Lewy Ofensywny Pomocnik</option>
|
||||||
|
<option value="Right Attacking Midfield">Prawy Ofensywny Pomocnik</option>
|
||||||
|
<option value="Right Defensive Midfield">Prawy Defensywny Pomocnik</option>
|
||||||
|
<option value="Center Defensive Midfield">Środkowy Defensywny Pomocnik</option>
|
||||||
|
<option value="Right Midfield">Prawy Pomocnik</option>
|
||||||
|
<option value="Left Wing Back">Lewy Pomocnik Skrzydłowy</option>
|
||||||
|
<option value="Left Wing">Lewe Skrzydło</option>
|
||||||
|
<option value="Right Wing">Prawe Skrzydło</option>
|
||||||
|
<option value="Right Wing Back">Prawy Pomocnik Skrzydłowy</option>
|
||||||
|
<option value="Center Back">Środkowy Obrońca</option>
|
||||||
|
<option value="Left Center Back">Lewy Środkowy Obrońca</option>
|
||||||
|
<option value="Right Center Back">Prawy Środkowy Obrońca</option>
|
||||||
|
<option value="Right Back">Prawy Obrońca</option>
|
||||||
|
<option value="Left Back">Lewy Obrońca</option>
|
||||||
<option value="Goalkeeper">Bramkarz</option>
|
<option value="Goalkeeper">Bramkarz</option>
|
||||||
<option value = "Left Center Back"> Obrońca </option>
|
|
||||||
<option value = "Right Wing"> Pomocnik </option>
|
|
||||||
|
|
||||||
</select>
|
</select>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@ -410,6 +437,36 @@ const Hero = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="additional-parameters">
|
||||||
|
<h3>Parametry strzału</h3>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="firstShot" />
|
||||||
|
Pierwszy w meczu
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="oneOnOne" />
|
||||||
|
Akcja sam na sam
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="afterAirDuel" />
|
||||||
|
Po pojedynku powietrznym
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="openGoal" />
|
||||||
|
Na pustą bramkę
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="afterDribbling" />
|
||||||
|
Poprzedzony dryblingiem
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="ricochet" />
|
||||||
|
Rykoszet
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* <div className="ChoosingPlayer">
|
{/* <div className="ChoosingPlayer">
|
||||||
<button className="cho-one_on_one" id = "bbt8">Sam na sam</button>
|
<button className="cho-one_on_one" id = "bbt8">Sam na sam</button>
|
||||||
@ -436,10 +493,8 @@ const Hero = () => {
|
|||||||
<button className="reset-button" onClick={resetField}>Reset</button>
|
<button className="reset-button" onClick={resetField}>Reset</button>
|
||||||
<button className="info-button" onClick={sentQuestion}>xG</button>
|
<button className="info-button" onClick={sentQuestion}>xG</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="xg-meter">
|
||||||
<b id = "ex" className="Ex">
|
<b id="ex" class="xg-value"></b>
|
||||||
|
|
||||||
</b>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,6 +3,7 @@ import React from 'react'
|
|||||||
const Loader = () => {
|
const Loader = () => {
|
||||||
return (
|
return (
|
||||||
<div>Loader</div>
|
<div>Loader</div>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Binary file not shown.
@ -14,9 +14,45 @@
|
|||||||
border-radius: 5px; /* Lekko zaokrąglone rogi */
|
border-radius: 5px; /* Lekko zaokrąglone rogi */
|
||||||
font-size: 20px; /* Duża, czytelna czcionka */
|
font-size: 20px; /* Duża, czytelna czcionka */
|
||||||
font-weight: bold; /* Pogrubienie dla lepszej widoczności */
|
font-weight: bold; /* Pogrubienie dla lepszej widoczności */
|
||||||
width: 50%; /* Dostosuj szerokość zgodnie z potrzebami */
|
width: 100%; /* Poszerzone pole */
|
||||||
/* Dodatkowe style, takie jak cienie, mogą być dodane */
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Cień dla dodatkowej głębi */
|
||||||
|
/* Opcjonalnie, można dodać gradient tła dla większego efektu */
|
||||||
|
background-image: linear-gradient(to right, #32CD32 , #4CAF50);
|
||||||
|
transition: transform 0.3s ease; /* Delikatna animacja */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Ex:hover {
|
||||||
|
transform: scale(1.10); /* Efekt powiększenia przy najechaniu */
|
||||||
|
}
|
||||||
|
|
||||||
|
.xg-meter {
|
||||||
|
width: 200px;
|
||||||
|
height: 100px; /* Zmiana wysokości, aby pasowała do proporcji bramki */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: url('assets/bramka.jpeg') no-repeat center center; /* Tło z obrazem bramki */
|
||||||
|
background-size: cover; /* Dopasowanie obrazu do rozmiaru elementu */
|
||||||
|
border-radius: 10px; /* Opcjonalnie, dla zaokrąglonych rogów */
|
||||||
|
}
|
||||||
|
|
||||||
|
.xg-value {
|
||||||
|
display: block;
|
||||||
|
background: rgba(0, 0, 0, 0.5); /* Półprzezroczyste tło dla lepszej czytelności tekstu */
|
||||||
|
padding: 5px 10px; /* Dodanie odstępu */
|
||||||
|
border-radius: 5px; /* Zaokrąglone rogi dla tekstu */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Funkcja JavaScript będzie sterować stopniem gradientu */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 50px;
|
margin: 50px;
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -62,6 +98,7 @@
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.player{
|
.player{
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: 8vh;
|
height: 8vh;
|
||||||
@ -95,14 +132,15 @@
|
|||||||
background-color: #f0f0f0; /* Example background color */
|
background-color: #f0f0f0; /* Example background color */
|
||||||
z-index: 1000; /* Ensure it stays on top of other content */
|
z-index: 1000; /* Ensure it stays on top of other content */
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-list {
|
.player-list {
|
||||||
background-color: rgb(61, 38, 38);
|
background-color: rgb(61, 38, 38);
|
||||||
width: 13vw;
|
width: 13vw;
|
||||||
height: calc(50vw*68/105);
|
height: calc(50vw*68/105);
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
|
font-size: 12px; /* Example font size - adjust as needed */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-bar {
|
.top-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -238,6 +276,37 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.additional-parameters {
|
||||||
|
position: fixed; /* Or absolute, depending on layout */
|
||||||
|
right: 0;
|
||||||
|
top: 30%; /* Adjusted to a higher position */
|
||||||
|
width: 250px; /* Increased width */
|
||||||
|
background-color: #000000;
|
||||||
|
padding: 15px; /* Increased padding */
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||||
|
z-index: 100; /* To ensure it stays on top */
|
||||||
|
color: #ffffff; /* Optional: change text color for better visibility on dark background */
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-parameters h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 18px; /* Increased font size for heading */
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-parameters label {
|
||||||
|
display: flex; /* Updated to flex for better alignment */
|
||||||
|
align-items: center; /* Aligns checkbox and label text vertically */
|
||||||
|
margin-bottom: 10px; /* Increased spacing between checkboxes */
|
||||||
|
font-size: 16px; /* Increased font size for labels */
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-parameters input[type="checkbox"] {
|
||||||
|
margin-right: 10px; /* Adds spacing between checkbox and label text */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* DROPDOWNS */
|
/* DROPDOWNS */
|
||||||
/* Style the dropdown button */
|
/* Style the dropdown button */
|
||||||
.dropbtn {
|
.dropbtn {
|
||||||
|
@ -345,5 +345,5 @@ cols <- names(data3_final)[grepl(pattern, names(data3_final))]
|
|||||||
data_final <- data3_final %>% unnest(all_of(cols))
|
data_final <- data3_final %>% unnest(all_of(cols))
|
||||||
skimr::skim(data_final)
|
skimr::skim(data_final)
|
||||||
write_csv(data_final, file = "data/final_data.csv")
|
write_csv(data_final, file = "data/final_data.csv")
|
||||||
df_test <- read.csv("data/final_data.csv", nrows = 1000)
|
#df_test <- read.csv("data/final_data.csv", nrows = 10000)
|
||||||
##################### The fourth dataset ##############################
|
##################### The fourth dataset ##############################
|
||||||
|
Loading…
Reference in New Issue
Block a user