steps:
- keep grid in state
- get viseted nodes
- animate visited node by changing state (one node at time) OR just change style for each visited node (by class name)
- get shortest path
- animate shortest path in 2 possible way see 3
- !IMPORTANT store dom element in Node class instance and use that to change start/end Node and animate
- file:
useGridStore.ts, find better way to reset board an adnimation; - file:
Visualizer.tsx, find a way to await d.animate() and set to falseisRunning
/**
* APPORACH 1. changes nodes in state and triggers grid rerender (in Node.tsx based on the change the visual change take effect)
* i.e. visited nodes get set as visited and on rerender their color becomes blue
* less efficient than 2.
* more difficult to change based on algorithm
* makes more sense cause state grid should reflect algorithm changes in real scenario
*/
// for (let i = 0; i <= visitedNodes.length; i++) {
// if (i === visitedNodes.length) {
// for (let y = 0; y <= shortestPath.length; y++) {
// // add func setNodeToShortesPath
// setTimeout(() => setNodeToShortesPath(visitedNodes[i]), i * 10);
// }
// }
// setTimeout(() => setNodeToVisited(visitedNodes[i]), i * 10);
// }
// APPROACH 2. grid in state remain the same, elements are changed by changing class in their dom elements (id = "row-col")
// more efficient than 1.
// can change animation depending on algorithm
d.animate(visitedNodes, shortestPath);