function MainComponent() { const [formData, setFormData] = useState({ subject: "", topic: "", targetGroup: "", extras: "" }); const [gameState, setGameState] = useState({ questions: [], isGenerated: false, selectedPrize: null, answeredQuestions: {}, scoreA: 0, scoreB: 0, loading: false, showAnswer: false, gameCompleted: false, showGameEnd: false, isMultiplayer: false, currentTeam: "A", teamAName: "Groep A", teamBName: "Groep B", showScorePopup: false, showCorrectAnswer: false }); useEffect(()=>{ document.title = "Game: Jeopardy!"; }, []); const handleInputChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleNewGame = ()=>{ setGameState({ questions: [], isGenerated: false, selectedPrize: null, answeredQuestions: {}, scoreA: 0, scoreB: 0, loading: false, showAnswer: false, gameCompleted: false, showGameEnd: false, isMultiplayer: false, currentTeam: "A", teamAName: "Groep A", teamBName: "Groep B", showScorePopup: false, showCorrectAnswer: false }); setFormData({ subject: "", topic: "", targetGroup: "", extras: "" }); }; const handleGenerate = async ()=>{ setGameState((prev)=>({ ...prev, loading: true })); try { const response = await fetch("/integrations/google-gemini-1-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Generate multiple choice questions about ${formData.topic} for ${formData.subject} class, appropriate for ${formData.targetGroup} students. Create 4 questions for each difficulty level: - 4 easy questions worth 200 euros - 4 medium questions worth 400 euros - 4 challenging questions worth 600 euros - 4 very difficult questions worth 800 euros For each question, provide 4 possible answers with only one being correct. ${formData.extras ? "Additional context: " + formData.extras : ""}` } ], json_schema: { name: "quiz_questions", schema: { type: "object", properties: { questions: { type: "array", items: { type: "object", properties: { question: { type: "string" }, options: { type: "array", items: { type: "string" }, minItems: 4, maxItems: 4 }, answer: { type: "string" }, difficulty: { type: "string" }, prize: { type: "number" } }, required: [ "question", "options", "answer", "difficulty", "prize" ], additionalProperties: false } } }, required: [ "questions" ], additionalProperties: false } } }) }); const result = await response.json(); const generatedQuestions = JSON.parse(result.choices[0].message.content).questions; const questionsWithIds = generatedQuestions.map((q, index)=>({ ...q, id: `q-${index}` })); setGameState({ ...gameState, questions: questionsWithIds, isGenerated: true, loading: false }); } catch (error) { console.error("Error generating questions:", error); setGameState((prev)=>({ ...prev, loading: false })); } }; const handlePrizeClick = (question)=>{ if (!gameState.answeredQuestions[question.id]) { setGameState({ ...gameState, selectedPrize: question, showAnswer: false, showCorrectAnswer: false }); } }; const handleModalClose = ()=>{ setGameState({ ...gameState, selectedPrize: null, showAnswer: false, showCorrectAnswer: false }); }; const handleAnswerSubmit = (selectedOption)=>{ if (gameState.selectedPrize) { const isCorrect = selectedOption === gameState.selectedPrize.answer; const newAnsweredQuestions = { ...gameState.answeredQuestions, [gameState.selectedPrize.id]: isCorrect }; const newScoreA = gameState.currentTeam === "A" && isCorrect ? gameState.scoreA + gameState.selectedPrize.prize : gameState.scoreA; const newScoreB = gameState.currentTeam === "B" && isCorrect ? gameState.scoreB + gameState.selectedPrize.prize : gameState.scoreB; const allAnswered = Object.keys(newAnsweredQuestions).length === gameState.questions.length; const newTeam = gameState.isMultiplayer ? gameState.currentTeam === "A" ? "B" : "A" : "A"; if (!isCorrect) { setGameState({ ...gameState, showAnswer: true, answeredQuestions: newAnsweredQuestions, scoreA: newScoreA, scoreB: newScoreB, gameCompleted: allAnswered, currentTeam: newTeam }); setTimeout(()=>{ setGameState((prev)=>({ ...prev, showAnswer: false, selectedPrize: null, showScorePopup: prev.isMultiplayer && !allAnswered })); if (gameState.isMultiplayer && !allAnswered) { setTimeout(()=>{ setGameState((prev)=>({ ...prev, showScorePopup: false })); }, 3000); } }, 3000); } else { setGameState({ ...gameState, scoreA: newScoreA, scoreB: newScoreB, answeredQuestions: newAnsweredQuestions, showCorrectAnswer: true, showAnswer: false, gameCompleted: allAnswered, currentTeam: newTeam }); setTimeout(()=>{ setGameState((prev)=>({ ...prev, showCorrectAnswer: false, selectedPrize: null, showScorePopup: prev.isMultiplayer && !allAnswered })); if (gameState.isMultiplayer && !allAnswered) { setTimeout(()=>{ setGameState((prev)=>({ ...prev, showScorePopup: false })); }, 3000); } }, 2000); } } }; const handleDemo = ()=>{ setFormData({ subject: "Engels", topic: "London", targetGroup: "Havo 1", extras: "Nee" }); }; const handleTeamNameChange = (team, name)=>{ setGameState((prev)=>({ ...prev, [team === "A" ? "teamAName" : "teamBName"]: name })); }; const handleClearFields = ()=>{ setFormData({ subject: "", topic: "", targetGroup: "", extras: "" }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1d4c3e] text-[#e0d4bc] p-8", __source: { fileName: "", lineNumber: 274, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto relative", __source: { fileName: "", lineNumber: 275, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 -top-2 flex items-center gap-4", __source: { fileName: "", lineNumber: 276, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://robertsdigitaledidactiek.created.app/", className: "text-2xl", __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6 text-white hover:text-[#e0d4bc]", __source: { fileName: "", lineNumber: 281, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z", __source: { fileName: "", lineNumber: 287, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", className: "text-2xl", __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white hover:text-[#e0d4bc]", __source: { fileName: "", lineNumber: 291, columnNumber: 13 }, __self: this }, "✕"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 295, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-white", __source: { fileName: "", lineNumber: 296, columnNumber: 11 }, __self: this }, "Game: Jeopardy!"), !gameState.isGenerated && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: handleClearFields, className: "bg-[#3a7171] text-white px-4 py-2 rounded hover:bg-[#143f31] ml-2", __source: { fileName: "", lineNumber: 301, columnNumber: 15 }, __self: this }, "Maak leeg"), /*#__PURE__*/ React.createElement("button", { onClick: handleDemo, className: "bg-[#3a7171] text-white px-4 py-2 rounded hover:bg-[#143f31] ml-2", __source: { fileName: "", lineNumber: 307, columnNumber: 15 }, __self: this }, "Demo"))), !gameState.isGenerated ? /*#__PURE__*/ React.createElement("div", { className: "bg-[#143f31] p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "subject", placeholder: "Welk vak geef je?", className: "w-full p-3 rounded border border-[#3a7171] bg-[#1d4c3e] text-white placeholder-gray-300", value: formData.subject, onChange: handleInputChange, __source: { fileName: "", lineNumber: 320, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "topic", placeholder: "Welk onderwerp gaat het over?", className: "w-full p-3 rounded border border-[#3a7171] bg-[#1d4c3e] text-white placeholder-gray-300", value: formData.topic, onChange: handleInputChange, __source: { fileName: "", lineNumber: 328, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "targetGroup", placeholder: "Welke doelgroep (welke klas)?", className: "w-full p-3 rounded border border-[#3a7171] bg-[#1d4c3e] text-white placeholder-gray-300", value: formData.targetGroup, onChange: handleInputChange, __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "extras", placeholder: "Wil je nog bijzonderheden meegeven?", className: "w-full p-3 rounded border border-[#3a7171] bg-[#1d4c3e] text-white placeholder-gray-300", value: formData.extras, onChange: handleInputChange, __source: { fileName: "", lineNumber: 344, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 351, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameState((prev)=>({ ...prev, isMultiplayer: false })), className: `flex-1 p-3 rounded text-white ${!gameState.isMultiplayer ? "bg-[#3a7171]" : "bg-[#143f31]"}`, __source: { fileName: "", lineNumber: 352, columnNumber: 17 }, __self: this }, "Single player"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameState((prev)=>({ ...prev, isMultiplayer: true })), className: `flex-1 p-3 rounded text-white ${gameState.isMultiplayer ? "bg-[#3a7171]" : "bg-[#143f31]"}`, __source: { fileName: "", lineNumber: 360, columnNumber: 17 }, __self: this }, "Multiplayer (2 groepen)")), gameState.isMultiplayer && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 370, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Naam groep A", value: gameState.teamAName, onChange: (e)=>handleTeamNameChange("A", e.target.value), className: "w-full p-3 rounded border border-[#3a7171] bg-[#1d4c3e] text-white placeholder-gray-300", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Naam groep B", value: gameState.teamBName, onChange: (e)=>handleTeamNameChange("B", e.target.value), className: "w-full p-3 rounded border border-[#3a7171] bg-[#1d4c3e] text-white placeholder-gray-300", __source: { fileName: "", lineNumber: 378, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, disabled: gameState.loading, className: "w-full bg-[#ded2ba] text-black p-3 rounded hover:bg-[#c5b9a1] transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 387, columnNumber: 15 }, __self: this }, gameState.loading ? "Bezig met genereren..." : "Genereer en speel het spel"))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 399, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 400, columnNumber: 13 }, __self: this }, gameState.isMultiplayer ? /*#__PURE__*/ React.createElement("div", { className: "flex gap-8 items-center", __source: { fileName: "", lineNumber: 402, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-2xl font-bold ${gameState.currentTeam === "A" ? "text-white" : ""}`, __source: { fileName: "", lineNumber: 403, columnNumber: 19 }, __self: this }, gameState.teamAName, ": €", gameState.scoreA), /*#__PURE__*/ React.createElement("div", { className: `text-2xl font-bold ${gameState.currentTeam === "B" ? "text-white" : ""}`, __source: { fileName: "", lineNumber: 408, columnNumber: 19 }, __self: this }, gameState.teamBName, ": €", gameState.scoreB)) : /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 415, columnNumber: 17 }, __self: this }, "Score: €", gameState.scoreA), /*#__PURE__*/ React.createElement("button", { onClick: handleNewGame, className: "bg-[#3a7171] text-white px-4 py-2 rounded hover:bg-[#143f31]", __source: { fileName: "", lineNumber: 419, columnNumber: 15 }, __self: this }, "Maak een nieuw spel")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 427, columnNumber: 13 }, __self: this }, [ 200, 400, 600, 800 ].map((prizeValue)=>/*#__PURE__*/ React.createElement("div", { key: prizeValue, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 429, columnNumber: 17 }, __self: this }, gameState.questions.filter((q)=>q.prize === prizeValue).map((question)=>{ const isAnswered = question.id in gameState.answeredQuestions; const isCorrect = gameState.answeredQuestions[question.id]; let bgColor = "bg-[#143f31]"; if (isAnswered) { bgColor = isCorrect ? "bg-[#3a7171]" : "bg-[#1d4c3e]"; } return /*#__PURE__*/ React.createElement("button", { key: question.id, onClick: ()=>handlePrizeClick(question), className: `${bgColor} border border-[#3a7171] w-24 h-24 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-sm ${!isAnswered ? "hover:scale-105 transition duration-200" : ""}`, disabled: isAnswered, __source: { fileName: "", lineNumber: 443, columnNumber: 25 }, __self: this }, "€", question.prize); })))), gameState.isMultiplayer && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8 p-4 bg-[#143f31] rounded-lg", __source: { fileName: "", lineNumber: 459, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 460, columnNumber: 17 }, __self: this }, "Nu aan de beurt:", " ", /*#__PURE__*/ React.createElement("span", { className: gameState.currentTeam === "A" ? "text-[#3a7171]" : "text-[#143f31] bg-white px-2 py-1 rounded", __source: { fileName: "", lineNumber: 462, columnNumber: 19 }, __self: this }, gameState.currentTeam === "A" ? gameState.teamAName : gameState.teamBName))), gameState.selectedPrize && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 478, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#143f31] p-8 rounded-lg max-w-2xl w-full", __source: { fileName: "", lineNumber: 479, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-bold mb-6 text-white text-center", __source: { fileName: "", lineNumber: 480, columnNumber: 19 }, __self: this }, gameState.selectedPrize.question), !gameState.showCorrectAnswer && !gameState.showAnswer && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-6 mb-4", __source: { fileName: "", lineNumber: 484, columnNumber: 21 }, __self: this }, gameState.selectedPrize.options.map((option, index)=>{ return /*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswerSubmit(option), className: "bg-white text-black p-6 rounded-lg text-xl font-semibold transition duration-200 transform hover:scale-105 hover:bg-gray-100", __source: { fileName: "", lineNumber: 487, columnNumber: 27 }, __self: this }, option); })), gameState.showCorrectAnswer && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-green-100 rounded-lg text-[#111827] text-center", __source: { fileName: "", lineNumber: 499, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold mb-4 text-green-600", __source: { fileName: "", lineNumber: 500, columnNumber: 23 }, __self: this }, "Correct! 🎉"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 503, columnNumber: 23 }, __self: this }, "+ €", gameState.selectedPrize.prize)), gameState.showAnswer && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-red-100 rounded-lg text-[#111827]", __source: { fileName: "", lineNumber: 509, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold mb-4 text-red-600", __source: { fileName: "", lineNumber: 510, columnNumber: 23 }, __self: this }, "Helaas, dat is niet correct! ❌"), /*#__PURE__*/ React.createElement("p", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 513, columnNumber: 23 }, __self: this }, "Het juiste antwoord was:"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl mb-6", __source: { fileName: "", lineNumber: 516, columnNumber: 23 }, __self: this }, gameState.selectedPrize.answer), gameState.isMultiplayer && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold mb-4 text-[#3a7171]", __source: { fileName: "", lineNumber: 521, columnNumber: 27 }, __self: this }, gameState.teamAName, ": €", gameState.scoreA), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold mb-8 text-[#143f31]", __source: { fileName: "", lineNumber: 524, columnNumber: 27 }, __self: this }, gameState.teamBName, ": €", gameState.scoreB), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold mt-4", __source: { fileName: "", lineNumber: 527, columnNumber: 27 }, __self: this }, "Nu aan de beurt:", " ", /*#__PURE__*/ React.createElement("span", { className: gameState.currentTeam === "A" ? "text-[#3a7171]" : "text-[#143f31]", __source: { fileName: "", lineNumber: 529, columnNumber: 29 }, __self: this }, gameState.currentTeam === "A" ? gameState.teamAName : gameState.teamBName))))))))); }