Additional Side Pane

An extra pane

Adding an extra pane to those down the side of your game is very easy. However, creating content for it does require some HTML and CSS.

You can use this pane for anything you want; in this instance we will use it to add a spell book - the user can click on a spell to cast it.

We set it up in settings.setup. If you already have a settings.setup function, you need to add the lines inside the function below to your existing function.

settings.setup = function() {
  player.skillsLearnt = ["Double attack", "Fireball"]
  createAdditionalPane(1, "Spells", 'spells-known', function() {
    let html = ''
    for (const name of player.skillsLearnt) {
      html += '<p class="item" onclick="runCmd(\'cast ' + name + '\')">' + name + '</p><br/>'
    }
    return html
  })

QuestJS expects spells the player can cast to be listed in player.skillsLearnt, and the first line in the function just sets up two so we can test it in action.

The most important line here is the createAdditionalPane function, which creates the new pane. This needs four parameters.

The first parameter is a number, and determines where the pane will appear. A zero would put it right at the top, a one, as in this case, just below the compass, etc. The second is the title the user will see at the top of the pane. The third is the ID of the HTML element. This has to be unique, start with a letter, and composed only of letters, numbers, hyphens and underscores.

The fourth is a function that will return an HTML string to go into the pane. It is a function to allow it to change dynamically through the game - the function will be called after each turn. If the player learns a new spell, it will therefore appear on the list.

In this instance, it will go through each spell in the list and create an entry for it. The HTML will look like this:

<p class="item" onclick="runCmd('cast Fireball')">Fireball</p><br/>

This is a p for paragraph element, followed by a line break (<br/>). The p element is given the class "item" so it matches the style of the items inb the inventory. It is also given an "onclick" attribute that contains JavaScript that will run when the element is clicked. This simply calls the runCmd function passing the relevant command.

Panes on both sides

What if you want to have panes on both sides? You might want to do this if there are likely to be a lot of items and a large status pane, and are worried it will not fit, but be aware that it can look more cluttered.

We will be disabling the responsive feature; this hides the side pane when the screen is narrow. If the panes are so important you need both sides, I assume you do not want them to disappear - and it makes it easier to do. This may impact playability on mobile.

settings.panesCollapseAt = 0
settings.mapAndImageCollapseAt = 0

The rest of the code needs to go in the setting.setup and settings.customUI functions. You may already have code in either of these; if so you will need to combine it with the new code. You can only have one of each of these functions in your game.

The bit in settings.customUI creates the second side pane on the right, using existing CSS classes. This example also moves the status pane to the right.

settings.customUI = function() {
  // create the side pane
  const div = document.createElement('div')
  div.id = 'right-pane'
  div.className = 'side-panes side-panes-right'
  document.body.appendChild(div)
  
  // Move the second pane from the left to the right
  const divs = document.body.querySelectorAll('.pane-div')
  div.appendChild(divs[1])
}

We also need some code is settings.setup. The issue here is timing. The settings.setup is run late in the setting up process, once evertything is in place, so it is here we set the margins, after the elements themselves have been created.

settings.setup = function() {
  const main = document.body.querySelector('#main')
  main.style.marginRight = '190px'
  const inner = document.body.querySelector('#inner')
  inner.style.marginLeft = 'auto'
  inner.style.marginRight = 'auto'
}

An extra pane on the other side

So we started by creating a new pane on the left for spells. What if we want that on the right sde instead? We need to modify settings.customUI.

settings.customUI = function() {

  const div = document.createElement('div')
  div.id = 'right-pane'
  div.className = 'side-panes side-panes-right'

  let s = '<div id="right-status" class="pane-div">'
  s += '<h4 clas="center">'
  s += '<table align="center">'
  s += '<tr><td><b>Health</b></td></tr>'
  s += '<tr><td style="border: thin solid black;background:white;text-align:left;\"><span id="hits-indicator" style="background-color:green;padding-right:100px;"></span></td></tr>'
  s += '</table>'
  s += '</div>'

  div.innerHTML = s
  document.body.appendChild(div)
  
  const divs = document.body.querySelectorAll('.pane-div')
  
  //div.appendChild(divs[0])
  div.appendChild(divs[1])
}