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
|
||||
var tekst = document.createElement('div')
|
||||
tekst.style.fontSize = "10px";
|
||||
tekst.style.fontSize = "12px";
|
||||
tekst.innerHTML = pName;
|
||||
|
||||
// div z pozycja gracza
|
||||
var posytion = document.createElement('div')
|
||||
posytion.style.fontSize = "10px"
|
||||
posytion.innerHTML = "x:" + konwerturX(ball.style.left) + "m " + "y:" + konwetujY(ball.style.top) + "m";
|
||||
posytion.style.fontSize = "12px"
|
||||
posytion.innerHTML = "Lokalizacja: " + konwerturX(ball.style.left) + " m, " + konwetujY(ball.style.top) + " m";
|
||||
player.setAttribute('possition',[konwerturX(ball.style.left),konwetujY(ball.style.top)])
|
||||
//div z przyciskiem usuwającym
|
||||
var btnDelete = document.createElement('button')
|
||||
btnDelete.innerHTML = 'Usun'
|
||||
btnDelete.style.fontSize = "10px"
|
||||
btnDelete.innerHTML = 'Usuń'
|
||||
btnDelete.style.fontSize = "12px"
|
||||
btnDelete.style = 'background-color: #FFB266;color:#000000'
|
||||
btnDelete.addEventListener("click",function(){deletePlayer(ball,player,possition)},false)
|
||||
//dodanie elementów do kafelka
|
||||
@ -219,6 +219,7 @@ const Hero = () => {
|
||||
//var shooterX = konwerturX(ball.style.left)
|
||||
//var shooterY = konwetujY(ball.style.top)
|
||||
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(){
|
||||
ball.style.background = pColor
|
||||
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
|
||||
@ -236,6 +242,7 @@ const Hero = () => {
|
||||
///Dziwny Blad
|
||||
loadPlayers()
|
||||
if (number_of_shooters == 1) {
|
||||
console.log('Wysyłanie wartości: ', bodyPart, technique);
|
||||
// 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(
|
||||
res => res.json()
|
||||
@ -245,7 +252,8 @@ const Hero = () => {
|
||||
console.log(data);
|
||||
// Przenieś tę linię do środka bloku .then(), aby uniknąć błędów
|
||||
let eX = data.response;
|
||||
document.getElementById("ex").innerHTML = "Współczynnik xG: " + eX;
|
||||
document.getElementById("ex").innerHTML = eX;
|
||||
updateXGMeter(eX);
|
||||
}
|
||||
).catch(error => {
|
||||
console.error('Błąd:', error);
|
||||
@ -275,6 +283,7 @@ const Hero = () => {
|
||||
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"){
|
||||
if(number_of_shooters < 1 ){
|
||||
addPlayer(0,ball)
|
||||
@ -283,7 +292,6 @@ const Hero = () => {
|
||||
setNumberOfShooters(number_of_shooters+1)
|
||||
}else{alert("mozesz dodac tylko jednego strzelca")}
|
||||
}else if(active_bbt == "bbt2"){
|
||||
|
||||
if ( number_of_goalkeepers < 1){
|
||||
addPlayer(1,ball)
|
||||
bojo.appendChild(ball)
|
||||
@ -358,7 +366,7 @@ const Hero = () => {
|
||||
<option value = "Volley"> Wolej </option>
|
||||
<option value = "Half Volley"> Półwolej </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 = "Backheel"> Piętka </option>
|
||||
</select>
|
||||
@ -371,18 +379,37 @@ const Hero = () => {
|
||||
<option value = "Free Kick"> Rzut Wolny </option>
|
||||
<option value = "Penalty"> Rzut Karny </option>
|
||||
<option value= "Corner"> Rzut Rozny </option>
|
||||
<option value="rozpoczecie"> Rozpoczęcie </option>
|
||||
</select>
|
||||
</form>
|
||||
<form className="dropdown" id = "possitionList"
|
||||
onChange={event => setPossition(event.target.value)}
|
||||
defaultValue={shooterPossition}>
|
||||
<select className="dropbtn">
|
||||
<option value= "Center Forward" > Napastnik </option>
|
||||
<option value = "Goalkeeper"> Bramkarz </option>
|
||||
<option value = "Left Center Back"> Obrońca </option>
|
||||
<option value = "Right Wing"> Pomocnik </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>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
@ -410,6 +437,36 @@ const Hero = () => {
|
||||
</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">
|
||||
<button className="cho-one_on_one" id = "bbt8">Sam na sam</button>
|
||||
@ -436,13 +493,11 @@ const Hero = () => {
|
||||
<button className="reset-button" onClick={resetField}>Reset</button>
|
||||
<button className="info-button" onClick={sentQuestion}>xG</button>
|
||||
</div>
|
||||
<div>
|
||||
<b id = "ex" className="Ex">
|
||||
|
||||
</b>
|
||||
<div class="xg-meter">
|
||||
<b id="ex" class="xg-value"></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import React from 'react'
|
||||
const Loader = () => {
|
||||
return (
|
||||
<div>Loader</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
@ -4,19 +4,55 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.Ex{
|
||||
display: block; /* Może być inline-block, jeśli preferujesz */
|
||||
margin: 20px auto; /* Centralnie i z marginesem */
|
||||
padding: 10px;
|
||||
background-color: #4CAF50; /* Przykładowy kolor tła */
|
||||
color: white; /* Kolor tekstu */
|
||||
text-align: center;
|
||||
border-radius: 5px; /* Lekko zaokrąglone rogi */
|
||||
font-size: 20px; /* Duża, czytelna czcionka */
|
||||
font-weight: bold; /* Pogrubienie dla lepszej widoczności */
|
||||
width: 50%; /* Dostosuj szerokość zgodnie z potrzebami */
|
||||
/* Dodatkowe style, takie jak cienie, mogą być dodane */
|
||||
}
|
||||
.Ex {
|
||||
display: block; /* Może być inline-block, jeśli preferujesz */
|
||||
margin: 20px auto; /* Centralnie i z marginesem */
|
||||
padding: 10px;
|
||||
background-color: #4CAF50; /* Przykładowy kolor tła */
|
||||
color: white; /* Kolor tekstu */
|
||||
text-align: center;
|
||||
border-radius: 5px; /* Lekko zaokrąglone rogi */
|
||||
font-size: 20px; /* Duża, czytelna czcionka */
|
||||
font-weight: bold; /* Pogrubienie dla lepszej widoczności */
|
||||
width: 100%; /* Poszerzone pole */
|
||||
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 {
|
||||
margin: 50px;
|
||||
display: grid;
|
||||
@ -54,14 +90,15 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
.main-content {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.player{
|
||||
width: inherit;
|
||||
height: 8vh;
|
||||
@ -95,14 +132,15 @@
|
||||
background-color: #f0f0f0; /* Example background color */
|
||||
z-index: 1000; /* Ensure it stays on top of other content */
|
||||
}
|
||||
.player-list{
|
||||
|
||||
.player-list {
|
||||
background-color: rgb(61, 38, 38);
|
||||
width: 13vw;
|
||||
height: calc(50vw*68/105);
|
||||
overflow: scroll;
|
||||
|
||||
|
||||
font-size: 12px; /* Example font size - adjust as needed */
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -238,6 +276,37 @@
|
||||
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 */
|
||||
/* Style the dropdown button */
|
||||
.dropbtn {
|
||||
|
||||
@ -345,5 +345,5 @@ cols <- names(data3_final)[grepl(pattern, names(data3_final))]
|
||||
data_final <- data3_final %>% unnest(all_of(cols))
|
||||
skimr::skim(data_final)
|
||||
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 ##############################
|
||||
|
||||
Loading…
Reference in New Issue
Block a user