function MainComponent() { const [words, setWords] = useState([ { spanish: "gato", english: "cat" }, { spanish: "perro", english: "dog" }, { spanish: "casa", english: "house" }, { spanish: "árbol", english: "tree" }, { spanish: "libro", english: "book" }, { spanish: "sol", english: "sun" }, { spanish: "luna", english: "moon" }, { spanish: "agua", english: "water" }, { spanish: "pan", english: "bread" }, { spanish: "leche", english: "milk" }, { spanish: "mesa", english: "table" }, { spanish: "silla", english: "chair" }, { spanish: "puerta", english: "door" }, { spanish: "ventana", english: "window" }, { spanish: "flor", english: "flower" }, { spanish: "manzana", english: "apple" }, { spanish: "coche", english: "car" }, { spanish: "reloj", english: "clock" }, { spanish: "papel", english: "paper" }, { spanish: "playa", english: "beach" }, { spanish: "cielo", english: "sky" }, { spanish: "mar", english: "sea" }, { spanish: "río", english: "river" }, { spanish: "montaña", english: "mountain" }, { spanish: "zapato", english: "shoe" } ]); const [currentWord, setCurrentWord] = useState(null); const [bingoCard, setBingoCard] = useState([]); const [selectedWords, setSelectedWords] = useState([]); const [points, setPoints] = useState(0); const [attempts, setAttempts] = useState({}); const [winner, setWinner] = useState(false); const [usedWords, setUsedWords] = useState([]); const [comment, setComment] = useState(""); const [loading, setLoading] = useState(false); const winningLines = [ [ 0, 1, 2, 3, 4 ], [ 5, 6, 7, 8, 9 ], [ 10, 11, 12, 13, 14 ], [ 15, 16, 17, 18, 19 ], [ 20, 21, 22, 23, 24 ], [ 0, 5, 10, 15, 20 ], [ 1, 6, 11, 16, 21 ], [ 2, 7, 12, 17, 22 ], [ 3, 8, 13, 18, 23 ], [ 4, 9, 14, 19, 24 ], [ 0, 6, 12, 18, 24 ], [ 4, 8, 12, 16, 20 ] ]; useEffect(()=>{ const generateBingoCard = ()=>{ const shuffled = [ ...words ].sort(()=>0.5 - Math.random()); const selected = shuffled.slice(0, 25); setBingoCard(selected); }; generateBingoCard(); }, []); const generateWord = ()=>{ if (usedWords.length === words.length) { return; } let newWord; do { newWord = words[Math.floor(Math.random() * words.length)]; }while (usedWords.includes(newWord)) setUsedWords([ ...usedWords, newWord ]); setCurrentWord(newWord); }; const selectWord = (word)=>{ if (currentWord && word.spanish === currentWord.spanish) { setSelectedWords([ ...selectedWords, word ]); const isFirstAttempt = !attempts[currentWord.spanish]; setAttempts((prev)=>({ ...prev, [currentWord.spanish]: true })); setPoints((prev)=>prev + (isFirstAttempt ? 10 : -5)); } else { setPoints((prev)=>prev - 5); } }; useEffect(()=>{ const checkWin = ()=>{ const hasWon = winningLines.some((line)=>line.every((index)=>selectedWords.includes(bingoCard[index]))); if (hasWon && points >= 100) { setWinner(true); } }; checkWin(); if (currentWord) { getComment(); } }, [ selectedWords, bingoCard, currentWord, points ]); const getComment = async ()=>{ if (!currentWord) return; setLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Dame un dato divertido para niños sobre la palabra "${currentWord.spanish}" (${currentWord.english}) en español. Máximo 2 frases.` } ] }) }); const data = await response.json(); setComment(data.choices[0].message.content); } catch (err) { console.error(err); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-4", __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8 font-crimson-text text-[#333]", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, "Bingo de Vocabulario Español"), /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateWord, disabled: winner, className: "bg-[#e63946] text-white px-6 py-3 rounded-lg font-bold hover:bg-[#c1121f] transition-colors", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, "Nueva Palabra"), currentWord && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, "Palabra actual: ", currentWord.english), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, "Cargando dato divertido...") : /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 italic", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, comment))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4 mb-8", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-1 md:col-span-3", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-2", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, bingoCard.map((word, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>selectWord(word), className: `aspect-square flex items-center justify-center text-xl font-bold rounded-lg cursor-pointer p-2 ${selectedWords.includes(word) ? "bg-[#2a9d8f] text-white" : "bg-white text-[#333] hover:bg-[#f0f0f0]"}`, __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, word.spanish)))), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mb-4 text-[#2a9d8f]", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "Puntos: ", points), winner && /*#__PURE__*/ React.createElement("div", { className: "mb-6 pt-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#2a9d8f] font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, "¡BINGO! ¡Has ganado! 🎉")), !winner && points < 100 && bingoCard.length > 0 && winningLines.some((line)=>line.every((index)=>selectedWords.includes(bingoCard[index]))) && /*#__PURE__*/ React.createElement("div", { className: "mb-6 pt-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#e63946] font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 197, columnNumber: 21 }, __self: this }, "¡Necesitas 100 puntos para ganar!")), /*#__PURE__*/ React.createElement("div", { className: "pt-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, "Palabras usadas:"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }, usedWords.map((w, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: "inline-block mr-2 mb-2 bg-gray-100 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 207, columnNumber: 21 }, __self: this }, w.english))))))), /*#__PURE__*/ React.createElement("div", { className: "pb-12", __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this }))); }