fix toString if we get a blob

README.md

@@ -7,7 +7,6 @@ Familienduell Client / Server (NodeJs Javascript)
 ### -A- START DES SERVERS!
 
 ___Windows___
-
 1. Im Ordner "server" die Datei StartServer.bat doppelklicken.
    * Im Fenster das jetzt erscheint sollte: "SERVER IS UP AND RUNNING" stehen.
    * Falls die Firewall fragt, solltest du die Anfrage zulassen da sonst der Client nicht verbinden kann.
@@ -44,6 +43,9 @@ Q: Warum ist das Display zu Beginn schwarz, und wie kann ich das ändern?
 A: Das Bild ist schwarz damit man die Intromusik starten kann und die Leute (Zuschauer) nicht schon vorher wissen was auf sie zukommt.
    Dies kann (Im Controller) über die Checkbox "Blackscreen", im Bereich "Intro" kontrolliert werden.
 
+Q: Warum bekomm ich die Fehlermeldung "node.exe wurde falsch geschrieben oder konnte nicht gefunden werden"?<br>
+A: Die heruntergeladene zip Datei muss zunächst entpack werden. Rechtsklick auf die Datei -> Alles etpacken.
+
 Q: Wie funktioniert das mit 2 oder mehr Geräten?   
 A: Alle Geräte müssen im gleichen Netzwerk sein. Dann verwende einfach eine Externe IP des Servers (aus dem Serverfenster) zum verbinden von einem anderen Gerät aus.
 
@@ -69,4 +71,5 @@ Unterstützt durch: DiggerTigger, Anni & Naseile
 Danke auch an: 
  * [flbe](https://github.com/flbe) für den Python Server
  * [susgo](https://github.com/susgo) für den Finalmodus
- * [ConvalAtGit](https://github.com/ConvalAtGit) für viele Verbesserungen, Redesign und zusätzliche Word und Excel Dokumente
+ * [ConvalAtGit](https://github.com/ConvalAtGit) für viele Verbesserungen, Redesign und zusätzliche Word und Excel Dokumente
+ * [fruitcoder](https://github.com/fruitcoder/) Design verbesserungen

server/server.js

@@ -49,7 +49,7 @@ wss.on('connection', function(ws) {
 	console.log("~~~~~~~~ WELCOME TO SERVER ~~~~~~ s:"+subscribers.length);
     ws.on('message', function(message) {
     	console.log('msg: ' + message);
-    	var parts = message.split("###");
+    	var parts = message.toString().split("###");
     	if(parts[0] != "fileOp") {
 	    	broadcastMessage(getClientId(), message);
 	    } else {
@@ -89,7 +89,7 @@ wss.on('connection', function(ws) {
 });
 
 function broadcastMessage(clientId, msg) {
-	console.log("broadcast:"+msg.split("###")[0]+" length:"+subscribers.length);
+	console.log("broadcast:", msg.toString().split("###")[0], "length:", subscribers.length);
 	for(var i=0;i<subscribers.length;i++) {
 		if(subscribers[i] != null)
 			subscribers[i].send(msg);

web/css/main.css

@@ -81,8 +81,10 @@ body {
 
 .mainHeight {
 	position: relative;
-	width: 1020px;
+	width: 80vw;
-	height: 520px;
+	height: 40vw;
+	min-height: 520px;
+	min-width: 1020px;
 	margin: auto;
 	margin-bottom: 50px;
 	z-index: 5;
@@ -109,26 +111,46 @@ body {
 }
 
 #answers {
-	font-family: monospace; 
+	overflow: hidden;
-	padding-top: 58px; 
+	font-family: monospace;  
-	padding-left: 18px; 
+	font-size: 2.5vw;
-	font-size: 1.5em;
 	white-space: nowrap;
-	text-overflow: ellipsis;
 }
 
 .answer {
 	overflow: hidden;
 	white-space: nowrap;
-	text-overflow: ellipsis;
 }
 
 #displayQuestions {
-	position:absolute; 
-	top:10px; 
-	left:20px;
-	width: 970px;
 	overflow: hidden;
-	white-space: nowrap;
+	font-size: 2.5vw;
-	text-overflow: ellipsis;
+	white-space: unset;
-}
+	text-overflow: unset;
+}
+
+#resultFinal {
+	font-size: 2.5vw;
+}
+
+.questionAnswerContainer {
+	padding-top: 20px; 
+	padding-left: 20px;
+	width: calc(100% - 20px);
+}
+
+@media (max-width: 1275px) { 
+	#answers {
+		font-size: 1.5em;
+	}
+
+	#resultFinal {
+		font-size: 1.5em;
+	}
+
+	#displayQuestions {
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		font-size: 1.5em;
+	}
+}

web/index.html

@@ -7,7 +7,6 @@
 	<script type="text/javascript" src="./js/typed.js"></script>
 	<script type="text/javascript" src="./js/main.js"></script>
 	<script type="text/javascript" src="./js/components.js"></script>
-
 	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
 	<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css">
 	<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
@@ -16,19 +15,22 @@
 	</head>
 	<body style="padding:10px;">
 		<div id="allContent">
+			<!-- Select between display and controller -->
 			<div id="startDiv" style="width: 500px; margin: auto;">
 				<h1 style="font-size: 5em;">Familienduell</h1>
 				<button id="displayBtn" style="font-size: 2em; width:500px;"><i class="fa fa-desktop"></i> DISPLAY</button><br>
 				<button id="controllerBtn" style="font-size: 2em; width:500px; margin-top:2px;"><i class="fa fa-keyboard-o"></i> CONTROLLER</button>
-		    </div>
+			</div>
-		    <div class="bgColor textColor mainHeight" style="display:none" id="display">
+			<!-- container with all questions, answers, pigs, countdown, intro image, points-->
-		    	<img id="schweinchenImg" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen.jpg">
+		    <div class="topContainer bgColor textColor mainHeight" style="display:none" id="display">
-				<img id="schweinchen1Img" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen1.jpg">
+				<img id="schweinchen1Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none; overflow: hidden;" src="./img/schweinchen1.png">
-				<img id="schweinchen2Img" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen2.jpg">
+				<img id="schweinchen2Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none;" src="./img/schweinchen2.png">
-		    	<div id="displayQuestions" class="textColor">
+				<img id="schweinchen3Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none;" src="./img/schweinchen3.png">
-		    	</div>
+				<!-- question text is injected in `loadQuestionToGui(index:)` (server.js) -->
-		    	<div id="answers">
+				<div id="displayQuestions" class="textColor questionAnswerContainer">
-		    		
+				</div>
+				<!-- answer divs are injected in `loadQuestionToGui(index:)` (server.js) -->
+		    	<div id="answers" class="questionAnswerContainer">
 		    	</div>
 		    	<div id="result" style="position:absolute; bottom:65px; right:38px; font-size: 1.5em;">
 		    		<div style="float:left; padding-right: 20px;" class="header_summe">SUMME</div>
@@ -36,12 +38,13 @@
 		    		<div class="noIntro" style="width:50px; float: left; text-align:right;" id="SumRes">0</div>
 		    		<div style="float:left; font-size: 0.8em; position: relative; top: 12; color: red; cursor:pointer;" class="controller" id="pointsToTheRight"><i class="fa fa-chevron-right"></i></div>
 		    	</div>
-				<div id="resultFinal" style="position:absolute; bottom:95px; right:444px; font-size: 1.5em; display: none;">
+				<div id="resultFinal" style="position:absolute; bottom:95px; width:100%; font-size: 1.5em; display: none;">
-					<div style="float:left" class="header_summe">SUMME</div>
+					<div style="display: flex;justify-content: center;">
-					<div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player1"></div>
+						<div class="noIntro" style="width:6%; float: left; text-align:center;" id="SumRes_player1">0</div>
-					<div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player2"></div>
+						<div class="noIntro" style="width:6%; float: right; text-align:center;" id="SumRes_player2">0</div>
+					</div>
 				</div>
-				<div id="timer" style="position:absolute; top: 65px; left: 50%; width: 400px; margin-left: -200px; text-align: center; padding: 0px 30px 10px 30px; font-size: 200px; display: none;">
+				<div id="timer" style="position:absolute; top: 50%; left: 50%; width: 400px; margin-left: -200px; margin-top: -143px; text-align: center; padding: 0px 30px 10px 30px; font-size: 200px; display: none;">
 					20
 				</div>
 		    	<div class="noIntro footer" id="footer1" style="position:absolute; bottom:0px; width:100%; height:50px; font-size: 2em;">
@@ -52,29 +55,28 @@
 		    	<!--<div class="noIntro footer" id="footer2" style="position:absolute; bottom:108px; width:100%; height:5px;"></div>-->
 		    	<div class="xmarker noIntro" style="position: absolute; bottom: -64px; left: 34px" ></div>
 		    	<div class="xmarker noIntro" style="position: absolute; bottom: -64px; right: 34px" ></div>
-		    	<img style="position: absolute; top: 0px;" class="intro" src="./img/logo.png">
+		    	<img style="position: absolute; top: 0px; width: 100%; height: 100%;" class="intro" src="./img/logo.png">
-		    </div>
+			</div>
+			<!-- controller container -->
 			<div style="display:none;" class="controller">
 				<div id="buttonsDownUnder">
 					<table border="1">
 						<tr>
-							<td><b>Global</b></td>
+							<!-- <td><b>Global</b></td>
-							<td><b>Server</b></td>
+							<td><b>Server</b></td> -->
 							<td><b>Intro</b></td>
 							<td><b>Schweinchen</b></td>
 							<td><b>Optionen</b></td>
 							<td><b><label for="modeFinal">Finalmodus</b> </label><input id="modeFinal" type="checkbox" style="vertical-align: text-bottom" /> <button style="float:right;" id="finalmodusInfoBtn">Info</button></td>
+							<td><b>Spielende</b></td>
 						</tr>
 						<tr>
-							<td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td>
+							<!-- <td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td>
-							<td><img id="serverSoundImg" style="cursor:pointer;" width="35px;" src="./img/noSound.png"></td>
+							<td><img id="serverSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td> -->
 							<td>
-								<button id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br>
+								<button style=" display: block" id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br>
-								<button id="stopIntroBtn"><i class="fa fa-stop"></i> Intro!</button><br>
-								<img width="20px;" src="./img/noSound.png"> 
-								<input id="introVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10"> 
-								<img width="20px;" src="./img/soundOn.png"><br>
 								<label for="blackScreenCheck">Blackscreen:</label> <input id="blackScreenCheck" checked="checked" type="checkbox" style="vertical-align: text-bottom" />
+								<button  style="margin-top: 12px; display: block" id="stopIntroBtn"><i class="fa fa-stop"></i> Intro!</button><br>
 							</td>
 							<td>
 								Multiplikator: <input id="pointMultiplicator" type="number" name="" value="1" style="width: 50px;"><br>
@@ -82,12 +84,8 @@
 								<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 (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"> 
-								<img width="20px;" src="./img/soundOn.png">
 							</td>
 							<td>
-								<button id="startAnswerFailBtn"><i class="fa fa-play"></i> Antwort nicht vorhanden</button><br>
 								<button id="clearAllFailsBtn">Clear all Fails!</button><br><br>
 								<table>
 									<tr>
@@ -96,13 +94,16 @@
 									<tr>
 										<td>Punkte Rechts: </td> <td><input style="width:50px;" id="mPunkteRight" type="number" value="0"></td><td><button id="newRightPoints">ok</button></td>
 									</tr>
+									<tr>
+										<td>Punkte Summe: </td> <td><input style="width:50px;" id="mPunkteSum" type="number" value="0"></td><td><button id="newSumRes">ok</button></td>
+									</tr>
 								</table>
 							</td>
 							<td>
-								<button id="startAnswerDuplicateBtn"><i class="fa fa-play"></i> Antwort doppelt</button><br>
+								<!-- <button id="startAnswerDuplicateBtn"><i class="fa fa-play"></i> Antwort doppelt</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">
+								<img width="20px;" src="./img/soundOn.png"> -->
 								<div>
 									<label for="spieler1">Spieler 1:</label> <input class="playerTgl finalElement" disabled="true" checked="true" type="radio" value="1" name="fmod" id="spieler1" style="vertical-align: text-bottom" /> <button id="showTimerBtn" disabled="true" class="finalElement">Timer anzeigen</button><br>
 									<label for="spieler2">Spieler 2:</label> <input class="playerTgl finalElement" disabled="true" type="radio" value="2" name="fmod" id="spieler2" style="vertical-align: text-bottom" /> <button id="startTimerBtn" disabled="true" class="finalElement"><i class="fa fa-play"></i> Timer starten</button><br>
@@ -113,9 +114,12 @@
 										<option value="3"> 4</option>
 										<option value="4"> 5</option>
 									</select> <button id="stopTimerBtn" disabled="true" class="finalElement"><i class="fa fa-stop"></i> Timer stoppen</button><br>
-									Alternative Antwort:<br> <input class="finalElement" id="alternateAnswer" maxlength="20" disabled="true" type="text" name=""><button class="finalElement" id="alternateAnswerBtn" disabled="true">setzen</button><br><input type="number" class="finalElement" id="altPointsFinal" disabled="true" placeholder="Alt. Punkte" value=""><button class="finalElement" id="alternateAnswerPBtn" disabled="true">setzen</button>
+									Alternative Antwort:<br> <input class="finalElement" id="alternateAnswer" maxlength="20" disabled="true" type="text" name=""><button class="finalElement" id="alternateAnswerBtn" disabled="true">setzen</button><br><input type="number" class="finalElement" id="altPointsFinal" disabled="true" placeholder="Alt. Punkte" value="0"><button class="finalElement" id="alternateAnswerPBtn" disabled="true">setzen</button>
 								</div>
 							</td>
+							<td>
+								<button id="showFinalScores">Show Final Scores</button><br><br>
+							</td>
 						</tr>
 					</table>
 					<table>
@@ -150,7 +154,7 @@
 					<!-- <i id="closeFragenEditorIcon" style="position: fixed; right: 30px; top: 10px; font-size: 1.2em; cursor:pointer;" class="fa fa-caret-square-o-down"></i> -->
 				</div>
 			</div>
-			<div id="connected" style="position:absolute; left:0px; top:0px; padding:5px; display:none;"></div>
+			<div id="connected" style="position:fixed; left:0px; top:0px; padding:5px; display:none;"></div>
 		</div>
 		<div id="printScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:white;">
 			<div id="printDiv"></div>

web/js/main.js

@@ -5,6 +5,9 @@ var answerFail = null;
 var schweinchenVolume = 1;
 var answerFailVolume = 1;
 var schweinchen = null;
+// when the points for a round are assigned, we still want to show the other answers but no points should be calculated by that time
+// reset when changing a question
+var currentRoundPointsResolved = false;
 
 $(document).ready(function() {
 	$( "#fragenListe" ).sortable();
@@ -105,12 +108,15 @@ $(document).ready(function() {
 			var questionSelected = $("#finalFragenSelect").val();
 			questionSelected--;
 			if (questionSelected < 0) {
-				$("#finalFragenSelect").val(4);
+				// $("#finalFragenSelect").val(0);
 			} else {
 				$("#finalFragenSelect").val(questionSelected)
 			}
 		} 
-		setFrageIndex(index);
+
+		if (index > 0) {
+			setFrageIndex(index);
+		}
 	});
 
 	$("#downQicon").click(function() {
@@ -120,12 +126,15 @@ $(document).ready(function() {
 			var questionSelected = $("#finalFragenSelect").val();
 			questionSelected++;
 			if (questionSelected > 4) {
-				$("#finalFragenSelect").val(0);
+				// $("#finalFragenSelect").val(0);
 			} else {
 				$("#finalFragenSelect").val(questionSelected)
 			}
 		} 
-		setFrageIndex(index);
+
+		if (index < 8) {
+			setFrageIndex(index);	
+		}
 	});
 
 	$("#questionsSelect").on("change", function() {
@@ -168,6 +177,10 @@ $(document).ready(function() {
 		wsSend("setRightPoints", $("#mPunkteRight").val());
 	});
 
+	$("#newSumRes").click(function() {
+		wsSend("setSumRes", $("#mPunkteSum").val());
+	});
+
 	$("#alternateAnswerBtn").click(function(){
 		var is = $("#finalFragenSelect").val();
 		var answer = $("#alternateAnswer").val();
@@ -191,7 +204,24 @@ function setFinalMode(status){
 	var index = $("#questionsSelect>option:selected").index();
 	index = index > 0 ? index : 0;
 	$("#answers").empty();
+
+	// automatically select first of the final questions (index 3)
+	if (isFinalMode < 3) {
+		index = 3;
+	}
+
 	loadQuestionToGui(index);
+
+	// manually select option once final mode starts
+	if (isFinalMode) {
+		if (index >= 0 && index < $("#questionsSelect").find("option").length) {
+			$("#questionsSelect").find("option").removeAttr("selected");
+			$($("#questionsSelect").find("option")[index]).prop("selected", "true");
+		}
+		if ($("#questionsSelect>option:selected").index() == -1 && $("#questionsSelect").find("option")[0]) {
+			$($("#questionsSelect").find("option")[0]).prop("selected", "true");
+		}
+	}
 }
 
 function setPlayer2(value){
@@ -234,6 +264,12 @@ function setRightPoints(newPoints) {
 	}
 }
 
+function setSumRes(newSumRes) {
+	$('#SumRes').text(newSumRes);
+	$("#mPunkteSum").val(newSumRes);
+	recalcSum(0);
+}
+
 function startAnswerFail() {
 	if (sounds && (display || serverSound)) {
 		answerFail = new Audio('./sounds/failOriginal.ogg');
@@ -300,15 +336,17 @@ function stopTimer() {
 
 function startSchweinchen() {
 	if (runde == 2){
-        $("#schweinchen2Img").fadeIn();
+        $("#schweinchen2Img").show("blind", { direction: "left" }, 1500);
 	} else if (runde == 3){
-        $("#schweinchenImg").fadeIn();
+        $("#schweinchen3Img").show("blind", { direction: "left" }, 1500);
 	} else {
-        $("#schweinchen1Img").fadeIn();
+		$("#schweinchen1Img").show("blind", { direction: "left" }, 1500);
 	}
 
 	$("#answers").hide();
 	$("#displayQuestions").hide();
+	$("#result").hide();
+	$(".footer").hide();
 	
 	if(sounds && (display || serverSound)) {
 		schweinchen = new Audio('./sounds/schweinchen.ogg');
@@ -322,11 +360,11 @@ function stopSchweinchen() {
 	$("#questionsSelect").val(index+1);
 	changeFrage();
 
-	$("#schweinchenImg").hide();
+	$("#schweinchen3Img").stop(true, true).hide();
-    $("#schweinchen1Img").hide();
+    $("#schweinchen1Img").stop(true, true).hide();
-    $("#schweinchen2Img").hide();
+    $("#schweinchen2Img").stop(true, true).hide();
-	$("#answers").show();
+	$("#result").show();
-	$("#displayQuestions").show();
+	$(".footer").show("blind", { direction: "left" }, 1500);
 	if(schweinchen) {
 		schweinchen.pause();
 	}
@@ -372,10 +410,11 @@ function changeFrage() {
 	var index = $("#questionsSelect>option:selected").index();
 	wsSend("loadQuestion", index);
 	wsSend("clearAllFailsBtn", "");
+	wsSend("resetPointsResolvedFlag", "false");
 }
 
 function loadQuestionToGui(index) {
-	$("#schweinchenImg").hide();
+	$("#schweinchen3Img").hide();
     $("#schweinchen1Img").hide();
     $("#schweinchen2Img").hide();
 	$("#answers").empty();
@@ -386,7 +425,8 @@ function loadQuestionToGui(index) {
     $("#ResSum_player1").toggle(isFinalMode);
     $("#ResSum_player2").toggle(isFinalMode);
     if (isFinalMode){
-        $("#resultFinal").show();
+		$("#resultFinal").show();
+		$(".footer").hide();
 	} else {
     	$("#resultFinal").hide();
 	}
@@ -394,10 +434,10 @@ function loadQuestionToGui(index) {
 
 	if(index > -1) {
         $("#displayQuestions").html(fragen[index]["frage"]);
-		if (isFinalMode){
+		if (isFinalMode && display){
             $("#displayQuestions").hide();
 		} else {
-            $("#displayQuestions").show();
+			$("#displayQuestions").show("blind", { direction: "left" }, 1500);
 		}
 		var anzahlFragen = fragen[index]["antworten"].length;
 		if (isFinalMode) {
@@ -406,31 +446,26 @@ function loadQuestionToGui(index) {
 		for (var i = 0; i < anzahlFragen; i++) {
 			if(isFinalMode || fragen[index]["antworten"][i]["antwort"] != "") {
                 if (isFinalMode) {
-				    var oneLine = $('<div style="height:55px">' +
+				    var oneLine = $('<div>' +
-                        '<div style="width: 400px; float: left; text-align: right" class="answer"></div>' +
+                        '<div style="width: 44%; float: left; text-align: center" class="answer"></div>' +
-                        '<div style="width: 40px; float: left; margin-left: 18px; margin-right: 20px; text-align: right" class="points"></div>' +
+                        '<div style="width: 6%; float: left; text-align: center" class="points"></div>' +
-                        '<div style="width: 40px; float: left; margin-left: 20px; margin-right: 22px; text-align: right" class="points_player2"></div>' +
+                        '<div style="width: 6%; float: left; text-align: center" class="points_player2"></div>' +
-                        '<div style="width: 400px; float: left;" class="answer_player2"></div>' +
+                        '<div style="width: 44%; float: left; text-align: center" class="answer_player2"></div>' +
                         '</div>');
                 } else {
-                    var oneLine = $('<div style="height:55px">' +
+					var oneLine = $('<div>' +
-                        '<div style="margin-left: 18px; width: 50px; float: left;" class="nr">' + (i + 1) + '.</div>' +
+                        '<div style="width: 5%; text-align: center; float: left;" class="nr">' + (i + 1) + '.</div>' +
-                        '<div style="width: 824px; float: left" class="answer"></div>' +
+                        '<div style="width: 89%; text-align: center; float: left" class="answer"></div>' +
-                        '<div style="width: 52px; float: left; text-align: right" class="points"></div>' +
+                        '<div style="width: 6%; float: left; text-align: right" class="points"></div>' +
                         '</div>');
                 }
 	    		if(display && !player2) {
-                    if (isFinalMode) {
+					oneLine.find(".answer").text("..............................................................................................................");
-                        // oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _");
+					oneLine.find(".points").text("--");
-                        oneLine.find(".answer").text(".....................");
+					
-                    } else {
-                        // oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _");
-                        oneLine.find(".answer").text("...............................................");
-					}
-	    			oneLine.find(".points").text("--");
 	    			if (isFinalMode){
 	    				oneLine.find(".points_player2").text("--");
-	    				oneLine.find(".answer_player2").text(".....................");
+	    				oneLine.find(".answer_player2").text("..............................................................................................................");
 	    				// oneLine.find(".answer_player2").text("_ _ _ _ _ _ _ _ _ _ _");
 	    			}
 	    		} else if (!display) {
@@ -459,7 +494,8 @@ function loadQuestionToGui(index) {
 		}
 	}
 	if (!isFinalMode) {
-        $("#SumRes").text("0");
+		$("#SumRes").text("0");
+		$("#answers").show("blind", { direction: "left" }, 1500);
     }
     if(!display)
     	$("#resultFinal").hide();
@@ -546,17 +582,30 @@ function recalcSum(s) {
     }
 }
 
+// Add the scores from the final rounds to the current scores from previous rounds
+function showFinalScores() {
+	$("#answers").hide();
+	$("#displayQuestions").hide();
+	$("#result").hide();
+	$("#resultFinal").hide();
+	$("#pointsCenter").hide();
+	$(".pointsLeft").show();
+	$(".pointsRight").show();
+
+	const leftFinalScore = parseFloat($("#SumRes_player1").text());
+	const rightFinalScore = parseFloat($("#SumRes_player2").text());
+
+	$(".pointsLeft").text(parseFloat($(".pointsLeft").text()) + leftFinalScore);
+	$(".pointsRight").text(parseFloat($(".pointsRight").text()) + rightFinalScore);
+
+	// show final scores with blinds
+	$(".footer").show("blind", { direction: "left" }, 1500);
+}
+
 function getAnswerString(str) {
 	if (isFinalMode){
-		while(str.length < 21) {
+		while(str.length < 24) {
-		    if (player2){
+			str = " " + str;
-				str += " ";
-			} else {
-				str = " " + str;
-			}
-		}
-		if (player2){ 
-			str = str.replace(/ /g, "&nbsp;");
 		}
 	} else {
 		str += " ";

web/js/websocket.js

@@ -8,7 +8,7 @@ var sounds = true;
 var ws;
 var display = true;
 var audio = null;
-var serverSound = false;
+var serverSound = true;
 var isFinalMode = false;
 var player2 = false;
 var runde = 1;
@@ -40,12 +40,23 @@ $(document).ready(function() {
 		$("#display").show();
 		$(".controller").show();
 		display = false;
+
+		// nice css manipulation 🤢#hack
+		$(".mainHeight").css("width", 1020);
+		$(".mainHeight").css("height", 520);
+		$(".mainHeight").css("padding-top", "");
+		$("#answers").css("font-size", "1.5em");
+		$("#displayQuestions").css("font-size", "1.5em");
 	});
 
 	$("#clearAllFailsBtn").click(function() {
 		wsSend("clearAllFailsBtn", "");
 	});
 
+	$("#showFinalScores").click(function() {
+		wsSend("showFinalScores", "");
+	});
+
 	$("#toggleSoundImg").click(function() {
 		wsSend("toggleSound", "");
 	});
@@ -93,9 +104,14 @@ var connectWs = function() {
 		return null;
 	}
 
-	ws.onmessage = function (event) {
+	ws.onmessage = async function (event) {
-		console.log("msg: "+event.data)
+		console.log("msg: "+event.data.toString())
-		messageParts_a = event.data.split("###");
+		let tempSt = event.data.toString();
+		if(typeof(tempSt) != "string") {
+			tempSt = await new Response(tempSt).text()
+		}
+		
+		messageParts_a = tempSt.split("###");
 		var key = messageParts_a[0];
 		var value = messageParts_a[1];
 		if(key =="setFail") {
@@ -122,6 +138,8 @@ var connectWs = function() {
 				$("#toggleSoundImg").attr("src", "./img/soundOn.png");
 				sounds = true;
 			}
+		} else if(key == "showFinalScores") {
+			showFinalScores()
 		} else if(key == "file") {
 			if(value == "fragen.txt") {
 				try {
@@ -152,6 +170,8 @@ var connectWs = function() {
 			setLeftPoints(value);
 		} else if(key == "setRightPoints") {
 			setRightPoints(value);
+		} else if(key == "setSumRes") {
+			setSumRes(value);	
 		} else if(key == "startAnswerFail") {
 			startAnswerFail();
 		} else if(key == "startAnswerDuplicate") {