spellweaver2.mov
This repository holds the cold for Spellweaver, a web application designed to help Dungeons & Dragons (D&D) players manage their spellbooks efficiently. Whether you're a player looking to organize your spells or a Dungeon Master (DM) preparing for an epic adventure, Spellweaver provides the tools you need to master the arcane arts. This web app is integrated with the RESTful API dnd5e
- Technologies Used
- Optimizations
- Development Stage
- Features
- Lessons Learned
- Design
- Contributing
- Contact
- HTML5, CSS3, JavaScript
- Design: Figma
- Storage: Local Storage
- Version Control: Git
- RESTful API: dnd5e API
The next iterations of this web app will include the following functionality:
- The switch between the spellbook screen and the individual spell description screen will have a smooth animation.
- Users will have the option to name spellbooks and have multiple spellbooks for different characters.
- Users will have the option to edit their spellbooks and remove spells.
- On the search/home page, there will be a dropdown where the user can select which of their spellbooks they want to add the spell to.
- Add functionality for sorting by different categories in your spellbook
- Add ability to flip through "pages" on search page and look through all of the spells, perhaps with the ability to sort and filter them.
- Reduce redundant code across main.js and spellbook.js, especially in regards to DOM manipulation
Future directions:
- Integrating this web app with mongoDB instead of using local storage.
- Adding a login page and user authentication so the users can sync their spellbooks across devices.
- Add the ability to roll a die for each spell by clicking a button. Useful during gameplay!
Now, when users select a spell within their spellbook, it will expand to show all of that spell's information! I worked on DOM manipulation in the spellbook.js file to achieve this result!
BUG FIX & EXPLANATION: Originally, the spells were set in local storage with a numerical key. Then, I changed it so the number is prefixed by "spell_". When I did this, it created a bug where spells would be stored as "spell_NaN" and overwrite each other. To fix this bug, I had to switch from using parseInt (which was what caused it to be NaN) and instead check if key.startsWith('spell_') in both the main.js file and the spellbook.js file.
When users click on a spell in their spellbook, they will see the spell name side by side with the container in which the spell information will go (right now, an empty box). This was achieved using DOM manipulation in spellbook.js. I also added a go back button so when users are on this screen, they can go back to all the rest of their spells. In the future, I'd like to add a smooth animation between these two screens.
The priorities for the next updates are:
- Inserting the spell details into the DOM (perhaps extend the SpellDisplayer class to do this and utilize polymorphism)
- Animating the switch between the spellbook screen and the spell description screen
- Allow user to have multiple spellbooks for different characters
- Give user the option to remove a spell from their spellbook (add an edit button to trigger the ability to remove a spell)
Now when users add spells to their deck, the spells will appear on the spellbook page! The priority of the next updates are the following features:
- When user clicks a spell, it will expand to have all of the information.
- Allow user to have multiple spellbooks for different characters
- Give user the option to remove a spell from their spellbook
- On the search page, add a dropdown so user can select which spellbook they are adding to
The ability to add spells to local storage via hitting the plus button has been added. A user will not be able to add a spell twice if they try to. The plus symbol will turn to a check once the spell is added. The search page is also now responsive for all screen sizes. In the next update, the spells will actually be added to the "spellbook" page.
Currently, we have implemented functionality & user interface for the spell search, allowing users to search for spells by name. Once a search query is made, the spell's information and statistics dynamically appear in the Document Object Model (DOM), providing users with detailed insights into each spell. The next focus will be on creating the user's deck and adding the ability to add spells to said deck, which will be saved using local storage.
Began styling the spells that will be displayed on the search page & styled the search bar with vanilla CSS.
We have designed an initial concept in Figma & began to build the front-end. There is a header and a nav as of right now.
- Intuitive Spell Management: Easily search, filter, and add spells to your spellbook, tailored to your character or campaign.
- Customization Options: Create multiple spellbooks for different characters or campaigns, and mark spells as favorites for quick access.
- Mobile Compatibility: Mobile-friendly interface, perfect for in-person gaming sessions.
- RESTful API Integration: Utilize the D&D API to fetch information about spells from the official source. This ensures that your spellbook is always up-to-date with the latest rules and content additions.
In working on this project, I have learned a lot about local storage and RESTful API integration. Oftentimes, the data doesn't come back in the way you expected, so you have to dig deeper into the documentation or the data you do receive back in the console. I also am coding this using Object-Oriented Programming principles and this has helped solidify abstraction, encapsulation, inheritance, and polymorphism.
April 27, 2024: The current problem I am working on solving / lesson I am learning is how I can let two JavaScript files communicate with each other. I have a SpellDisplayer class in my main.js file which makes the API fetch & displays all of the spell information on the DOM on the search bar page. I currently have a separate js file for the Spellbook page which has a class of Spellbook. That class handles getting the spells in local storage and displaying them on the spellbook page. The next thing I need to do is display all of the information on this page. I want DRY (do not repeat yourself) code so I am figuring out if I can use inheritance and polymorphism by inheriting from the SpellDisplayer class and altering the methods so that the information is displayed in the right places on the DOM. Otherwise, I would have to have WET (write everything twice) code by essentially rewriting all the same methods and the API fetch on the Spellbook.js file.
The initial designs for the web app were created using Figma:
Color Palette: Duck Egg
We welcome contributions from the D&D community to make Spellweaver even better! Whether it's bug fixes, new features, or enhancements, feel free to fork our repository and submit pull requests.
