- 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
    del
      a href="https://twitter.com/Dathink" 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="https://codepen.io/kowlor" target="_blank"
        i.fa.fa-codepen
    li
      i.fa.fa-twitter>
      a href="https://twitter.com/Dathink" target="_blank"
        '@Dathink
      
.modal.animated

  h1.extra “Harder, Better, Faster, Stronger”
  h2
    '1 Million views, the console will now be updated at 
    a href="https://twitter.com/Dathink" target="_blank"
      del
        'Daftpunkonsole.com
  .msg
    'I'll disable the sound until I get an official permission, sorry....
    
  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="https://twitter.com/Dathink" target="_blank"
      '@Dathink

@import compass

/* 
 * #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(https://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%

.msg
  background: #DF2828
  color: white
  padding: rem-calc(10 15)
  border-radius: rem-calc(4)
  margin-bottom: rem-calc(20)

del
  text-decoration: line-through

initJson = (index_type) ->
  $.ajax(
    url: 'https://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: 'https://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: 'https://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