support mapd

README.md

@@ -3,22 +3,23 @@
 [![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
 [![ci](https://github.com/JustinShetty/mapf-visualizer/actions/workflows/ci.yml/badge.svg)](https://github.com/JustinShetty/mapf-visualizer/actions/workflows/ci.yml)
 
-This repository hosts the web-based version of the MAPF (Multi-Agent Pathfinding) Visualizer, adapted from the original [Kei18/mapf-visualizer](https://github.com/Kei18/mapf-visualizer). The app provides an interactive and intuitive way to visualize MAPF solutions directly in your browser.
+This repository hosts the web-based version of the MAPF (Multi-Agent Pathfinding) and MAPD (Multi-Agent Pickup and Delivery) Visualizer, adapted from the original [Kei18/mapf-visualizer](https://github.com/Kei18/mapf-visualizer). The app provides an interactive and intuitive way to visualize MAPF solutions directly in your browser.
 
 This project runs entirely client-side and is built using [React](https://reactjs.org/) and [PixiJS](https://pixijs.com/).
 
 ## Features
 
-- **Browser-Based Interface**: No installation required, simply access the app through the GitHub Pages site.
-- **Customizable Input**: Upload your own MAPF maps and solutions.
-- **Real-Time Visualization**: Observe agent movements step-by-step.
+-   **Browser-Based Interface**: No installation required, simply access the app through the GitHub Pages site.
+-   **Customizable Input**:Upload your own MAPF and MAPD maps and solutions.
+-   **Real-Time Visualization**: Observe agent movements step-by-step.
 
 ## Demo
+
 ![demo](./assets/demo.gif)
 
 ## Usage
 
-1. **Upload a Map File**: Load your MAPF map file (.txt format).
+1. **Upload a Map File**: Load your map file (.txt format).
 2. **Upload a Solution File**: Load the corresponding solution file (.txt format).
 3. **Visualize**: The solution will automatically play
 4. **Controls**:
@@ -35,11 +36,12 @@ This project runs entirely client-side and is built using [React](https://reactj
     - **Toggle Goal Markers**: Show or hide the goal markers for the agents.
     - **Toggle Goal Vectors**: Show or hide the vectors pointing to the agents' goals.
 
-
 ## File Format
 
 ### Map File
+
 The map file defines the grid layout with open locations and obstacles. Format example:
+
 ```
 type octile
 height 4
@@ -50,15 +52,36 @@ map
 @...@...
 @@@@@@@.
 ```
-- **type**: Always `octile` for MAPF visualizations.
-- **height**: Number of rows in the grid.
-- **width**: Number of columns in the grid.
-- **map**: Grid definition using characters:
-  - `.`: Open location.
-  - `@`: Obstacle.
+
+-   **type**: Always `octile` for MAPF visualizations.
+-   **height**: Number of rows in the grid.
+-   **width**: Number of columns in the grid.
+-   **map**: Grid definition using characters:
+    -   `.`: Open location.
+    -   `@`: Obstacle.
 
 ### Solution File
-The solution file specifies the paths agents will take. Format example:
+
+Each line represents a **single timestep**:
+
+```
+<time_step>: (<x>,<y>[,<orientation>][,<state>]),(<x>,<y>[,<orientation>][,<state>]),...
+```
+
+-   `time_step`: An integer timestamp.
+-   `x`, `y`: Grid coordinates.
+-   `orientation` (optional): Direction the agent is facing (e.g. `X_PLUS`, `Y_MINUS`).
+-   `state` (optional, MAPD only): The agent’s current state (see below).
+
+-   Each line defines the agents' states at a particular timestep:
+    -   **Timestep**: Integer identifier before the colon.
+    -   **Pose**: Each `(...),` represents an agent's pose. The first two elements are the x and y coordinates respectively. The third element (e.g. `X_PLUS`) is optional if your solver considers orientation.
+
+> [!WARNING]
+> Please note that either **all** or **none** of the poses must contain orientation. A mix of orientation and orientation-less poses is not supported.
+
+#### 📦 MAPF Example (Path Finding Only)
+
 ```
 0:(0,0,Y_MINUS),
 1:(0,0,X_PLUS),
@@ -67,12 +90,29 @@ The solution file specifies the paths agents will take. Format example:
 4:(1,1,Y_PLUS),
 5:(1,1,X_PLUS),
 ```
-- Each line defines the agents' states at a particular timestep:
-  - **Timestep**: Integer identifier before the colon.
-  - **Pose**: Each `(...),` represents an agent's pose. The first two elements are the x and y coordinates respectively. The third element (e.g. `X_PLUS`) is optional if your solver considers orientation. 
 
-> [!WARNING]
-> Please note that either **all** or **none** of the poses must contain orientation. A mix of orientation and orientation-less poses is not supported.
+#### 📦 MAPD Example (Pickup and Delivery)
+
+```
+0:(18,26,PICKING),(29,21,PICKING),
+1:(17,26,PICKING),(29,22,PICKING),
+2:(16,26,CARRYING),(28,22,CARRYING),
+3:(15,26,CARRYING),(27,22,DELIVERED),
+4:(15,25,CARRYING),(26,22,IDLE),
+
+```
+
+#### 🎯 Acceptable state is
+
+```
+export enum AgentState {
+  PICKING,
+  CARRYING,
+  DELIVERED,
+  IDLE,
+  NONE,
+}
+```
 
 ## License
 
@@ -87,6 +127,7 @@ Special thanks to [Kei18](https://github.com/Kei18) for creating the original MA
 For questions or support, feel free to open an issue.
 
 ## Contributing
+
 If you wish to contribute, please open a pull request and I'll review the changes as soon as practical.
 
 <details>
@@ -97,29 +138,30 @@ If you wish to contribute, please open a pull request and I'll review the change
 To run the development server locally, follow these steps:
 
 1. **Clone the Repository**:
-   ```sh
-   git clone https://github.com/JustinShetty/mapf-visualizer.git
-   cd mapf-visualizer
-   ```
+
+    ```sh
+    git clone https://github.com/JustinShetty/mapf-visualizer.git
+    cd mapf-visualizer
+    ```
 
 2. **Install Dependencies**:
-   ```sh
-   npm install
-   ```
+
+    ```sh
+    npm install
+    ```
 
 3. **Start the Development Server**:
-   ```sh
-   npm run dev
-   ```
+    ```sh
+    npm run dev
+    ```
 
 ### Linting the Codebase
 
 To maintain code quality, lint the codebase using the following commands:
 
 1. **Run Linter**:
-   ```sh
-   npm run lint
-   ```
+    ```sh
+    npm run lint
+    ```
 
 </details>
-