blob: e1e36216932eb48fee216a856134c7df37ef309b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?">
<link rel='stylesheet' type='text/css' href="/css/bootstrap.min.css">
<link rel='icon' href="/img/paw-144.png">
<title>Beats per Minute</title>
<style>
html {
width: 100%;
}
.main {
margin-top: 1rem;
}
</style>
</head>
<body class="container main text-center">
<span id="countBpm">
<div class="jumbotron">
<h1>Hier klicken um die BPMs zu zählen:</h1>
<h2><span id="showBpm">0</span> BPM</h2>
</div>
<button class="btn btn-primary">Click</button>
</span>
<button id="reset" class="btn btn-secondary">Reset</button>
<div class="row">
<?php
$dances = json_decode( file_get_contents("dances.json") );
$type = "";
?>
<?Php
foreach ( $dances as $dance ) {
if ( $dance->type != $type ) {
$type = $dance->type;
?>
<div class="col-12 mt-4 mb-2"> <h2> <?= ucfirst( $type ) ?> </h2> </div>
<?php
}
?>
<div class="col">
<h3> <?= $dance->name; ?> </h3>
<?= $dance->minBarspm ?> bis <?= $dance->maxBarspm ?> Takte pM
<br>
<?= $dance->minBpm ?> bis <?= $dance->maxBpm ?> BpM
<br>
<?= $dance->bar; ?> Takt
</div>
<?php
}
?>
</div>
<script>
var lastClick = 0;
var bpm = [];
var dances = <?php readfile("dances.json"); ?>;
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 = [];
document.getElementById("showBpm").innerHTML = 0;
}
function display(bpm) {
/* slice() copies by value, not by reference, so the median() doesn't mess with the array */
document.getElementById("showBpm").innerHTML = Math.round(median(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 > 15 ) {
// keep only last 10 clicks
bpm.shift();
}
display(bpm);
}
}
lastClick = t;
});
document.getElementById("reset").addEventListener("click", function(e){
reset();
})
});
</script>
</body>
|
