GotoKoala&

SketchSystems.spec

GotoKoala&
  
  Login State
    Anonymous
      login -> Logged In
    Logged In
      logout -> Anonymous
  
  Content 
    home -> Home
    profiles -> Profiles
  
    Home*

    Profiles
      profile -> IsProfileAlive?
        
    IsProfileAlive?
      yes? -> Live Profile
      no? -> Profile
 
    Profile
      tick -> IsProfileAlive?
      
    Live Profile
      tick -> IsProfileAlive?
        
      View&
        Browser View
          Browser Playing*
            play_browser -> Browser Pauzed
          Browser Pauzed
            play_browser -> Browser Playing
      
        Audio
          Audio Playing*
            play_audio -> Audio Pauzed
          Audio Pauzed
            play_audio -> Audio Playing
          
        Chat View
          Chat Active*
            comment -> CanComment?
        
          CanComment?
            logged_in? -> Send Comment?
            not logged_in? -> Display Not Logged In Comment Warning
      
          Send Comment?
            server_accepts? -> Chat View
            server_errors? -> Display Comment Warning
      
          Display Comment Warning
            ok -> IsProfileAlive?
      
          Display Not Logged In Comment Warning
            cancel -> IsProfileAlive?
            login -> Chat Active
      
    

SketchSystems_prototype.js

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