"use client"; function MainComponent() { const [mazeSize, setMazeSize] = React.useState(30); const [startColor, setStartColor] = React.useState("#0000FF"); const [endColor, setEndColor] = React.useState("#FF0000"); const [maze1, setMaze] = React.useState(null); const [solving, setSolving] = React.useState(false); const [path, setPath] = React.useState([]); const canvasRef = React.useRef(null); const generateMaze = ()=>{ const newMaze = createMaze(mazeSize, mazeSize); setMaze(newMaze); setSolving(false); setPath([]); drawMaze1(newMaze); }; const solveMaze = async ()=>{ if (!maze1) return; setSolving(true); const solution = await solveMazeLeftHand(maze1, [ 0, 0 ], [ mazeSize - 1, mazeSize - 1 ]); setPath(solution); await drawSolutionAnimation(solution); setSolving(false); }; const drawMaze1 = (maze1)=>{ const canvas = canvasRef.current; const ctx1 = canvas.getContext("2d"); ctx1.clearRect(0, 0, canvas.width, canvas.height); const cellSize1 = canvas.width / maze1.length; ctx1.fillStyle = "#FFFFFF"; ctx1.fillRect(0, 0, canvas.width, canvas.height); ctx1.fillStyle = startColor; ctx1.fillRect(0, 0, cellSize1, cellSize1); ctx1.fillStyle = endColor; ctx1.fillRect(canvas.width - cellSize1, canvas.height - cellSize1, cellSize1, cellSize1); ctx1.strokeStyle = "#000000"; ctx1.lineWidth = 1; for(let y = 0; y < maze1.length; y++){ for(let x = 0; x < maze1[y].length; x++){ if (maze1[y][x].walls.top) { ctx1.beginPath(); ctx1.moveTo(x * cellSize1, y * cellSize1); ctx1.lineTo((x + 1) * cellSize1, y * cellSize1); ctx1.stroke(); } if (maze1[y][x].walls.right) { ctx1.beginPath(); ctx1.moveTo((x + 1) * cellSize1, y * cellSize1); ctx1.lineTo((x + 1) * cellSize1, (y + 1) * cellSize1); ctx1.stroke(); } if (maze1[y][x].walls.bottom) { ctx1.beginPath(); ctx1.moveTo(x * cellSize1, (y + 1) * cellSize1); ctx1.lineTo((x + 1) * cellSize1, (y + 1) * cellSize1); ctx1.stroke(); } if (maze1[y][x].walls.left) { ctx1.beginPath(); ctx1.moveTo(x * cellSize1, y * cellSize1); ctx1.lineTo(x * cellSize1, (y + 1) * cellSize1); ctx1.stroke(); } } } }; const drawSolutionAnimation = async (path)=>{ const canvas = canvasRef.current; const ctx1 = canvas.getContext("2d"); const cellSize1 = canvas.width / maze1.length; ctx1.fillStyle = "#FFA500"; for(let i = 0; i < path.length; i++){ const [x, y] = path[i]; ctx1.fillRect(x * cellSize1, y * cellSize1, cellSize1, cellSize1); if (i > 0) { const [prevX1, prevY1] = path[i - 1]; ctx1.fillStyle = `rgba(255, 165, 0, ${1 - i / path.length})`; setTimeout(()=>{ ctx1.clearRect(prevX1 * cellSize1, prevY1 * cellSize1, cellSize1, cellSize1); drawMaze1(maze1); }, 100); } await new Promise((resolve)=>setTimeout(resolve, 100)); } }; React.useEffect(()=>{ generateMaze(); }, [ mazeSize ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 118, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 font-roboto", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, "Maze Generator & Solver"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mazeSize", className: "mr-2 font-medium font-roboto", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "Maze Size:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "mazeSize", name: "mazeSize", min: "5", max: "50", value: mazeSize, onChange: (e)=>setMazeSize(parseInt(e.target.value)), className: "border border-gray-300 rounded px-2 py-1 w-20 font-roboto", disabled: solving, __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "startColor", className: "mr-2 font-medium font-roboto", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, "Start Color:"), /*#__PURE__*/ React.createElement("input", { type: "color", id: "startColor", name: "startColor", value: startColor, onChange: (e)=>setStartColor(e.target.value), className: "w-10 h-10 border-none", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "endColor", className: "ml-4 mr-2 font-medium font-roboto", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, "End Color:"), /*#__PURE__*/ React.createElement("input", { type: "color", id: "endColor", name: "endColor", value: endColor, onChange: (e)=>setEndColor(e.target.value), className: "w-10 h-10 border-none", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, width: 400, height: 400, className: "border border-gray-300 mb-4", __source: { fileName: "", lineNumber: 162, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateMaze, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mr-4 font-roboto", disabled: solving, __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, "Generate Maze"), /*#__PURE__*/ React.createElement("button", { onClick: solveMaze, disabled: solving, className: "bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded font-roboto disabled:opacity-50", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, solving ? "Solving..." : "Solve Maze"))); } function createMaze(width, height) { const maze1 = []; for(let y = 0; y < height; y++){ const row = []; for(let x = 0; x < width; x++){ row.push({ x, y, visited: false, walls: { top: true, right: true, bottom: true, left: true } }); } maze1.push(row); } const stack = [ [ 0, 0 ] ]; while(stack.length > 0){ const [x, y] = stack.pop(); const cell = maze1[y][x]; cell.visited = true; const neighbors = getUnvisitedNeighbors(maze1, x, y); if (neighbors.length > 0) { stack.push([ x, y ]); const [nx, ny] = neighbors[Math.floor(Math.random() * neighbors.length)]; removeWallBetween(cell, maze1[ny][nx]); stack.push([ nx, ny ]); } } return maze1; } function getUnvisitedNeighbors(maze1, x, y) { const neighbors = []; if (y > 0 && !maze1[y - 1][x].visited) neighbors.push([ x, y - 1 ]); if (x < maze1[0].length - 1 && !maze1[y][x + 1].visited) neighbors.push([ x + 1, y ]); if (y < maze1.length - 1 && !maze1[y + 1][x].visited) neighbors.push([ x, y + 1 ]); if (x > 0 && !maze1[y][x - 1].visited) neighbors.push([ x - 1, y ]); return neighbors; } function removeWallBetween(cellA, cellB) { if (cellA.x === cellB.x) { if (cellA.y < cellB.y) { cellA.walls.bottom = false; cellB.walls.top = false; } else { cellA.walls.top = false; cellB.walls.bottom = false; } } else { if (cellA.x < cellB.x) { cellA.walls.right = false; cellB.walls.left = false; } else { cellA.walls.left = false; cellB.walls.right = false; } } } async function solveMazeLeftHand(maze1, start, end) { let [x, y] = start; const cell = maze1[y][x]; cell.visited = true; const path = [ start ]; let direction = "up"; while(x !== end[0] || y !== end[1]){ const neighbors = getNeighborsWithoutWalls(maze1, x, y); let nextDirection; if (direction === "up") { nextDirection = neighbors.includes("left") ? "left" : neighbors.includes("up") ? "up" : neighbors.includes("right") ? "right" : "down"; } else if (direction === "right") { nextDirection = neighbors.includes("up") ? "up" : neighbors.includes("right") ? "right" : neighbors.includes("down") ? "down" : "left"; } else if (direction === "down") { nextDirection = neighbors.includes("right") ? "right" : neighbors.includes("down") ? "down" : neighbors.includes("left") ? "left" : "up"; } else if (direction === "left") { nextDirection = neighbors.includes("down") ? "down" : neighbors.includes("left") ? "left" : neighbors.includes("up") ? "up" : "right"; } direction = nextDirection; if (direction === "up") { y--; } else if (direction === "right") { x++; } else if (direction === "down") { y++; } else if (direction === "left") { x--; } path.push([ x, y ]); } return path; } function getNeighborsWithoutWalls(maze1, x, y) { const neighbors = []; const cell = maze1[y][x]; if (y > 0 && !cell.walls.top) neighbors.push("up"); if (x < maze1[0].length - 1 && !cell.walls.right) neighbors.push("right"); if (y < maze1.length - 1 && !cell.walls.bottom) neighbors.push("down"); if (x > 0 && !cell.walls.left) neighbors.push("left"); return neighbors; } setTimeout(()=>{ ctx.clearRect(prevX * cellSize, prevY * cellSize, cellSize, cellSize); drawMaze(maze); }, 100);