Map Projection

SketchSystems.spec

Map Projection
  Welcome Animation
    button press -> Map Animation 1
  Map Animation 1
    button press -> Map Animation 2
    1 Playing
      timer -> 1 Ended
    1 Ended
  Map Animation 2
    button press -> Map Animation 3
    2 Playing
      timer -> 2 Ended
    2 Ended
  Map Animation 3
    button press -> Map Animation 4
    3 Playing
      timer -> 3 Ended
    3 Ended
  Map Animation 4
    button press -> Map Animation 5
    4 Playing
      timer -> 4 Ended
    4 Ended
  Map Animation 5
    button press -> Map Animation 1
    5 Playing
      timer -> 5 Ended
    5 Ended

SketchSystems_prototype.js

function render_state(state){
  if (state.image_url) {
    return $("img", 
      {
        src: state.image_url, 
        style: {
          width: "100px",
          margin: "1rem"
        }
      }
    );
  }
  else {
    return $(
      "div", 
      {
        style: {
          display: 'inline-block',
          width: "10rem",
          margin: '1rem',
        }
      },
      state.name
    );
  }
}

function render_button(model, eventToEmit, buttonText) {
  console.log(model);
  return $(
    'button', 
    {
      style: {
        display: 'inline-block',
        width: "100px",
        margin: '1rem',
      },
      onClick: function(){ model.emit(eventToEmit) }
    },
    buttonText
  )
}

function render(model){
  console.log(model);
  return $(
    "div",
    render_state(model.active_states[0]), 
    render_state(model.active_states[0].parent),
    $("br"),
    render_button(
      model,
      'auto_next', 
      model.active_states[0].parent.name === "Remote Control Up" ? "auto_next" : ""
    ),
    render_button(
      model,
      model.active_states[0].parent.name === "Remote Control Up" ? "user_put down remote control" : "user_pick up remote control", 
      model.active_states[0].parent.name === "Remote Control Up" ? "user_put down remote control" : "user_pick up remote control"
    )
  );
}