Traffic Light*

SketchSystems.spec

Traffic Light*

  Working*
    fail -> Error

    Green*
      tick -> Yellow

    Yellow
      tick -> Red

    Red
      tick -> Green

  # This should probably use a CSS animation rather than a tick event
  # https://stackoverflow.com/a/13955165/495319
  Error
    repair -> Working

    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",
      borderRadius: "10px",
      margin: "2px",
      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",
    { style: { backgroundColor: "#444", width: "24px", padding: "1px" } },
    light("#ff6060", active_light === "Red" || active_light === "Red On"),
    light("orange", active_light === "Yellow"),
    light("#00ff40", active_light === "Green")
  );
}