Custom UI Elements

Quest 6 happens in a web page, making it easy to add your own elements to the screen, given some knowledge of javaScript, HTML and CSS.

Update and Init

Often it is useful if your new feature gets initialised after the interface is in place, and also after each turn. To achieve this, create a JavaScript object, and add it to io.modulesToUpdate or io.modulesToInit as required.

map = {}
io.modulesToUpdate.push(map)
io.modulesToInit.push(map)

Anything added to io.modulesToInit will have their "init" function run what the game is initialised, and anything added to io.modulesToUpdate will have their "update" function run at the end of every turn (actually, this will be after every command by the player, whether it is technically a command of not).

As an example, here is the "update" function from image-map.js.

map.update = function() {
  settings.mapOffsetX = 0
  settings.mapOffsetY = 0
  settings.mapScale = 1
  map.redraw()
}

Custom keys

By default the key of the number pad can be used to navigate the world. You can change how this works by capturing the event in settings.customKeyResponses. This should return true if it has handled the event, or false to let the defaults have at it.

This simple example will just print the keycode to the console, but always returns false, so keys work as normal.

settings.customKeyResponses = function(keycode) {
  log(keycode)
  return false
}

This example captures the keycode 96, the 0 key on the number pad, and has it perform a specific action.

settings.customKeyResponses = function(keycode) {
  if (keycode === 96) {
    parser.parse("get ball")
    return true
  }
  return false
}

Use wisely. The player will have certain expectations about what the number pad does.