diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..a060ad4 --- /dev/null +++ b/index.html @@ -0,0 +1,160 @@ +{% extends "snippets/layout.html" %} + +{% block title "Beats per Minute | Maximilian Möhring" %} + +{% block css %} + .main { + font-size: inherit !important; + } + .jumbotron { + background-color: inherit !important; + border: 1px solid grey; + } +{% endblock %} + +{% block main %} +<div class="container text-center"> + <span id="countBpm"> + <div class="jumbotron"> + <div class="flavor-text"> + <h1>Hier klicken um die BPMs zu zählen:</h1> + <em>Ist das Lied tanzbar? Was kann man dazu tanzen?</em> + </div> + <h2><span id="showBpm">0</span> BPM</h2> + <button class="btn btn-primary">Click</button> + <div class="mt-5 mb-5 container" id="showDances"> + <div class="row mb-2" id="showDances-standard"> + </div> + <div class="row mb-2" id="showDances-latein"></div> + </div> + </div> + </span> + <button id="reset" class="btn btn-secondary">Reset</button> + + <div class="row"> +{% set type = "" %} +{% for dance in dances %} + {% if dance.type != type %} + {% set type = dance.type %} + <div class="col-12 mt-4 mb-2"> <h2>{{ type|capitalize }}</h2> </div> + {% endif %} + + <div class="col" id="{{ dance.name }}"> + <h3> {{ dance.name }} </h3> + {{ dance.minBarspm }} bis {{ dance.maxBarspm }} Takte pM + <br> + {{ dance.minBpm }} bis {{ dance.maxBpm }} BpM + <br> + {{ dance.bar }} Takt + </div> + +{% endfor %} + </div> +</div> + +<script> + var lastClick = 0; + var bpm = []; + var dances = {{ dump_dances() }}; + var appendedDances = []; + var appendedHeader = []; + function median(values){ + if ( values.length === 0 ) { + return 0; + } + + values.sort(function(a,b){ + return a-b; + }); + + var half = Math.floor(values.length / 2); + + if (values.length % 2) { + return values[half]; + } + + return (values[half - 1] + values[half]) / 2.0; + } + function reset() { + lastClick = 0; + bpm = []; + appendedDances = []; + appendedHeader = []; + document.getElementById("showBpm").innerHTML = 0; + document.getElementById("showDances-standard").innerHTML = ""; + document.getElementById("showDances-latein").innerHTML = ""; + } + function getBpm(bpm) { + /* slice() copies by value, not by reference, so the median() doesn't mess with the array */ + return Math.round(median(bpm.slice())); + } + function display(bpm) { + document.getElementById("showBpm").innerHTML = getBpm(bpm.slice()); + } + window.addEventListener("load",function() { + document.getElementById("countBpm").addEventListener("click", function(e){ + var d = new Date(); + var t = d.getTime(); + var seconds = ( t - lastClick ) / 1000; + + if ( 0 != lastClick ) { + + if ( seconds > 10 ) { + // reset after 10 seconds delay + reset(); + } else { + var _bpm = 60 / seconds + bpm.push( _bpm ); + if ( bpm.length > 25 ) { + // keep only last 10 clicks + bpm.shift(); + } + display(bpm); + } + + } + lastClick = t; + + if ( bpm.length >= 5 ) { + for ( i = 0; i < dances.length; i++ ) { + var dance = dances[i]; + if ( ( (dance.minBpm-3) <= getBpm(bpm) ) && ( getBpm(bpm) <= (dance.maxBpm+3) ) && -1 == appendedDances.indexOf( dance.name ) ) { + var danceDiv = document.createElement("div"); + danceDiv.innerHTML = document.getElementById( dance.name ).innerHTML; + danceDiv.classList.add("dance-created"); + danceDiv.classList.add("col"); + + if ( -1 == appendedHeader.indexOf( dance.type ) ) { + var danceHeader = document.createElement("div"); + danceHeader.classList.add("col-12"); + danceHeader.classList.add("mb-2"); + danceHeader.classList.add("mt-4"); + danceHeader.innerHTML = "<h3> Mögliche " + dance.type[0].toUpperCase() + dance.type.substr(1) + "-Tänze</h3>"; + document.getElementById( "showDances-" + dance.type ).appendChild(danceHeader); + appendedHeader.push( dance.type ); + } + + appendedDances.push( dance.name ); + + document.getElementById( "showDances-" + dance.type ).appendChild(danceDiv); + } + } + } + + }); + document.getElementById("reset").addEventListener("click", function(e){ + reset(); + }); + }); + if ('serviceWorker' in navigator){ + navigator.serviceWorker.register('serviceworker.js').then(function(registration){ + console.log('ServiceWorker registration successful with scope: ', registration.scope); + }).catch(function(err){ + console.log('ServiceWorker registration failed: ', err); + }); + } else { + console.log('no service worker found. offline access is not granted.'); + } + +</script> +{% endblock %} |