From 44386322772fc36674e2692e7ef15ab2c2422fc5 Mon Sep 17 00:00:00 2001 From: suaebahmed Date: Thu, 7 Dec 2023 15:54:04 +0600 Subject: [PATCH 1/2] resize feature --- src/Pages/PathfindingVS.jsx | 156 ++++++++----- src/Pages/PrimeSpiral.jsx | 2 +- src/algorithm/maze/kruskal-algorithm.js | 188 ++++++++-------- src/components/Btn.tsx | 4 +- src/styles/PathfindingVS.css | 279 +++++++----------------- 5 files changed, 287 insertions(+), 342 deletions(-) diff --git a/src/Pages/PathfindingVS.jsx b/src/Pages/PathfindingVS.jsx index f0a2978..601a47b 100644 --- a/src/Pages/PathfindingVS.jsx +++ b/src/Pages/PathfindingVS.jsx @@ -8,7 +8,7 @@ import Dijkstra from "../algorithm/path/dijkstra"; import Randomized_dfs from "../algorithm/maze/randomized_dfs"; import recursiveDivision from "../algorithm/maze/recursive_division"; import Navbar from "../components/Navbar"; -import Modal from "../components/Modal"; +// import Modal from "../components/Modal"; import { KruskalAlgorithm } from "../algorithm/maze/kruskal-algorithm"; import { PrimsAlgorithm } from "../algorithm/maze/prim's-algorithm"; import { CostomCheckBox } from "../components/Costom-checkbox.tsx"; @@ -19,11 +19,14 @@ super(props);// call the super class constructor and pass in the props parameter */ var rows = 13; var cols = 31; - const CELL_SIZE = 30; -const PADDING = 200; -const MAX_ROW = Math.floor((window.innerHeight - PADDING) / CELL_SIZE); -if (MAX_ROW > rows) rows = MAX_ROW >= 19 ? 19 : MAX_ROW; // Rows = [13, 19] +const PADDING_Y = 200; +const PADDING_X = 300; + +rows = Math.floor((window.innerHeight - PADDING_Y) / CELL_SIZE); +if (rows > 50) rows = 51; // Rows = [13, 50] +cols = Math.floor((window.innerWidth - PADDING_X) / CELL_SIZE); +if (cols > 50) cols = 51; // cols = [31, 50] var START_NODE_ROW = 4, START_NODE_COL = 6; @@ -35,21 +38,22 @@ var INT_END_ROW = END_NODE_ROW, INIT_END_COL = END_NODE_COL; const FAST = 5; -const AVERAGE = 15; -const SLOW = 50; -var animateTime = AVERAGE; // default +const AVERAGE = 30; +const SLOW = 80; +var SPEED = AVERAGE; // default // old value: 8,35,80 function App() { const [Grid, setGrid] = useState([]); // array destructuring const [isMousePress, setIsMousePress] = useState(false); const [animateType, setAnimateTimeType] = useState(2); - const [mazeID, setMazeID] = useState(0); + const [cellSize, setCellSize] = useState(CELL_SIZE); // [20, 35] + const [mazeID, setMazeID] = useState(2); const [pathID, setPathID] = useState(0); useEffect(() => { gridInitialize(); - }, []); + }, [cellSize]); const gridInitialize = () => { var grid = new Array(rows); @@ -72,7 +76,14 @@ function App() { async function animateVisitedNodes(visitedNodes) { for (let i = 0; i < visitedNodes.length; i++) { const node = visitedNodes[i]; - await waitForAnimatoin(animateTime); + await waitForAnimate(SPEED); + document.getElementById( + `row${node.x}_col${node.y}` + ).style.width = `${cellSize}px`; + document.getElementById( + `row${node.x}_col${node.y}` + ).style.height = `${cellSize}px`; + if (node.x === START_NODE_ROW && node.y === START_NODE_COL) document.getElementById(`row${node.x}_col${node.y}`).className = "node-visited START_NODE cursor-grab"; @@ -88,7 +99,14 @@ function App() { pathNode.reverse(); for (let i = 0; i < pathNode.length; i++) { const node = pathNode[i]; - await waitForAnimatoin(animateTime); + await waitForAnimate(SPEED); + document.getElementById( + `row${node.x}_col${node.y}` + ).style.width = `${cellSize}px`; + document.getElementById( + `row${node.x}_col${node.y}` + ).style.height = `${cellSize}px`; + if (i === 0) document.getElementById(`row${node.x}_col${node.y}`).className = "shortestPath START_NODE cursor-grab"; @@ -148,7 +166,7 @@ function App() { (ar[i].r === END_NODE_ROW && ar[i].c === END_NODE_COL) ) continue; - await waitForAnimatoin(animateTime); + await waitForAnimate(SPEED); createWall(ar[i].r, ar[i].c); } }; @@ -250,10 +268,11 @@ function App() { setIsMousePress(() => false); }; const animationTimeHandle = (type) => { - if (type === 1) animateTime = FAST; - else if (type === 2) animateTime = AVERAGE; - else animateTime = SLOW; + if (type === 1) SPEED = FAST; + else if (type === 2) SPEED = AVERAGE; + else SPEED = SLOW; setAnimateTimeType(type); + console.log(SPEED); }; const setStartEndNode = (id, r, c) => { @@ -280,11 +299,20 @@ function App() { } }; - console.log(window.innerHeight, MAX_ROW, rows); + const rangeValueHandle = (event) => { + let value = parseInt(event.target.value); // [0, 15] + setCellSize(value + 20); // [20, 35] + + rows = Math.floor((window.innerHeight - PADDING_Y) / (value + 20)); + if (rows > 50) rows = 50; // Rows = [13, 50] + cols = Math.floor((window.innerWidth - PADDING_X) / (value + 20)); + if (cols > 50) cols = 50; // cols = [31, 50] + (END_NODE_ROW = rows - 6), (END_NODE_COL = cols - 6); + }; return ( <> - + {/*

Video Tutorial

@@ -296,12 +324,12 @@ function App() { title="myVideo" > - + */} -
+
-
-
+
+
-
+
+
+
+ +
+
@@ -352,9 +394,6 @@ function App() { setMazeID(parseInt(e.target.value)); }} > - @@ -367,18 +406,6 @@ function App() { label="Generate Maze" isBgColor /> -
-
-
+
+
-
+
{ setIsMousePress(false); @@ -403,7 +442,7 @@ function App() { {/* JSX Node Of Grid (2D Array) */} {Grid.map((R, idx_r) => { return ( -
+
{R.map((Value, idx_c) => { const { x, y, isStart, isEnd, isWall } = Value; return ( @@ -420,7 +459,8 @@ function App() { onMouseUp, setStartEndNode, }} - > + cellSize={cellSize} + /> ); })}
@@ -459,7 +499,7 @@ class Spot { } } -function Node({ pv }) { +function Node({ pv, cellSize }) { const { x, y, @@ -493,11 +533,12 @@ function Node({ pv }) { var c = parseInt(e.target.attributes.data_y.value); setStartEndNode(id, r, c); }; - + const START_NODE = "START_NODE bg-contain bg-center cursor-grab"; + const END_NODE = "END_NODE bg-contain bg-center cursor-grab"; var classNode = isStart - ? "START_NODE cursor-grab" + ? START_NODE : isEnd - ? "END_NODE cursor-grab" + ? END_NODE : isWall ? "obtacle" : ""; @@ -506,7 +547,13 @@ function Node({ pv }) { if (isStart || isEnd) { return (
+ /> ); } else { return ( @@ -533,7 +580,13 @@ function Node({ pv }) { e.preventDefault(); onMouseUp(); }} - className={"square " + classNode} + className={classNode} + style={{ + width: `${cellSize}px`, + height: `${cellSize}px`, + outline: "1px solid #afd8f8", + backgroundColor: "#fff", + }} id={"row" + x + "_col" + y} data_x={x} data_y={y} @@ -541,16 +594,17 @@ function Node({ pv }) { wall={isWall.toString()} onDrop={drop} onDragOver={allowDrop} - >
+ /> ); } } -async function waitForAnimatoin(time) { +async function waitForAnimate(sp) { + sp = sp < 5 ? 5 : sp; return new Promise((resolve) => { setTimeout(() => { resolve(""); - }, time); + }, sp); }); } const isValid = (r, c) => { diff --git a/src/Pages/PrimeSpiral.jsx b/src/Pages/PrimeSpiral.jsx index 86dad5b..eb417bd 100644 --- a/src/Pages/PrimeSpiral.jsx +++ b/src/Pages/PrimeSpiral.jsx @@ -80,7 +80,7 @@ function PrimeApp() { label="Show Prime spiral" isBgColor /> -
diff --git a/src/algorithm/maze/kruskal-algorithm.js b/src/algorithm/maze/kruskal-algorithm.js index d49449d..43ac8bb 100644 --- a/src/algorithm/maze/kruskal-algorithm.js +++ b/src/algorithm/maze/kruskal-algorithm.js @@ -1,116 +1,120 @@ -var dx = [+2,-2,0,0] -var dy = [0,0,+2,-2] +var dx = [+2, -2, 0, 0]; +var dy = [0, 0, +2, -2]; var vis = []; // represent grid var visitedNodes = []; -export const KruskalAlgorithm = (N,M)=>{ - visitedNodes = []; - vis = new Array(N); - for(let i=0; i { + visitedNodes = []; + vis = new Array(N); + for (let i = 0; i < N; i++) { + let arr = []; + for (let j = 0; j < M; j++) { + arr.push(false); } - RunKruskal(N,M); - return visitedNodes; -} + vis[i] = arr; + } + RunKruskal(N, M); + return visitedNodes; +}; -const RunKruskal = (N,M) =>{ - let edges = []; - // push all egde of the grid - for(let i=0; i=2) edges.push({x1: i, y1: j-2, x2: i, y2: j}); - if(i>=2) edges.push({x1: i-2, y1: j, x2: i, y2: j}); - } +const RunKruskal = (N, M) => { + let edges = []; + // push all egde of the grid + for (let i = 0; i < N; i += 2) { + for (let j = 0; j < M; j += 2) { + if (j >= 2) edges.push({ x1: i, y1: j - 2, x2: i, y2: j }); + if (i >= 2) edges.push({ x1: i - 2, y1: j, x2: i, y2: j }); } - Build(N*100+M+5); - while(edges.length > 0){ - // select random edge - let id = Math.floor((Math.random()*100)%edges.length); - let px = edges[id].x1; - let py = edges[id].y1; - let cx = edges[id].x2; - let cy = edges[id].y2; + } + Build(N * 100 + M + 5); + while (edges.length > 0) { + // select random edge + let id = Math.floor((Math.random() * 100) % edges.length); + let px = edges[id].x1; + let py = edges[id].y1; + let cx = edges[id].x2; + let cy = edges[id].y2; - edges.splice(id,1); // remove edge from list + edges.splice(id, 1); // remove edge from list - // check if they are in same component - const a = Find(px*100+py); - const b = Find(cx*100+cy); - if(a !== b){ - goForward(px,py,cx,cy); - Union(a,b); - } + // check if they are in same component + const a = Find(px * 100 + py); + const b = Find(cx * 100 + cy); + if (a !== b) { + goForward(px, py, cx, cy); + Union(a, b); } -} + } +}; -export function goForward(pr,pc,r,c){ - if(r===pr){ // same row - if(c < pc) for(let i=pc; i>=c; i--){ - if(vis[r][i]) continue; - visitedNodes.push({r,c:i}); - vis[r][i] = true; - } - else for(let i=pc; i<=c; i++){ - if(vis[r][i]) continue; - visitedNodes.push({r,c:i}); - vis[r][i] = true; - } - } - else{ - if(r < pr) for(let i=pr; i>=r; i--){ - if(vis[i][c]) continue; - visitedNodes.push({r:i,c}); - vis[i][c] = true; - } - else for(let i=pr; i<=r; i++){ - if(vis[i][c]) continue; - visitedNodes.push({r:i,c}); - vis[i][c] = true; - } - } +export function goForward(pr, pc, r, c) { + if (r === pr) { + // same row + if (c < pc) + for (let i = pc; i >= c; i--) { + if (vis[r][i]) continue; + visitedNodes.push({ r, c: i }); + vis[r][i] = true; + } + else + for (let i = pc; i <= c; i++) { + if (vis[r][i]) continue; + visitedNodes.push({ r, c: i }); + vis[r][i] = true; + } + } else { + if (r < pr) + for (let i = pr; i >= r; i--) { + if (vis[i][c]) continue; + visitedNodes.push({ r: i, c }); + vis[i][c] = true; + } + else + for (let i = pr; i <= r; i++) { + if (vis[i][c]) continue; + visitedNodes.push({ r: i, c }); + vis[i][c] = true; + } + } } -export function getNeighbours(top,N,M){ - let arr = []; - for(let i=0; i<4; i++){ - let x = top.x + dx[i]; - let y = top.y + dy[i]; - if(x>=0 && y>=0 && x= 0 && y >= 0 && x < N && y < M && !vis[x][y]) { + arr.push([x, y]); } - return arr; + } + return arr; } /* MXN = 100*Row + Column MOD = 100 - Max Row = 20 + Max Row = 99 Max Column = 99 - So, MAX N = 20 * 100 + 99 = 2099 + So, MAX N = 99 * 100 + 99 = 9999 */ -const MXN = 2100; +const MXN = 10000; var p = new Array(MXN); var sz = new Array(MXN); -const Build = (n) =>{ - for(let i=0; i<=n; i++){ - p[i] = i; - sz[i] = 1; - } -} -const Find = (x) =>{ - return x===p[x]?x:p[x]=Find(p[x]); -} -const Union = (a,b) =>{ - a = Find(a); - b = Find(b); - if(sz[a] < sz[b]) [a,b] = [b,a]; - p[b] = a; - sz[a] += sz[b]; -} +const Build = (n) => { + for (let i = 0; i <= n; i++) { + p[i] = i; + sz[i] = 1; + } +}; +const Find = (x) => { + return x === p[x] ? x : (p[x] = Find(p[x])); +}; +const Union = (a, b) => { + a = Find(a); + b = Find(b); + if (sz[a] < sz[b]) [a, b] = [b, a]; + p[b] = a; + sz[a] += sz[b]; +}; diff --git a/src/components/Btn.tsx b/src/components/Btn.tsx index 4993a12..a34dfa5 100644 --- a/src/components/Btn.tsx +++ b/src/components/Btn.tsx @@ -15,7 +15,7 @@ export const Button = forwardRef( return (