show dances.

2 files changed, 50 insertions, 9 deletions

diff --git a/dances.json b/dances.json
index bf701a0..52316f2 100644
--- a/dances.json
+++ b/dances.json
@@ -40,7 +40,7 @@
 	"bar": "4/4"
 }, {
 	"name": "Samba",
-	"type": "latin",
+	"type": "latein",
 	"minBpm": 100,
 	"maxBpm": 108,
 	"minBarspm": 50,
@@ -48,7 +48,7 @@
 	"bar": "2/4"
 }, {
 	"name": "Cha-Cha-Cha",
-	"type": "latin",
+	"type": "latein",
 	"minBpm": 120,
 	"maxBpm": 128,
 	"minBarspm": 30,
@@ -56,7 +56,7 @@
 	"bar": "4/4"
 }, {
 	"name": "Rumba",
-	"type": "latin",
+	"type": "latein",
 	"minBpm": 100,
 	"maxBpm": 108,
 	"minBarspm": 25,
@@ -64,7 +64,7 @@
 	"bar": "4/4"
 }, {
 	"name": "Paso Doble",
-	"type": "latin",
+	"type": "latein",
 	"minBpm": 120,
 	"maxBpm": 124,
 	"minBarspm": 60,
@@ -72,7 +72,7 @@
 	"bar": "2/4"
 }, {
 	"name": "Jive",
-	"type": "latin",
+	"type": "latein",
 	"minBpm": 168,
 	"maxBpm": 176,
 	"minBarspm": 42,
diff --git a/index.php b/index.php
index e1e3621..9276831 100644
--- a/index.php
+++ b/index.php
@@ -20,6 +20,11 @@
 		<div class="jumbotron">
 			<h1>Hier klicken um die BPMs zu zählen:</h1>
 			<h2><span id="showBpm">0</span> BPM</h2>
+			<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>
 		<button class="btn btn-primary">Click</button>
 	</span>
@@ -39,7 +44,7 @@
 <?php
 		} 
 ?>
-		<div class="col">
+		<div class="col" id="<?= $dance->name ?>">
 			<h3> <?= $dance->name; ?> </h3>
 			<?= $dance->minBarspm ?> bis <?= $dance->maxBarspm ?> Takte pM
 			<br>
@@ -56,6 +61,8 @@
 	var lastClick = 0;
 	var bpm = [];
 	var dances = <?php readfile("dances.json"); ?>;
+	var appendedDances = [];
+	var appendedHeader = [];
 	function median(values){
 		if ( values.length === 0 ) {
 			return 0;
@@ -76,11 +83,18 @@
 	function reset() {
 		lastClick = 0;
 		bpm = [];
+		appendedDances = [];
+		appendedHeader = [];
 		document.getElementById("showBpm").innerHTML = 0;
+		document.getElementById("showDances-standard").innerHTML = "";
+		document.getElementById("showDances-latein").innerHTML = "";
 	}
-	function display(bpm) {
+	function getBpm(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()));
+		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){
@@ -105,10 +119,37 @@
 
 			}
 			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();
-		})
+		});
 	});
 </script>
 </body>