PathFinder

Microsoft MentorShip Project as Team StarLight

• About
• Usage
  1. Draw Wall
  2. Erase Wall
  3. Shift Start/End-Point
  4. ControlBar
  5. ControlCenter
  6. KeyBoard Shortcuts
• Architecture
  1. Folder Structure
  2. Main Flow
  3. Controller State Machine
  4. PageScripts Class Diagram
  5. PathFinding Class Diagram
  6. Snoop Layer Sequence Diagram
  7. ControlBar Action Map
• Technical Achievements
• Code Quality
• Uniqueness
• Getting Started

About

This Project is for Visualization of various PathFinding algorithms.

• Single Endpoint Algorithms' Page - Here
• Multiple Endpoint Algorithms' Page - Here

Usage

1. Draw Wall

   • Click on an empty grid node and drag the mouse pointer.

2. Erase Wall

   • Click on a wall element and drag the mouse pointer.

3. Shift Start/End Point

   • Click on the Start/End-point element and drag the mouse pointer.

4. Control Bar

   • click on a particular action to perform it.

5. Control Center

   • control center is on the left side of the screen and it can be opened by clicking on '>' and can be closed by clicking on '<'.

6. KeyBoard Shortcuts

   Keyboard shortcuts can be used for a particular ControlBar action as follows.

   • SPACE - Play/Pause/Restart
   • ⌫ BACKSPACE - Clear Path/Walls
   • ← - Undo
   • → - Redo/Step
   • ↑ - Increase Undo/Redo steps
   • ↓ - Increase Undo/Redo steps
   • ⌥ - alt/option+↑ - Increase Step Delay when Playing
   • ⌥ - alt/option+↓ - Increase Step Delay when Playing

Architecture

1. Folder Structure

   • This is the folder structure of the project.

2. Main Flow

   • This is the initialisation sequence of the PageScripts.single. '.single' classification is used for single EndPoint PageScript.
   • page/index.html has

     <script>PageScripts.single.init()</script>

3. Controller State Chart

   • This is the controller state chart diagram. Different states/transitions can be triggered by Controller/ControlCenter/ControlBar actions. Either automatically or manually.

4. PageScripts Class Diagram

   • This is the class diagram of the PageScripts Package/Bundle.
   • In general the Controller maintains a grid and proxies the actions taken on DOM to grid.
   • When In COMPUTING State, controller snoops on the operations of the algorithm and enqueues them in opQueue.
   • When In PLAYING State, controller dequeues the operations from opQueue and shows them on screen through viewRenderer.
   • The Controller controls a major part of the UI throught ViewRenderer.
   • The MultiController and The MultiViewRenderer is for Multi EndPoints Page.

5. PathFinding Class Diagram

   • This is the class diagram of the PathFinding Package/Bundle.

6. Snoop Layer Sequence Diagram

   • This sequence shows how the controller Taps(Snoops) on the operations performed by an algorithm on a Graph-Node.
   • Snoop Layer is just a bunch of getters/setters. Here.

7. ControlBar Action Map

   • This is a action map for controlbar in each controller state.
   • 'x' in a cell shows that that action will not be available in that controller state.
   • '<>' around a word shows that the word is a controller state Machine transition from a state to another state.
   • under '----' are the states from which the controller state Machine is going to pass through
   • Toggle DarkMode is allowed in every state. It doesn't cause any state changes.

Technical Achievements

1. Learnt new Graph Algorithms and implemented them.
2. Implemented these Single EndPoint accommodating algorithms.
   1. BreadthFirstSearch
   2. AStar
   3. BestFirstSearch
   4. Dijkshtra
   5. IDAStar
   6. IDDFS
   7. JumpPointSearch
3. Implemented these Multiple EndPoints accommodating algorithms.
   1. MultiBFS.
   2. MultiBestFirstSearch
   3. MultiAStar
   4. MultiDijkshtra
4. Learnt how to use StateMachine in code for controller.
5. Learnt to use WebPack to pack a package bundle.
6. Implemented undo/redo functionality using stack and deque.
7. Learnt the Agent Sense-Process-Actuate approach
   • We are Using this Approach by
     • SENSING in grid using grid.getNeighbours().
     • PROCESSING upon sensed data in Algorithm.
     • ACTUATING by finding a path and following it. (showed on grid).
8. Learnt how to Tap(Snoop) on an attribute assignments to an object via getters and setters.
9. Practiced Object Oriented Paradigm in JavaScript.
10. Learnt Controller-ViewRenderer approach to softwares with UI.

Code Quality

1. Readability
   • We have used EsLint as a devDependency to follow a common coding style and maintain Redability.
   • We have used camelCase variable names almost everywhere except some global constants.
2. Working
   • We have used babel Transpiler and PolyFill to target maximum amount of browsers possible.
   • We have used Standard Jquery to actuate page related actions.
3. Continuous Integration
   • 
   • We have used github actions to lint-test and build code each time we push to the repo.

Uniqueness

1. New UI with no 2D-WebGL just Jquery/HTML/CSS.
2. new ControlBar to deliver functionalities easily.
3. Provided Burst-Mode Undo/Redo with dynamic amount of steps, So that user can go through the steps manually.
4. Provided functionality to choose delay dynamically(ControlCenter) to play at high/low speed and let user understand at desirable speed.
5. Provided functionality to choose burst magnitude of undo/redo dynamically, So that user can go through steps at desirable burst undo/redo.
6. Provided KeyBoard Shortcuts so that user can control the portal easily.
7. Implemented These MultiEndPoint Algorithms.
   1. MultiBFS.
   2. MultiBestFirstSearch
   3. MultiAStar
   4. MultiDijkshtra
8. Added Show Cursor option so that user can visualise the flow of the operations.
9. Added Dark Mode🔥.

Getting Started

• Clone

   $ git clone https://github.com/Wolverin-e/PathFinding.git

• Install

   # Install dependencies snapshot from package-lock.json
   $ npm ci
  
   # Install dependencies from package.json
   $ npm i

• Start DevServer

  • Read This for more info.

   # webpack dev-server will be serving at 
   # localhost:8000/PathFinding/page & localhost:8000/PathFinding/page/multi
   $ npm start

• Lint Test

   $ npm run lintTest

• Lint

   $ npm run lint

• Build

  • Read This for more info.

   # This generates latest bundles using webpack in PathFinding/build directory
   $ npm run build