Square State Flow

SketchSystems.spec

Square State Flow
  type letter -> Bare Black

Bare
  Bare Black
    type letter -> Bare Black
    check correct -> Bare Blue
    check incorrect -> Slashed
    reveal correct -> Bare Blue
    reveal incorrect -> Red Flag Blue
  Bare Blue

Slashed
  type letter -> Black Flag Black
  reveal -> Red Flag Blue

Black Flag
  Black Flag Black
    type letter -> Black Flag Black
    check correct -> Black Flag Blue
    check incorrect -> Slashed
    reveal correct -> Black Flag Blue
    reveal incorrect -> Red Flag Blue
  Black Flag Blue

Red Flag Blue

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}