Nicer formatting for sum scores in final. Better animation for 2nd player answers

web/css/main.css

@@ -129,10 +129,14 @@ body {
 	text-overflow: unset;
 }
 
+#resultFinal {
+	font-size: 2.5vw;
+}
+
 .questionAnswerContainer {
 	padding-top: 20px; 
 	padding-left: 20px;
-	width: calc(100% - 40px);
+	width: calc(100% - 20px);
 }
 
 @media (max-width: 1275px) { 
@@ -140,6 +144,10 @@ body {
 		font-size: 1.5em;
 	}
 
+	#resultFinal {
+		font-size: 1.5em;
+	}
+
 	#displayQuestions {
 		white-space: nowrap;
 		text-overflow: ellipsis;

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">
@@ -39,10 +38,11 @@
 		    		<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"></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"></div>
+					</div>
 				</div>
 				<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
@@ -91,7 +91,6 @@
 								<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>
@@ -100,6 +99,9 @@
 									<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>

web/js/main.js

@@ -168,6 +168,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();
@@ -234,6 +238,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');
@@ -377,7 +387,6 @@ function changeFrage() {
 }
 
 function loadQuestionToGui(index) {
-	console.log('oh noooo we are here');
 	$("#schweinchen3Img").hide();
     $("#schweinchen1Img").hide();
     $("#schweinchen2Img").hide();
@@ -390,6 +399,7 @@ function loadQuestionToGui(index) {
     $("#ResSum_player2").toggle(isFinalMode);
     if (isFinalMode){
 		$("#resultFinal").show();
+		$(".footer").hide();
 	} else {
     	$("#resultFinal").hide();
 	}
@@ -547,16 +557,9 @@ function recalcSum(s) {
 
 function getAnswerString(str) {
 	if (isFinalMode){
-		while(str.length < 21) {
+		while(str.length < 24) {
-		    if (player2){
-				str += " ";
-			} else {
 			str = " " + str;
 		}
-		}
-		if (player2){ 
-			str = str.replace(/ /g, "&nbsp;");
-		}
 	} else {
 		str += " ";
 		while(str.length < 47) {

web/js/websocket.js

@@ -159,6 +159,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") {