Dynamic UI Layouts in SugarCube

:: StoryInterface
<div id="ui-root">
  <div id="passages"></div>
</div>
​
<script>
$(document).on(':passagestart', function (ev) {
  var passage = ev.passage;
  var tags = passage.tags;
  var root = $('#ui-root');
  
  if (tags.includes('fullscreen')) {
    root.html('<div id="passages"></div>');
  } else if (tags.includes('sidebar')) {
    root.html(`
      <div id="ui-container">
        <div id="ui-sidebar">
          <h2>Game Title</h2>
          <div id="ui-stats"></div>
        </div>
        <div id="ui-main">
          <div id="passages"></div>
        </div>
      </div>
    `);
  } else if (tags.includes('split')) {
    root.html(`
      <div id="ui-split">
        <div id="ui-left">
          <div id="ui-header"></div>
          <div id="passages"></div>
        </div>
        <div id="ui-right">
          <div id="ui-info"></div>
        </div>
      </div>
    `);
  } else {
    // Default minimal layout
    root.html('<div id="passages"></div>');
  }
});
</script>

:: Story Beginning [fullscreen]
# Chapter One
​
The story begins in a quiet village...
​
This passage uses the fullscreen layout for an immersive reading experience.
​
[[Enter the tavern|Tavern]]
​
:: Tavern [sidebar]
# The Rusty Dragon Tavern
​
You enter the bustling tavern. The air is thick with smoke and laughter.
​
:: Notice Board [split]
# Notice Board
​
Several parchments are pinned to the wooden board.

else if (tags.includes('custom')) {
    root.html(`
        <div id="custom-layout">
            <!-- Your custom HTML structure. Remember that you need <div id="passages"></div> because that's where the content of your passages is displayed -->
        </div>
    `);
}

:: StoryInterface
<div id="persistent-ui">
  <div id="audio-controls"></div>
</div>
<div id="ui-root">
  <div id="passages"></div>
</div>