# A traffic light

SketchSystems.spec

# A traffic light
Powered
  power failed -> Unpowered

  Green*
    tick -> Yellow

  Yellow
    tick -> Red

  Red
    tick -> Green

Unpowered
  power restored -> Powered

  Red On*
    tick -> Red Off

  Red Off
    tick -> Red On

SketchSystems_prototype.js

//A function that draws individual traffic lights
function light(color, is_illuminated){
  return $('div', {style: {backgroundColor: color,
                           width: '20px',
                           height: '20px',
                           opacity: is_illuminated ? 1 : 0.2}});
}

//A function that draws all of our lights, based on the statechart
function render(model){
  var active_light = model.active_states[0].name;
  return $('div',
           light('Red', active_light === 'Red' || active_light === 'Red On'),
           light('Yellow', active_light === 'Yellow'),
           light('Green', active_light === 'Green'));
}