add schweinchen

web/duell.html

@@ -23,7 +23,7 @@
 			<hr id="DHR" style="margin:0px; width:100%; position:relative; top:3px; border-top:1px solid black;">
 	    </div>
 	    <div class="bgColor textColor" style="display:none; position:relative; width: 1000px; height:500px; margin: auto;" id="display">
-
+	    	<img id="schweinchenImg" style="margin-left: 200px; margin-top: 70px;" src="./img/schweinchen.jpg">
 	    	<div id="answers" style="font-family: monospace; padding-top: 10px; padding-left: 18px; font-size: 1.5em;">
 	    		
 	    	</div>
@@ -66,6 +66,7 @@
 						<td><b>Server</b></td>
 						<td><b>Intro</b></td>
 						<td><b>Jeopardy</b></td>
+						<td><b>Schweinchen</b></td>
 						<td><b>Clear Fails</b></td>
 						<td><b>Punkte</b></td>
 					</tr>
@@ -87,6 +88,13 @@
 							<input id="jeopardyVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10"> 
 							<img width="20px;" src="./img/soundOn.png">
 						</td>
+						<td>
+							<button id="startScheinchenbtn"><i class="fa fa-play"></i> Schweinchen</button><br>
+							<button id="stopScheinchenbtn"><i class="fa fa-stop"></i> Schweinchen</button><br>
+							<img width="20px;" src="./img/noSound.png"> 
+							<input id="schweinchenVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10"> 
+							<img width="20px;" src="./img/soundOn.png">
+						</td>
 						<td>
 							<button id="clearAllFailsBtn">Clear all Fails!</button>
 						</td>

web/js/main.js

@@ -1,6 +1,9 @@
 var fragen = null;
 var intro = null;
 var jeopardy = null;
+var schweinchenVolume = 1;
+var jeopardyVolume = 1;
+var schweinchen = null;
 
 $(document).ready(function() {
 
@@ -38,6 +41,21 @@ $(document).ready(function() {
 		wsSend("setJeopardyVolume", v);	
 	});
 
+     $("#startScheinchenbtn").click(function() {
+    	$("#startScheinchenbtn").attr("disabled", "disabled");
+    	wsSend("startSchweinchen", "");
+    });
+
+     $("#stopScheinchenbtn").click(function() {
+     	$("#startScheinchenbtn").removeAttr("disabled");
+     	wsSend("stopSchweinchen", "");
+    });
+
+     $("#schweinchenVolume").on("input", function() {
+		var v = parseFloat($(this).val()) / 10;
+		wsSend("setSchweinchenVolume", v);	
+	});
+
 	$("#addNewQuestionBtn").click(function() {
 		addNewQuestion(null);
 	});
@@ -136,6 +154,7 @@ function setRightPoints(newPoints) {
 function startJeopardy() {
 	if(sounds && (display || serverSound)) {
 		jeopardy = new Audio('./sounds/jeopardy.mp3');
+		jeopardy.volume = jeopardyVolume;
 		jeopardy.play();
 	}
 }
@@ -146,6 +165,28 @@ function stopJeopardy() {
 	}
 }
 
+function startSchweinchen() {
+	$("#schweinchenImg").show();
+	$("#answers").hide();
+	if(sounds && (display || serverSound)) {
+		schweinchen = new Audio('./sounds/schweinchen.wav');
+		schweinchen.volume = schweinchenVolume;
+		schweinchen.play();
+	}
+}
+
+function stopSchweinchen() {
+	var index = $("#questionsSelcet>option:selected").index();
+	$("#questionsSelcet").val(index+1);
+	changeFrage();
+	
+	$("#schweinchenImg").hide();
+	$("#answers").show();
+	if(schweinchen) {
+		schweinchen.pause();
+	}
+}
+
 function hideIntro() {
 	$(".noIntro").show();
 	$(".intro").hide();
@@ -166,7 +207,7 @@ function showIntro() {
 function fillFragenSelect() {
 	$("#questionsSelcet").empty();
 	for(var i=0;i<fragen.length;i++) {
-		$("#questionsSelcet").append('<option>'+fragen[i]["kuerzel"]+'</option>');
+		$("#questionsSelcet").append('<option value="'+i+'">'+fragen[i]["kuerzel"]+'</option>');
 	}
 }
 
@@ -188,6 +229,7 @@ function changeFrage() {
 }
 
 function loadQuestionToGui(index) {
+	$("#schweinchenImg").hide();
 	$("#answers").empty();
 	if(index > -1) {
 		$("#frageDiv").text("Frage: "+fragen[index]["frage"]);

web/js/websocket.js

@@ -133,15 +133,22 @@ var connectWs = function() {
 		} else if(key == "stopJeopardy") {
 			stopJeopardy();
 		} else if(key == "setJeopardyVolume") {
+			jeopardyVolume = value;
 			if(jeopardy != null)
-				jeopardy.volume = value;
+				jeopardy.volume = jeopardyVolume;
+		} else if(key == "startSchweinchen") {
+			startSchweinchen();
+		} else if(key == "stopSchweinchen") {
+			stopSchweinchen();
+		} else if(key == "setSchweinchenVolume") {
+			schweinchenVolume = value;
+			if(schweinchen != null)
+				schweinchen.volume = schweinchenVolume;
 		} else if(key == "toggleBlackScreen") {
 			if(display) {
 				$("#blackScreen").toggle();
 			}
 		}
-
-		
 	}
 }