Add custom variables for reuse across templates

[jordanwallwork]

This PR is an attempt to add basic custom variables which can be reused across templates. These should be named with a valid identifier, and then can be substitued in templates by using {{ variables.my-variable }}. These work in both the HTML and CSS parts of the template.

Example usage

Say you wish to use a specific color to represent a certain class of cards (ie. a Fighter). This colour should be used as the back of the card, as the border on the front of the card, and to colour the text on other cards referencing that type. Custom Variables would allow you to specify the color once and reuse it over any template you wish.

You'd first add a variable named fighter-color with a value of #f00. then you could use {{ variables.fighter-color }} anywhere you need to in both the template's html and the css (ie for the back of the card something like .card { background-color: {{ variables.fighter-color }}; })

Limitations

This is a really quick basic implementation, just to see if it's something you're interested in. Some enhancements that I think would be required are:

• Name validation: Names need to be valid identifiers. my-variable, myvariable, MyVariable are all fine; my variable won't work but is currently permitted in the ui
• Uniqueness: Names should really be unique, as is it's possible to add multiple variables with the same name. Currently duplicate variables will overwrite previous versions, which could cause confusion

[hristoiankov]

Another way you can achieve the fighter card type color example described above with existing functionality is to inject the character type into the class name of your .card div and then add a css.

Ex.
HTML:

<div class="card {{card.type}}">...</div>

CSS:

.card.fighter {
  border-color: red;
}
.card.mage {
  border-color: purple;
}

In this way, you keep all the color/styling information in your style sheet and you have a clear separation of what the data is and how you want that data to look.

[jordanwallwork]

I was thinking of this as a way to share data between templates, a single source of truth. So both the card front and the card back would refer to the variable, and then you can edit it in a single place and all cards using it will be updated.

It's only an idea though, if you're not keen then feel free to dismiss the PR. I know it's not completion-ready yet too so it would take more work if you did think it was worth pursuing