dodanie menu

This commit is contained in:
unknown 2023-12-17 17:20:13 +01:00
parent c212b87d18
commit 4bce1d825e
6 changed files with 162 additions and 49 deletions

8
app/package-lock.json generated
View File

@ -33,7 +33,7 @@
"post": "^0.0.1",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.5",
"vite": "^5.0.8"
"vite": "^5.0.10"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@ -5290,9 +5290,9 @@
}
},
"node_modules/vite": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.8.tgz",
"integrity": "sha512-jYMALd8aeqR3yS9xlHd0OzQJndS9fH5ylVgWdB+pxTwxLKdO1pgC5Dlb398BUxpfaBxa4M9oT7j1g503Gaj5IQ==",
"version": "5.0.10",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
"integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==",
"dev": true,
"dependencies": {
"esbuild": "^0.19.3",

View File

@ -36,6 +36,6 @@
"post": "^0.0.1",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.5",
"vite": "^5.0.8"
"vite": "^5.0.10"
}
}

View File

@ -7,15 +7,52 @@ import { logo, menu, close } from "../assets";
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. 0 - strzelec , 1 - obranca , 2 - napasnik. zmienna przez aktywacje przycskówk bb1,bb2 i bb3
let active_bbt = "bbt1";
let number_of_defenders = 0;
let number_of_strikers = 0;
// zmienne globalne bedace danymi wejsciowymi do modelu
function changePlayer(a){
document.getElementById("bbt1").style.background = "white";
document.getElementById("bbt2").style.background = "white";
document.getElementById("bbt3").style.background = "white";
document.getElementById(a).style.background = "grey";
active_bbt = a
}
// Reset Boiska
function resetField() {
var footballField = document.getElementById('footballField');
var footballs = document.querySelectorAll('.football');
var strikers = document.querySelectorAll('.striker')
var defenders = document.querySelectorAll('.defender')
footballs.forEach(function (ball) {
footballField.removeChild(ball);
});
strikers.forEach(function(ball){
footballField.removeChild(ball)
})
defenders.forEach(function(ball){
footballField.removeChild(ball)
})
number_of_defenders = 0
number_of_strikers = 0
}
// Wysłanie zapytania do serwera
function sentQuestion() {
@ -39,41 +76,67 @@ const Hero = () => {
/* Funkcja dodająca listener do boiska*/
function boiskoListener(){
var x = event.clientX - footballField.getBoundingClientRect().left;
var y = event.clientY - footballField.getBoundingClientRect().top;
var existingBall = document.querySelector('.football');
if (!existingBall) {
var x = event.clientX - footballField.getBoundingClientRect().left;
var y = event.clientY - footballField.getBoundingClientRect().top;
// Przypadek kiedy zaznaczamy strzelca
if(active_bbt == "bbt1"){
var existingBall = document.querySelector('.football');
if (!existingBall) {
var ball = document.createElement('div');
ball.className = 'football';
ball.style.left = x + 'px';
ball.style.top = y + 'px';
footballField.appendChild(ball);
} else {
alert('Możesz dodać tylko jedną piłkę!');
}
// Przypadek kiedy zaznaczamy obronce
}
else if(active_bbt == "bbt2"){
if(number_of_defenders <= 6){
var ball = document.createElement('div');
ball.className = 'football';
ball.className = 'defender';
ball.style.left = x + 'px';
ball.style.top = y + 'px';
footballField.appendChild(ball);
} else {
alert('Możesz dodać tylko jedną piłkę!');
}
number_of_defenders = number_of_defenders + 1} else {alert("zbyt duza liczba obronców")}
}else{
// Przypadek kiedy zaznaczamy napastnika
if(number_of_strikers <= 6){
var ball = document.createElement('div');
ball.className = 'striker';
ball.style.left = x + 'px';
ball.style.top = y + 'px';
footballField.appendChild(ball);
number_of_strikers = number_of_strikers + 1
}else{alert("zbyt duza liczba obroncow")}}
}
// funkcja działą po utworzeniu komponentów, dodaje listenry do elementów
useEffect(()=>{
var footballField = document.getElementById('footballField');
footballField.addEventListener('click', boiskoListener)
});
document.getElementById("bbt1").addEventListener("click",function(){
changePlayer("bbt1")
},false)
document.getElementById("bbt2").addEventListener("click",function(){
changePlayer("bbt2")
},false)
document.getElementById("bbt3").addEventListener("click",function(){
changePlayer("bbt3")
},false)
},[]);
/*zwracany komponent zawierajacy boisko*/
return (
<div>
<div>
<p>. </p>
<p> .</p>
<p>. </p>
<p> .</p>
<p>. </p>
</div>
<div className="container">
<div className="subMenu" >
<button className="reset-button" onClick={resetField}>Reset</button>
<button className="info-button" onClick={sentQuestion}>Pobierz pozycję piłki</button>
</div>
<body>
<div className="container" id = "footballers" >
</div>
<div className="container" id = "field">
<div className="field" id="footballField">
<span className="left">
<span className="halfway-line"></span>
@ -96,9 +159,24 @@ const Hero = () => {
<span className="goal-area"></span>
<span className="corner-arc"></span>
</span>
</div>
</div>
</div>
</div>
<div className="container" id = "submenu" >
<button className="reset-button" onClick={resetField}>Reset</button>
<button className="info-button" onClick={sentQuestion}>Oblicz ExG</button>
<div className="ChoosingPlayer">
<button className="cho-shooter" id = "bbt1">Strzelec</button>
<button className="cho-defence" id = "bbt2">Obrońca</button>
<button className="cho-atack" id = "bbt3">Atakujący</button>
</div>
<div className="ChoosingPlayer">
<button className="cho-shooter" id = "bbt4">Noga wiodąca</button>
<button className="cho-defence" id = "bbt5">Noga słabsza</button>
<button className="cho-atack" id = "bbt6">Głowa</button>
</div>
</div>
</body>
);
};

View File

@ -4,10 +4,8 @@ import pandas as pd
# Funkcja zwraca prawdopodobieństwo zdobycia gola
def LogisticRegression_predict_proba(position_x, position_y, distance_to_goalM, angle, match_minute, Number_Intervening_Opponents, Number_Intervening_Teammates, isFoot, isHead):
model = load('regresja_logistyczna.joblib')
X_new = pd.DataFrame(columns=['position_x', 'position_y', 'distance_to_goalM', 'angle','match_minute', 'Number_Intervening_Opponents','Number_Intervening_Teammates', 'isFoot', 'isHead'])
X_new.loc[len(X_new.index)] = [position_x, position_y, distance_to_goalM, angle, match_minute, Number_Intervening_Opponents, Number_Intervening_Teammates, isFoot, isHead]
return model.predict_proba(X_new)[0][1].round(2)
#kolejne modele

View File

@ -5,26 +5,23 @@
@tailwind utilities;
body {
margin: 100px;
display: flex;
margin: 50px;
display: grid;
align-items: center;
justify-content: center;
--line: 0.3em solid white;
grid-template-rows: auto;
grid-template-columns: auto auto auto;
}
.container {
position: relative;
font-size: 5px;
margin: 0;
margin: 50 px;
}
.container span {
display: block;
}
.field {
--line: 0.3em solid white;
border: var(--line);
position: relative;
overflow: hidden;
@ -38,7 +35,8 @@
}
.subMenu{
display: inline;
display: grid;
grid-template-rows: auto auto auto;
}
.halfway-line {
@ -144,12 +142,26 @@
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: rgb(7, 26, 7);
border-radius: 50%;
position: absolute;
}
.reset-button {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
position: relative;
margin: 5px;
padding: 10px;
background-color: #FFFFFF;
border: none;
@ -158,16 +170,41 @@
}
.info-button {
position: absolute;
top: -80px;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #FFFFFF;
border: none;
cursor: pointer;
color: #000000;
}
.cho-atack {
position: relative;
;
padding: 10px;
background-color: #FFFFFF;
border: none;
cursor: pointer;
color: #000000;
}
.cho-shooter {
position: relative;
padding: 10px;
background-color: grey;
border: none;
cursor: pointer;
color: #000000;
}
.cho-defence {
position: relative;
padding: 10px;
background-color: #FFFFFF;
border: none;
cursor: pointer;
color: #000000;
}
* {
margin: 0;