diff --git a/app/src/components/Hero.jsx b/app/src/components/Hero.jsx index e63714d..1aeb598 100644 --- a/app/src/components/Hero.jsx +++ b/app/src/components/Hero.jsx @@ -17,28 +17,23 @@ const Hero = () => { //przez listener nanoszący zawodników na boisko. 1 - strzelec , 2 - bramkarz , 3 - obronca, 4 - napasnik. zmienna przez aktywacje przycskówk bb1, bb2, bb3 i bb4 let active_bbt = "bbt1"; - let number_of_defenders = 0; - let number_of_strikers = 0; - let number_of_goalkeepers = 0; - var numer_od_shooters = 0; - var eX = " "; - + const [number_of_defenders, setNumberOfDevenders] = useState(0); + const [number_of_strikers, setNumberOfStrikers] = useState(0) + const [number_of_goalkeepers, setNumberOfGoalkeppers] = useState(0); + const [number_of_shooters,setNumberOfShooters] = useState(0); // zmienne globalne bedace danymi wejsciowymi do modelu - var shooterX = 12; - var shooterY = 12; - var shooter = [0,0] var goalkeeper = [0,0] var stricers = new Array; var defenders = new Array; - var bodyPart = ""; - var technique = ""; - var actionType = ""; - var shooterPossition = ""; + const [bodyPart,setBodyPart] = useState('prawa'); + const [technique,setTechnique] = useState('zwykly'); + const [actionType,setActionType] = useState('pozycyjny'); + const [shooterPossition,setPossition] = useState('napastnik'); //zamiana procentowych pozycji na kartezyjskie function konwerturX(x){ @@ -59,16 +54,6 @@ const Hero = () => { document.getElementById(a).style.background = "#00CC66"; active_bbt = a } - function changeLeg(a){ - - document.getElementById("bbt5").style.background = "#99FFCC"; - document.getElementById("bbt6").style.background = "#99FFCC"; - document.getElementById("bbt7").style.background = "#99FFCC"; - document.getElementById("bbt8").style.background = "#99FFCC"; - document.getElementById(a).style.background = "#00CC66"; - - Leg_bbt = a - } // Reset Boiska function resetField() { @@ -84,10 +69,10 @@ const Hero = () => { players.forEach(function(element) { list.removeChild(element); }) - number_of_defenders = 0 - number_of_strikers = 0 - number_of_goalkeepers = 0 - numer_od_shooters = 0 + setNumberOfDevenders(0); + setNumberOfStrikers(0) + setNumberOfGoalkeppers(0) + setNumberOfShooters(0) } @@ -101,13 +86,13 @@ const Hero = () => { list.removeChild(player) bojo.removeChild(ball) if(possition == 1){ - number_of_goalkeepers = 0 + setNumberOfGoalkeppers(0) }else if(possition == 2){ - number_of_defenders = number_of_defenders -1 ; + setNumberOfDevenders(number_of_defenders-1) ; }else if (possition == 3){ - number_of_strikers = number_of_strikers -1 ; + setNumberOfStrikers(number_of_strikers-1) ; }else if(possition == 0){ - numer_od_shooters = 0 + setNumberOfShooters(0) } } @@ -115,21 +100,6 @@ const Hero = () => { function loadPlayers(){ var players = document.querySelectorAll('.player') - - //zgranie informacji z list - var bodyPartList = document.getElementById('bodyPartList') - var actionTypeList = document.getElementById('actionTypeList') - var possitionList = document.getElementById('possitionList') - var shootTypeList = document.getElementById('shootTypeList') - - - - bodyPart = bodyPartList.getAttribute('value') - alert(bodyPart) - actionType = actionTypeList.value - shooterPossition = possitionList.value - technique = shootTypeList.value - // wyczyszczenie list zawierajacych lokalizacje zawodnikow defenders = [] stricers = [] @@ -260,15 +230,15 @@ const Hero = () => { }) } + + // // Wyłanie zapytania do serwera function sentQuestion() { - + ///Dziwny Blad loadPlayers() - alert(bodyPart) - if (numer_od_shooters > 0) { + if (number_of_shooters == 1) { // Użyj backticksów zamiast zwykłych cudzysłowów - - fetch(`http://127.0.0.1:5000/get_model?shooter=${shooter}&goalkeeper=${goalkeeper}&defenders=${defenders}&strickers=${stricers}&bodyPart=4${bodyPart}&technique=${technique}&actionType=${actionType}&shooterPossition=${shooterPossition}`).then( + fetch(`http://127.0.0.1:5000/get_model?shooter=${shooter}&goalkeeper=${goalkeeper}&defenders=${defenders}&strickers=${stricers}&bodyPart=${bodyPart}&technique=${technique}&actionType=${actionType}&shooterPossition=${shooterPossition}`).then( res => res.json() ).then( data => { @@ -307,11 +277,11 @@ const Hero = () => { //dodanie zawodnika do listy oraz punktu do mapy w zaleznosci od aktywnosci przycisku 1,2,3 lub 4 if(active_bbt=="bbt1"){ - if(numer_od_shooters < 1 ){ + if(number_of_shooters < 1 ){ addPlayer(0,ball) bojo.appendChild(ball) ball.style.background = "#fc0303" - numer_od_shooters = numer_od_shooters + 1 + setNumberOfShooters(number_of_shooters+1) }else{alert("mozesz dodac tylko jednego strzelca")} }else if(active_bbt == "bbt2"){ @@ -319,19 +289,19 @@ const Hero = () => { addPlayer(1,ball) bojo.appendChild(ball) ball.style.background = "#03e7fc" - number_of_goalkeepers = number_of_goalkeepers + 1 + setNumberOfGoalkeppers(number_of_goalkeepers+1) }else{alert("mozesz dodac tylko jednego bramkarza")} }else if(active_bbt == "bbt3"){ if(number_of_defenders <= 10){ addPlayer(2,ball); - number_of_defenders = number_of_defenders +1; + setNumberOfDevenders(number_of_defenders+1) bojo.appendChild(ball) ball.style.background = "#0324fc" }else{alert("maksymalna liczba obroncow")} }else if(active_bbt == "bbt4"){ if(number_of_strikers <= 10){ addPlayer(3,ball); - number_of_strikers = number_of_strikers + 1; + setNumberOfStrikers(number_of_strikers+1); bojo.appendChild(ball) ball.style.background = "#fc6703" }else{alert("maksymalna liczba napastnikow")} @@ -369,17 +339,22 @@ const Hero = () => {
- setBodyPart(event.target.value)} + defaultValue={bodyPart}> - +
+ +
- setTechnique(event.target.value)} + defaultValue = {technique}> @@ -390,8 +365,8 @@ const Hero = () => {
- -
+ setActionType(event.target.value)} + defaultValue={technique}>
- - -
+ setPossition(event.target.value)} + defaultValue={shooterPossition}>