Skip to content

Instantly share code, notes, and snippets.

/#DaftPunKonsole.markdown

Created February 11, 2015 14:57
Show Gist options
  • Save anonymous/43b5fe669905a94e267a to your computer and use it in GitHub Desktop.
Save anonymous/43b5fe669905a94e267a to your computer and use it in GitHub Desktop.
Download ZIP
#DaftPunKonsole
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 !

A Pen by Malik Dellidj on CodePen.

License.

Raw
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.extra #DaftPunKonsole
p
'Made with
i.fa.fa-heart>
'by Malik Dellidj
ul.links
li
a href="http://github.com/KOWLOR/" target="_blank"
i.fa.fa-github
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
'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
Raw
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
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
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
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/beat.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
Raw
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 !
*
* 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: $extra
border: rem-calc(2) solid $extra
padding: rem-calc(10 20)
border-radius: rem-calc(50)
transition: margin .3s ease
&:hover
+keycolor($extra, true)
text-shadow: rem-calc(0 0 4) rgba($extra, .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)
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%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment