Buttons, buttons, buttons

This is an alternative way of laying out the side pane. Whether it is better is a matter of person preference; it has the advantage that every option is immediately visible, but it does take up more space on the screen.

This is what is looks like.

There are broadly two things that need to be modified; the inventories and the compass. In both cases this is split between settings.js and code.js, depending on when things need to be done.

In settings.js

We need three things. The first is the normal array that sets up the inventories. There are two differences here. The first is that each entry has a "noContent" string that is displayed when that inventory is empty.

The second difference is the fourth inventory, which you will probably want to omit (just delete the whole line) but illustrates how you can add additional lists.

// For items
settings.inventoryPane = [
  {name:'You are holding...', alt:'itemsHeld', test:settings.isHeldNotWorn, getLoc:function() { return game.player.name; }, noContent:'Nothing' },
  {name:'You are wearing...', alt:'itemsWorn', test:settings.isWorn, getLoc:function() { return game.player.name; }, noContent:'Nothing' },
  {name:'You can see...', alt:'itemsHere', test:settings.isHere, getLoc:function() { return game.player.loc; }, noContent:'Nothing' },
  {name:'You are on the phone to...', alt:'onPhoneTo', test:function(item) { return item.name === player.onPhoneTo  }, noContent:'No one'  }
]

The second part is for the compass. We need to turn off he standard compass, and add our own (also discussed here).

// For directions
settings.compassPane = false
settings.setup = function() {
  createPaneBox(0, "Go to", '', 'directions')
  settings.updateCustomUI()
}

The bulk of the work is done in settings.updateCustomUI which is a special function Quest will call each turn, and it is here that the new compass and inventories are populated.

settings.updateCustomUI = function() {
  // For items
  for (const el of document.querySelectorAll('.item-action')) {
    el.style.display = 'block'
  }

  // For directions
  const el = document.querySelector('#directions')
  if (!el) return // not there yet
  const exitList = currentLocation.getExits({excludeLocked:true})
  let s = '<p class="item-class"><span class="item-name">You can go:</span>'
  for (let ex of exitList) {
    s += ' <span class="item-action-button" onclick="io.clickExit(\'' + ex.dir + '\')">'
    s += ex.dir
    s += '</span>'
  }
  s += '</p>'
  el.innerHTML = s
  el.previousSibling.innerHTML = currentLocation.headingAlias
}

If you prefer to list the destinations, rather than the directions, you can change the line s += ex.dir to s += ex.name, but I would advise doing so only if the command line is disabled, because typing the destination will not work.

In code.js

Lastly, we just need to replace the default function in io that creates the HTML for each item.

io.getItemHtml = function(item, loc, isSubItem, highlight) {
  const verbList = item.getVerbs(loc)
  if (verbList === undefined) { errormsg("No verbs for " + item.name); console.log(item); }

  let s = '<p id="' + item.name + '-item" class="item-class"><span class="item-name">' + item.getListAlias(loc) + ':</span>'
  for (let verb of verbList) {
    if (typeof verb === 'string') verb = {name:verb, action:verb}
    s += ' <span class="item-action-button" onclick="io.clickItemAction(\'' + item.name + '\', \'' + verb.action + '\')">';
    s += verb.name;
    s += '</span>';
  }
  s += '</p>'
  return s
}

In style.css

You also need some CSS styling. If you do not already have a CSS file in your game, create a new file, "style.css" in the game folder, and add this line to settings.js.

settings.styleFile = 'style'

If you do have a CSS file, just add this to it.

.side-panes {
  width: 300px;
}


.item-class {
  padding: 3px;
  margin-top: 1em ;
  margin-bottom: 1em ;
  line-height: 2em;
}

.item-name {
  font-style: italic;
  padding-right: 5px;
}

.item-nothing {
  font-style: italic;
  padding: 3px;
  line-height: 2em;
}

.item-action-button {
  cursor: pointer;
  color:white;
  background-color:black;
  border-radius: 3px;
  padding: 3px;
}

You should play around with this to get it to your like, but this is a good starting point.