My Awesome Sketch (https://sketch.systems)

SketchSystems.spec

My Awesome Sketch
  Normal State*
    hover -> Hover State
    click -> Selected State
  Hover State
    unhover -> Normal State
    click -> HoverSelected State
  Selected State
    hover -> HoverSelected State
    clickanyother -> Normal State
  HoverSelected State
    unhover -> Selected State
    clickanyother -> Normal State

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  let style = {};
  switch(current_state_name) {
    case "Normal State":
      style = {color: "blue", backgroundColor: "#eee"};
      break;
    case "Hover State":
      style = {color: "#333", backgroundColor: "#ffc"};
      break;
    case "Selected State":
      style = {color: "#888", backgroundColor: "#fcc"};
    case "HoverSelected State":
      style = {color: "#333", backgroundColor: "#ffc"}
      break;
  }
  return $("h1",
           {style: style},
           `The current state is: ${current_state_name}`);
}