Skip to content
TCG Set Designer

Setting Up Visual Templates

This section will show you how you can configure visual card templates into your TCGSD instance.

There are several moving parts to this!

Your TCG Set Designer instance is made up of two parts: a back-end API server, and a front-end web client.

The front-end web client needs to install any Visual Template packages, and those Visual Template packages need to instruct the back-end API server to be aware that those Visual Templates are ready for rendering in the front-end. This will allow cards in the back-end’s database to refer to those Visual Templates, and the front-end can use the card’s data to determine which template to use when rendering card data.

So, keep this process in mind:

  1. A ReactJS developer has created a Visual Template package (VTL) with appropriate exports. Ideally, the VTL should be available on NPM as a package.
  2. Your instance’s front-end configuration section, you specify a list of packages that your instance should be aware of as VTL packages.
  3. Whenever that list changes, the front-end part of the instance must be restarted.
  4. When the front-end instance loads, it loads up each VTL package.
  5. When each VTL package is loaded, it makes an API request to your instance to declare itself as a Visual Template, so that database entities can refer to it.
  6. The cards of your instance can refer to the Visual Template within their card data, so references to Visual Templates are saved in the card’s database entry.
  7. When the card is retrieved by the front-end, the front-end uses the card data to determine which Visual Template should be used to render the card.
  8. The front-end uses the determined Visual Template to render the card data.

Instance Configuration

As far as configuration goes, an instance administrator just needs to settle on which Visual Template packages they want to be available within their instance.

A Visual Template package has code within it to automatically make sure that the Visual Template is known to the back-end.

Usage

The front-end uses conditional logic when processing a card’s data to determine which Visual Template to use when rendering the card’s data.