1_2_oder_3_repos/src_folder/FrontEnd/app/src/components/TeamsizePopUp.js

import React, {useState} from "react";
import {postTeamsize} from "./api";

function TeamSizePopUp({closeModal, changeGameState, startQuestion, setTeamSize}) {

    const [inputValue, setInputValue] = useState(2);

    const getInput = (event) => {
        setInputValue(event.target.value);
    }


    const closePopUp = () => {
        closeModal(false);
    }

    const TeamSizeButtonClicked = () => {
        if(inputValue <= 2 && inputValue > 0){
        /*
            postTeamsize({
                "Teamsize": inputValue
            }).then(data => console.log("Received answer" + data))
        */
            setTeamSize(inputValue)
            changeGameState(true);
            closePopUp();
            startQuestion();
        }
        else {
            alert("Bitte Zahl zwischen 1 und 2 eingeben ! ")
        }

    }

    return (
        <div className="PopUpBackground">
            <div className="PopUpContainer">
                <div>
                    <div id="Cancel" onClick={closePopUp}>X</div>
                    <h2>Bitte Teamgröße wählen </h2>
                </div>
                <div>
                    <input type="number" id="TeamSizeInput" min={1} max={2} value={inputValue}
                    onChange={getInput}/>
                </div>
                <div>
                    <button className="MyButton" id="PopUpButton" onClick={TeamSizeButtonClicked}>Bestätigen und Spiel starten</button>
                </div>
            </div>
        </div>
    )

}

export default TeamSizePopUp