caliskanbi83990
/
1_2_oder_3_repos


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							import { useEffect, useState} from "react";
import './App.css';
import Header from "./components/Header";
import Body from "./components/Body";
import question from "./components/Question";

function App()  {
  const [timeLeft, setTimeLeft] = useState(10*1000);
  const [timerRunning, setTimerRunning] = useState(false);
  const [questionCount, setQuestionCount] = useState(0);
  const [teamsize, setTeamSize] = useState(0);

  useEffect(() => {
    let timer;
    if (timerRunning && timeLeft > 0) {
      timer = setTimeout(() => {
        setTimeLeft(timeLeft-10);
      }, 10);}
    else if (timeLeft === 0) {
      alert("Zeit ist um !");
      setTimerRunning(false);
      setTimeLeft(10);
    }
    return () => clearTimeout(timer);

  }, [timeLeft, timerRunning]);

  function formatTime(time) {
    const seconds = Math.floor((time / 1000) % 60).toString().padStart(2, '0');
    return `${seconds} s`;
  }

  const startQuestion = () => {
    if (questionCount <= 5){
      setQuestionCount(questionCount+1)
      setTimeLeft(10*1000);
      setTimerRunning(true);
    }
    else {
      alert("Spiel vorbei !");
    }
  }

  const stopTimer = () => {
    setTimerRunning(false)
    setTimeLeft(10*1000);
  }

  return (<>
    <Header timerRunning={timerRunning} timerContent={formatTime(timeLeft)} questionCount={questionCount}/>
    <Body startQuestion={startQuestion} timerRunning={timerRunning} stopTimer={stopTimer} setQuestionCount={setQuestionCount} setTeamSize={setTeamSize} teamsize={teamsize}/>
    </>
  );
}

export default App;