function MainComponent() { const [playerPosition, setPlayerPosition] = useState([ 1, 0, 1 ]); const [gameStarted, setGameStarted] = useState(false); const [currentLevel, setCurrentLevel] = useState(1); const [showMazeSelect, setShowMazeSelect] = useState(true); const [completedMazes, setCompletedMazes] = useState([]); const [showQuestion, setShowQuestion] = useState(false); const [currentQuestion, setCurrentQuestion] = useState(null); const [currentTile, setCurrentTile] = useState(null); const [redTilesEliminated, setRedTilesEliminated] = useState(0); const questions = [ { question: "What is Don Quixote's real name?", options: [ "Alonso Quijano", "Miguel Cervantes", "Sancho Panza", "Cardenio" ], correct: 0 }, { question: "What does Don Quixote mistake for giants?", options: [ "Trees", "Windmills", "Mountains", "Castles" ], correct: 1 }, { question: "Who is Don Quixote's squire?", options: [ "Dulcinea", "Rocinante", "Sancho Panza", "Cardenio" ], correct: 2 }, { question: "What is Don Quixote's horse's name?", options: [ "Rocinante", "Bucephalus", "Babieca", "Pegasus" ], correct: 0 }, { question: "What does 'quixotic' mean?", options: [ "Practical", "Idealistic", "Pessimistic", "Realistic" ], correct: 1 }, { question: "What is the name of Don Quixote's love interest?", options: [ "Dulcinea", "Teresa", "Maritornes", "Antonia" ], correct: 0 }, { question: "In what region of Spain does Don Quixote live?", options: [ "Andalusia", "La Mancha", "Catalonia", "Galicia" ], correct: 1 }, { question: "What type of books drove Don Quixote mad?", options: [ "History books", "Poetry books", "Chivalric romances", "Philosophy books" ], correct: 2 }, { question: "What is Sancho Panza promised for his service?", options: [ "Money", "Land", "An island", "A castle" ], correct: 2 }, { question: "What is Don Quixote's niece's name?", options: [ "Antonia", "Maria", "Teresa", "Isabella" ], correct: 0 }, { question: "What does Don Quixote's family do with his books?", options: [ "Sell them", "Burn them", "Hide them", "Give them away" ], correct: 1 }, { question: "What is Sancho Panza's wife's name?", options: [ "Maria", "Teresa", "Juana", "Isabella" ], correct: 1 }, { question: "What weapon does Don Quixote primarily use?", options: [ "Sword", "Lance", "Axe", "Bow" ], correct: 1 }, { question: "What does Don Quixote mistake for an army?", options: [ "Travelers", "Sheep", "Trees", "Clouds" ], correct: 1 }, { question: "What is the barber's basin mistaken for?", options: [ "Crown", "Helmet", "Shield", "Treasure" ], correct: 1 } ]; const mazes = [ [ [ 1, 1, 1, 1, 1 ], [ 1, 0, 2, 0, 1 ], [ 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 1 ], [ 1, 1, 0, 3, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 2, 0, 1, 0, 1 ], [ 1, 1, 1, 0, 2, 0, 1 ], [ 1, 0, 0, 0, 1, 1, 1 ], [ 1, 0, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 3, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 2, 0, 0, 2, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 1, 0, 1 ], [ 1, 1, 1, 1, 0, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 1 ], [ 1, 0, 1, 0, 1, 1, 0, 1 ], [ 1, 3, 1, 1, 1, 1, 1, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 2, 0, 0, 0, 2, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 2, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 3, 1, 1, 1, 1, 1, 1, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 2, 0, 1, 0, 2, 0, 2, 1 ], [ 1, 0, 1, 0, 1, 0, 1, 1, 0, 1 ], [ 1, 0, 1, 0, 0, 0, 0, 1, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 0, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 1, 0, 2, 0, 1 ], [ 1, 1, 1, 1, 0, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 1, 0, 1 ], [ 1, 0, 1, 0, 1, 1, 0, 0, 0, 1 ], [ 1, 3, 1, 0, 1, 1, 1, 1, 1, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1 ], [ 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1 ], [ 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 1, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 1, 0, 0, 2, 0, 0, 0, 1, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 1, 0, 0, 2, 0, 0, 0, 0, 0, 1, 0, 1 ], [ 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1 ], [ 1, 0, 1, 0, 0, 2, 0, 0, 0, 1, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 1, 0, 0, 0, 1, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 1, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 3, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1 ] ], [ [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 1, 0, 0, 2, 1, 0, 0, 0, 0, 0, 1, 0, 1 ], [ 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1 ], [ 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 3, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1 ] ] ]; const [mazeState, setMazeState] = useState(mazes[0]); const movePlayer = useCallback((direction)=>{ if (!gameStarted) return; setPlayerPosition((prev)=>{ const [x, y, z] = prev; let newX = x; let newZ = z; switch(direction){ case "up": newZ = z - 1; break; case "down": newZ = z + 1; break; case "left": newX = x - 1; break; case "right": newX = x + 1; break; } if (newX < 0 || newX >= mazeState[0].length || newZ < 0 || newZ >= mazeState.length) return prev; if (mazeState[newZ][newX] === 1) return prev; if (mazeState[newZ][newX] === 2) { setShowQuestion(true); const questionIndex = Math.floor((currentLevel - 1) * 1.5 + (newX + newZ) % 5); setCurrentQuestion(questions[questionIndex % questions.length]); setCurrentTile([ newX, newZ ]); return prev; } if (mazeState[newZ][newX] === 3) { setCompletedMazes((prev)=>prev.includes(currentLevel) ? prev : [ ...prev, currentLevel ]); setShowMazeSelect(true); setGameStarted(false); setPlayerPosition([ 1, 0, 1 ]); return [ 1, 0, 1 ]; } return [ newX, y, newZ ]; }); }, [ mazeState, gameStarted, currentLevel ]); const handleKeyPress = useCallback((e)=>{ const keyActions = { ArrowUp: ()=>movePlayer("up"), ArrowDown: ()=>movePlayer("down"), ArrowLeft: ()=>movePlayer("left"), ArrowRight: ()=>movePlayer("right") }; if (keyActions[e.key]) keyActions[e.key](); }, [ movePlayer ]); useEffect(()=>{ window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, [ handleKeyPress ]); return /*#__PURE__*/ React.createElement("div", { className: "h-screen w-full bg-[#F5E6D3] relative overflow-hidden flex flex-col items-center justify-center bg-[url('/images/parchment-texture.jpg')] bg-cover", __source: { fileName: "", lineNumber: 297, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[600px] md:w-[800px] relative", __source: { fileName: "", lineNumber: 298, columnNumber: 7 }, __self: this }, showMazeSelect ? /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#2B1810] bg-opacity-90 flex flex-col items-center justify-center p-8 rounded-xl border-4 border-[#8B4513]", __source: { fileName: "", lineNumber: 300, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#DEB887] font-crimson-text text-4xl mb-8 text-center", __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this }, "Don Quixote's Labyrinth of La Mancha"), /*#__PURE__*/ React.createElement("div", { className: "text-[#DEB887] font-crimson-text text-xl mb-4", __source: { fileName: "", lineNumber: 304, columnNumber: 13 }, __self: this }, "Quests Completed: ", completedMazes.length, " / ", mazes.length), /*#__PURE__*/ React.createElement("div", { className: "text-[#DEB887] font-crimson-text text-xl mb-8", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, "Windmills Conquered: ", redTilesEliminated), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 310, columnNumber: 13 }, __self: this }, mazes.map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>{ setCurrentLevel(index + 1); setMazeState(mazes[index]); setShowMazeSelect(false); setGameStarted(true); }, className: `px-8 py-4 ${completedMazes.includes(index + 1) ? "bg-[#8B4513] hover:bg-[#A0522D]" : "bg-[#4A3728] hover:bg-[#5C4434]"} text-[#DEB887] rounded-lg relative border-2 border-[#DEB887]`, __source: { fileName: "", lineNumber: 312, columnNumber: 17 }, __self: this }, "Chapter ", index + 1, completedMazes.includes(index + 1) && /*#__PURE__*/ React.createElement("i", { className: "fas fa-scroll absolute top-2 right-2", __source: { fileName: "", lineNumber: 328, columnNumber: 21 }, __self: this }))))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center mb-4 space-y-2 md:space-y-0", __source: { fileName: "", lineNumber: 336, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#2B1810] font-crimson-text text-xl", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, "Chapter: ", currentLevel), /*#__PURE__*/ React.createElement("div", { className: "text-[#2B1810] font-crimson-text text-xl", __source: { fileName: "", lineNumber: 340, columnNumber: 15 }, __self: this }, "Windmills Conquered: ", redTilesEliminated), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowMazeSelect(true); setGameStarted(false); setPlayerPosition([ 1, 0, 1 ]); }, className: "px-4 py-2 bg-[#8B4513] text-[#DEB887] rounded-lg hover:bg-[#A0522D] border-2 border-[#2B1810] transition-colors duration-300", __source: { fileName: "", lineNumber: 343, columnNumber: 15 }, __self: this }, "Return to Library")), /*#__PURE__*/ React.createElement("div", { className: "grid border-4 border-[#8B4513] rounded-lg overflow-hidden", style: { gridTemplateColumns: `repeat(${mazeState[0].length}, 1fr)`, gap: "2px" }, __source: { fileName: "", lineNumber: 354, columnNumber: 13 }, __self: this }, mazeState.map((row, z)=>row.map((cell, x)=>/*#__PURE__*/ React.createElement("div", { key: `${x}-${z}`, className: `aspect-square transition-colors duration-300 hover:opacity-90 ${cell === 1 ? "bg-[#8B4513]" : cell === 2 ? "bg-[#A0522D] animate-[tileHover_2s_ease-in-out_infinite]" : cell === 3 ? "bg-[#2B1810]" : "bg-[#DEB887]"} ${playerPosition[0] === x && playerPosition[2] === z ? "relative" : ""}`, __source: { fileName: "", lineNumber: 363, columnNumber: 19 }, __self: this }, playerPosition[0] === x && playerPosition[2] === z && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center animate-[playerBounce_1s_ease-in-out_infinite]", __source: { fileName: "", lineNumber: 380, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-horse text-4xl md:text-5xl text-[#2B1810] drop-shadow-[0_0_3px_rgba(222,184,135,0.8)]", __source: { fileName: "", lineNumber: 381, columnNumber: 25 }, __self: this })))))), showQuestion && currentQuestion && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#2B1810] bg-opacity-90 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 389, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#4A3728] p-6 md:p-8 rounded-lg w-full max-w-[400px] border-4 border-[#8B4513]", __source: { fileName: "", lineNumber: 390, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#DEB887] font-crimson-text text-lg md:text-xl mb-4", __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }, currentQuestion.question), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }, currentQuestion.options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>{ if (index === currentQuestion.correct) { const newMaze = [ ...mazeState ]; newMaze[currentTile[1]][currentTile[0]] = 0; setMazeState(newMaze); setShowQuestion(false); setRedTilesEliminated((prev)=>prev + 1); } else { setShowQuestion(false); setPlayerPosition([ 1, 0, 1 ]); } }, className: "w-full p-2 bg-[#8B4513] text-[#DEB887] rounded hover:bg-[#A0522D] border-2 border-[#DEB887] transition-colors duration-300", __source: { fileName: "", lineNumber: 396, columnNumber: 23 }, __self: this }, option))))), /*#__PURE__*/ React.createElement("div", { className: "text-[#2B1810] font-crimson-text text-lg md:text-xl mt-4 text-center", __source: { fileName: "", lineNumber: 419, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 420, columnNumber: 15 }, __self: this }, "↑ - Guide Rocinante Forward"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 421, columnNumber: 15 }, __self: this }, "↓ - Guide Rocinante Back"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 422, columnNumber: 15 }, __self: this }, "← - Guide Rocinante Left"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 423, columnNumber: 15 }, __self: this }, "→ - Guide Rocinante Right")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 428, columnNumber: 7 }, __self: this }, ` @keyframes tileHover { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes playerBounce { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } `)); }