players start at same time, visuals for timer and lobby

clashingcomrades/server.py

@@ -33,7 +33,8 @@ def update_game():
         vertical = vertical + 1
         answer = {
             "team": team,
-            "coordinate": [vertical, horizontal]
+            "coordinate": [vertical, horizontal],
+            "max": maxPlayers
         }
 
         return jsonify(answer)

clashingcomrades/static/main.css

@@ -42,7 +42,7 @@ td {
     margin-left:5%;
 }
 
-.scoreboard, .spectator {
+.scoreboard, .spectator, .info {
     font-family: Lato;
     color: #ffffff;
     position: fixed;
@@ -66,6 +66,13 @@ td {
     margin-top: 45%;
 }
 
+.info {
+    padding: 10px 15px 10px 15px;
+    font-size: 30px;
+    margin-left: 40%;
+    bottom: 0;
+}
+
 #redscore {
     color: #E62E2E;
     background-color: #E62E2E;

clashingcomrades/static/main.js

@@ -9,9 +9,10 @@ var claimColor;
 var turn = 0;
 var spectatorChoose = 1;
 var spectatedUser;
-var numberOfPlayers;
+var numberOfPlayers = 1;
 var canMove = false;
-var serverurl = "http://68.56.19.11:5000"
+var serverurl = "http://activate.adobe.com:5000"
+var maxPlayers;
 
 // Colors
 var playerColors = {
@@ -29,7 +30,8 @@ document.getElementsByClassName('play')[0].onclick = function startGame() {
     };
     //// OPTIMIZATION - cache callback
     _uuid4 = function(cc) {
-    var rr = Math.random() * 16 | 0; return (cc === 'x' ? rr : (rr & 0x3 | 0x8)).toString(16);
+        var rr = Math.random() * 16 | 0; 
+        return (cc === 'x' ? rr : (rr & 0x3 | 0x8)).toString(16);
     };
 
     username = uuid4();
@@ -42,6 +44,7 @@ document.getElementsByClassName('play')[0].onclick = function startGame() {
     login.parentNode.removeChild(login);
     // Create scoreboard before table to prevent css glitching
     createScoreboard();
+    createInfo();
     createTable();
     // Update score before creating player so scoreboard starts at 0
     updateScore();
@@ -57,6 +60,7 @@ function getInitial() {
             //called when successful
             playerCoordinate = data.coordinate;
             playerTeam = data.team;
+            maxPlayers = data.max;
         },
         error: function(e) {
             //called when there is an error
@@ -126,9 +130,9 @@ function waitForPlayers(username) {
         .then(
             function success(data) {
                 numberOfPlayers = data.playersInGame;
-          if (numberOfPlayers == 2) {
+                updateInfo();
+                if (numberOfPlayers == maxPlayers) {
                     countdown();
-            // try catch delete table for visuals later.
                 } else {
                     waitForPlayers(username);
                 }
@@ -137,7 +141,6 @@ function waitForPlayers(username) {
                 //called when there is an error
                 //(e.message);
             }
-    // Repeat this function until 10 players are here.
         );                
     }, 3000);
 }
@@ -150,12 +153,20 @@ function countdown() {
             success: function(data) {
                 timeLeft = data.timeLeft;
                 console.log(data);
-    //MAKE VISUAL STUFF HERE
+                updateTimer(timeLeft);
                 if (timeLeft === 0) {
                     canMove = true;
                     createPlayer();
                     autoScroll('start');
                     document.onkeydown = movePlayer;
+                    remove = document.getElementsByClassName("info")[0];
+                    remove.parentNode.removeChild(remove);
+
+                    if (playerCoordinate[1] == 10) {
+                        movement(-1,0);  
+                    } else {
+                        movement(1,0);
+                    }
                 } else {
                     countdown();
                 }
@@ -165,7 +176,7 @@ function countdown() {
             //(e.message);
             } 
         });
-  }, 750); //Prevent too many requests
+    }, 250); //Prevent too many requests
 }
 
 // CREATION
@@ -215,6 +226,14 @@ function createPlayer() {
     startSquare.id = username;
 }
 
+// Creation of Information box
+
+function createInfo() {
+    var table = document.getElementsByTagName('body')[0].appendChild(document.createElement("DIV"));
+    table.className = 'info';
+    table.appendChild(document.createTextNode("Players in lobby: " + numberOfPlayers));
+}
+
 // UPDATING
 
 function updateTable(username, coordinate, team) {
@@ -240,6 +259,14 @@ function updateScore() {
     document.getElementById('bluenumber').childNodes[0].nodeValue = " : " + score[1];
 }
 
+function updateInfo() {
+    document.getElementsByClassName("info")[0].childNodes[0].nodeValue = "Players in lobby: " + numberOfPlayers;
+}
+
+function updateTimer(timeLeft) {
+    document.getElementsByClassName("info")[0].childNodes[0].nodeValue = "Countdown: " + timeLeft;
+}
+
 // PLAYER HANDLING 
 
 function movement(x,y) {