crobi / rpg-cards Goto Github PK
View Code? Open in Web Editor NEWRPG spell/item/monster card generator
Home Page: https://rpg-cards.vercel.app
License: MIT License
RPG spell/item/monster card generator
Home Page: https://rpg-cards.vercel.app
License: MIT License
If there was an option to selectively generate only a few cards of a large deck it would be useful if you only needed a few cards to print. Printing an entire deck when you only needed to make edits to a dozen or so can be rather troublesome.
As print studios seem to require bleed and safe areas around the actual card content, we should make those configurable.
Examples:
http://www.printerstudio.com/pops/faq-photo.html
http://www.makeplayingcards.com/dl/templates/poker-size.pdf
This project has started as a quick and dirty tool with very hacky code. Since it has attracted some users, it is time to use some proper design. This is the plan:
I am just wondering if it would be possible to include a justify text option, so that it justify the text | words words words
Instead of a div
with background images, add an inline SVG with width
, height
, and viewbox
properties, and then set the width of all rulers to 100% via CSS.
I know this isn't exactly what you created these cards to do, but since you have such an AWESOME tool going, it would be really nice if we could use this tool to make Monster Cards.
Now technically, you already can do this, but there are a few improvements that could be made that would really help:
Below is what I was able to currently enter based on the amount of space I had.
P.S. This is a personally created and released monster created my Andrew Kropff and I am using it only as an example.
... and extend the UI so that users can perform operations by tag, such as
To keep the system flexible, the tags of a card should be a list of strings with no pre-defined string values.
Hello there. It seems that this tool gets all of its icons from game-icons.net. However, game-icons.net continues to add new icons, while this tool seems to use only a static list of them, which was probably current when you were writing it but which no longer is so. I've been making a lot of spell cards recently, and there have been over a dozen instances of finding the icon I wanted on game-icons.net, and then finding it isn't available in the card generator.
As I feature request, I'd like to suggest somehow getting the list of possible icons from game-icons.net, rather than from your static icons.js file. Though as a stopgap, you could simply update that file.
Please correct me if I've misunderstood something about how your tool works. It is otherwise fantastic.
Hello
I have to say first that I love the RPG card generator.
This is the problem however:
in Firefox when I press Generate the output.html file is blank.
in IE when I press Generate the cards generate in a vertical column and therefore I am getting 3 and a bit cards per page, it does not seem to be formatting correctly.
I've checked pop-up blockers and whitelisted the site in Firefox.
Am I doing something wrong?
Is it possible to run this in batch mode say by providing a json array of cards?
Thanks.
I noticed while creating a section that is you then use a "property" tag without having a "fill", the section will overlap the property tags text slightly.
It would be nice to either add a small amount of spacing underneath the section tag OR allow the "fill" modifier to be used between two section tags; Basically it will center between the tags instead of the whole page.
Use some kind of client-side storage to periodically auto-save the data, in case the user accidentally closes the browser window.
Most browsers support at least 2MB of local storage, which should be more than enough (a JSON file with all PHB spells is around 400KB).
Is it possible to add a second parameter to the "text" element that controls the font size for that text paragraph?
Expected behaviour: When attempting to use an icon located at game-icons.net, typing in the icon name into the 'Icon' field will generate a list of icons. Clicking on the icon name will place the icon onto the card.
Issue: Name of icon located at game-icons.net is not appearing in Icon list.
Steps to recreate:
I'm attempting to use the 'bo' icon located at http://game-icons.net/delapouite/originals/bo.html
Type in 'bo' into the 'Icon' field, and a list is generated of matching icon names.
Although several icons that begin with the letters 'bo' are found, no icon named 'bo' is displayed. If I simply type 'bo' and then tab to the next field, no icon is displayed.
The issue is likely that the list generated for typing in 'bo' is too long to display all results and perhaps the 'bo' icon is displayed last on the list? I have attached a screenshot below for reference.
When filtering on tags, the tags as entered in the UI get converted to lowercase before a comparison is made. However, the tags as found in the JSON data file are not likewise converted to lowercase before comparison. I don't think this behavior is correct with respect to a user's expectation of how tag matching should work. To me, it makes more sense to convert both sides to tower case before comparing, rather than blinding relying on data file producers to always include tags strictly in lowercase.
The bullet element is not present in the documented elements, I only found it from examining examples.
Are there any other undocumented features?
Also, what syntax is used to create the new styles that appear here?
This program is great, everything looks spiffy and it's super easy to use!
My only suggested enhancement would be a way to export everything as an image file instead of just a printable section, I just don't know how that would be done, sadly.
After creating the output file, it will only print the first page. Even a print preview only shows the first page.
The way the output is generated in a new window is complicated (a new window is opened, loads a wrapper HTML, and executes some javascript that listens to a cross-tab message containing the new document content).
Consider replacing it with a simple code like this:
var exampleHTML = "<html><head><title>example</title></head><body>example</body></html>"
var popup = window.open();
popup.document.open();
popup.document.write(exampleHTML);
popup.document.close();
The disadvantage would be that the wrapper HTML (mainly <head>
including external javascript) would need to be generated as well (as opposed to storing it as a file). On the other hand, we could also let the user save the whole generated document so that it can be reopened later without the generator.
Would be nice if we could have options for 3x5, 4x6, 5x8 card sizes (standard US index card sizes). I don't know about anyone else, but both my printers print on 3x5 note cards and larger.
Add Card for Abilities with resources (ex. Wild Shape or Superiority Dices . )
Those abilities should contain empty squares or circles
Something like this https://sketch.io/render/sketch544660f73223a.png
... for the layout of the cards.
The options objects should be passed as an argument to all generating functions.
I want to be able to adjust the text size, so I can fit in more text on the cards
I want to generate and print my cards without the card backs on them (I don't really want them, so printing them would be a waste of expensive ink). I know I can set the printer up to only print specific pages, in this case the ones that have the card fronts on them, but for a lot of pages this is a pain. Is there anyway I can generate a PDF without the backs at all?
I love this little project. I've been looking to use it as part of one of my own works. But I already have data for the cards. I just want to be able to pick them and select how many to print. So some of the stuff in the in this tool I can reuse, but some of it I'll have to swap out with my own. My thinking is to organize the list of functions a bit, to get some more modularity and make it a bit easier to work in decorators.
Do you have any thoughts / preferences in this regard? I'd love to get your thoughts on where you're going with this project, to see if I can align my work.
This is too tedious to maintain, and makes using custom colors difficult. Instead use CSS inheritance and or inline style definitions.
Since printing double sided isn't an exact science, even though you have done a great job of lining things up within reason, it would be really nice to be able to print side-by-side and just folder the two halves on top of each other.
Hardcodex.ru added this feature recently and I think your system would greatly benefit from it.
I'd really like it if you could have text auto-adjust its font-size depending on the area you want to fit it in.
Get document.documentElement.outerHTML
of the generated document and pack it into a Blob URL (page might break the data URI size limit).
They aren't printing properly, either from Chrome or IE. The banner color and icons don't print. Instead it's just a border with a square border where the icon should be. The title text is in gray. If I could eliminate the square border and change the title text color they would work fine.
Otherwise I like the design better than any other cards out there right now.
Thanks.
Randy
Hi all - non-engineer here. I simply want to offer a major THANK YOU to the team behind this, and a +1 for any way the icon updating can be automated, so simpleton folk like I can more readily use the tool with the latest icons available.
Thanks, and cheers!
For some reason my printer just isn't printing the icons for my cards (in the top right and on the back) or the gradient on the back. All I do is hit "Generate", go to the new tab, right click, and hit print. Am I messing something up? Is it my printer? I doubt the program's bugged or anything. Thanks in advance.
Perhaps this is just me, but I can't seem to get these to print with the images/formatting.
I've tried two different machines, three different browsers. Everything disappears but the text and the boarders.
I'm looking at you, US letter
See this fork
The class icons won't show up on the back of the card when generating the card sheet on Chrome.
Any change of saving each page as a jpg?
It would help greatly for table top simulator, then we can just generate 10 across and 7 down image templates that will load straight into the game.
Would be useful to show icon then number in the header.
Example:
[this is my title icon number]
Dagger of stabbing [image of dagger] 4
game-icons.net keeps adding new icons every couple of days. This project needs an automated script that extracts at least the list of icon names, so that issues like #38 don't appear to users.
Hello
I am not a CSS specialist and though I tried to change card format in the CSS card format file, it does not seem to work…
I would like to suggest adding this format : 3.5 x 5.75 in in order to be able to print through a studio.
Maybe other formats from this printerstudio service would be interesting !
Besides, not sure it's an easy thing but would be interesting as well to generate JPG files of single cards.
http://www.printerstudio.com/personalized/blank_cards_custom_imprint_playing_cards_large_size.html
Thanks
There are a lot more available from the website now. I tried to do this myself, but it doesn't look like the way of doing so and the scripts required are all here. E.g. I did not find the script to generate the css for the icons, nor merging in the custom icons not from game-icons.net.
People keep asking stupid questions.
Hey, this is a great resource!
I was hoping to use it to create custom decks for my characters, having a different save file for each.
Currently, the file automatically gets download and there's no option to change the name of the file or where it's saved (if there is, what am I missing?).
I can always rename the file and move it straight after downloading - but then I have to do the same after loading up and editing that deck.
Any chance of building in a Save As menu so users can choose how they want to name the deck file, and where to save it?
I love these cards for spells and items, but found that with the current parameters there is just no way to make monster cards that have any useful info. They simply have too many abilities to keep track of. Perhaps setting an option for generating card backs that can be filled in the same way the card fronts can be? Also allowing use to adjust the leading between lines. I often feel like I have an unnecessary amount of space between likes and I'd love to be able to shrink. I'd like to change the fot size for the text the same we can change the title text size.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.