Adding a toolbar

A toolbar is a strip across the top of the page. It could be used to note the game status on the left, the current room in the middle and display buttons on the right.

To add a toolbar, just add a settings.toolbar entry to your settings.js file. This should be an array, containing three elements, defining what will be to the left, in the middle and to the right, in that order.

settings.toolbar = [
  {content:function() { return 'Hitpoints: ' + player.hitpoints }},
  {room: true},
  {buttons:[
      { title: "Undo", icon: "fa-undo", cmd: "undo" },
      { title: "Dark mode", icon: "fa-moon", cmd: "dark" },
      { title: "Save", icon: "fa-upload", cmd: "save game ow" },
      { title: "Load", icon: "fa-download", cmd: "load game" },
      { title: "About", icon: "fa-info-circle", cmd: "about" },
  ]},
]

Each element in the list is a dictionary, which should have just one key-value pair in it.

If it has a "room" key set to true, the name of the room will be displayed.

If it has a "title" key set to true, the name of the game will be displayed.

If it has a "content" key set to a function, the function will be run and the returned string displayed. This could be used to display score, turn count, etc. The limitation here is the space you have available.

Lastly you can have a "buttons" array attribute, one entry for each button you want on the toolbar. Each button needs its own dictionary, with various attributes. The "title" is the tooltip that will be displayed when the player hovers over it. Icon is obviously the icon, from the "Font Awesome" set (you need to pick older icons). You can either set the button to run a command as though the player typed in, using "cmd" or for full control, specific the JavaScript to run with "onclick". In the example above, each button uses "cmd", which is the recommended approach - let Quest do the work.

NOTE: The buttons can only use older icons from Font Awesome, and you may need to experiment to find what they are (eg, "fa-gear" and "fa-gears" will not work, but "fa-wrench" will). If you want to use newer icons, you will need to modify line 2059 in io.getToolbarHTML in lib/_io.js to use "fa-solid" rather than "fas", which is easy enough.

      s += ` <a class="link" onclick="if (!io.disableLevel)${js}"><i class="fa-solid ${el.icon}" title="${el.title}"></i></a>`;

However, I think you also need to download "Kit" that has all the icons you want to use and is embedded in your game, I guess in index.html. It is not something I have investigated so I amnot sure what this involves.

A Settings Dialog

If you have a lot of settings, you might want to put just one button on the toolbar. Here is a new set of buttons to use:

  {buttons:[
      { title: "UI Settings", icon: "fa-wrench", cmd: "options" },
      { title: "Save", icon: "fa-upload", cmd: "save game ow" },
      { title: "Load", icon: "fa-download", cmd: "load game" },
      { title: "About", icon: "fa-info-circle", cmd: "about" },
  ]},

It will call a command with the string "options", so we also need that.

new Cmd('Options', {
  regex:/^options$/,
  objects:[
  ],
  script:function() {

    const widgets = {
      title:'Options',
      //desc:'You are on a quest. What is most important to you?',
      widgets:[
        { type:'checkbox', title:'Appearance', name:'dark', data:'Dark mode', checked:settings.darkModeActive},
        { type:'dropdown', title:'Messages', name:'messages', data:["Vital only", "Important only", "Major only", "All but trivial", "All"].reverse(), checked:settings.msgLevel},
      ],
      okayScript:function(results) {
        log(results)
        settings.darkModeActive = results.dark
        settings.msgLevel = parseInt(results.messages)
      },
    }
    io.dialog(widgets)
  },
})

The script is the important part. It sets up a dialog panel, and you can add anything you like here. Dark mode is set in this example. Note that you need to set "checked" to the current value. In the "okayScript" you need to grab the value from results and set the appropiate value.