CSS

Theming the css can be done on the map editor, admin page or by playing a test match.

On the board editor or the admin page simply click the Edit CSS button to bring up the css editor. In play mode type in: /a editCSS into chat.

The CSS here can control styling across the entire game. You also have access to a preprocessor called Stylus which makes it easy to do relatively complex features.

Teaching CSS is out of the scope of this document, but here's a quick video get you to be able to do things immediately: https://www.youtube.com/watch?v=Z3HGJsNLQ1E

A more in-depth / complete course is here: https://scrimba.com/g/gintrotocss

Documentation for stylus, which is an enhancement on CSS: http://stylus-lang.com/

CSS information:

CSS Sizing

Dulst automatically sets 1 gridSize = 1 rem. For a quick example, if your board space is 10x10 then 1 rem would be equal to 1/10th of the screen size. This gives you a consistent relative unit to position cards and board elements across various size screens. Positioning an element using rem would look the same across mobile and desktop where it would look different if using em/px/%.

You should almost always use rem to control the relative positioning of cards and elements. If you want a card to overlap another card just the right amount, you can set a transform or a margin with a negative rem.

If you want your size to be relatively different between screensizes, use em values. For example, if you want text to appear bigger on mobile devices.

Z-Indexes

Cards in rows have the same z-index as the location + 200.

Card Hover Information Window

Keep the hover window open with the command: /a keepOpen

Card property changes / Floating Text

When a main card property changes, for example, when a card takes damage or gets buffed/debuffed, a change notice will pop up.

There are 2 types of change notices, ones that show what the value has been changed to, and ones that show what the value has been changed by.

Normally, you only want to show one or the other. By default the by value is display:none and the to value is shown.

The HTML:

div(class="card-change-value #{locals.property} #{locals.cardType} #{locals.location} #{locals.cardBack} #{locals.direction}")
if locals.direction == 'increase'
i.no-label.fa-angle-up.fa.arrow
else
i.no-label.fa-angle-down.fa.arrow
label #{locals.property}:
.by=locals.by
.to=locals.to

Game and player property changes

The game and player properties are exposed as attributes on the #playContainer element. This allows you to create different visual effects depending on the state of the game or player.

Card Attributes & Changes

Cards have their main, secondary, and background properties shown as HTML attributes of the card. When the property values change, there is a special change attribute created for 4 seconds, after which it is removed.

When the property eligibleToAttack is changed from 1 to 0, you will see the attribute data-eligibleToAttack="1" become data-eligibleToAttack="0" and a new change-data-eligibleToAttack="0" will exist for 4 seconds.

When the a card without the property eligibleToAttack is added the new property eligibleToAttack, you will see the attribute data-eligibleToAttack="1" become data-eligibleToAttack="0" and a new change-data-eligibleToAttack="0" will exist for 4 seconds.