repository to manage all files for 1_2_oder_3 interaction game for Inf2/2 Interaktionen SoSe23 from Engert, Caliskan and Bachiri
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Buttons.js 1.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import React, {useState} from "react";
  2. import StartButton from "./StartButton";
  3. import QuitButton from "./QuitButton";
  4. import TeamSizePopUp from "./TeamsizePopUp";
  5. function Buttons({startQuestion, timerRunning, stopTimer, setQuestionCount, setTeamSize}) {
  6. const [gameStarted, setGameStarted] = useState(false)
  7. const [openPopUp, setOpenPopUp] = useState(false)
  8. const [quitvisible, setQuitvisible] = useState(false)
  9. const changeGame = (bool) => {
  10. setGameStarted(bool)
  11. setQuitvisible(bool)
  12. }
  13. const startClicked = () => {
  14. if(!timerRunning && !gameStarted) {
  15. setOpenPopUp(true);
  16. }
  17. else if (!timerRunning && gameStarted) {
  18. startQuestion();
  19. }
  20. }
  21. const quitGame = () => {
  22. changeGame(false);
  23. stopTimer();
  24. setQuestionCount(0);
  25. }
  26. return(
  27. <div className="Buttons">
  28. <StartButton
  29. onClick={startClicked}
  30. content={(gameStarted) ? "Nächste Frage" : "Spiel Starten" }
  31. />
  32. {quitvisible && <QuitButton quitGame={quitGame}/>}
  33. {openPopUp && <TeamSizePopUp closeModal={setOpenPopUp}
  34. changeGameState={changeGame}
  35. startQuestion={startQuestion}
  36. setTeamSize={setTeamSize}
  37. />}
  38. </div>
  39. )
  40. }
  41. export default Buttons