function MainComponent() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [showMathChallenge, setShowMathChallenge] = React.useState(false); const [showNFLQuiz, setShowNFLQuiz] = React.useState(false); const [showNFLTeamNaming, setShowNFLTeamNaming] = React.useState(false); const [showFruitNamingChallenge, setShowFruitNamingChallenge] = React.useState(false); const [showJumpScare, setShowJumpScare] = React.useState(false); const [startingTime, setStartingTime] = React.useState(null); const [userInput, setUserInput] = React.useState({ username: '', password: '', answer: '', nflAnswers: [], nflTeams: '', fruits: '' }); const [nflQuizQuestions, setNflQuizQuestions] = React.useState([]); const [nflQuizAttempts, setNflQuizAttempts] = React.useState(0); const [fruitNamingAttempts, setFruitNamingAttempts] = React.useState(0); const mathQuestionAnswer = 42; const correctCredentials = { username: 'Lizzy', password: 'Emily' }; React.useEffect(()=>{ let timer; if (showNFLTeamNaming) { setStartingTime(new Date()); timer = setTimeout(()=>{ if (userInput.nflTeams.split(',').map((t)=>t.trim()).filter(Boolean).length < 5) { setShowNFLTeamNaming(false); setShowFruitNamingChallenge(true); setStartingTime(new Date()); } }, 30000); } if (showFruitNamingChallenge) { setStartingTime(new Date()); timer = setTimeout(()=>{ if (userInput.fruits.split(',').map((f)=>f.trim()).filter(Boolean).length < 10) { setShowFruitNamingChallenge(false); setShowJumpScare(true); setTimeout(()=>{ setShowJumpScare(false); setShowMathChallenge(false); setShowNFLQuiz(false); setShowNFLTeamNaming(false); setStartingTime(null); setUserInput({ ...userInput, answer: '', nflAnswers: [], nflTeams: '', fruits: '' }); }, 2000); } }, 45000); } return ()=>clearTimeout(timer); }, [ showNFLTeamNaming, showFruitNamingChallenge, userInput ]); const handleInputChange = (event)=>{ const { name, value } = event.target; setUserInput({ ...userInput, [name]: value }); }; const handleLogin = (event)=>{ event.preventDefault(); if (userInput.username === correctCredentials.username && userInput.password === correctCredentials.password) { setIsLoggedIn(true); } else { setUserInput({ ...userInput, username: '', password: '' }); setShowMathChallenge(true); } }; const tryAnswerMathQuestion = ()=>{ if (parseInt(userInput.answer) === mathQuestionAnswer) { setIsLoggedIn(true); } else { setShowMathChallenge(false); setNflQuizAttempts(nflQuizAttempts + 1); setShowNFLQuiz(true); } }; const tryAnswerNFLQuestion = ()=>{ const correctAnswers = nflQuizQuestions.every((question, index)=>question.answer.toLowerCase() === userInput.nflAnswers[index].toLowerCase()); if (correctAnswers) { setIsLoggedIn(true); } else { setShowNFLQuiz(false); setShowNFLTeamNaming(true); } }; const handleAnswerChange = (index, event)=>{ const newNflAnswers = [ ...userInput.nflAnswers ]; newNflAnswers[index] = event.target.value; setUserInput({ ...userInput, nflAnswers: newNflAnswers }); }; const shuffleArray = (array)=>{ for(let i = array.length - 1; i > 0; i--){ const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [ array[j], array[i] ]; } return array; }; React.useEffect(()=>{ setNflQuizQuestions(shuffleArray([ { question: 'Who won Super Bowl 50?', answer: 'Denver Broncos' }, { question: 'Which team does Tom Brady currently play for?', answer: 'Tampa Bay Buccaneers' }, { question: 'How many teams are in the NFL?', answer: '32' }, { question: 'Who is the NFL’s all-time leading rusher?', answer: 'Emmitt Smith' }, { question: 'Which player has the most Super Bowl rings?', answer: 'Tom Brady' }, { question: 'Which city hosts the Pro Football Hall of Fame?', answer: 'Canton' }, { question: 'What is the oldest NFL franchise?', answer: 'Arizona Cardinals' }, { question: 'Who holds the record for most career touchdowns?', answer: 'Jerry Rice' }, { question: 'What year was the first Super Bowl played?', answer: '1967' }, { question: 'Which team has the most Super Bowl wins?', answer: 'Pittsburgh Steelers' } ])); }, [ nflQuizAttempts ]); let renderContent; if (showJumpScare) { renderContent = /*#__PURE__*/ React.createElement("div", { className: "h-screen w-screen flex justify-center items-center", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/jumpscare.jpg", alt: "Scary face appearing suddenly to surprise the user", className: "object-cover h-full w-full", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this })); } else if (isLoggedIn) { renderContent = /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, "Welcome Lizzy!")); } else if (showMathChallenge) { renderContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto text-lg", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, "What is the answer to the ultimate question of life, the universe, and everything?"), /*#__PURE__*/ React.createElement("input", { type: "number", onChange: handleInputChange, name: "answer", value: userInput.answer, className: "bg-white border border-gray-300 rounded p-2 mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: tryAnswerMathQuestion, className: "bg-green-500 text-white font-roboto py-2 px-4 rounded", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, "Submit")); } else if (showNFLQuiz) { renderContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, nflQuizQuestions.map((question, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, question.question), /*#__PURE__*/ React.createElement("input", { type: "text", name: `nflAnswer${index}`, value: userInput.nflAnswers[index] || '', onChange: (e)=>handleAnswerChange(index, e), className: "bg-white border border-gray-300 rounded p-2", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: tryAnswerNFLQuestion, className: "bg-green-500 text-white font-roboto py-2 px-4 rounded", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, "Submit Quiz")); } else if (showNFLTeamNaming) { renderContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 181, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto text-lg", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this }, "Name 5 NFL teams in 30 seconds:"), /*#__PURE__*/ React.createElement("textarea", { onChange: handleInputChange, name: "nflTeams", value: userInput.nflTeams, className: "bg-white border border-gray-300 rounded p-2 mb-4 h-20", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this })); } else if (showFruitNamingChallenge) { renderContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 193, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto text-lg", __source: { fileName: "", lineNumber: 194, columnNumber: 9 }, __self: this }, "Name 10 fruits in 45 seconds:"), /*#__PURE__*/ React.createElement("textarea", { onChange: handleInputChange, name: "fruits", value: userInput.fruits, className: "bg-white border border-gray-300 rounded p-2 mb-4 h-20", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this })); } else { renderContent = /*#__PURE__*/ React.createElement("div", { className: "flex h-screen items-center justify-center", __source: { fileName: "", lineNumber: 205, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full space-y-8", __source: { fileName: "", lineNumber: 206, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "mx-auto h-12 w-auto", src: "images/login-avatar.png", alt: "Avatar representing the user Lizzy", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-3xl font-extrabold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, "You do not know my password")), /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleLogin, __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "hidden", name: "remember", defaultValue: "true", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm", __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md font-roboto focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", placeholder: "Username", onChange: handleInputChange, value: userInput.username, __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md font-roboto focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", placeholder: "Password", onChange: handleInputChange, value: userInput.password, __source: { fileName: "", lineNumber: 226, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 font-roboto", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "Log in"))))); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 249, columnNumber: 5 }, __self: this }, renderContent, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 251, columnNumber: 7 }, __self: this }, ` body { overflow: ${showJumpScare ? 'hidden' : 'auto'}; } `)); }