Fixed Scoreboard

clashingcomrades/static/main.css

@@ -2,18 +2,26 @@
     font-family: 'Lato';
     src: url('../static/resources/fonts/lato-light.woff');
 }
+
 html {
-	background-image: url("../static/resources/images/bg.png")
+    background-image: url("../static/resources/images/bg.png");
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
 }
+
 td {
     min-width: 100px;
     height: 100px;
     background-color: #2C3134;
     transition: background-color 2s ease;
 }
+
 .player {
-	transition: background-color 0s ease
+    transition: background-color 0s ease;
 }
+
 .main {
     margin-left:40%;
     margin-right:40%;
@@ -24,11 +32,13 @@ td {
     box-shadow: 5px 5px 10px #229ad2;
     border-radius: 25px;
 }
+
 .form {
     font-family: Lato;
     font-size: 20px;
     margin-left:5%;
 }
+
 .scoreboard {
     font-family: Lato;
     font-size: 20px;
@@ -40,5 +50,14 @@ td {
     z-index: 1;
     background-color: #000;
     opacity: 0.7;
-
+}
+
+#redscore {
+    color: #E62E2E;
+    background-color: #E62E2E;
+}
+
+#bluescore {
+    color: #4343D8;
+    background-color: #4343D8;
 }

clashingcomrades/static/main.js

@@ -39,11 +39,7 @@ document.getElementsByClassName('play')[0].onclick = function startGame() {
     var login = document.getElementById("login");
     login.parentNode.removeChild(login);
 
-    var scoreboard = document.getElementsByTagName('body')[0].appendChild(document.createElement("DIV"));
+    scoreboardCreate();
-    scoreboard.className = 'scoreboard';
-    scoreboard.appendChild(document.createTextNode(""));
-    scoreboard.appendChild(document.createElement("BR"));
-    scoreboard.appendChild(document.createTextNode(""));
     updateScore();
     tableCreate();
     createPlayer();
@@ -85,7 +81,27 @@ function serverTransfer(coordinate,team,turn,username) {
     );
 }
 
- // Creation of Table 
+// Creation of Scoreboard
+
+function scoreboardCreate() {
+    var scoreboard = document.getElementsByTagName('body')[0].appendChild(document.createElement("DIV"));
+    scoreboard.className = 'scoreboard';
+    var redScore = scoreboard.appendChild(document.createElement("SPAN"));
+    redScore.id = "redscore";
+    var redNumber = scoreboard.appendChild(document.createElement("SPAN"));
+    redNumber.id = "rednumber";
+    redScore.appendChild(document.createTextNode("___"));
+    redNumber.appendChild(document.createTextNode(""));
+    scoreboard.appendChild(document.createElement("BR"));
+    var blueScore = scoreboard.appendChild(document.createElement("SPAN"));
+    blueScore.id = "bluescore";
+    var blueNumber = scoreboard.appendChild(document.createElement("SPAN"));
+    blueNumber.id = "bluenumber";
+    blueScore.appendChild(document.createTextNode("___"));
+    blueNumber.appendChild(document.createTextNode(""));
+}
+
+// Creation of Table 
 
 function tableCreate() {
     var body = document.body
@@ -189,6 +205,6 @@ function updateScore() {
         document.getElementsByClassName('red').length,
         document.getElementsByClassName('blue').length
     ];
-    document.getElementsByClassName('scoreboard')[0].childNodes[0].nodeValue = "Red: " + score[0];
+    document.getElementById('rednumber').childNodes[0].nodeValue = " : " + score[0];
-    document.getElementsByClassName('scoreboard')[0].childNodes[2].nodeValue = "Blue: " + score[1];
+    document.getElementById('bluenumber').childNodes[0].nodeValue = " : " + score[1];
 }