Pathfinding-Visualizer | different shortest-path algorithms | Learning library

I am currently working on a pathfinding-visualizer-app and i am a bit overwhelmed by using a completely new programming language (at least for me).

But i think it is the best way to learn it as fast as possible.

To get to my problem:

I have a gridPaper with container Widgets. Every time i click on a container it changes the color from white to black.

So far so good...

For my pathfinding algorithm i need a 'start' and 'end' container (obviously a container where my algorithm starts searching for the end point). Those i want to colorize in green (start) and red (end). If i open the settings widget to click on "Start", it changes a "var = int" to 2 and then it goes to a switch case function. From there if it gets a 1, it should print a black container, and if it gets a 2, it should fill the container green. But then it starts to fill every container with the color green, because it goes through the complete offset ...

Do do have any ideas how to solve my problem ?

Code:

So I'm kind of just getting started with React, and I want to create a pathfinding-visualizer. I've already made many pathfinding-algorithms in Python, so I know how they work. The thing I'm struggling with in React, is how to use the components to be able to visualize what nodes are being searched and which ones are being queued etc. What I've tried so far, is simply creating a grid by nesting components in each other:

https://plutownium.github.io/ASCII-Pathfinding-Visualizer/?

This is my ASCII Pathfinding Visualizer. I built it and it works fine on desktop, but on mobile...

• the "Visualize Dijkstra's" button does not work: You can place a Start Node and a Target Node, click the button, and have the visualizer fail to start.
• the "Generate Recursive division maze" button does not work: You can generate a random maze, you can generate a binary tree maze, but the Recursive Division maze button does nothing.

To make things more confusing: As far as I can tell, it works on all 3 of Chrome, Brave and Firefox on my desktop. But when my phone loads it up, neither the Safari browser nor the Chrome browser works.

I am stuck for how to debug it, because I don't have access to the Developer Tools (and hence not the console.log output either) on Mobile.

Further I have no foundation of knowledge for why something would work fine on desktop but not on mobile. So while I am suspicious it is some kind of cross-compatibility issue (it must be right?), I cannot begin to understand what part of the code would be causing the issue.

I would show some code but I'm really not sure what part of the code to show. It is approximately a thousand lines of JavaScript between three files. Of course, two of the Maze Generation buttons work, so that narrows it down a lot, but... I am still stuck. Like, I can find plenty of StackOverflow links about "JavaScript doesn't work on mobile", but I'm not sure how those help me since I can't even access details about the cause of my problem -- I have no idea which lines of code are broken and I can't access that info (no dev tools on mobile).

What do I do?

edit: I still don't understand how code can work on desktop but not on mobile.

I have an ASCII art "pathfinding visualizer" which I am modeling off of a popular one seen here. The ASCII art displays a n by m size board with n*m number of nodes on it.

My current goal is to slowly change the appearance of the text on the user-facing board, character by character, until the "animation" is finished. I intend to animate both the "scanning" of the nodes by the pathfinding algorithm and the shortest path from the start node to the end node. The animation, which is just changing text in a series of divs, should take a few seconds. I also plan to add a CSS animation with color or something.

Basically the user ends up seeing something like this, where * is the start node, x is the end node, and + indicates the path: