refactor and pimp controller layout

web/duell.html

@@ -70,10 +70,10 @@
 						<td><b>Global</b></td>
 						<td><b>Server</b></td>
 						<td><b>Intro</b></td>
-						<td><b>Final mode: answer fail</b></td>
 						<td><b>Schweinchen</b></td>
 						<td><b>Clear Fails</b></td>
 						<td><b>Punkte</b></td>
+						<td><b>Finalmodus</b> <input id="modeFinal" type="checkbox"></td>
 					</tr>
 					<tr>
 						<td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td>
@@ -86,17 +86,10 @@
 							<img width="20px;" src="./img/soundOn.png"><br>
 							Blackscreen: <input id="blackScreenCheck" checked="checked" type="checkbox">
 						</td>
-						<td>
-							<button id="startJeopardybtn"><i class="fa fa-play"></i>Final mode: answer fail</button><br>
-							<button id="stopJeopardybtn"><i class="fa fa-stop"></i> Final mode: answer fail</button><br>
-							<img width="20px;" src="./img/noSound.png"> 
-							<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" value="1"><i class="fa fa-play"></i> Schweinchen</button><br>
-							<button id="startScheinchenbtn2" value="2"><i class="fa fa-play"></i> Schweinchen (doppelte Punktzahl)</button><br>
+							<button id="startScheinchenbtn2" value="2"><i class="fa fa-play"></i> Schweinchen (2x)</button><br>
-							<button id="startScheinchenbtn3" value="3"><i class="fa fa-play"></i> Schweinchen (dreifache Punktzahl)</button><br>
+							<button id="startScheinchenbtn3" value="3"><i class="fa fa-play"></i> Schweinchen (3x)</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"> 
@@ -115,17 +108,19 @@
 								</tr>
 							</table>
 						</td>
+						<td>
+							<button id="startAnswerFailBtn"><i class="fa fa-play"></i> Antwort falsch</button><br>
+							<img width="20px;" src="./img/noSound.png"> 
+							<input id="answerFailVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10"> 
+							<img width="20px;" src="./img/soundOn.png">
+							<div>
+								<lable>Spieler 1: <input class="playerTgl finalElement" disabled="true" checked="true" type="radio" value="1" name="fmod"></lable><br>
+								<lable>Spieler 2: <input class="playerTgl finalElement" disabled="true" type="radio" value="2" name="fmod"></lable>
+							</div>
+						</td>
 					</tr>
 				</table>
 				<br>
-				<div>
-					Finalmodus: <input id="modeFinal" type="checkbox">
-				</div>
-				<br>
-				<div>
-					Finalmodus Spieler 2 spielt: <input id="player2" type="checkbox">
-				</div>
-				<br>
 				<table>
 					<tr>
 						<td><b>Fragenliste:</b><br>

web/js/main.js

@@ -1,9 +1,9 @@
 var fragen = null;
 var intro = null;
 var introVolume = 1;
-var jeopardy = null;
+var answerFail = null;
 var schweinchenVolume = 1;
-var jeopardyVolume = 1;
+var answerFailVolume = 1;
 var schweinchen = null;
 
 $(document).ready(function() {
@@ -28,24 +28,18 @@ $(document).ready(function() {
         wsSend("toggleFinalMode", status);
     });
 
-    $("#player2").change(function() {
+    $(".playerTgl").change(function() {
-        var player = $('#player2').is(':checked');
+        var player = $(this).val() == 1 ? false : true;
         wsSend("setPlayer2ForFinalMode", player);
     });
 
-    $("#startJeopardybtn").click(function() {
+    $("#startAnswerFailBtn").click(function() {
-    	$("#startJeopardybtn").attr("disabled", "disabled");
+    	wsSend("startAnswerFail", "");
-    	wsSend("startJeopardy", "");
     });
 
-     $("#stopJeopardybtn").click(function() {
+     $("#answerFailVolume").on("input", function() {
-     	$("#startJeopardybtn").removeAttr("disabled");
-     	wsSend("stopJeopardy", "");
-    });
-
-     $("#jeopardyVolume").on("input", function() {
 		var v = parseFloat($(this).val()) / 10;
-		wsSend("setJeopardyVolume", v);	
+		wsSend("setAnswerFailVolume", v);	
 	});
 
     $("button[id^='startScheinchenbtn']").each(function(){
@@ -142,6 +136,9 @@ $(document).ready(function() {
 
 function setFinalMode(status){
 	isFinalMode = status == "true" ? true : false;
+	$(".finalElement").attr("disabled", !isFinalMode);
+	var index = $("#questionsSelcet>option:selected").index();
+	loadQuestionToGui(index);
 }
 
 function setPlayer2(value){
@@ -179,17 +176,11 @@ function setRightPoints(newPoints) {
 	}
 }
 
-function startJeopardy() {
+function startAnswerFail() {
 	if(sounds && (display || serverSound)) {
-		jeopardy = new Audio('./sounds/failFinal.mp3');
+		answerFail = new Audio('./sounds/failFinal.mp3');
-		jeopardy.volume = jeopardyVolume;
+		answerFail.volume = answerFailVolume;
-		jeopardy.play();
+		answerFail.play();
-	}
-}
-
-function stopJeopardy() {
-	if(jeopardy) {
-		jeopardy.pause();
 	}
 }
 

web/js/websocket.js

@@ -144,14 +144,12 @@ var connectWs = function() {
 			setLeftPoints(value);
 		} else if(key == "setRightPoints") {
 			setRightPoints(value);
-		} else if(key == "startJeopardy") {
+		} else if(key == "startAnswerFail") {
-			startJeopardy();
+			startAnswerFail();
-		} else if(key == "stopJeopardy") {
+		} else if(key == "setAnswerFailVolume") {
-			stopJeopardy();
+			answerFailVolume = value;
-		} else if(key == "setJeopardyVolume") {
+			if(answerFail != null)
-			jeopardyVolume = value;
+				answerFail.volume = answerFailVolume;
-			if(jeopardy != null)
-				jeopardy.volume = jeopardyVolume;
 		} else if(key == "startSchweinchen") {
 			startSchweinchen();
 		} else if(key == "stopSchweinchen") {