Roulette!

This adds a roulette grid to your game - a graphical random number machine.

It will look like a grid of boxes, two columns and ten rows by default. Calling roulette.roll() will start a roll, and each cell in turn will be briefly highlighted before moving to the next. It will slow down and eventually stop on the winning number.

You can have each cell coloured, which will then give the player a graphical representation of how likely something is. Probability can be hard to get; some players will assume that a 90% chance of success means it will always work. If they can see two boxes out of twenty are red they are see that that is not the case.

This also gives a bit of tension to the game, as the player has to wait a few second for the outcome.

Adding The Roulette Grid

By default, the roulette grid is not included in a Quest 6 game (though the file is present). The first step, then, is to tell Quest to include this library. To do that, add this line to your settings.js file (and indeed all options that start "settings" should go in that file):

settings.libraries.push('roulette')

Basics

You need to give it some cells, enough to fill the grid. Here is a simple example, doing it in a loop; this should be in settings.setup

  for (let i = 0; i < roulette.size; i++) {
    roulette.setCell(i, new Cell('green', '' + (i + 1)))
  }
  roulette.redrawSequence()
  roulette.afterRoll = function(result) {
    msg("Result is " + result)
  }

At each iteration, the roulette.setCell() function is used to set the cell at the i position. It uses a built in class, Cell, which takes a colour and a string.

Once the cells are there, it calls roulette.redrawSequence(), which draws the cells on the grid one at a time. Alternatively you can call roulette.redraw() and it will draw it immediately.

It also sets the roulette.afterRoll() function to fire after a roll. It will be sent the winning number (which counts from zero). If the winning cell has an afterRoll() function this will also be used.

Settings

Use settings.rouletteColumns and settings.rouletteRows to set the size of the grid (default to 2 and 10 respectively.

settings.rouletteColumns = 3

To customise the CSS styling of the roulette pane, set settings.roulette.style. For example:

settings.roulette.style = {
  'background-color':'blue',
}

If you are not using the default grid size, you will need to set "height" and "width" and possibly other values too.

Functions

Use roulette.show() and roulette.hide() to show and hide the pane. You can use roulette.getCell(n) to retrieve the cell at a certain position, and roulette.setCell(n, cell) to set the cell there (replacing whatever was there before).

Call roulette.roll() to make a roll.

Cells

Each cell is a JavaScript object (as opposed to a Quest object). It must have a "div" attribute that is an HTML element, plus two functions, "setAlive", and "setHighlight". These are used during a roll - the "setHighlight" function will be called when this is the active cell, and "setAlive" when it is not, so they must visually change the cell to show it is highlighted and not.

This is the minimum:

const myCell = {
  setAlive = function() { this.div.style.backgroundColor = 'yellow' },
  setHighlight = function() { this.div.style.backgroundColor = 'white' },
}
myCell.div = document.createElement('div')
myCell.div.style.backgroundColor = 'yellow'
myCell.div.style.width = "40px"
myCell.div.style.height = "40px"
myCell.div.style.display = "inline"
myCell.div.style.border = "black 1px solid"
myCell.div.innerHTML = 'MyC'

There is a built-is class, Cell, that does most of the for you, so we could just do this:

const myCell = new Cell('yellow', 'MyC')

You may well want to create your own class for this. Or several classes - you could have one for a hit, one for a critical, one for a miss and one for a fumble. Each can be a different colour, so the player can see his chances at a glance, and react in its own way.

Here is an example to show the basics. This includes an "afterRoll" function.

class Cell {
  constructor(c, s) {
    this.colour = c
    this.div = document.createElement('div')
    this.div.style.backgroundColor = this.colour
    this.div.style.width = "40px"
    this.div.style.height = "40px"
    this.div.style.display = "inline"
    this.div.style.border = "white 1px solid"
    if (s) this.div.innerHTML = s
  }
  afterRoll() { msg("This cell was picked!")  
  setAlive() { this.div.style.backgroundColor = this.colour }
  setHighlight() { this.div.style.backgroundColor = 'white' }
}

Changing the size during play

This should be fine, but you need to remember to change everything!

roulette.columnCount
roulette.rowCount
roulette.size
roulette.div.style.width
roulette.div.style.height

There may be other style attributes you need to adjust too. Fill the grid with cells and call roulette.redrawSequence()` when done.