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

View File

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

View File

@ -6,16 +6,53 @@ import { navLinks } from "../constants";
import { logo, menu, close } from "../assets"; import { logo, menu, close } from "../assets";
const Hero = () => { const Hero = () => {
const [data,setData] = useState([{}]) 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 // Reset Boiska
function resetField() { function resetField() {
var footballField = document.getElementById('footballField'); var footballField = document.getElementById('footballField');
var footballs = document.querySelectorAll('.football'); var footballs = document.querySelectorAll('.football');
var strikers = document.querySelectorAll('.striker')
var defenders = document.querySelectorAll('.defender')
footballs.forEach(function (ball) { footballs.forEach(function (ball) {
footballField.removeChild(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 // Wysłanie zapytania do serwera
function sentQuestion() { function sentQuestion() {
@ -39,41 +76,67 @@ const Hero = () => {
/* Funkcja dodająca listener do boiska*/ /* Funkcja dodająca listener do boiska*/
function boiskoListener(){ function boiskoListener(){
var x = event.clientX - footballField.getBoundingClientRect().left; var x = event.clientX - footballField.getBoundingClientRect().left;
var y = event.clientY - footballField.getBoundingClientRect().top; var y = event.clientY - footballField.getBoundingClientRect().top;
var existingBall = document.querySelector('.football'); // Przypadek kiedy zaznaczamy strzelca
if (!existingBall) { 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'); var ball = document.createElement('div');
ball.className = 'football'; ball.className = 'defender';
ball.style.left = x + 'px'; ball.style.left = x + 'px';
ball.style.top = y + 'px'; ball.style.top = y + 'px';
footballField.appendChild(ball); footballField.appendChild(ball);
} else { number_of_defenders = number_of_defenders + 1} else {alert("zbyt duza liczba obronców")}
alert('Możesz dodać tylko jedną piłkę!'); }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(()=>{ useEffect(()=>{
var footballField = document.getElementById('footballField'); var footballField = document.getElementById('footballField');
footballField.addEventListener('click', boiskoListener) 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*/ /*zwracany komponent zawierajacy boisko*/
return ( return (
<div> <body>
<div> <div className="container" id = "footballers" >
<p>. </p>
<p> .</p> </div>
<p>. </p> <div className="container" id = "field">
<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>
<div className="field" id="footballField"> <div className="field" id="footballField">
<span className="left"> <span className="left">
<span className="halfway-line"></span> <span className="halfway-line"></span>
@ -96,9 +159,24 @@ const Hero = () => {
<span className="goal-area"></span> <span className="goal-area"></span>
<span className="corner-arc"></span> <span className="corner-arc"></span>
</span> </span>
</div> </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 # 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): 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') 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 = 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] 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) return model.predict_proba(X_new)[0][1].round(2)
#kolejne modele #kolejne modele

View File

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