dodanie menu

2023-12-17 17:20:13 +01:00 · 2023-12-17 17:20:13 +01:00 · 4bce1d825e
parent c212b87d18
commit 4bce1d825e
6 changed files with 162 additions and 49 deletions
--- 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",
--- 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"
  }
 }
--- 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 (
-<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>
  );
 };

--- a/app/src/flask-server/modele/pycache/modele.cpython-310.pyc
+++ b/app/src/flask-server/modele/pycache/modele.cpython-310.pyc
--- 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
--- 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;