- git clone
- npm install
- npm start
-
drag and drop one START and one TARGET element to the grid
-
Drop as many other element as you want. Please note: Naturally the wormhole does affect only, if at least one wormhole entrance and one wormhole exit present.
-
Click on show the shortest route button if you are done with your settings.
You can add/drag-drop elements on the grid if you would like to change your settings. To check the new shortest route with the new settings click the button again. To start from scratch press clear the grid button.
If start/target elements are missing or there is no route to your target the application will display a notification about this situation, otherwise it will show the shortest route highlighted with green color.
For smaller/bigger cells or different number of cells you can rewrite cellsize, cellnumber, cellnumbervertical variables under utils/constants.js. Please note: I tested the style/css of the application mainly with the default settings.
code-wise:
- unit tests for every component!!!
- More structured code
- I think, I used only a few css declaration, that's why no sass or other preprocessor needs here. however for a bigger application a css preprocessor needs to be introduced (using nesting in css blocks, using variables and mixins)
- optimizing image sizes and types, using svg icons to the obstacles. Please note, I've just searched some 'space-theme images' on the internet, to add some style to my solution, these are not optimized at all.
- using svg with rectangles as grid - need to implement drag and drop with mouseenter/leave to the svg elements (or use some third party library here for instance d3)
- optimize performance for very-large grids
feature-wise:
- remove single elements from the grid not only clear all - to have better UX.
- use some BE to store data
- add a form element to the user - to interactively change cell numbers and/or cell sizes
- fully responsive grid, however not a best solution -> user can't see too small grids