function MainComponent() { const [formData, setFormData] = useState({ subject: "", topic: "", targetGroup: "", cardCount: "", specialNotes: "" }); const [isLoading, setIsLoading] = useState(false); const [cards, setCards] = useState([]); const [selectedCards, setSelectedCards] = useState([]); const [matches, setMatches] = useState([]); const [incorrectPair, setIncorrectPair] = useState([]); const [score, setScore] = useState(0); const [attempts, setAttempts] = useState(0); const [timer, setTimer] = useState(0); const [timerInterval, setTimerInterval] = useState(null); useEffect(()=>{ if (cards.length > 0 && !timerInterval) { const interval = setInterval(()=>{ setTimer((prev)=>prev + 1); }, 1000); setTimerInterval(interval); } if (score === cards.length / 2 && timerInterval) { clearInterval(timerInterval); setTimerInterval(null); } return ()=>{ if (timerInterval) { clearInterval(timerInterval); } }; }, [ cards.length, score, timerInterval ]); const formatTime = (seconds)=>{ const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; }; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prevState)=>({ ...prevState, [name]: value })); }; const handleCardClick = (index)=>{ if (selectedCards.length === 2 || matches.includes(index)) return; if (!selectedCards.includes(index)) { const newSelected = [ ...selectedCards, index ]; setSelectedCards(newSelected); if (newSelected.length === 2) { setAttempts((prev)=>prev + 1); checkMatch(newSelected[0], newSelected[1]); } } }; const checkMatch = (index1, index2)=>{ const card1 = cards[index1]; const card2 = cards[index2]; if (card1.type === "term" && card2.type === "definition" && card1.id === card2.id || card2.type === "term" && card1.type === "definition" && card1.id === card2.id) { setTimeout(()=>{ setMatches((prev)=>[ ...prev, index1, index2 ]); setScore((prev)=>prev + 1); setSelectedCards([]); }, 500); } else { setIncorrectPair([ index1, index2 ]); setTimeout(()=>{ setIncorrectPair([]); setSelectedCards([]); }, 1000); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); setCards([]); setSelectedCards([]); setMatches([]); 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 ${formData.cardCount} matching pairs of terms and definitions for a ${formData.subject} class about ${formData.topic} for ${formData.targetGroup} students. ${formData.specialNotes ? `Additional notes: ${formData.specialNotes}` : ""}` } ], json_schema: { name: "matching_cards", schema: { type: "object", properties: { cards: { type: "array", items: { type: "object", properties: { id: { type: "number" }, term: { type: "string" }, definition: { type: "string" } }, required: [ "id", "term", "definition" ], additionalProperties: false } } }, required: [ "cards" ], additionalProperties: false } } }) }); const data = await response.json(); const generatedCards = JSON.parse(data.choices[0].message.content).cards; const gameCards = generatedCards.flatMap((card)=>[ { id: card.id, type: "term", term: card.term }, { id: card.id, type: "definition", definition: card.definition } ]).sort(()=>Math.random() - 0.5); setCards(gameCards); } catch (error) { console.error("Error generating cards:", error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen py-12 px-4 sm:px-6 lg:px-8", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 155, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto rounded-xl shadow-md overflow-hidden md:max-w-2xl p-8 relative", style: { backgroundColor: "#1d4c3e" }, __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-12 flex items-center gap-4", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://robertsdigitaledidactiek.created.app/", className: "text-white hover:text-[#e0d4bc] transition-colors", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tools text-xl", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", className: "text-white hover:text-[#e0d4bc] transition-colors", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white font-roboto text-left", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, "Matching game"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setFormData({ subject: "", topic: "", targetGroup: "", cardCount: "", specialNotes: "" }); }, className: "text-white font-bold py-1 px-3 rounded text-sm", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "Maak leeg"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setFormData({ subject: "Biologie", topic: "Dieren", targetGroup: "Vmbo basis 1", cardCount: "8", specialNotes: "Eigenschappen van dieren" }); }, className: "text-white font-bold py-1 px-3 rounded text-sm", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, "Demo")), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-roboto text-left", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }, "door Robert Mol"), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, ", "), /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#e0d4bc", textDecoration: "underline" }, __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, "www.digitaledidactiek.com"))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 228, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white font-roboto", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, "Welk vak geef je?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "subject", value: formData.subject, onChange: handleInputChange, className: "mt-1 block w-full rounded-md shadow-sm p-2 border text-[#e0d4bc]", style: { backgroundColor: "#143f31", borderColor: "#143f31" }, required: true, __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 243, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white font-roboto", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "Welk onderwerp gaat het over?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "topic", value: formData.topic, onChange: handleInputChange, className: "mt-1 block w-full rounded-md shadow-sm p-2 border text-[#e0d4bc]", style: { backgroundColor: "#143f31", borderColor: "#143f31" }, required: true, __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white font-roboto", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, "Welke doelgroep (welke klas)?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "targetGroup", value: formData.targetGroup, onChange: handleInputChange, className: "mt-1 block w-full rounded-md shadow-sm p-2 border text-[#e0d4bc]", style: { backgroundColor: "#143f31", borderColor: "#143f31" }, required: true, __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 271, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white font-roboto", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, "Hoeveel match kaarten? (Tip: Kies voor 8!)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "cardCount", value: formData.cardCount, onChange: handleInputChange, min: "1", max: "20", className: "mt-1 block w-full rounded-md shadow-sm p-2 border text-[#e0d4bc]", style: { backgroundColor: "#143f31", borderColor: "#143f31" }, required: true, __source: { fileName: "", lineNumber: 275, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 287, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white font-roboto", __source: { fileName: "", lineNumber: 288, columnNumber: 13 }, __self: this }, "Zijn er nog bijzonderheden?"), /*#__PURE__*/ React.createElement("textarea", { name: "specialNotes", value: formData.specialNotes, onChange: handleInputChange, rows: "3", className: "mt-1 block w-full rounded-md shadow-sm p-2 border text-[#e0d4bc]", style: { backgroundColor: "#143f31", borderColor: "#143f31" }, __source: { fileName: "", lineNumber: 291, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 300, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading, className: "flex-1 py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black disabled:opacity-50 disabled:cursor-not-allowed", style: { backgroundColor: "#e0d4bc" }, __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this }, isLoading ? "Bezig met genereren..." : "Genereer mijn matching game!"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>{ setFormData({ subject: "", topic: "", targetGroup: "", cardCount: "", specialNotes: "" }); }, className: "py-3 px-4 rounded-md shadow-sm text-sm font-medium", style: { backgroundColor: "#e0d4bc" }, __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this }, "Wis alles"))), cards.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center z-50 p-4", style: { backgroundColor: "rgba(20, 63, 49, 0.9)" }, __source: { fileName: "", lineNumber: 331, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl shadow-xl w-full h-full max-h-[90vh] overflow-y-auto p-8 relative", style: { backgroundColor: "#1d4c3e" }, __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setCards([]); setTimer(0); if (timerInterval) { clearInterval(timerInterval); setTimerInterval(null); } }, className: "absolute top-4 right-4 text-white hover:text-[#e0d4bc]", __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 350, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col", __source: { fileName: "", lineNumber: 352, columnNumber: 15 }, __self: this }, score === cards.length / 2 && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4 p-4 rounded-lg", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 354, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-xl text-white", __source: { fileName: "", lineNumber: 358, columnNumber: 21 }, __self: this }, "🎉 Gefeliciteerd! Je hebt alle matches gevonden in", " ", attempts, " pogingen en ", formatTime(timer), "!")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 364, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 365, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-white", __source: { fileName: "", lineNumber: 366, columnNumber: 21 }, __self: this }, "Matches: ", score, "/", cards.length / 2), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-white", __source: { fileName: "", lineNumber: 369, columnNumber: 21 }, __self: this }, "Pogingen: ", attempts)), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-white", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this }, "Tijd: ", formatTime(timer))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-6 flex-grow", __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, cards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-6 rounded-lg shadow-lg cursor-pointer transform transition-all duration-300 min-h-[150px] flex items-center justify-center ${matches.includes(index) ? "opacity-0 pointer-events-none" : incorrectPair.includes(index) ? "bg-red-200 scale-105" : selectedCards.includes(index) ? "bg-green-200 scale-105" : "hover:scale-105"}`, style: { backgroundColor: matches.includes(index) ? "transparent" : incorrectPair.includes(index) ? "#ffcdd2" : selectedCards.includes(index) ? "#c8e6c9" : "#ffffff" }, onClick: ()=>handleCardClick(index), __source: { fileName: "", lineNumber: 377, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl font-roboto text-center text-black", __source: { fileName: "", lineNumber: 399, columnNumber: 23 }, __self: this }, card.type === "term" ? card.term : card.definition))))))))); }

Matching game

door Robert Mol, www.digitaledidactiek.com