[pad] - Choose-your-own-adventure proto

markup.haml

#story

script.coffee

$story = $('#story')

story_graph = [
  {
    next: [
      [1,'Adipiscing']
      [3,'Ornare Parturient']
    ]
    content: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper."
  }
  {
    next: [
      [0,'Amet']
      [2,'Nullam']
      [3,'Cras']
    ]
    content: "Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor."
  }
  {
    next: [
      [0,'Adipiscing']
      [1,'Ornare Parturient']
    ]
    content: "Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna."
  }
  {
    next: [
      [1,'Adipiscing']
      [2,'Parturient']
    ]
    content: "Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas faucibus mollis interdum. Donec sed odio dui."
  }
]

renderParagraph = (para) ->
  console.log para
  $p = $("<p>#{ para.content }</p>")
  $buttons = $('<div>')
  for next in para.next
    $buttons.append("<button data-next=#{ next[0] }>#{ next[1] }")
  $story.append($p).append($buttons)
  $(window).scrollTop($buttons.offset().top)

renderParagraph(story_graph[0])

$('button').live 'click', ->
  next = $(this).addClass('picked').data('next')
  $('button').attr('disabled', true)
  next_para = story_graph[next]
  renderParagraph(next_para)

style.sass

h1, p
  :font-family Palatino

p
  :line-height 170%
  :font-size 18px
  :font-weight 300

button.picked
  :border 2px solid blue