fwartner/#DaftPunKonsole.markdown

## #DaftPunKonsole.markdown

      
    Raw
  

              #DaftPunKonsole.markdown
            
          
    #DaftPunKonsole

A console to recreate the famous "Harder, Better, Faster, Stronger" by Daft Punk.
Use your keyboard ! not the mouse (hey, it's a console). Use the other keys to get different sounds (Normal, High, Low).
You can do it !
Forked from Malik Dellidj's Pen #DaftPunKonsole.
A Pen by Florian Wartner on CodePen.
License.

  
## index.slim
- da = [['Work it'], ['Make it'], ['Do it'],['Makes us'],[''],[''],['More than'],['Hour'],['Our'],['Never']]
- ft = [['Harder'],['Better'],['Faster'],['Stronger'],[''],[''],['Ever'],['After'],['Work is'],['Over']]
- pu = [['Normal'],['High'],[''],[''],[''],['Low'],[''],['']]
- nk = [['','32', 'play']]
#js-lyrics.lyrics.animated
.wk
  .k
    .r
      - da.each do |k|
        i data-code="" data-lyric=k[0]
          span
          - if k[0] != ''
            b = k[0]
    .r
      - ft.each do |k|
        i data-code="" data-lyric=k[0]
          span
          - if k[0] != ''
            b = k[0]
    .r.level
      - pu.each do |k|
        i data-code="" data-level = k[0]
          span
          - if k[0] != ''
            b = k[0]
    .r
      - nk.each do |k|
        .space data-code = k[1] data-action = k[2]
          #jp_container_1.jp-audio
            .jp-type-single
              .jp-gui.jp-interface
                .jp-controls
                  button.jp-play Instrumental
                .jp-progress
                  .jp-seek-bar
                    .jp-play-bar

#js-daft_1.jp-jplayer
.credits
  p
    a href="http://daftpunkonsole.com" target="_blank" class="extra"
      '#DaftPunKonsole.com
  p
    'Made with
    i.fa.fa-heart>
    'by Malik Dellidj
  ul.links
    li
      a href="https://github.com/KOWLOR/DaftPunKonsole" target="_blank"
        i.fa.fa-github-alt
    li
      a href="http://codepen.io/kowlor" target="_blank"
        i.fa.fa-codepen
    li
      i.fa.fa-twitter>
      a href="http://twitter.com/Dathink" target="_blank"
        '@Dathink

.modal.animated
  img src="http://s.cdpn.io/190177/Daft_Punk.svg" class="daft-punk-logo"
  h1 “Harder, Better, Faster, Stronger”
  h2
    '1 Million views, the console will now be updated at
    a href="http://daftpunkonsole.com" target="_blank"
      'Daftpunkonsole.com
  /h3
    'Please choose your keyboard

  ul
    li
      a href="#" class="js-qwerty btn"
        'QWERTY
    li
      a href="#" class="js-azerty btn"
        'AZERTY
  p.credit
    i.fa.fa-twitter>
    a href="http://twitter.com/Dathink" target="_blank"
      '@Dathink

## script.coffee
initJson = (index_type) ->
  $.ajax(
    url: 'http://s.cdpn.io/190177/keyboard_.json'
    type: 'get'
    dataType: 'json')
  .done (data) ->
    _.each(data.keyboard.type[index_type].row, (row, index_row) ->
      _.each(row.key, (key, index_key) ->
        row_selected =  $(".r:nth-child(#{index_row+1})")
        span_selected =  $(row_selected).find("span")[index_key]
        $(span_selected).text(key.char)
        $(span_selected).parent('*[data-code]').attr('data-code', key.code)

      )
	    )

init = ->
  level = 'Normal'
  $('body').addClass 'Normal'
  $('.level').find('i[data-level=' + level + ']').addClass 'is-active'

ion.sound
  sounds: [
    {name:'beat'}
    {name:'WorkIt1'}
    {name:'MakeIt1'}
    {name:'DoIt1'}
    {name:'MakesUs1'}
    {name:'Harder1'}
    {name:'Better1'}
    {name:'Faster1'}
    {name:'Stronger1'}
    {name:'MoreThan1'}
    {name:'Hour1'}
    {name:'Our1'}
    {name:'Never1'}
    {name:'Ever1'}
    {name:'After1'}
    {name:'WorkIs1'}
    {name:'Over1'}
    {name:'WorkIt2'}
    {name:'MakeIt2'}
    {name:'DoIt2'}
    {name:'MakesUs2'}
    {name:'Harder2'}
    {name:'Better2'}
    {name:'Faster2'}
    {name:'Stronger2'}
    {name:'MoreThan2'}
    {name:'Hour2'}
    {name:'Our2'}
    {name:'Never2'}
    {name:'Ever2'}
    {name:'After2'}
    {name:'WorkIs2'}
    {name:'Over2'}
    {name:'MoreThan3'}
    {name:'Hour3'}
    {name:'Our3'}
    {name:'Never3'}
    {name:'Ever3'}
    {name:'After3'}
    {name:'WorkIs3'}
    {name:'Over3'}

  ]
  path: 'http://s.cdpn.io/190177/'
  preload: true

$ ->
  init()
  k = $('.k')

  $('.js-azerty').on 'click', (e) ->
    e.preventDefault()
    initJson(0)
    $('.k').addClass 'azerty'
    $(this).closest('.modal').remove()

  $('.js-qwerty').on 'click', (e) ->
    e.preventDefault()
    initJson(1)
    $('.k').addClass 'qwerty'
    $(this).closest('.modal').remove()

  $(document).keydown (e) ->
    e.preventDefault()
    code = e.keyCode or e.which
    key = $('[data-code=' + code + ']')

    if key.data('level')
      curClass = key.data('level')
      key.addClass('is-active')
      key.closest('.level').find('.is-active').not(key).removeClass('is-active')
      $('body').removeClass().addClass(curClass)

    else
      key.addClass('is-active')
      $('#js-lyrics').html('<span class="animated"/>').find('span').addClass('fadeOutUp').html(key.data('lyric'))

    if $('.level').find('i.is-active').data('level') == 'Normal'
      if k.hasClass 'qwerty'
        switch code
          when 81
            ion.sound.play 'WorkIt1'
          when 87
            ion.sound.play 'MakeIt1'
          when 69
            ion.sound.play 'DoIt1'
          when 82
            ion.sound.play 'MakesUs1'

          when 65
            ion.sound.play 'Harder1'
          when 83
            ion.sound.play 'Better1'
          when 68
            ion.sound.play 'Faster1'
          when 70
            ion.sound.play 'Stronger1'

          when 85
            ion.sound.play 'MoreThan1'
          when 73
            ion.sound.play 'Hour1'
          when 79
            ion.sound.play 'Our1'
          when 80
            ion.sound.play 'Never1'

          when 74
            ion.sound.play 'Ever1'
          when 75
            ion.sound.play 'After1'
          when 76
            ion.sound.play 'WorkIs1'
          when 186, 59
            ion.sound.play 'Over1'
      else
        switch code
          when 65
            ion.sound.play 'WorkIt1'
          when 90
            ion.sound.play 'MakeIt1'
          when 69
            ion.sound.play 'DoIt1'
          when 82
            ion.sound.play 'MakesUs1'

          when 81
            ion.sound.play 'Harder1'
          when 83
            ion.sound.play 'Better1'
          when 68
            ion.sound.play 'Faster1'
          when 70
            ion.sound.play 'Stronger1'

          when 85
            ion.sound.play 'MoreThan1'
          when 73
            ion.sound.play 'Hour1'
          when 79
            ion.sound.play 'Our1'
          when 80
            ion.sound.play 'Never1'

          when 74
            ion.sound.play 'Ever1'
          when 75
            ion.sound.play 'After1'
          when 76
            ion.sound.play 'WorkIs1'
          when 77
            ion.sound.play 'Over1'

    else if $('.level').find('i.is-active').data('level') == 'High'
      if k.hasClass 'qwerty'
        switch code
          when 81
            ion.sound.play 'WorkIt2'
          when 87
            ion.sound.play 'MakeIt2'
          when 69
            ion.sound.play 'DoIt2'
          when 82
            ion.sound.play 'MakesUs2'

          when 65
            ion.sound.play 'Harder2'
          when 83
            ion.sound.play 'Better2'
          when 68
            ion.sound.play 'Faster2'
          when 70
            ion.sound.play 'Stronger2'

          when 85
            ion.sound.play 'MoreThan2'
          when 73
            ion.sound.play 'Hour2'
          when 79
            ion.sound.play 'Our2'
          when 80
            ion.sound.play 'Never2'

          when 74
            ion.sound.play 'Ever2'
          when 75
            ion.sound.play 'After2'
          when 76
            ion.sound.play 'WorkIs2'
          when 186, 59
            ion.sound.play 'Over2'
      else
        switch code
          when 65
            ion.sound.play 'WorkIt2'
          when 90
            ion.sound.play 'MakeIt2'
          when 69
            ion.sound.play 'DoIt2'
          when 82
            ion.sound.play 'MakesUs2'

          when 81
            ion.sound.play 'Harder2'
          when 83
            ion.sound.play 'Better2'
          when 68
            ion.sound.play 'Faster2'
          when 70
            ion.sound.play 'Stronger2'

          when 85
            ion.sound.play 'MoreThan2'
          when 73
            ion.sound.play 'Hour2'
          when 79
            ion.sound.play 'Our2'
          when 80
            ion.sound.play 'Never2'

          when 74
            ion.sound.play 'Ever2'
          when 75
            ion.sound.play 'After2'
          when 76
            ion.sound.play 'WorkIs2'
          when 77
            ion.sound.play 'Over2'

    else if $('.level').find('i.is-active').data('level') == 'Low'
      if k.hasClass 'qwerty'
        switch code
          when 85
            ion.sound.play 'MoreThan3'
          when 73
            ion.sound.play 'Hour3'
          when 79
            ion.sound.play 'Our3'
          when 80
            ion.sound.play 'Never3'

          when 74
            ion.sound.play 'Ever3'
          when 75
            ion.sound.play 'After3'
          when 76
            ion.sound.play 'WorkIs3'
          when 186, 59
            ion.sound.play 'Over3'
      else
        switch code
          when 85
            ion.sound.play 'MoreThan3'
          when 73
            ion.sound.play 'Hour3'
          when 79
            ion.sound.play 'Our3'
          when 80
            ion.sound.play 'Never3'

          when 74
            ion.sound.play 'Ever3'
          when 75
            ion.sound.play 'After3'
          when 76
            ion.sound.play 'WorkIs3'
          when 77
            ion.sound.play 'Over3'


  $(document).keyup (e) ->
    e.preventDefault()
    code = e.keyCode or e.which
    key = $('[data-code=' + code + ']')

    if !key.data('level')
      key.removeClass('is-active')

  $('#js-daft_1').jPlayer
    ready: (event) ->
      $(this).jPlayer 'setMedia',
        m4a: 'http://s.cdpn.io/190177/instru.mp3'
    supplied: 'm4a'
    wmode: 'window'
    autoBlur: false
    useStateClassSkin: true
    smoothPlayBar: true
    keyEnabled: true
    toggleDuration: true
    remainingDuration: true
    keyBindings:
      play:
        key: 32
        fn: (f) ->
          if f.status.paused
            f.play()
          else
            f.pause()
      muted:
        key: 0
        fn: (f) ->
          f._muted !f.options.muted
      volumeUp:
        key: 0
        fn: (f) ->
          f.volume f.options.volume + 0.1
      volumeDown:
        key: 0
        fn: (f) ->
          f.volume f.options.volume - 0.1

## style.sass
@import "compass/css3"
/*
 * #DaftPunKonsole
 * Malik Dellidj - @Dathink
 *
 * There are existing apps or flash to do this, but no web version so here it is.
 *
 * How to play :
 * You may notice that in the song all theses words are used
 * but sometimes in a different layout
 * e.g.
 * – Work it, make it, do it, makes us
 * – Harder, better, faster, stronger
 * –––
 * – Work it, harder, make it, better
 * – Do it, faster, makes us, stronger
 *
 * Check the lyrics ! and the different tones to recreate over half of the song !
 *
 * Many thanks to my work mates who helped me when I was stuck
 *
 * Nb : Hey IE fellaz, get a browser : www.google.com/chrome, it's free !
 */

$bg-color: #101012
$bg-color-light: lighten($bg-color, 20%)
$bg-color-lightened: lighten($bg-color-light, 20%)
$neutral-color: #ffffff
$love: #d43f57
$tint: $bg-color-lightened
$extra: #15d880
$gold-helmet: #dfba69
$silver-helmet: #c9d1d3
$key-size: 49px
$font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
$rem-base: 16px !default

= keycolor($v, $bs : false)
  color: $v
  border-color: $v
  @if $bs
    box-shadow: rem-calc(0 0 12 -2) $v

@function strip-unit($num)
  @return $num / ($num * 0 + 1)

@function convert-to-rem($value, $base-value: $rem-base)
  $value: strip-unit($value) / strip-unit($base-value) * 1rem
  @if $value == 0rem
    $value: 0
  @return $value

@function rem-calc($values, $base-value: $rem-base)
  $max: length($values)
  @if $max == 1
    @return convert-to-rem(nth($values, 1), $base-value)
  $remValues: ()
  @for $i from 1 through $max
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value))
  @return $remValues

html, body
  height: 100vh
  width: 100vw

body
  font: normal 1em/1.45em $font-family
  background: url(http://s.cdpn.io/190177/Daft_Punk_bg.svg) no-repeat center center $bg-color
  display: flex
  align-items: center
  flex-direction: column
  justify-content: space-around
  -webkit-font-smoothing: antialiased
  color: $neutral-color
  -webkit-font-smoothing: subpixel-antialiased
  text-rendering: optimizeLegibility
  background-size: 95%


a
  text-decoration: none
  color: $bg-color-light

.extra
  color: $extra

.lyrics
  flex: 1
  align-items: center
  justify-content: center
  display: flex
  font-size: rem-calc(58)
  position: relative
  span
    animation-duration: 1s
    white-space: nowrap
    font-weight: 500
    .Normal &
      color: $extra
      text-shadow: rem-calc(0 0 10) rgba($extra, .2)
    .High &
      color: $love
      text-shadow: rem-calc(0 0 10) rgba($love, .2)
    .Low &
      color: $gold-helmet
      text-shadow: rem-calc(0 0 10) rgba($gold-helmet, .2)

.wk
  display: flex
  align-items: center
  justify-content: center
  flex: 2

.k
  width: rem-calc(630)
  padding-right: 2.5%
  user-select: none
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-tap-highlight-color: transparent // Hey Androids !
  .r
    position: relative
    display: flex
    justify-content: space-between
    margin: rem-calc(10px)
    &:nth-child(1), &:nth-child(2)
      i:nth-last-child(-n+4), i:nth-child(-n+4)
        color: lighten($tint, 25%)
        &:hover
          +keycolor($extra)
        &:active, &.is-active
          +keycolor($extra, true)
      .Normal &
        i:nth-last-child(-n+4), i:nth-child(-n+4)
          color: lighten($tint, 25%)
          &:hover
            +keycolor($extra)
          &:active, &.is-active
            +keycolor($extra, true)
      .High &
        i:nth-last-child(-n+4), i:nth-child(-n+4)
          color: lighten($tint, 25%)
          &:hover
            +keycolor($love)
          &:active, &.is-active
            +keycolor($love, true)
      .Low &
        i:nth-child(-n+4)
          color: $bg-color-light
          &:hover
            +keycolor($bg-color-lightened)
          &:active, &.is-active
            +keycolor($bg-color-lightened, true)
        i:nth-last-child(-n+4)
          color: lighten($tint, 25%)
          &:hover
            +keycolor($gold-helmet)
          &:active, &.is-active
            +keycolor($gold-helmet, true)
    &:nth-child(2)
      +translateX(2.5%)
    &:nth-child(3)
      margin-left: 8.5%
      margin-right: 14%
      i:nth-child(1)
        .Normal &
          b
            background: $extra
          +keycolor($extra, true)
      i:nth-child(2)
        .High &
          b
            background: $love
          +keycolor($love, true)
      i:nth-last-child(3)
        .Low &
          b
            background: $gold-helmet
          +keycolor($gold-helmet, true)
      i
        flex-direction: column-reverse
        b
          background: $bg-color-light
          color: $bg-color
          border-radius: rem-calc(8)
          padding: 0 rem-calc(5)
          line-height: 0
          margin-top: rem-calc(5)
  i, .space
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    color: $bg-color-light
    border-radius: rem-calc(6)
    height: rem-calc($key-size)
    font-size: rem-calc(16)
    line-height: 0
    border: rem-calc(2) solid $bg-color-light
    position: relative
    transition: all .08s ease-in-out
    &:hover
      border-color: $tint
      color: $tint
    &:active, &.is-active
      border-color: $tint
      color: $tint
      box-shadow: rem-calc(0 0 9 -2) $tint
      +translateY(rem-calc(1))
  i
    font-style: normal
    width: rem-calc($key-size)
    span, b
      flex: 2
      display: flex
      align-items: center
    span
      text-transform: uppercase
      font-family: 'Varela Round'
    b
      font-size: rem-calc(9)
      flex: 1
  .space
    flex: 1
    max-width: 48.5%
    margin-left: 27.5%
    align-items: stretch
    justify-content: center
    position: static

.credits
  font-size: rem-calc(13)
  display: flex
  flex-direction: column
  flex: 1
  justify-content: center
  p
    text-align: center
  .links
    margin: rem-calc(5 0)
    li
      display: inline-block
      padding: rem-calc(0 10)
      border-right: rem-calc(1) solid rgba($bg-color-light, .35)
      &:last-child
        border: 0

.fa
  color: $extra
  & + a
    color: $extra
    &:hover
      color: $extra
.fa-heart
  color: $love

.jp-audio
  color: $neutral-color

.modal
  display: flex
  background: rgba($bg-color, .8)
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  align-items: center
  justify-content: center
  flex-direction: column
  .daft-punk-logo
    margin: rem-calc(20 0 30)
  .btn
    color: darken($extra, 20%)
    border: rem-calc(2) solid darken($extra, 20%)
    padding: rem-calc(10 20)
    border-radius: rem-calc(50)
    transition: margin .3s ease
    &:hover
      +keycolor(darken($extra, 20%), true)
      text-shadow: rem-calc(0 0 4) rgba(darken($extra, 20%), .8)
  h1
    font-size: rem-calc(40)
    font-weight: 100
    margin: rem-calc(0 0 30 0)
  h2
    font-size: rem-calc(20)
    font-weight: 200
    margin: rem-calc(0 0 30 0)
    a
      color: $extra
      &:hover
        text-shadow: rem-calc(0 0 3) rgba($extra, .8)
  ul
    display: flex
    li
      margin: rem-calc(20)
  .fa
    color: $extra
    & + a
      color: $neutral-color
      &:hover
        color: $extra
  .credit
    margin: rem-calc(20 0 0 0)

.jp-audio
  position: relative
  .jp-controls
    position: absolute
    button
      background: transparent
      border: 0
      color: $bg-color-lightened
      text-transform: capitalize
      font-size: rem-calc(9)
    .jp-play
      &:before
        content: ''
        height: rem-calc(5)
        width: rem-calc(5)
        border-radius: rem-calc(50)
        background: $bg-color-lightened
        display: inline-block
        margin: rem-calc(1 3)
  &.jp-state-playing
    .jp-controls
      .jp-play
        color: $extra
        text-shadow: rem-calc(0 0 2) rgba($extra, .8)
        &:before
          background: $extra
          box-shadow: rem-calc(0 0 3) rgba($extra, .8)
        .High &
          color: $love
          text-shadow: rem-calc(0 0 2) rgba($love, .8)
          &:before
            background: $love
            box-shadow: rem-calc(0 0 3) rgba($love, .8)
        .Low &
          color: $gold-helmet
          text-shadow: rem-calc(0 0 2) rgba($gold-helmet, .8)
          &:before
            background: $gold-helmet
            box-shadow: rem-calc(0 0 3) rgba($gold-helmet, .8)
  .jp-progress
    height: rem-calc(49)
    .jp-seek-bar
      width: 100%
      height: 100%
      .jp-play-bar
        background: rgba($bg-color-light, .2)
        height: 100%
	- da = [['Work it'], ['Make it'], ['Do it'],['Makes us'],[''],[''],['More than'],['Hour'],['Our'],['Never']]
	- ft = [['Harder'],['Better'],['Faster'],['Stronger'],[''],[''],['Ever'],['After'],['Work is'],['Over']]
	- pu = [['Normal'],['High'],[''],[''],[''],['Low'],[''],['']]
	- nk = [['','32', 'play']]
	#js-lyrics.lyrics.animated
	.wk
	.k
	.r
	- da.each do \|k\|
	i data-code="" data-lyric=k[0]
	span
	- if k[0] != ''
	b = k[0]
	.r
	- ft.each do \|k\|
	i data-code="" data-lyric=k[0]
	span
	- if k[0] != ''
	b = k[0]
	.r.level
	- pu.each do \|k\|
	i data-code="" data-level = k[0]
	span
	- if k[0] != ''
	b = k[0]
	.r
	- nk.each do \|k\|
	.space data-code = k[1] data-action = k[2]
	#jp_container_1.jp-audio
	.jp-type-single
	.jp-gui.jp-interface
	.jp-controls
	button.jp-play Instrumental
	.jp-progress
	.jp-seek-bar
	.jp-play-bar

	#js-daft_1.jp-jplayer
	.credits
	p
	a href="http://daftpunkonsole.com" target="_blank" class="extra"
	'#DaftPunKonsole.com
	p
	'Made with
	i.fa.fa-heart>
	'by Malik Dellidj
	ul.links
	li
	a href="https://github.com/KOWLOR/DaftPunKonsole" target="_blank"
	i.fa.fa-github-alt
	li
	a href="http://codepen.io/kowlor" target="_blank"
	i.fa.fa-codepen
	li
	i.fa.fa-twitter>
	a href="http://twitter.com/Dathink" target="_blank"
	'@Dathink

	.modal.animated
	img src="http://s.cdpn.io/190177/Daft_Punk.svg" class="daft-punk-logo"
	h1 “Harder, Better, Faster, Stronger”
	h2
	'1 Million views, the console will now be updated at
	a href="http://daftpunkonsole.com" target="_blank"
	'Daftpunkonsole.com
	/h3
	'Please choose your keyboard

	ul
	li
	a href="#" class="js-qwerty btn"
	'QWERTY
	li
	a href="#" class="js-azerty btn"
	'AZERTY
	p.credit
	i.fa.fa-twitter>
	a href="http://twitter.com/Dathink" target="_blank"
	'@Dathink
	initJson = (index_type) ->
	$.ajax(
	url: 'http://s.cdpn.io/190177/keyboard_.json'
	type: 'get'
	dataType: 'json')
	.done (data) ->
	_.each(data.keyboard.type[index_type].row, (row, index_row) ->
	_.each(row.key, (key, index_key) ->
	row_selected = $(".r:nth-child(#{index_row+1})")
	span_selected = $(row_selected).find("span")[index_key]
	$(span_selected).text(key.char)
	$(span_selected).parent('*[data-code]').attr('data-code', key.code)

	)
	)

	init = ->
	level = 'Normal'
	$('body').addClass 'Normal'
	$('.level').find('i[data-level=' + level + ']').addClass 'is-active'

	ion.sound
	sounds: [
	{name:'beat'}
	{name:'WorkIt1'}
	{name:'MakeIt1'}
	{name:'DoIt1'}
	{name:'MakesUs1'}
	{name:'Harder1'}
	{name:'Better1'}
	{name:'Faster1'}
	{name:'Stronger1'}
	{name:'MoreThan1'}
	{name:'Hour1'}
	{name:'Our1'}
	{name:'Never1'}
	{name:'Ever1'}
	{name:'After1'}
	{name:'WorkIs1'}
	{name:'Over1'}
	{name:'WorkIt2'}
	{name:'MakeIt2'}
	{name:'DoIt2'}
	{name:'MakesUs2'}
	{name:'Harder2'}
	{name:'Better2'}
	{name:'Faster2'}
	{name:'Stronger2'}
	{name:'MoreThan2'}
	{name:'Hour2'}
	{name:'Our2'}
	{name:'Never2'}
	{name:'Ever2'}
	{name:'After2'}
	{name:'WorkIs2'}
	{name:'Over2'}
	{name:'MoreThan3'}
	{name:'Hour3'}
	{name:'Our3'}
	{name:'Never3'}
	{name:'Ever3'}
	{name:'After3'}
	{name:'WorkIs3'}
	{name:'Over3'}

	]
	path: 'http://s.cdpn.io/190177/'
	preload: true

	$ ->
	init()
	k = $('.k')

	$('.js-azerty').on 'click', (e) ->
	e.preventDefault()
	initJson(0)
	$('.k').addClass 'azerty'
	$(this).closest('.modal').remove()

	$('.js-qwerty').on 'click', (e) ->
	e.preventDefault()
	initJson(1)
	$('.k').addClass 'qwerty'
	$(this).closest('.modal').remove()

	$(document).keydown (e) ->
	e.preventDefault()
	code = e.keyCode or e.which
	key = $('[data-code=' + code + ']')

	if key.data('level')
	curClass = key.data('level')
	key.addClass('is-active')
	key.closest('.level').find('.is-active').not(key).removeClass('is-active')
	$('body').removeClass().addClass(curClass)

	else
	key.addClass('is-active')
	$('#js-lyrics').html('<span class="animated"/>').find('span').addClass('fadeOutUp').html(key.data('lyric'))

	if $('.level').find('i.is-active').data('level') == 'Normal'
	if k.hasClass 'qwerty'
	switch code
	when 81
	ion.sound.play 'WorkIt1'
	when 87
	ion.sound.play 'MakeIt1'
	when 69
	ion.sound.play 'DoIt1'
	when 82
	ion.sound.play 'MakesUs1'

	when 65
	ion.sound.play 'Harder1'
	when 83
	ion.sound.play 'Better1'
	when 68
	ion.sound.play 'Faster1'
	when 70
	ion.sound.play 'Stronger1'

	when 85
	ion.sound.play 'MoreThan1'
	when 73
	ion.sound.play 'Hour1'
	when 79
	ion.sound.play 'Our1'
	when 80
	ion.sound.play 'Never1'

	when 74
	ion.sound.play 'Ever1'
	when 75
	ion.sound.play 'After1'
	when 76
	ion.sound.play 'WorkIs1'
	when 186, 59
	ion.sound.play 'Over1'
	else
	switch code
	when 65
	ion.sound.play 'WorkIt1'
	when 90
	ion.sound.play 'MakeIt1'
	when 69
	ion.sound.play 'DoIt1'
	when 82
	ion.sound.play 'MakesUs1'

	when 81
	ion.sound.play 'Harder1'
	when 83
	ion.sound.play 'Better1'
	when 68
	ion.sound.play 'Faster1'
	when 70
	ion.sound.play 'Stronger1'

	when 85
	ion.sound.play 'MoreThan1'
	when 73
	ion.sound.play 'Hour1'
	when 79
	ion.sound.play 'Our1'
	when 80
	ion.sound.play 'Never1'

	when 74
	ion.sound.play 'Ever1'
	when 75
	ion.sound.play 'After1'
	when 76
	ion.sound.play 'WorkIs1'
	when 77
	ion.sound.play 'Over1'

	else if $('.level').find('i.is-active').data('level') == 'High'
	if k.hasClass 'qwerty'
	switch code
	when 81
	ion.sound.play 'WorkIt2'
	when 87
	ion.sound.play 'MakeIt2'
	when 69
	ion.sound.play 'DoIt2'
	when 82
	ion.sound.play 'MakesUs2'

	when 65
	ion.sound.play 'Harder2'
	when 83
	ion.sound.play 'Better2'
	when 68
	ion.sound.play 'Faster2'
	when 70
	ion.sound.play 'Stronger2'

	when 85
	ion.sound.play 'MoreThan2'
	when 73
	ion.sound.play 'Hour2'
	when 79
	ion.sound.play 'Our2'
	when 80
	ion.sound.play 'Never2'

	when 74
	ion.sound.play 'Ever2'
	when 75
	ion.sound.play 'After2'
	when 76
	ion.sound.play 'WorkIs2'
	when 186, 59
	ion.sound.play 'Over2'
	else
	switch code
	when 65
	ion.sound.play 'WorkIt2'
	when 90
	ion.sound.play 'MakeIt2'
	when 69
	ion.sound.play 'DoIt2'
	when 82
	ion.sound.play 'MakesUs2'

	when 81
	ion.sound.play 'Harder2'
	when 83
	ion.sound.play 'Better2'
	when 68
	ion.sound.play 'Faster2'
	when 70
	ion.sound.play 'Stronger2'

	when 85
	ion.sound.play 'MoreThan2'
	when 73
	ion.sound.play 'Hour2'
	when 79
	ion.sound.play 'Our2'
	when 80
	ion.sound.play 'Never2'

	when 74
	ion.sound.play 'Ever2'
	when 75
	ion.sound.play 'After2'
	when 76
	ion.sound.play 'WorkIs2'
	when 77
	ion.sound.play 'Over2'

	else if $('.level').find('i.is-active').data('level') == 'Low'
	if k.hasClass 'qwerty'
	switch code
	when 85
	ion.sound.play 'MoreThan3'
	when 73
	ion.sound.play 'Hour3'
	when 79
	ion.sound.play 'Our3'
	when 80
	ion.sound.play 'Never3'

	when 74
	ion.sound.play 'Ever3'
	when 75
	ion.sound.play 'After3'
	when 76
	ion.sound.play 'WorkIs3'
	when 186, 59
	ion.sound.play 'Over3'
	else
	switch code
	when 85
	ion.sound.play 'MoreThan3'
	when 73
	ion.sound.play 'Hour3'
	when 79
	ion.sound.play 'Our3'
	when 80
	ion.sound.play 'Never3'

	when 74
	ion.sound.play 'Ever3'
	when 75
	ion.sound.play 'After3'
	when 76
	ion.sound.play 'WorkIs3'
	when 77
	ion.sound.play 'Over3'


	$(document).keyup (e) ->
	e.preventDefault()
	code = e.keyCode or e.which
	key = $('[data-code=' + code + ']')

	if !key.data('level')
	key.removeClass('is-active')

	$('#js-daft_1').jPlayer
	ready: (event) ->
	$(this).jPlayer 'setMedia',
	m4a: 'http://s.cdpn.io/190177/instru.mp3'
	supplied: 'm4a'
	wmode: 'window'
	autoBlur: false
	useStateClassSkin: true
	smoothPlayBar: true
	keyEnabled: true
	toggleDuration: true
	remainingDuration: true
	keyBindings:
	play:
	key: 32
	fn: (f) ->
	if f.status.paused
	f.play()
	else
	f.pause()
	muted:
	key: 0
	fn: (f) ->
	f._muted !f.options.muted
	volumeUp:
	key: 0
	fn: (f) ->
	f.volume f.options.volume + 0.1
	volumeDown:
	key: 0
	fn: (f) ->
	f.volume f.options.volume - 0.1
	@import "compass/css3"
	/*
	* #DaftPunKonsole
	* Malik Dellidj - @Dathink
	*
	* There are existing apps or flash to do this, but no web version so here it is.
	*
	* How to play :
	* You may notice that in the song all theses words are used
	* but sometimes in a different layout
	* e.g.
	* – Work it, make it, do it, makes us
	* – Harder, better, faster, stronger
	* –––
	* – Work it, harder, make it, better
	* – Do it, faster, makes us, stronger
	*
	* Check the lyrics ! and the different tones to recreate over half of the song !
	*
	* Many thanks to my work mates who helped me when I was stuck
	*
	* Nb : Hey IE fellaz, get a browser : www.google.com/chrome, it's free !
	*/

	$bg-color: #101012
	$bg-color-light: lighten($bg-color, 20%)
	$bg-color-lightened: lighten($bg-color-light, 20%)
	$neutral-color: #ffffff
	$love: #d43f57
	$tint: $bg-color-lightened
	$extra: #15d880
	$gold-helmet: #dfba69
	$silver-helmet: #c9d1d3
	$key-size: 49px
	$font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
	$rem-base: 16px !default

	= keycolor($v, $bs : false)
	color: $v
	border-color: $v
	@if $bs
	box-shadow: rem-calc(0 0 12 -2) $v

	@function strip-unit($num)
	@return $num / ($num * 0 + 1)

	@function convert-to-rem($value, $base-value: $rem-base)
	$value: strip-unit($value) / strip-unit($base-value) * 1rem
	@if $value == 0rem
	$value: 0
	@return $value

	@function rem-calc($values, $base-value: $rem-base)
	$max: length($values)
	@if $max == 1
	@return convert-to-rem(nth($values, 1), $base-value)
	$remValues: ()
	@for $i from 1 through $max
	$remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value))
	@return $remValues

	html, body
	height: 100vh
	width: 100vw

	body
	font: normal 1em/1.45em $font-family
	background: url(http://s.cdpn.io/190177/Daft_Punk_bg.svg) no-repeat center center $bg-color
	display: flex
	align-items: center
	flex-direction: column
	justify-content: space-around
	-webkit-font-smoothing: antialiased
	color: $neutral-color
	-webkit-font-smoothing: subpixel-antialiased
	text-rendering: optimizeLegibility
	background-size: 95%


	a
	text-decoration: none
	color: $bg-color-light

	.extra
	color: $extra

	.lyrics
	flex: 1
	align-items: center
	justify-content: center
	display: flex
	font-size: rem-calc(58)
	position: relative
	span
	animation-duration: 1s
	white-space: nowrap
	font-weight: 500
	.Normal &
	color: $extra
	text-shadow: rem-calc(0 0 10) rgba($extra, .2)
	.High &
	color: $love
	text-shadow: rem-calc(0 0 10) rgba($love, .2)
	.Low &
	color: $gold-helmet
	text-shadow: rem-calc(0 0 10) rgba($gold-helmet, .2)

	.wk
	display: flex
	align-items: center
	justify-content: center
	flex: 2

	.k
	width: rem-calc(630)
	padding-right: 2.5%
	user-select: none
	-webkit-tap-highlight-color: rgba(0,0,0,0)
	-webkit-tap-highlight-color: transparent // Hey Androids !
	.r
	position: relative
	display: flex
	justify-content: space-between
	margin: rem-calc(10px)
	&:nth-child(1), &:nth-child(2)
	i:nth-last-child(-n+4), i:nth-child(-n+4)
	color: lighten($tint, 25%)
	&:hover
	+keycolor($extra)
	&:active, &.is-active
	+keycolor($extra, true)
	.Normal &
	i:nth-last-child(-n+4), i:nth-child(-n+4)
	color: lighten($tint, 25%)
	&:hover
	+keycolor($extra)
	&:active, &.is-active
	+keycolor($extra, true)
	.High &
	i:nth-last-child(-n+4), i:nth-child(-n+4)
	color: lighten($tint, 25%)
	&:hover
	+keycolor($love)
	&:active, &.is-active
	+keycolor($love, true)
	.Low &
	i:nth-child(-n+4)
	color: $bg-color-light
	&:hover
	+keycolor($bg-color-lightened)
	&:active, &.is-active
	+keycolor($bg-color-lightened, true)
	i:nth-last-child(-n+4)
	color: lighten($tint, 25%)
	&:hover
	+keycolor($gold-helmet)
	&:active, &.is-active
	+keycolor($gold-helmet, true)
	&:nth-child(2)
	+translateX(2.5%)
	&:nth-child(3)
	margin-left: 8.5%
	margin-right: 14%
	i:nth-child(1)
	.Normal &
	b
	background: $extra
	+keycolor($extra, true)
	i:nth-child(2)
	.High &
	b
	background: $love
	+keycolor($love, true)
	i:nth-last-child(3)
	.Low &
	b
	background: $gold-helmet
	+keycolor($gold-helmet, true)
	i
	flex-direction: column-reverse
	b
	background: $bg-color-light
	color: $bg-color
	border-radius: rem-calc(8)
	padding: 0 rem-calc(5)
	line-height: 0
	margin-top: rem-calc(5)
	i, .space
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center
	color: $bg-color-light
	border-radius: rem-calc(6)
	height: rem-calc($key-size)
	font-size: rem-calc(16)
	line-height: 0
	border: rem-calc(2) solid $bg-color-light
	position: relative
	transition: all .08s ease-in-out
	&:hover
	border-color: $tint
	color: $tint
	&:active, &.is-active
	border-color: $tint
	color: $tint
	box-shadow: rem-calc(0 0 9 -2) $tint
	+translateY(rem-calc(1))
	i
	font-style: normal
	width: rem-calc($key-size)
	span, b
	flex: 2
	display: flex
	align-items: center
	span
	text-transform: uppercase
	font-family: 'Varela Round'
	b
	font-size: rem-calc(9)
	flex: 1
	.space
	flex: 1
	max-width: 48.5%
	margin-left: 27.5%
	align-items: stretch
	justify-content: center
	position: static

	.credits
	font-size: rem-calc(13)
	display: flex
	flex-direction: column
	flex: 1
	justify-content: center
	p
	text-align: center
	.links
	margin: rem-calc(5 0)
	li
	display: inline-block
	padding: rem-calc(0 10)
	border-right: rem-calc(1) solid rgba($bg-color-light, .35)
	&:last-child
	border: 0

	.fa
	color: $extra
	& + a
	color: $extra
	&:hover
	color: $extra
	.fa-heart
	color: $love

	.jp-audio
	color: $neutral-color

	.modal
	display: flex
	background: rgba($bg-color, .8)
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	align-items: center
	justify-content: center
	flex-direction: column
	.daft-punk-logo
	margin: rem-calc(20 0 30)
	.btn
	color: darken($extra, 20%)
	border: rem-calc(2) solid darken($extra, 20%)
	padding: rem-calc(10 20)
	border-radius: rem-calc(50)
	transition: margin .3s ease
	&:hover
	+keycolor(darken($extra, 20%), true)
	text-shadow: rem-calc(0 0 4) rgba(darken($extra, 20%), .8)
	h1
	font-size: rem-calc(40)
	font-weight: 100
	margin: rem-calc(0 0 30 0)
	h2
	font-size: rem-calc(20)
	font-weight: 200
	margin: rem-calc(0 0 30 0)
	a
	color: $extra
	&:hover
	text-shadow: rem-calc(0 0 3) rgba($extra, .8)
	ul
	display: flex
	li
	margin: rem-calc(20)
	.fa
	color: $extra
	& + a
	color: $neutral-color
	&:hover
	color: $extra
	.credit
	margin: rem-calc(20 0 0 0)

	.jp-audio
	position: relative
	.jp-controls
	position: absolute
	button
	background: transparent
	border: 0
	color: $bg-color-lightened
	text-transform: capitalize
	font-size: rem-calc(9)
	.jp-play
	&:before
	content: ''
	height: rem-calc(5)
	width: rem-calc(5)
	border-radius: rem-calc(50)
	background: $bg-color-lightened
	display: inline-block
	margin: rem-calc(1 3)
	&.jp-state-playing
	.jp-controls
	.jp-play
	color: $extra
	text-shadow: rem-calc(0 0 2) rgba($extra, .8)
	&:before
	background: $extra
	box-shadow: rem-calc(0 0 3) rgba($extra, .8)
	.High &
	color: $love
	text-shadow: rem-calc(0 0 2) rgba($love, .8)
	&:before
	background: $love
	box-shadow: rem-calc(0 0 3) rgba($love, .8)
	.Low &
	color: $gold-helmet
	text-shadow: rem-calc(0 0 2) rgba($gold-helmet, .8)
	&:before
	background: $gold-helmet
	box-shadow: rem-calc(0 0 3) rgba($gold-helmet, .8)
	.jp-progress
	height: rem-calc(49)
	.jp-seek-bar
	width: 100%
	height: 100%
	.jp-play-bar
	background: rgba($bg-color-light, .2)
	height: 100%