dodanie menu

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",
+      "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,
       "dependencies": {
         "esbuild": "^0.19.3",

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"
   }
 }

app/src/components/Hero.jsx

@@ -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 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');
-        ball.className = 'football';
+        ball.className = 'defender';
         ball.style.left = x + 'px';
         ball.style.top = y + 'px';
         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(()=>{
       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>
+<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">
               <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>
   );
 };
 

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

app/src/index.css

@@ -5,26 +5,23 @@
 @tailwind utilities;
 
         body {
-            margin: 100px;
+            margin: 50px;
-            display: flex;
+            display: grid;
             align-items: center;
-            justify-content: center;
+            grid-template-rows: auto;
-            --line: 0.3em solid white;
+            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;
+            position: relative;
-            top: -40px;
+            margin: 5px;
-            left: 50%;
-            transform: translateX(-50%);
             padding: 10px;
             background-color: #FFFFFF;
             border: none;
@@ -158,16 +170,41 @@
         }
 
         .info-button {
-            position: absolute;
+          position: relative;
-            top: -80px;
             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;