Dialog examples

Not sure how useful this is, but I have it, so it might as well be available.

The situation here is that we want to present the player with a large number of options in table. For example, the player is selecting a dress, and can have any combination of style and colour; or the player is picking a tattoo and can pick a design and location. In either case, one set of option is listed across the top (colours or locations) and another listed down the left (style or design). The player clicks a button in the middle of the table with the desired combination.

Here is the code, which is probably best in code.js

let diagTableFunction = false
const tableDiagSelect = function(col, row) {
  const diag = document.getElementById("dialog")
  diag.style.display = 'none'
  diagTableFunction(col, row)
  diagTableFunction = false
}
const table = function(title, cols, rows, fn) {
  if (test.testing || settings.walkthroughMenuResponses.length > 0) {
    fn(cols[1], typeof row === 'string' ? rows[1] : rows[1].name)
    return
  }

  diagTableFunction = fn
  const diag = document.getElementById("dialog")
  
  let html = '<h4>' + title + '</h4><br/>'
  html += '<table id="diag-table">'
  for (let i = 0; i <= cols.length; i++) html += '<colgroup></colgroup>'
  html += '<thead><tr><th></th>'
  for (const col of cols) {
    html += '<th>' + col + '</th>'
  }
  html += '</tr></thead><tbody>'
  for (const row of rows) {
    const name = typeof row === 'string' ? row : row.name
    html += '<tr><th'
    if (typeof row !== 'string') {
      html += ' title="' + row.text + '"'
    }
    html += '>' + name + '</th>'
    for (const col of cols) {
      html += '<td><input type="button" value="Select" class="diag-table-button" style="color:grey" onclick="tableDiagSelect(\'' + name + '\', \'' + col + '\')"/></td>'
    }
    html += '</tr>'
  }
  html += "</tbody></table>"
  html += '<p><input type="button" value="Cancel" class="diag-table-button" style="color:grey;float: right;" onclick="tableDiagSelect()"/></p>'
  diag.innerHTML = html
  diag.style.width = 80 * (cols.length + 2) + 'px'
  diag.style.height = 'auto'
  diag.style.top = '80px'
  diag.style.position = 'fixed'
  diag.title = title
  diag.style.display = 'block'
}

So how do you use it? Here is an example. You need two arrays, one for the columns, one for the rows. Pass them to the function table, together with a title and a call-back function. In this case the function just reports back what was selected.

  const designs = ['Lion', 'Tiger', 'Dragon', 'Snake', 'AK47', 'Sunset', 'Rose', 'Dagger', 'Mongoose', 'Fire']
  const locations = ['Left arm', 'Right arm']
  table("Select a Tattoo", locations, designs, function(col, row) {
    log('Tattoo selected: ' + col + ', ' + row)
  })

A slightly different version, this uses an arrays of dictionaries for the rows (not an option for the columns). The text attribute is then used as a tooltip.

  const designs = [
  { name:'Short',text:'A rather short dress'},
  { name:'Long',text:'A long flowing glow, with a tight waist and open back.'},
  ]
  const colours = ['Black', 'White', 'Blue', 'Red', 'Green', 'Yellow', 'Purple', 'Plaid', 'Paisley', 'Tartan']
  table("Select a Dress", colours, designs, function(col, row) {
    log('Dress selected: ' + col + ', ' + row)
  })

If you try these out you will see one table is wide and short, the other tall and thin - it has sized it for you. This does rely on short names for your columns and rows. Note that the player can click the cancel button at the bottomtop right to dismiss the dialog without making a selection; the call-back function is still called, but with no parameters, so your function needs to check for that.

Unit testing and walk-throughs

Dialogs are a pain in the neck if you are using unit tests or walk-throughs, as you need a way to by-pass them. Ideally we would have a way to select a certain option, but it is far easier to just say we will pick the same one every time - let us say the second row and second column.

Just add these four lines of code after the function declaration (which is also included).

const table = function(title, cols, rows, fn) {
  if (test.testing || settings.walkthroughMenuResponses.length > 0) {
    fn(cols[1], typeof row === 'string' ? rows[1] : rows[1].name)
    return
  }

Now your unit-test or walk-through will automatically make a selection, without showing the dialog.