Introduction

The tokenset editor is where you can define the look and feel of your tokens.

Basic Operations

• Click on “My Tokensets” to see tokensets you own
• Click on “Create New” to make a new tokenset
• Click on the tokenset icon to access the tokenset editor
• Click on “Create Token” to make a new token
• Click on a token’s thumbnail to access the token editor

Prototype state JSON

Tokens have state and that state is part of the Game State. The prototype state defines the state of a token at the moment that it is instantiated.

Note

Example: prototype JSON for a card in Deck Chess:

{
  "props": {
    "action": "generate-money",
    "generate": 3,
    "cost": 6
  }
}

View Config

Tokens can have a number of views (currently capped to 2). Each view needs a view config, which tells Turnbase how to render the token.

There are a number of different display modes and they expect different parameters for the view config.

FA Icon (fa-icon)

This mode renders a single fontawesome icon as the token.

Accepted view config fields:

• fa-icon (required)
  • code fo the icon
• color (optional)
  • hexadecimal code for the color

Note

Example: view config for a knight token:

{
  "fa-icon": "chess-knight",
  "color": "#3e5869"
}

Card Front (card-front)

This mode renders an arbitrary card front using CSS-grid for layout

Accepted view config fields:

• width
  • value for the width CSS property
• height
  • value for the height CSS property
• grid-template-cols
  • value for the grid-template-columns CSS property
• grid-template-rows
  • value for the grid-template-rows CSS property
• image-url
  • URL for an image. The image has the lowest z-index (0) and the text fields will be laid on top of the image
• image-grid-area-css
  • value for the grid-area CSS property for the image
• image-border-radius
  • value for the border-radius CSS property for the image
• text[0-9]
  • Up to 9 text fields can be defined, in ascending z-index order.
• text0-grid-area-css
  • value for the grid-area CSS property for the text area
• text0-text-align
  • value for the text-align CSS property for the text area
• text0-font-size
  • value for the font-size CSS property for the text area
• text0-background-color
  • value for the background-color CSS property for the text area
• text0-border
  • value for the border CSS property for the text area
• text0-border-radius
  • value for the border-radius CSS property for the text area

Note

Example: view config for a deck chess card

{
  "width": "100px",
  "height": "150px",
  "grid-template-cols": "repeat(10, 1fr)",
  "grid-template-rows": "repeat(15, 1fr)",
  "image-url": "https://i.ibb.co/dfGP4dK/e6661971bbaf908a34d5.jpg",
  "image-grid-area-css": " 2/ 1/ span 13/ span 10",
  "image-border-radius": "10px",

  "text0": "Summon Bishop",
  "text0-grid-area-css": "1/1/ span 2/ span 10",
  "text0-text-align": "center",
  "text0-font-size": "12px",
  "text0-background-color": "#FFF",

  "text1": "Anywhere, rank 1",
  "text1-grid-area-css": "14/1/ span 2/ span 10",
  "text1-text-align": "center",
  "text1-font-size": "12px",

  "text2": "4",
  "text2-grid-area-css": "13/2/ span 1/ span 2",
  "text2-text-align": "center",
  "text2-font-size": "12px",
  "text2-border-radius": "10px",
  "text2-border": "1px solid #553200",
  "text2-background-color": "#FFDCAA"
}

Text (text)

This mode renders text in a card

Accepted view config fields:

• display-text (required)
  • text to be displayed
• font-size (optional)
  • css for changing font size of the text

Note

Example: view config for a spades bidding token:

{
  "display-text": "3",
  "font-size": "50px"
}

Image (image)

This mode renders an image

Accepted view config fields:

• image-url (required)
  • URL for the image
• width (optional)
• height (optional)

Note

Example: view config for a dealer button:

{
  "image-url": "https://i.ibb.co/sqN6t2M/dealer-button.png",
  "width": "80px",
  "height": "80px"
}

Playing Card Front (playing-card-front)

This mode renders Turnbase’s implementation of playing cards. You probably don’t need this as you could just fork the existing playing cards tokenset.

Accepted view config fields: none. This mode will figure out how to render the token from its state (props).

Playing Card Back (playing-card-back)

This mode renders Turnbase’s implementation of a plain card back.

Accepted view config fields: none.

Note

Example: view config for a card back:

{}