Customize Output:Inline CSS

AdventureJS accepts arbitrary HTML in most string properties. In this example, we're going to apply some color to one word. There are several ways to achieve this, as listed below.

> examine chest

It's a small wooden chest bound with straps of gold.

If you're new to Javascript, before moving on we also recommend you check out Customize Output: Notes on Quotes, which offers some guidance about a potentially tricky aspect of using nested quotes in dynamic strings.

Using the style attribute

In this example, we create a <span> tag and apply a CSS style directly to it.

MyGame.createAsset({
  class: "Chest",
  name: "golden chest",
  description: `It's a small wooden chest bound with straps of <span style="color:gold;">gold</span>. `,
});

Using custom classes

This next example is a slight adjustment on the same theme. We define a custom CSS class, create a <span> tag, and apply the class to it.

<style>.gold_class { color: gold; }</style>

MyGame.createAsset({
  class: "Chest",
  name: "golden chest",
  description: `It's a small wooden chest bound with straps of <span class="gold;">gold</span>. `,
});

Using the class shortcut

AdventureJS has a placeholder shortcut for custom classes, in the form of {[my_class] my text}, where the text inside the square brackets represents the CSS class, which will be applied to the non-bracketed text inside the curly braces. The end result of this will print in the form of <span class="my_class">my text</span>. (Note that this method doesn't support nested CSS classes.)

MyGame.createAsset({
  class: "Chest",
  name: "golden chest",
  description: `It's a small wooden chest bound with straps of {[gold]gold}. `,
});

Adding custom classes

You may include CSS <style> tags in the HTML page that loads your game file.

<style>.gold_class: { color: "gold" };</style>

Or if you prefer, you can use the game.setStyle() method to define styles in your game file. setStyle() is a convenience method for authors who like to keep their code and styles together.

MyGame.setStyle({".gold_class": { color: "gold" },});

More...

Though the previous examples only set a color, any and all CSS is accepted. The next example shows how we can apply some basic CSS layout tricks.

> examine writing

The etched stone writing next to the chest reads: To open this chest,
bind a key of bone with
the hand of a thief,
the breath of a hanged man,
and the eye of a blind man.

Our code for this example might look something like this. You can either embed <style> tags in the HTML page running the game, or use the the game.setStyle() method to set custom CSS as shown in the example.

MyGame.createAsset({
  class: "Thing",
  name: "etched stone writing",
  description: `
    The etched stone writing next to the chest reads: 
    <span class="stone">To open this chest, <br/>    
      bind a key of bone with <br/>
      the hand of a thief, <br/>
      the breath of a hanged man, <br/>
      and the eye of a blind man.
    </span>
  `,
});
MyGame.setStyle({
  ".stone": { 
    display: block;
    font-family: monospace;
    padding: 1em;
    text-align: center;
    border: 1px solid gray;    
    margin: 1em;
    width: fit-content;
    place-self: center;
  },
});

Just for completionism, here's what that CSS would look as an embedded <style> tag.

<style>
  .stone {
    display: block;
    font-family: monospace;
    padding: 1em;
    text-align: center;
    border: 1px solid gray;
    margin: 1em;
    width: fit-content;
    place-self: center;
  }
</style>

Further Reference

These docs assume that authors know the basics of CSS. To learn more about CSS in general, we recommend the MDN reference library.