From 874367e398555b4a79e2ae32133bac9905fd2341 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20Hu=CC=88llmandel?= <alx91@me.com>
Date: Sun, 25 Aug 2019 03:10:02 +0200
Subject: [PATCH] Nicer formatting for sum scores in final. Better animation
 for 2nd player answers

---
 web/css/main.css    | 10 +++++++++-
 web/index.html      | 14 ++++++++------
 web/js/main.js      | 25 ++++++++++++++-----------
 web/js/websocket.js |  2 ++
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/web/css/main.css b/web/css/main.css
index 8b08583..77a6c67 100644
--- a/web/css/main.css
+++ b/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;
diff --git a/web/index.html b/web/index.html
index 81018e4..1e4c2df 100644
--- a/web/index.html
+++ b/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 style="float:left" class="header_summe">SUMME</div>
-					<div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player1"></div>
-					<div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player2"></div>
+				<div id="resultFinal" style="position:absolute; bottom:95px; width:100%; font-size: 1.5em; display: none;">
+					<div style="display: flex;justify-content: center;">
+						<div class="noIntro" style="width:6%; float: left; text-align:center;" id="SumRes_player1"></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>
diff --git a/web/js/main.js b/web/js/main.js
index 6e31737..d431d57 100644
--- a/web/js/main.js
+++ b/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();
@@ -389,7 +398,8 @@ function loadQuestionToGui(index) {
     $("#ResSum_player1").toggle(isFinalMode);
     $("#ResSum_player2").toggle(isFinalMode);
     if (isFinalMode){
-        $("#resultFinal").show();
+		$("#resultFinal").show();
+		$(".footer").hide();
 	} else {
     	$("#resultFinal").hide();
 	}
@@ -547,15 +557,8 @@ function recalcSum(s) {
 
 function getAnswerString(str) {
 	if (isFinalMode){
-		while(str.length < 21) {
-		    if (player2){
-				str += " ";
-			} else {
-				str = " " + str;
-			}
-		}
-		if (player2){ 
-			str = str.replace(/ /g, "&nbsp;");
+		while(str.length < 24) {
+			str = " " + str;
 		}
 	} else {
 		str += " ";
diff --git a/web/js/websocket.js b/web/js/websocket.js
index cf4e56b..4e140a2 100644
--- a/web/js/websocket.js
+++ b/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") {