I am currently working on developing a unique pathfinder visualizer. My progress so far includes creating a grid of size 16x45 using the function below:
export const drawBoard = () => {
const boardContainer: HTMLDivElement | null = document.querySelector(
".board-container"
);
if (boardContainer != null) {
// 16x45 board
for (let i = 0; i < 16; i++) {
const row = document.createElement("div");
row.classList.add("row");
for (let j = 0; j < 45; j++) {
const col = document.createElement("col");
col.classList.add("col");
col.setAttribute("data-row", `${i}`);
col.setAttribute("data-col", `${j}`);
row.appendChild(col);
col.addEventListener("click", function () {
this.classList.add("wall"); // Add a wall class to the CSS
});
}
boardContainer.appendChild(row);
}
}
};
The function described above generates the grid depicted in the document linked below:
https://i.sstatic.net/oBxjB.png
It is possible to extract the x and y coordinates of a specific tile, as shown in the image here:
https://i.sstatic.net/xZAs5.png
Every tile has been assigned a click event to add a wall CSS class and change its color to black upon clicking.
Now, my inquiry is as follows:
Is there a way to apply the CSS
wallclass to the tiles while the mouse button is held down? Is there a specific event listener for this task?
My ultimate goal is to achieve the following effect: