This project is a maze-solving application built in React, leveraging TypeScript for improved type safety. The maze creation and solving algorithms include Depth-First Search (DFS) and Breadth-First Search (BFS). The codebase also incorporates utility functions forEach and execute to enhance asynchronous iteration and execution chaining, respectively.
If you want to mess around with it a little: https://maxwellknight.github.io/maze-plus/
- Comparison: TypeScript vs. Plain JavaScript
- Getting Started
- Prerequisites
- Installation
- Maze Algorithms
- Depth-First Search (DFS)
- Breadth-First Search (BFS)
- Utility Functions
- forEach
- execute
- Project Structure
- Conclusion
- Screenshots
I refactored an existing JavaScript project into TypeScript, enhancing type safety and overall code quality. If anyone is interested in exploring the converted version, they can find the project here.
The transition from plain JavaScript to TypeScript in this maze-solving project brings tangible benefits in terms of type safety, development experience, code readability, and maintainability. TypeScript's static typing and advanced tooling contribute to a more robust and developer-friendly codebase. With improved documentation and better support for refactoring, TypeScript proves to be a valuable choice for enhancing the overall quality
-
Clone the repository:
git clone https://github.com/MaxwellKnight/maze-plus.git
-
Navigate to the project directory:
cd maze-plus -
Install dependencies:
npm install
-
Run the project:
npm run dev
The application will be accessible at http://localhost:5173.
The DFS algorithm is employed to generate a maze. It explores as far as possible along each branch before backtracking, creating intricate and winding paths.
BFS is utilized for finding the shortest path in the generated maze. It explores all the vertices at the current depth before moving on to the vertices at the next depth, guaranteeing the shortest path is discovered.
Enables asynchronous array iteration with a callback and delays.
Signature:
type ForEachCallback<T> = (element: T, index: number, array: T[]) => void;
forEach(array: T[], callback: ForEachCallback<T>, delay?: number, offset?: number): Promise<void>;
Promise for completion. setTimeout for optional initial delay (offset). Asynchronous iteration with error handling.
Creates an organized chain of asynchronous functions with delays.
Signature:
execute(initialDelay: number = 0): ExecuteAPIMethods:
#!Add a function to the execution chain with an optional delay.
add(fn: Function, delay?: number): ExecuteAPI;
#!Set the delay for subsequent functions in the chain.
delay(delay: number): ExecuteAPI;
#!Start the execution of the function chain.
start(): Promise<void>;Queue Management:
Sequential function execution with specified delays.
The project structure is organized as follows:
- src/components: Contains React components, including the
BoardandCellcomponents. - src/algorithms: Houses the DFS and BFS maze generation and solving algorithms.
- src/utils: Contains utility functions
executeandforEachfor managing asynchronous tasks and iteration. - src/styles: Includes stylesheets for the application.
This project is a maze-solving application built with Vite, utilizing TypeScript for enhanced type safety. The maze creation and solving algorithms include Depth-First Search (DFS) and Breadth-First Search (BFS). TypeScript is favored for its benefits in code readability, maintainability, and development experience. The project also integrates utility functions, forEach and execute, for improved asynchronous iteration and execution chaining.
