Gordian Templating

You may find yourself frequently reusing a block of layout, such as a monster stat block, skill check, or shop. In this case you can use a template to store the layout and reusse it.

For a lighter-weight alternative, take a look at placeholders

Defining a Template

Templates are declared inside the gb-templates passage. The passage can contain one or more <template> tags. For example:

<template name="test">
    [CONTENT]
</template>
<template name="test2">
    [CONTENT]
</template>

To use a template in a passage, use the <t> tag:

<t:test></t>

This would outout whatever the content of the template test is (in this case [CONTENT]).

<template name="dead">YOU ARE DEAD!</template>

He shouts, "<t:dead></t>"

He shouts, "YOU ARE DEAD!"

If you prefer you can use the syntax <template name="template_name"></template>, or the placeholder shortcut $template_name. In addition, for compatibility with the HTML Custom Element syntax, <gb-template> is also valid.

<gb-template name="dead"></gb-template>
<template name="dead"></template>
<t:dead></t>
$dead

Passing Content to a Template

A template with fixed text has limited uses (though not none). More often you will want to pass some content to a template. For example imagine you have a specially styled div in your game for notes, and want to use that frequently. You could set up a template and pass the content of the note.

<template name="note">
    <div class="notes curved">
        <h3>NOTE!</h3>
        {{default}}
    </div>
</template>

In this template the text {{default}} is going to be replaced with the default content of the template, which is everything between the <t> and </t> tags.

<t:note>This is the content of the note</t>

<div class="notes curved">
    <h3>NOTE!</h3>
    This is the content of the note
</div>

{{default}} is actually a specical case variable, supplied when there are no other variables inside the data passed to the template. Instead of just passing some text, you can pass a JSON object of values.

<template name="note">
    <div class="notes curved">
        <h3>{{title}}!</h3>
        {{content}}
    </div>
</template>
<t:note>{"title": "NOTE", "content": "This is the content of the note"}</t>

You can access values from the object by putting the key in {{}} as shown above. If your data has nested values (arrays, or other objects) you can access them with "dot notation", for example: {{weapon.damage}} {{weapons.0}}.

You can do simple calculation inside a numerical values by following the value name with one of + - / *. For example {{default + 1}}.

Conditionals in Templates

You may wish to vary the layout of your template depending on the data passed — if X then Y, for example. You can do that using the <if> tag inside your template.

<template name="test">
    <if title == "NOTE">This is a note<else>This is not a note</if>
    {{content}}
</template>
<t:note>{"title": "NOTE", "content": "This is the content of the note"}</t>

You can use the following for comparisons:

The following logical operations are also available: or, and, not. So this is valid:

<template name="test">
    <if title == "NOTE" or title == "DIARY">This is a note<else>This is not a note</if>
    {{content}}
</template>

Repeating Content

One of the best features of a template is repeating layout. For example, you might lay out images in a gallery, or lines of information in a shop. You can do this using the <repeat> tag. The simplest form of this repeats its contents a fixed number of times.

<repeat 5>Hello! </repeat>

The number of repeats can come from a variable, as usual.

<template name="test">
    <repeat hellos>Hello! </repeat>
</template>
<t:test>{ "hellos" : 5 }</t>

Alternatively you can loop over the contents of a variable doing something for each value.

<template name="test">
    <repeat names as name>Hello {{name}}! </repeat>
</template>
<t:test>{ "names" : [ "Bob", "James", "Clive" ] }</t>

In this sort of loop (<repeat ARRAY as VARIABLE>) ARRAY is the thing you are looping through and VARIABLE is a name assigned to it.

<template name="gallery">
    <repeat pictures as picture>
        <img src="http://myimagesite.com/{{picture.url}}" title="{{picture.title}}">
    </repeat>
</template>

<t:gallery>{
    "pictures" : [
         { "url" : "Bob.png", "title" : "Bob" },
         { "url" : "James.png", "title" : "James" }
    ]
}</t>

<img src="http://myimagesite.com/Bob.png" title="Bob">
<img src="http://myimagesite.com/James.png" title="James">

When working with <repeat> some special variables are available.

• {{last}} is true when you are on the last repeat of the loop
• {{LOOPNAME_length}} is a number indicating the length of the item you are repeating over
• {{LOOPNAME_index}} is a number indicating the current repeat you are on

LOOPNAME is the name of the repeat, which is the same as the variable you are repeating over, with any dots replaced by underscores. For example <repeat bags as bag> generates bags_length and bags_index. <repeat items.bags as bag> generates items_bags_length and items_bags_index.

Examples

<template name="market">
    <div class="market">
    <repeat sections AS section>
       <h3>{{section.name}}</h3>
       <table>
       <tr><th></th><th>buy</th><th>sell</th></tr>
       <repeat section.goods AS good>
         <tr><td>{{good.item}}</td><td>{{good.buy}}</td><td>{{good.sell}}</td></tr>
       </repeat>
       </table>
    </repeat>
    </div>
</template>

<t:market>{"sections": [
    { "name": "Treyvik's Goods", "goods":
      [
        {"item": "An old bow (ranged weapon)", "buy": "25gp", "sell": "-"},
        {"item": "Shield", "buy": "25gp", "sell": "-"},
        {"item": "Light Armour (protection 1)", "buy": "50gp", "sell": "-"},
        {"item": "Rations (maximum of 4)", "buy": "7gp", "sell": "-"}
      ]
}]}</t>

<template name="gallery">
    <div>
        <table style="margin:auto"><tr>
        <repeat data AS item><td class="center"><img src="{{item.img}}"><br>
            <b>{{item.name}}</b></td></repeat>
        </tr></table>
    </div>
</template>

<t:gallery>{
    "data":[
        {"img":"/images/iod/iskander_circle.png", "name":"Iskander"},
        {"img":"/images/iod/mehmet_circle.png","name":"Mehmet"}
    ]
}</t>

<template name="fullpic">
    <page-before><div class="cover_full"><img src="/images/gok/{{default}}.jpg" class="cover_image"></div><pagebreak></pagebreak></page-before>
</template>