Cardmaker is a command line tool used to generate game’s cards from a template and a Google Spreadsheet. It is currently operational for card prototyping.
Cardmaker is more simple to tape than Deckcards :-)
Cardmaker needs somes basics knowledges in HTML/CSS and the use of command lines.
It’s an early version that barely comes out of the furnace. If you want to improve this project you can contribute by submitting an issue or propose a pull request
NodeJS is required to install Cardmaker. You must install it.
Install with npm:
npm install @mrpierrot/cardmaker -g
First, use this command to create a project with default content in the directory "project_name":
cardmaker setup <project_name>
Next, go to the directory "project_name"
cd ./<project_name>
The project contains the following files :
| File | Description |
|---|---|
cardmaker.json |
The configuration files |
templates/default.hbs |
The Handlebars template file. Look at Handlebars.js to edit. |
layouts/basic.hbs |
The Handlebars layout file. Look at Handlebars.js to edit. |
styles.css |
The template’s styles. |
The default cardmaker.json
{
"templates": {
"default": "templates/default.hbs"
},
"layouts": {
"basic": "layouts/basic.hbs"
},
"gsheet":{
"sheetId":"1QJm95kTdpR9XT6fC7sirsPRVFjOOri74-jH3mSd1gf8",
"credentials":null
}
}| Name | Description |
|---|---|
templates |
The HTML templates path. It’s a dictionnary with sheet name as key |
layouts |
Layout system : usefull to manage differents printers |
output |
The directory where final HTML files are generated |
gsheet.sheetId |
The Google Spreadsheet’s ID. It can be found here: docs.google.com/spreadsheets/d/1QJm95kTdpR9XT6fC7sirsPRVFjOOri74-jH3mSd1gf8/edit?usp=sharing |
gsheet.credentials |
The credentials file path (i.e. "./credentials.json"). Set it to null if you use a public Google Spreadsheet. |
For private and public Google Spreadsheets, follow the instructions from node-google-spreadsheet
If you use private Google Spreadsheet, you get a JSON file with credentials. Copy this file into the project directory and rename it credentials.json
In cardmaker.json, define the credentials.json path like this:
{
...
"gsheet":{
...
"credentials":"./credentials.json"
}
}You can find an example here
The first line contains the variable names (here: NAME and DESC) and the next lines store the values.
You can define several sheets, each of them generating its own HTML page.
cardmaker watch
You can watch templates and data files : when there are modified, the watcher build the cards
cardmaker setup <project_name> <options>
| Option | Alias | Description |
|---|---|---|
--template <name|path> |
-t |
Use a specific template |
cardmaker build <options>
| Option | Alias | Description |
|---|---|---|
--layout |
-l |
The chosen layout to use |
--nobrowser |
-n |
Skip opening generated of files in the browser |
cardmaker watch <options>
| Option | Alias | Description |
|---|---|---|
--layout |
-l |
The chosen layout to use |
--nobrowser |
-n |
Skip opening generated of files in the browser |
cardmaker export <options>
| Option | Alias | Description |
|---|---|---|
--layout |
-l |
The chosen layout to use |
Cardmaker can manage template with ou without layout
This is a example of template without layouts : All the content are in an unique template
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="{{base}}/styles.css">
</head>
<body>
<div class="card-list">
{{#each cards}}
<div class="card">
<div class="card-title">{{NAME}}</div>
{{#if DESC }}<div class="card-desc">{{DESC}}</div>{{/if}}
</div>
{{/each}}
</div>
</body>
</html>If you want to print with a basic printer machine for prototyping, you want a différent format for printing house. Layout help to work with differents this print format.
This is a basic layout :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="{{base}}/styles.css">
</head>
<body>
<div class="card-list">
{{#each cards}}
{{>card card=.}}
{{/each}}
</div>
</body>
</html>You can note the
{{>card card=.}}This is a basic Handlebars partial name card The current card data is pass to this partial
And your template look like this now :
<div class="card">
<div class="card-title">{{NAME}}</div>
{{#if DESC }}<div class="card-desc">{{DESC}}</div>{{/if}}
</div>Basic configuration :
{
"templates": {
"default": "templates/default.hbs"
},
"layouts": {
"basic": "layouts/basic.hbs"
},
"gsheet":{
"sheetId":"1QJm95kTdpR9XT6fC7sirsPRVFjOOri74-jH3mSd1gf8",
"credentials":null
}
}Advanced configuration with layout overrides :
{
"templates": {
"default": {
"template : "templates/default.hbs",
"layouts" : {
"basic" : "layouts/basic-overridden.hbs"
}
}
},
"layouts": {
"basic": "layouts/basic.hbs"
},
"gsheet":{
"sheetId":"1QJm95kTdpR9XT6fC7sirsPRVFjOOri74-jH3mSd1gf8",
"credentials":null
}
}Licensed under the MIT