diff --git a/app/package-lock.json b/app/package-lock.json index 572c494..b7bd6b9 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -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", diff --git a/app/package.json b/app/package.json index 2c21eec..09fad98 100644 --- a/app/package.json +++ b/app/package.json @@ -36,6 +36,6 @@ "post": "^0.0.1", "postcss": "^8.4.32", "tailwindcss": "^3.3.5", - "vite": "^5.0.8" + "vite": "^5.0.10" } } diff --git a/app/src/components/Hero.jsx b/app/src/components/Hero.jsx index cf09adb..11041b1 100644 --- a/app/src/components/Hero.jsx +++ b/app/src/components/Hero.jsx @@ -6,16 +6,53 @@ import { navLinks } from "../constants"; import { logo, menu, close } from "../assets"; -const Hero = () => { +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 ( -
-
-

.

-

.

-

.

-

.

-

.

-
-
-
- - -
+ +
+ +
+
@@ -96,9 +159,24 @@ const Hero = () => { -
-
+
+ + ); }; diff --git a/app/src/flask-server/modele/__pycache__/modele.cpython-310.pyc b/app/src/flask-server/modele/__pycache__/modele.cpython-310.pyc index 4189fbf..6b841e2 100644 Binary files a/app/src/flask-server/modele/__pycache__/modele.cpython-310.pyc and b/app/src/flask-server/modele/__pycache__/modele.cpython-310.pyc differ diff --git a/app/src/flask-server/modele/modele.py b/app/src/flask-server/modele/modele.py index df04525..b13718b 100644 --- a/app/src/flask-server/modele/modele.py +++ b/app/src/flask-server/modele/modele.py @@ -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 diff --git a/app/src/index.css b/app/src/index.css index 27bec8f..61262d0 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -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;