Tool that lets you create decks to help with world building

World Building Deck Tool

fablefox

Today I worked more on the main menu page by getting routing setup so that I could easily setup links with a nav bar to navigate to any respective page I want within the site. Addionally, I started looking into getting local storage setup as that's where Ill be storing the player's decks they use (instead of having an entire login setup like my last website). I'm also thinking of possibly utilizing Electron to make a desktop application with React since I've never done that before and it sounds interesting to try. But we'll see later.

Today I worked on creating a simple menu page for allowing the user to change between the deck viewer and the deck tool itself (where you can pick a card, shuffle, etc). Don't have as much time today unfortunately to do dev work, but at least I got some work done on it.

Today I added in an edit mode to allow the user to delete cards from a specific deck.

I finally fixed the problem with the duplicates today WOOO 🎉! The issue ended up being very small, which was a duplicated line that was also adding a card that was from an older version of the function that I forgot to remove. Additionally, I created a component for the cards from when I created the Deck Viewer page and utilized it here to start showing cards more nicely. I'll still redo the card component at a later point, but for now it gets the point across as a placeholder.

Got all  the basic functionality now working for adding decks, switching between them, and adding cards to them respectively (while keeping them saved in state). The only issue as you'll see, is that it saves multiple copies of the card for some reason, but other than that its working fine lol 😅.

Still wasn't able to fix the issues even after changing the entire system. Still no clue why it's happening, my only hypothesis is it's something to do with react not liking the fact that I have a state with an array of custom class objects and I'm changing the member variables, but even then with my new method I am literally creating the object and filling it with new data when adding a new card and it still does it so maybe not. I also added in adding new decks and a deck selector today as well. (Again, the UI design is completely temporary, its just quick and simple for getting functionality working).

Today I mainly tried to fix some issues still going on, where it adds two of the same card each submission even though i have no clue why. I've looked over everything I believe could be the culprit of the problem (form data function being called twice from dual referencing, not having preventDefault() on, etc), but neither are the issue. So not sure why, but I'll hopefully figure it out tomorrow. Also strangely the range doesnt show up properly even though it should be shown as an array as text (which does work in the deck viewer but just not when I'm creating the deck creator page for some reason).

Today I now have it working so that I can add cards with either option for ranges, as well as the type and have it (almost) added into the current selected deck. I also created some code to display the deck just straight up as text on the page, even though that'll get removed once I get functionality fully working and Ill make it look a bit nicer.

Today I didnt get a whole lot done since I spent a good few hours on studying and practicing some coding problems for a technical assessment (and my brain is a bit mush lol), but I did get some work on being able to add elements to the range list and have them save on change into the list, so if the user switches between the two for some reason, it'll save the progress if they hadn't yet submitted the card into the deck.

Today I got more done with the creation page, with adding in the input elements for the card data and adding the some states (along with some onChange functions) to properly add and save the data. I also created a dropdown so users can choose between either providing a number for the range (which would then get converted from 0-given number) or hand writing a range list of however many elements they want. I still need to actually get that part working to allow the user to add and remove elements, and then submit it all through a form event.

For today I got started on creating the page for creating decks with a deck editor to add cards with their respective types, ranges, and notes. Also added in a deck name and Id for each deck so I can keep track of them and display their names for the user to select later on.

Today I got a lot done with getting the cards working all correctly, adding in a new card, as well as a notes section, and fixing the problem with it not properly showing it green or showing the selected range.

Today I worked on trying to get the range selector to properly work; there's some weird edge cases where it highlights everything on various re-renders and also shows nothing other times, so I'm currently bug fixing whatever is going on there.

For today I worked on getting the cards to look more like...cards instead of text, also fixing the shuffle issue (a simple mistake in how i was doing the shuffle function was the problem). Additionally, I currently am working on a feature so one of the range selections is highlighted for each card randomly.

Today I worked more on my project and started getting all of it displayed on the screen (mainly for testing, not yet looking pretty or anything). Still a bit janky but it's getting somewhere lol. It mainly just shows what each card will have on it and a shuffle button that for some reason isnt shuffling (I think the page isnt getting re-rendered when I shuffle for some reason, so its not updating the content of the deck on the page).

Today I added more code to the deck functionality with a shuffle function (using the Fisher-Yates Shuffle algorithm) and some getter functions, as well as created a test deck with some cards in it to be able to test out the deck's functionality.

Today I continued more with mainly continuing to code the classes for the cards and decks, along with getting tailwindcss setup and setting up my types since I'm still using typescript. My first plan is setting up a simple deck viewer with a test deck before getting into allowing the user to create decks in the UI. I also decided that ill go about keeping track of deck positioning by storying an array of IDs and then having a map that has each ID along with it's corresponding card data (it's type/range/text), so I can simply save the positioning of the IDs and not have to keep track of all the type/range/text too, it'll just be stored once in a separate place.

Today I got started on my next project, which I decided to go with the worldbuilding helper tool (and can help with any sort of story/lore building whether for games, books, or general worldbuilding). It'll involve the deck of cards idea I mentioned before that was inspired by a video I saw of someone doing a similar thing, however this will be a bit different in having much more customization and the ability to make multiple different variations and types of decks. So I created the project with the boilerplate stuff and began with creating the classes for the cards and deck.

World Building Deck Tool

Dev Logs