Add readme and roadmap

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Calum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -4,14 +4,16 @@
 ![GitHub last commit](https://img.shields.io/github/last-commit/calum/osrs-leagues-planner)
 ![GitHub issues](https://img.shields.io/github/issues/calum/osrs-leagues-planner)
 
-**OSRS Leagues Planner** is a React-based web application designed to help players plan their strategies and progress for Old School RuneScape (OSRS) Leagues events. The app allows users to create, edit, and visualize step-by-step plans, including inventory management and location tracking on an interactive map.
+**OSRS Leagues Planner** is a React-based web application designed to help players plan their strategies and progress for Old School RuneScape (OSRS) Leagues events. The app allows users to create, edit, and visualize step-by-step plans, including inventory management, location tracking on an interactive map, and tracking skill XP gains and task points.
 
 ## Features
 
 - **Step-by-Step Planning:** Create detailed plans for each stage of your OSRS Leagues journey.
-- **Inventory Management:** Visualize your inventory at each step, with the ability to drag and drop items.
-- **Interactive Map Integration:** Track your location on an interactive map and save map URLs for specific steps.
+- **Inventory Management:** Visualize your inventory at each step, with the ability to drag and drop items, select from previously used items, and manually add new ones.
+- **Interactive Map Integration:** Track your location on an interactive map, with the ability to edit and save map URLs for specific steps.
 - **Markdown Support:** Use Markdown to format descriptions, including lists, sublists, blockquotes, and code blocks.
+- **Skill XP Tracker:** Automatically track XP gains in various skills throughout your plan, with level indications and formatted XP values.
+- **Task Tracker:** Track the number of tasks completed and points earned at each step in your plan.
 - **Autosave and Persistence:** Your plans are automatically saved in the browser, so you can pick up right where you left off.
 - **CSV Export/Import:** Easily share your plans by exporting them to CSV or importing from a CSV file.
 - **GitHub Pages Deployment:** The app is deployed automatically to GitHub Pages on each commit to the `main` branch.
@@ -34,7 +36,7 @@ Check out the live demo: [OSRS Leagues Planner](https://calum.github.io/osrs-lea
 
 ### Prerequisites
 
-- [Node.js](https://nodejs.org/) (v16.x or higher)
+- [Node.js](https://nodejs.org/) (v20.x or higher)
 - [npm](https://www.npmjs.com/) (v7.x or higher)
 
 ### Steps
@@ -64,9 +66,11 @@ Check out the live demo: [OSRS Leagues Planner](https://calum.github.io/osrs-lea
 
 ### Creating a Plan
 
-- **Add Steps:** Use the "Add Step" button to create new steps in your plan. Each step can include a title, description, inventory items, and a location on the map.
-- **Edit Steps:** Double-click a step title to edit it or click the edit icon. You can also edit the description using the integrated Markdown editor.
-- **Manage Inventory:** Drag and drop items in your inventory to reorder them or add new items with the "Add Item" button.
+- **Add Steps:** Use the "Add Step" button to create new steps in your plan. Each step can include a title, description, inventory items, skill XP gains, task points, and a location on the map.
+- **Edit Steps:** Double-click a step title to edit it. You can also edit the description using the integrated Markdown editor, which now supports advanced formatting options.
+- **Manage Inventory:** Drag and drop items in your inventory to reorder them, or double-click to edit or add new items. The dropdown menu allows you to quickly select previously used items.
+- **Skill XP Tracking:** Add skill XP gains directly in the step description using the format "Skill +XP" (e.g., "Attack +15000xp"). The Skill XP Tracker will automatically update to reflect the total XP for each skill.
+- **Task Tracking:** Include task points in your step descriptions by adding "<X>" where X is the number of points. The Task Tracker will display the cumulative points earned before and after each step.
 - **Map Location:** Click "Edit Map Location" to set the location for a step. The map URL will be saved and can be reused across steps.
 
 ### Exporting and Importing Plans
@@ -110,3 +114,7 @@ Contributions are welcome! Please follow these steps:
 ### Issues
 
 If you encounter any issues or have suggestions, please open an issue on the [Issues](https://github.com/calum/osrs-leagues-planner/issues) page.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

ROADMAP.md

@@ -0,0 +1,84 @@
+# OSRS Leagues Planner: Project Roadmap
+
+This document outlines the next steps for improving the OSRS Leagues Planner. Each task includes an estimated size of the work and a brief explanation of how to approach it.
+
+## 1. Improve UI with a Burger Menu
+
+### Size: Medium
+
+### Description:
+To make the UI more streamlined and less cluttered, especially when the user might want to keep the window small next to their RuneLite client, we can introduce a burger menu. This will allow us to move large icons and infrequently used options off the main screen.
+
+### Steps:
+1. **Install necessary dependencies** for a burger menu, such as `react-burger-menu` or using Material UI’s `Drawer` component.
+2. **Move large icons** (e.g., "Add Step", "Upload Plan", etc.) into the burger menu.
+3. **Add a toggle button** in the top-left or top-right corner of the app to open/close the menu.
+4. **Test UI** at different window sizes to ensure it remains functional and user-friendly.
+
+## 2. Add a Section to Explain How the App Works
+
+### Size: Small
+
+### Description:
+New users may need guidance on how to use the app effectively. Adding a "How It Works" section will improve user onboarding and help them understand the features of the app.
+
+### Steps:
+1. **Create a new component** to house the "How It Works" information.
+2. **Write clear, concise instructions** on using the app, including creating/editing plans, managing inventory, and using the map.
+3. **Link this section** from the burger menu and/or an easily accessible area on the screen.
+
+## 3. Ability to Have Multiple Plans Loaded and Easily Switch Between Them
+
+### Size: Large
+
+### Description:
+Users may want to switch between different plans easily. Implementing the ability to load multiple plans and switch between them without losing progress would enhance the app's flexibility.
+
+### Steps:
+1. **Modify the state management** to handle multiple plans at once. This could involve using an array of plans in the global state.
+2. **Add a plan management component** that displays all loaded plans and allows users to switch between them.
+3. **Ensure persistence** by saving the state of each plan in local storage.
+4. **Test thoroughly** to ensure no data is lost when switching between plans.
+
+## 4. Track the Current Step
+
+### Size: Small to Medium
+
+### Description:
+Tracking the current step automatically will make it easier for users to resume their progress when returning to the app.
+
+### Steps:
+1. **Add a field** to the global state to track the current step.
+2. **Update the current step** whenever a step is completed or the user navigates through the steps.
+3. **Save the current step** in local storage so it can be retrieved when the user returns to the app.
+4. **Highlight the current step** visually in the UI.
+
+## 5. Track Banked Resources
+
+### Size: Medium to Large
+
+### Description:
+Tracking resources that have been banked will allow users to manage their inventory better, especially for complex plans that involve gathering and storing items.
+
+### Steps:
+1. **Create a new component** for tracking banked resources.
+2. **Allow users to add items** to this component and manage quantities.
+3. **Integrate the banked resources** with the inventory component so that users can transfer items between them.
+4. **Persist the banked resources** in local storage.
+
+## 6. Track Equipment Worn
+
+### Size: Medium
+
+### Description:
+Adding a component to track equipment worn will help users manage their gear throughout different stages of their plan.
+
+### Steps:
+1. **Create a new component** for tracking equipment worn.
+2. **Allow users to add/remove equipment** in this component.
+3. **Integrate with the inventory component** to allow easy transfer of items to/from the equipment component.
+4. **Persist the equipment state** in local storage.
+
+## Summary
+
+This roadmap outlines the key improvements and features that would enhance the OSRS Leagues Planner. Each task is designed to improve user experience, app functionality, and overall usability. The work can be approached incrementally, focusing on one feature at a time, and testing thoroughly to ensure smooth integration with existing components.