Skip to content

Instantly share code, notes, and snippets.

@JKDos

JKDos/daftpunkonsole.markdown

Created August 21, 2020 20:02
Show Gist options
  • Save JKDos/a4e271a7e980453d2e107fa4e937dcbf to your computer and use it in GitHub Desktop.
Save JKDos/a4e271a7e980453d2e107fa4e937dcbf 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 Jose Kreif II 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
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
Raw
script.coffeescript
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
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/190177/ion.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
Raw
style.sass
@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
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment