Basic Scripting: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. 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>. `,
});

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 { 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>. `,
});

AdventureJS has a shortcut for custom classes, using {[square_brackets] inside curly braces}, where the text inside the square brackets represents the CSS class, and the remainder of text inside the curly braces is the text to be styled. The end result of this will print in the form of <span class="your_class">your 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}. `,
});

You may include CSS <style> tags in the HTML page that runs your game file. Or if you prefer, you can use the game.setStyle() method to define styles in your game file.

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

Though the previous example only sets a color, we have access to the full range of CSS. The next example shows how we can apply some basic CSS layout tricks.

Our code for this example might look something like this. Whether to use inline <style> tags vs the game.setStyle() is up to personal preference. The end result is the same. setStyle() doesn't do anything special, and is basically just a convenience method for authors who prefer to keep their code and styles together.

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/>
      find a key of gold, <br/>
      the eye of an honest man, <br/>
      and the hand of a hanged man.
    </span> 
  `,
});
MyGame.setStyle({
  ".stone": { 
    display: block;
    font-family: monospace;
    padding: 1em;
    text-align: center;
    border: 1px solid white;
    margin: 1em;
    width: fit-content;
    place-self: center;
  },
});