Boardgame Generator

FOR DEMO WATCH VIDEO BELOW /

This is the very first version which is actually useful in terms of creating cards quickly and a large improvement over the previous version. A lot has changed, so here is a small list of things which were added or changed:

• The UI was improved, fully changed to look better and feel improved when using it. This includes, but is not limited to, changes to colors, rendering, buttons as well as the refinement of button titles.
• I added shortkeys which are common between Office apps, such as CMD+S for save, CMD+C/V for copy/paste & CMD+Z/Y for undo/redo.
• I improved and added new fields for editing the style attributes, including text, border and spacing parameters.
• A new button was added to create incremental cards (such as number cards) where all fields but one stay the same (e.g. UNO without special cards)
• A draft auto-save system was added, so reloading the page does no longer delete the data
• A build script has been created to easily build the version within Milliseconds

I am currently working on improving the UI, and including more modals. This is a process, as a lot of how the UI works needs to be completly redone, after i implemented how I want modals to behave, which again, is very, very helpful for adding new stuff.
This rework focuses mainly on replacing the former rows with the new Card based layout, to account for now layout based variables and dynamic modal generation. The UI is not final and a lot of buttons will be replaced by material icons, Google Icons, which is my favourite choice for adding icons fast to a web project.

I implemented the first modal, which can be accessed under File>Page Setup, which is used to edit what was previously on the document tab. The new Modal unifies this and makes the UI feel less bloated.
In addition, I added the small indicator below the Card Designer title which now shows the Project/Card Deck name and the specifications of the card.

In order to move on, i built a modular and easy-to-use Modal class, which allows me to minimize the amount of code and work needed to spawn a modal with data input. As i am building an editor, this will become very useful soon, as I currently need to hardcode every single one of the Modal which i have.
To provide an example, this can be used to create a new Modal for Card Deck creation.

I am currently migrating to a Material Design like user interface, but got a lot of work still to do. I implemented the first viable version of the card generator based upon a project i did a few months ago. The generator itself works now, but is currently quite unintuitive. I am doing my best to change that

The very first step was to build a simple data driven card generator. I did this using typescript classes to ensure they can be extended later. With that the card would be very customizable, which would lead to more boilerplate but that’s a cost to take.