function MainComponent() { const [questions, setQuestions] = React.useState([ { question: "What is the name of the hotel's owner?", answer: "Charlie" }, { question: "Who is Charlie's best friend and the hotel's manager?", answer: "Vaggie" }, { question: "What type of demon is Alastor?", answer: "Radio Demon" }, { question: "What is the name of Charlie's princess friend?", answer: "Angel Dust" }, { question: "In which city is the Hazbin Hotel located?", answer: "Pentagram City" }, { question: "Who volunteers to be the hotel's first patient?", answer: "Angel Dust" } ]); const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [lives, setLives] = React.useState(3); const [gameOver, setGameOver] = React.useState(false); const [userAnswer, setUserAnswer] = React.useState(''); const [success, setSuccess] = React.useState(false); const handleAnswerSubmit = (event)=>{ event.preventDefault(); const currentQuestion = questions[currentQuestionIndex]; if (userAnswer.trim().toLowerCase() === currentQuestion.answer.trim().toLowerCase()) { const nextQuestionIndex = currentQuestionIndex + 1; setSuccess(true); setTimeout(()=>{ setSuccess(false); if (nextQuestionIndex < questions.length) { setCurrentQuestionIndex(nextQuestionIndex); } else { setGameOver(true); } }, 1000); } else { setSuccess(false); const newLives = lives - 1; setLives(newLives); if (newLives === 0) { setGameOver(true); } } setUserAnswer(''); }; let questionContent = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, questions[currentQuestionIndex].question), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAnswerSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "userAnswer", type: "text", className: "border p-2 border-grey-200 rounded-md w-full font-roboto", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 bg-[#50C878] text-white font-roboto rounded-md hover:bg-[#45b76a] ${success ? 'animate-scale' : ''}`, type: "submit", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-[#76b852] to-[#8DC26F] p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-white font-crimson-text mb-10", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "Hazbin Hotel Quiz"), gameOver ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-white text-xl", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Game Over! You have lost all your lives.")) : /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg w-full max-w-md shadow-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#474747]", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Lives: ", `💖`.repeat(lives)), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#474747]", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Question ", currentQuestionIndex + 1, "/", questions.length)), questionContent), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` @keyframes scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .animate-scale { animation: scale 1s ease-in-out; } `)); }