Photo App*

SketchSystems.spec

Photo App*

  Splash Screen*
    loaded -> Select Source
  
  Select Source
    allow camera -> Take Picture
    allow library -> Snapshot
    
  Take Picture
    snap -> Snapshot
    upload -> Snapshot
  
  Snapshot 
    cancel -> Take Picture
    add overlay -> Share
  
  Share
    cancel -> Snapshot
    share -> Shared
  
  Shared
    start_again -> Select Source
    

SketchSystems_prototype.js

const nextStates = {
  'Splash Screen': 'loaded',
  'Select Source': 'allow camera',
  'Take Picture': 'snap',
  Snapshot: 'add overlay',
  'Add Overlay': 'choose',
  Preview: 'share',
  Share: 'share',
  Shared: 'start_again',
}

const nextLabels = {
  'Splash Screen': 'Start',
  'Select Source': 'Allow camera',
  'Take Picture': 'Snap',
  Snapshot: 'Add Overlay',
  'Add Overlay': 'Select Overlay',
  Preview: 'Finish',
  Share: 'Share',
  Shared: 'Start again!',
  'not allowed': 'Allow Camera',
}

function button(label, onClick) {
  return $(
    'button',
    {
      style: {
        margin: '0 auto',
        marginBottom: 4,
        fontSize: 13,
        padding: '10px 20px',
        background: '#000',
        color: '#fff',
        border: '2px solid',
      },
      onClick,
    },
    label
  )
}

function render(model) {
  let currentState = model.active_states[0].name
  let imgBackground = null
  let imgOverlay = null
  let buttons = [
    button(nextLabels[currentState], () =>
      model.emit(nextStates[currentState])
    ),
  ]

  if (currentState === 'Select Source') {
    buttons.push(button('Take from library', () => model.emit('allow library')))
  }

  if (currentState === 'Snapshot' || currentState === 'Share') {
    buttons.push(button('Back', () => model.emit('cancel')))
  }

  if (
    currentState === 'Snapshot' ||
    currentState === 'Take Picture' ||
    currentState === 'Add Overlay' ||
    currentState === 'Preview' ||
    currentState === 'Share'
  ) {
    imgBackground = $('img', {
      src: 'http://i.pravatar.cc/320',
      style: { position: 'absolute', left: '50%', marginLeft: -160, top: 70 },
    })
  }

  if (
    currentState === 'Snapshot' ||
    currentState === 'Preview' ||
    currentState === 'Share'
  ) {
    const isPreview =
      currentState === 'Preview' || currentState === 'Share'
    const size = isPreview ? 160 : 128
    imgOverlay = $('img', {
      src:
        'http://download.seaicons.com/icons/gpritiranjan/simple-christmas/512/santa-hat-icon.png',
      style: {
        width: size,
        height: size,
        position: 'absolute',
        left: '50%',
        top: isPreview ? 0 : '60%',
        marginLeft: isPreview ? -size / 2 - 30 : -size / 2 - 20,
        background: isPreview ? 'transparent' : '#fff',
        borderRadius: '50%',
        padding: 20,
      },
    })
  }

  if (currentState === 'Take Picture') {
    buttons.push(button('Upload from library', () => model.emit('upload')))
  }

  if (currentState === 'Add Overlay') {
    buttons.push(button('Start over', () => model.emit('restart')))
  }

  if (currentState === 'Preview') {
    buttons.push(button('Edit', () => model.emit('edit')))
  }

  return $(
    'div',
    {
      style: {
        textAlign: 'center',
        fontFamily: 'sans-serif',
        position: 'relative',
      },
    },
    $(
      'div',
      {
        style: {
          width: 320,
          height: 480,
          background: '#111',
          margin: '0 auto',
          position: 'relative',
        },
      },
      $('h1', { style: { color: 'white', paddingTop: 20 } }, currentState)
    ),
    imgBackground,
    imgOverlay,
    $(
      'div',
      {
        style: {
          position: 'absolute',
          bottom: 20,
          left: '50%',
          width: 320,
          marginLeft: -160,
        },
      },
      ...buttons
    )
  )
}