function MainComponent() { const spanishPlates = [ { name: "Paella Valenciana", ingredients: [ "arroz", "azafrán", "pollo", "judías verdes" ], difficulty: "difícil", region: "Valencia", image: "/paella.jpg" }, { name: "Tortilla Española", ingredients: [ "huevo", "patatas", "cebolla" ], difficulty: "fácil", region: "Toda España", image: "/tortilla.jpg" }, { name: "Gazpacho", ingredients: [ "tomate", "pepino", "pan" ], difficulty: "medio", region: "Andalucía", image: "/gazpacho.jpg" }, { name: "Fabada", ingredients: [ "fabes", "chorizo", "morcilla" ], difficulty: "difícil", region: "Asturias", image: "/fabada.jpg" }, { name: "Cocido Madrileño", ingredients: [ "garbanzos", "carne", "repollo" ], difficulty: "difícil", region: "Madrid", image: "/cocido.jpg" }, { name: "Pulpo a la Gallega", ingredients: [ "pulpo", "patatas", "pimentón" ], difficulty: "medio", region: "Galicia", image: "/pulpo.jpg" }, { name: "Pisto", ingredients: [ "calabacín", "tomate", "pimiento" ], difficulty: "fácil", region: "La Mancha", image: "/pisto.jpg" }, { name: "Croquetas", ingredients: [ "bechamel", "jamón", "pan rallado" ], difficulty: "medio", region: "Toda España", image: "/croquetas.jpg" }, { name: "Callos", ingredients: [ "callos", "chorizo", "pimentón" ], difficulty: "difícil", region: "Madrid", image: "/callos.jpg" }, { name: "Rabo de Toro", ingredients: [ "rabo", "vino tinto", "zanahoria" ], difficulty: "difícil", region: "Andalucía", image: "/rabo.jpg" }, { name: "Albóndigas", ingredients: [ "carne picada", "ajo", "huevo" ], difficulty: "fácil", region: "Toda España", image: "/albondigas.jpg" }, { name: "Patatas Bravas", ingredients: [ "patatas", "salsa brava", "ajo" ], difficulty: "fácil", region: "Madrid", image: "/bravas.jpg" }, { name: "Fideuá", ingredients: [ "fideos", "pescado", "azafrán" ], difficulty: "difícil", region: "Valencia", image: "/fideua.jpg" }, { name: "Migas", ingredients: [ "pan", "ajo", "chorizo" ], difficulty: "medio", region: "Extremadura", image: "/migas.jpg" }, { name: "Cachopo", ingredients: [ "ternera", "jamón", "queso" ], difficulty: "medio", region: "Asturias", image: "/cachopo.jpg" } ]; const [currentPlate, setCurrentPlate] = useState(spanishPlates[0]); const [selectedIngredients, setSelectedIngredients] = useState([]); const [points, setPoints] = useState(0); const [message, setMessage] = useState(""); const [showVictory, setShowVictory] = useState(false); const [lives, setLives] = useState(3); const [completedPlates, setCompletedPlates] = useState([]); const [showMenu, setShowMenu] = useState(false); const [streak, setStreak] = useState(0); const [bestStreak, setBestStreak] = useState(0); const [timer, setTimer] = useState(60); const [isActive, setIsActive] = useState(false); const commonIngredients = [ "arroz", "azafrán", "pollo", "judías verdes", "huevo", "patatas", "cebolla", "tomate", "pepino", "pan", "fabes", "chorizo", "morcilla", "garbanzos", "carne", "repollo", "pulpo", "pimentón", "calabacín", "pimiento", "bechamel", "jamón", "pan rallado", "callos", "rabo", "vino tinto", "zanahoria", "ajo", "carne picada", "salsa brava", "fideos", "pescado", "ternera", "queso" ]; useEffect(()=>{ let interval = null; if (isActive && timer > 0) { interval = setInterval(()=>{ setTimer((timer)=>timer - 1); }, 1000); } else if (timer === 0) { setMessage("¡Se acabó el tiempo! 😢"); setTimeout(resetGame, 2000); } return ()=>clearInterval(interval); }, [ isActive, timer ]); const checkIngredient = (ingredient)=>{ if (selectedIngredients.includes(ingredient)) return; if (!isActive) { setIsActive(true); } const newSelected = [ ...selectedIngredients, ingredient ]; setSelectedIngredients(newSelected); if (newSelected.length === currentPlate.ingredients.length) { const isCorrect = newSelected.every((ing)=>currentPlate.ingredients.includes(ing)); if (isCorrect) { const difficultyPoints = { fácil: 30, medio: 50, difícil: 80 }; const timeBonus = Math.floor(timer / 10) * 5; const newStreak = streak + 1; setStreak(newStreak); setBestStreak(Math.max(bestStreak, newStreak)); setShowVictory(true); setCompletedPlates([ ...completedPlates, currentPlate.name ]); setMessage(`¡Felicidades! Has descubierto ${currentPlate.name} 🎉`); setPoints(points + difficultyPoints[currentPlate.difficulty] + timeBonus); } else { setStreak(0); setLives(lives - 1); if (lives <= 1) { setMessage("¡Game Over! 😢"); setTimeout(resetGame, 2000); } else { setMessage(`¡Incorrecto! Te quedan ${lives - 1} vidas ❤️`); setSelectedIngredients([]); } } } }; const selectPlate = (plate)=>{ setCurrentPlate(plate); setSelectedIngredients([]); setMessage(""); setShowVictory(false); setShowMenu(false); setTimer(60); setIsActive(false); }; const resetGame = ()=>{ setLives(3); setSelectedIngredients([]); setMessage(""); setShowVictory(false); setShowMenu(false); setPoints(0); setStreak(0); setCompletedPlates([]); setCurrentPlate(spanishPlates[0]); setTimer(60); setIsActive(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-4", __source: { fileName: "", lineNumber: 238, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 239, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#2c3e50] mb-2 font-montserrat animate-[bounce_1s_ease-in-out_infinite]", __source: { fileName: "", lineNumber: 241, columnNumber: 11 }, __self: this }, "🥘 Foodle España"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center gap-4 mb-4", __source: { fileName: "", lineNumber: 244, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#34495e] font-roboto", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, "Puntos: ", points), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#e74c3c] font-roboto", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, "Vidas: ", "❤️".repeat(lives)), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#27ae60] font-roboto", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, "Racha: ", streak, " 🔥"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#8e44ad] font-roboto", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, "Tiempo: ", timer, "s ⏱️")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMenu(!showMenu), className: "bg-[#3498db] hover:bg-[#2980b9] text-white px-4 py-2 rounded-lg mb-4", __source: { fileName: "", lineNumber: 258, columnNumber: 11 }, __self: this }, showMenu ? "Cerrar Menú" : "Elegir Plato"), showMenu && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2 mb-4", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, spanishPlates.map((plate)=>/*#__PURE__*/ React.createElement("button", { key: plate.name, onClick: ()=>selectPlate(plate), className: `p-2 rounded-lg ${completedPlates.includes(plate.name) ? "bg-green-500 text-white" : "bg-[#3498db] hover:bg-[#2980b9] text-white"}`, __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 277, columnNumber: 21 }, __self: this }, plate.name, " ", completedPlates.includes(plate.name) ? "✅" : ""), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 281, columnNumber: 21 }, __self: this }, plate.difficulty, " - ", plate.region))))), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-2 font-roboto", __source: { fileName: "", lineNumber: 289, columnNumber: 11 }, __self: this }, "Adivina los ", currentPlate.ingredients.length, " ingredientes de:", " ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 291, columnNumber: 13 }, __self: this }, currentPlate.name)), message && /*#__PURE__*/ React.createElement("div", { className: `text-lg ${message.includes("Correcto") || message.includes("Felicidades") ? "text-green-600 animate-[bounce_1s_ease-in-out]" : "text-red-600 animate-[shake_0.5s_ease-in-out]"} font-roboto`, __source: { fileName: "", lineNumber: 294, columnNumber: 13 }, __self: this }, message), showVictory && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-green-100 rounded-lg animate-[bounce_1s_ease-in-out]", __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-green-800", __source: { fileName: "", lineNumber: 306, columnNumber: 15 }, __self: this }, "¡Victoria! 🏆"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-green-700 mt-2", __source: { fileName: "", lineNumber: 307, columnNumber: 15 }, __self: this }, "Elige otro plato para continuar jugando"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 md:grid-cols-5 gap-2 mb-8", __source: { fileName: "", lineNumber: 313, columnNumber: 9 }, __self: this }, selectedIngredients.map((ingredient, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg text-center ${currentPlate.ingredients.includes(ingredient) ? "bg-green-500 text-white" : "bg-red-500 text-white"} font-roboto`, __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, ingredient))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 md:grid-cols-5 gap-2", __source: { fileName: "", lineNumber: 327, columnNumber: 9 }, __self: this }, commonIngredients.map((ingredient, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>checkIngredient(ingredient), disabled: selectedIngredients.includes(ingredient), className: `p-2 rounded-lg ${selectedIngredients.includes(ingredient) ? "bg-gray-300 cursor-not-allowed" : "bg-[#3498db] hover:bg-[#2980b9] text-white cursor-pointer"} transition-colors duration-200 font-roboto`, __source: { fileName: "", lineNumber: 329, columnNumber: 13 }, __self: this }, ingredient))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8", __source: { fileName: "", lineNumber: 343, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "bg-[#e74c3c] hover:bg-[#c0392b] text-white px-6 py-2 rounded-lg transition-colors duration-200 font-roboto", __source: { fileName: "", lineNumber: 344, columnNumber: 11 }, __self: this }, showVictory ? "Siguiente plato" : "Reiniciar"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 352, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } `)); }