It would be nice to be able to zoom in on the images displayed in the export preview window.

It would be great if we could store/pull data for the cards from a Google Sheet (public available url of course). There would be less need to implement a lot of sophisticated features in the data editor if this was possible.

It would also be excellent if we could point the assets at at Google Drive folder (or other cloud storage). Using the filenames as the names. Right now, it seems the assets are the same across any deck, which doesn't seem correct unless there is more of a distinction between a project (with one or more decks) and a deck. Similarly, there is no ability to have a folder to organise assets (like one folder for icons and another for feature art). The ability to link to a google folder (and maybe cache it) would make all of that much easier.

Create a png sheet export to be used as an import into Tabletop Simulator.

Sheet format Reference:
https://kb.tabletopsimulator.com/custom-content/custom-deck/

When exporting cards to PDF the "cards per page" setting does not work on page 3+ (i.e. after first pair of pages with fronts and backs).

In image below the 3rd and 4th page contains 6 cards per page.

Make the theme responsive to mobile devices, or at least set min dimensions for the viewer.

Application Theme

• Relax the minimum page size for mobile devices
• Stack horizontally stacked interfaces vertically for mobile

Template Editor
Unfortunately there is a hard limitation with the editor we have chosen (Monaco):
microsoft/monaco-editor#246

Their mobile support issue has been open since 2016, so we will need to change editors in order to support mobile. This may be a non-starter if it ends up hurting the desktop experience unless a decent new editor with mobile support is selected.

PDF Export
pdfMake does not support mobile devices. We may need to switch to jsPDF.

On certain screens (mobile) the export will not work properly.

PDFMake doesn't seem to have great mobile support. We will have to consider changing pdf generation libraries.

bpampuch/pdfmake#935

The cards page currently has three tabs that each load at the same time no matter which of the three tabs you need. The tabs should be split off into separate pages (while retaining the tab control). This will allow page refreshes to return you to the tab you were on and optimize the loading of the cards page.

Changes on the listings or assets page do not currently cause a refresh of the data on the other tabs. This would be heavy to maintain and loading only the data needed for the tab would be more optimal.

Current version crashes when loading the website:
main.39f13294df587ec6.js:1 TypeError: window.require is not a function at t.getIpcRenderer (main.39f13294df587ec6.js:1:1587205) at new t (main.39f13294df587ec6.js:1:1586776) at t.ɵfac [as factory] (main.39f13294df587ec6.js:1:1591485) at m4.hydrate (main.39f13294df587ec6.js:1:54642) at m4.get (main.39f13294df587ec6.js:1:53206) at PH.get (main.39f13294df587ec6.js:1:72646) at q2 (main.39f13294df587ec6.js:1:33695) at v1 (main.39f13294df587ec6.js:1:34186) at mt (main.39f13294df587ec6.js:1:59111) at t.ɵfac [as factory] (main.39f13294df587ec6.js:1:1625160)

If you have more than 1 game (besides the standard apple game) and you import a list of cards (.cvs) into one game then all cards belonging to the other games will be erased.

Create an .xlsx/.csv import for the cards table. Could also have it auto generate missing card attributes, or just ignore those columns.

Most card game prototyping software has the ability replace certain strings with images in the descriptions of cards. As of now, it doesn't appear that it's possible within the current system, but it'd certainly be a welcome if not essential feature. If there is a way to do so currently, please inform me! Thanks.

Users have requested a CLI for automated tasks.

Sample CLI calls:

node cider-cli.js function=export-pdf database=database.json cards=cards.csv assets=assets/ output=output.pdf

node cider-cli.js function=export-png database=database.json cards=cards.csv assets=assets/ output=output.zip

cards.csv

id,name,count,frontTemplate,backTemplate,attr1,attr2,...
1,"CLI Card",1,"Apple Front","Apple Back","val1","val2",...
2,"GUI Card",1,"Apple Front","Apple Back","val1","val2",...

assets
Pass in a directory for the assets. Each file in the provided directory is indexed by its name.
assets/poison-apple.png => referenced by {{assets.poison-apple}}

database
Pass in an exported database.js. This is used for containing the templates.

Feature request origin:
https://boardgamegeek.com/thread/2818611/new-application-cider-card-ide-designing-game-card

Create syntax reference guides for the templates page.

Create a PDF export that minimizes the use of ink in order to quickly print low-cost prototypes.

Override card style:

• create all backgrounds white
• set all text to black
• set all borders to black
• remove images (or 90% lightness, 0% saturation)

This feature would make it easy to prototype cards and allow writing on the cards with pen. It would allow someone to transition quickly between full production-ready card designs and basic prototypes.

Add in a check to make sure all cards being exported have a back and front template defined, and throw an error if they do not.

Sometimes while working on a template I find it necessary to refresh my memory about one of the attributes or to add a new asset, etc. This means I have to navigate away from the template section. Upon returning to the template section neither the template nor the card that I was working on is loaded. So I have to re-select both template and card. It would be convenient if the application could remember which template and card were loaded an queue those up upon returning to the template section.

I have a card with the following grid as shown in Thumbnails in the editor:

In Export Preview it looks fine, but after exporting to PDF I get:

CSS used:

.card {
    width: 765px;                                   /* Width:  2.55" * 300 DPI */
    height: 1050px;                                 /* Height: 3.50" * 300 DPI */
    text-align: center;
    display: flex;
    flex-direction: column;
    border: 45px solid hsl(0, 0%, 10%);
    color: hsl(0, 0%, 10%);
    font-weight: 600;
    font-size: 50px;
}
.card .content {
    flex: 1;
    display: grid;
    grid: 33% 33% 33% / 1fr 1fr;
    grid-auto-flow: column;
    width: 100%;
    height: 50%;

}
.content div {
    border: 5px solid gray;
    display: grid;
    grid: 100% / 40% 60%;
}
.content img {
    width: 100%;
    height: 90%;
    margin: auto 0;
    object-fit: contain;
}
.content p {
    display: inline-block;
    padding: 0;
    margin: auto 0;
    font-weight: 6000;
    font-size: 70px;
}

Hello,

First of all, thanks a lot for making and open sourcing this ! It's a really great tool.
I've been having issues with exporting cards, both in pdf and as invividual images. I'm using the example Cosmic Apple Deck. I'm on OSX and I tried with the latest versions of Chrome and Firefox. There are some console errors that might be relevant to this :

I found that when working with CSS grid it is properly displayed in the UI but the export is not working properly.

I attached below the file content I was using and how it should look like (left, bottom-left, bottom-middle, bottom-right are square images - don't mind the colors please. Just fiddling around with the tool :))

1. grid-area is not recognized at all by the export (change div classes from one to onename, two to twoname, ...)
2. Overlapping grid parts are not displayed correctly and used spacings/margins are also somehow a bit different in export
3. CSS Tricks with :after to display an icon behind a div are also not working in the export.

See also: database.zip

<html>
    <head>
        <style type="text/css">
            .cutframe {
                margin: 0px;
                width: 1111px;
                height: 816px;
                background-color: hsl(0, 0%, 90%);
                border: 36px solid hsl(0, 0%, 90%);
                color: hsl(0, 0%, 90%);
                font-family: "Segoe UI", Arial, sans-serif;
                font-size: 33px;
            }
            .card {
                width: 1039px;
                height: 744px;
                border-radius: 25px;
                background-color: hsl(0, 0%, 40%);
                border: 36px solid hsl(0, 0%, 100%);
                display: grid;
                grid-template-columns: 225px auto 225px auto 141px 84px;
                grid-template-rows: 15px 84px 20px 106px auto 225px;
                grid-template-areas: 
                    "one . . . . ."
                    "one header header header header number"
                    "one . . . . ."
                    "one content content content content content"
                    "leftlink content content content content content"
                    "two bottom1 three bottom2 four four";
                column-gap: 0;
                row-gap: 0;
            }
            .card>.icon img {
                width: 225px;
                border-radius: 25px;
            }
            .card .one {
                grid-row: 1 / 4;
                grid-column: 1;
            }
            .card .two {
                grid-row: 6;
                grid-column: 1;
            }
            .card .three {
                grid-row: 6;
                grid-column: 3;
            }
            .card .four {
                grid-row: 6;
                grid-column: 5 / 6;
            }
            .card .onename {
                grid-area: one;
            }
            .card .two {
                grid-area: two;
            }
            .card .three {
                grid-area: three;
            }
            .card .four {
                grid-area: four;
            }            
            .card .header {
                background-color: #f2a029;
                color: #ffffff;
                grid-area: header;
                font-size: 48px;
                padding-left: 20px;
                line-height: 84px;
            }                        
            .card .header span {
                display: inline-block;
                vertical-align: middle;
                font-family: "Segoe UI", Arial, sans-serif;
                text-transform: uppercase;
            }
            .card .number {
                grid-area: number;
                padding-left: 0 !important;
                background-color: #ffffff;
                color: #000000;
                font-weight: 800;
                font-family: sans-serif;
                text-align: center;
            }
            .card .content {
                grid-area: content;
                padding-left: 45px;
            }
            .card .content div:not(:last-child) {
                margin-bottom: 20px;
            }
            .card .content > div.effect {
                background-color: #ffffffaa;
                color: #000000;
                padding: 10px;
                padding-left: 40px;
                padding-right: 10px;
                line-height: 1.3;
            }
            div.effect > .icon {
                margin-left: -65px;
                margin-top: -3px;
                float: left;
                width: 50px;
                height: 50px;
            }
            div.effect > .icon:after {
                content: " ";
                text-indent: -999em;
                display: block;
                background: url("ressources/behind.svg");
                background-size: 70px;
                margin: -60px 0 0 -10px;
                width: 70px;
                height: 70px;
            }
        </style>
    </head>
    <body>
<div class="cutframe">
    <div class="card">
        <div class="header"><span>Title</span></div>
        <div class="header number"><span>1</span></div>
        <div class="content">
            <div class="effect">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </div>
            <div class="effect">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
            </div>
        </div>
        <div class="icon one"><img src="ressources/image-1.svg" /></div>
        <div class="icon two"><img src="ressources/image-2.svg" /></div>
        <div class="icon three"><img src="ressources/image-3.svg" /></div>
        <div class="icon four"><img src="ressources/image-4.svg" /></div>
    </div>
</div>
    </body>
</html>

Google Fonts render correctly in the preview window, but fail to render when exporting, resulting in browser default faults instead. It would be great if the exports could render the fonts.

When building decks, it would be nice to apply validation to certain values:

Some examples include:

• A card has an elemental type. Since there are limited types, and it would be nice to be able to define what those limitations are.
• A hero has a health attribute. It would be nice to set a regex that limits that attribute to either a number or another game-specific special symbol.

A simple implementation could be just setting a regex, but I would also like to see creating a list of valid values that could be selected from a dropdown.

A stretch goal could also be allowing attributes to use existing validation criteria (using Pokemon as an example, using the same validation to select both the card's type and weakness).

Consider options for saving iterations of a card game during development.

Implementation Options:

Export to Repository (Already possible)

Export database and save into a repository. The database.json file can be diffed between versions in the repo. Working iterations of the game can be tagged in the repository. This is a little harder to track since you are only making changes to a single file and it may be a bit daunting to read that large .json file. Running diff on such a large file (containing many images) crashes.

Card Editioning (Partial Versioning)

Add versioning to individual cards (1st edition, 2nd, ...). Create a new CardVersion/CardEdition table that contains a starting entry for each card. This can also already be achieved by just creating a new card "Ex. Red Apple" with a property of edition set to 1, 2, etc.

Exploded Project Structure (Entire reworking)

This has been hinted at by user requests, but the idea is that the database file can instead be exploded into many individual files that are part of a card game project. Ex. /assets folder with images, project root with cards.csv, attributes.csv, templates.csv, /templates folder with .html templates. Cider can be redesigned to use the file system instead of the indexed-db database. Unfortunately this change will make cider unable to run in the browser because of restrictions on file system access from browsers. We could investigate directly integrating with github repositories and pulling/pushing data to those repos on load/save. We could also look into making Cider a standalone app in addition to a web app that can save in multiple ways (db vs exploded).

• Setup a change detection system that tracks any changes across the app.
• Setup dialog for on close.
• Update existing dialog for opening another project.
• Optional: if change is reverted, clear unsaved state.

If you put "umlaute" from the German language eg. ä,ü,ö in to cider everything works fine but if you save the project and than reload the project for example ü gets transformed to ü. Looks like an encoding issue to me.

I would love to be able to add cut mark overlays when looking to export, or an option to add bleed.

Allow exporting card sheets to PDF for printing and exporting PNG images bundled in a zip file.

I'm working on a game with 21 different possible card attributes. Currently when I want to edit a card I have to scroll to the right on the Cards/Listing page to be able to access the edit button, due to the large number of attributes my cards have. It would be nice to be able to access the Edit and Delete buttons without having to use the horizontal scroll bar. This could be achieved by relocating the edit and delete buttons to the left side of the Cards/Listing page.

Exporting files (pdf export, png export, database export) with Chrome on iOS does not work. After the progress bar hits saving file, nothing happens.

FileSaver.js open ticket:
eligrey/FileSaver.js#735

From their documentation on iOS:
"saveAs must be run within a user interaction event such as onTouchDown or onClick; setTimeout will prevent saveAs from triggering. Due to restrictions in iOS saveAs opens in a new window instead of downloading, if you want this fixed please tell Apple how this WebKit bug is affecting you."

A workaround has been pushed in that uses FileReader to at least get some download coming out, but it seems there is also a file size limitation. Any file over ~1.4MB will not download. This limitation could be caused by FileReader.readAsDataURL().

Hello,

I typically don't print card backs for custom cards, since they go in opaque card sleeves anyways (and for TTS I use a single image for all cards so I don't really need this tool). I can't imagine that I'm the only one, so it might be interesting to support this use case ? At the very least, it would be nice to have a relevant error message when trying to export cards when the back template isn't defined. I couldn't figure out initially that this was why the export was failing.

Failing to save changes to templates before navigating away from the templates page results in unsaved changes being lost. Displaying an alert that reminds the user that unsaved changes will be lost when user attempts to navigate away from the templates page would help prevent losing unsaved changes. (An auto-save feature would mitigate this issue as well, but is likely to be more difficult to implement. So the alert should be fine.)