Crime Database Client*

SketchSystems.spec

Crime Database Client*
  App Start*
    connected? -> Connected?
    connectionless? -> Connectionless?
  
  App Resume
  
  Connectionless?
    Welcome Unconnected*
    Local Store Empty
    Local Store Populated

  Connected?
    Welcome Connected*
      login_success -> Authenticated
      login_failed -> Authentication Failed
      logout -> Unauthenticated
    Unauthenticated
      login_success -> Authenticated
      login_failed -> Authentication Failed
    Authenticated
      logout -> Unauthenticated
    Authentication Failed
      login_success -> Authenticated
      login_failed -> Authentication Failed

SketchSystems_prototype.js

// Attach Figma frames (artboards) to states
// IDs can be found under "Share > Public Embed" in Figma 

// ** Edit this: Figma File ID
const figmaFile = "9YIyKtFdtZ1Rad2xIdjMB9";

// ** Edit this: List state names and matching Figma frame/artboard IDs
const figmaNodes = 
  {Shop:    "0%3A197", 
   Tickets: "0%3A53"  };

const figmaURL = "https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/" + figmaFile + "/Sample-File?node-id=";

function render(model){
  const currentStateName = model.active_states[0].name;
  for (f in figmaNodes) 
    if (currentStateName === f) 
      return $("iframe",{src: figmaURL + figmaNodes[f], width: '100%', height: '100%'});
}