reorganized server transferring

clashingcomrades/static/main.js

@@ -1,19 +1,21 @@
 // Global Variables 
-var playerCoordinate;
+var playerInfo = {};
-var username;
-var playerTeam;
-var timer;
-var type;
-var playerColor;
-var claimColor;
-var turn = 0;
-var spectatorChoose = 1;
-var spectatedUser;
-var numberOfPlayers = 1;
-var canMove = false;
-var serverurl = "http://activate.adobe.com:5000"
 var maxPlayers;
 
+// Client Player Info
+var myTeam;
+var myCoord;
+var myUsername
+
+var type;
+
+/*var spectatorChoose = 1;
+var spectatedUser;*/
+
+var numberOfPlayers = 1;
+var serverURL = "http://activate.adobe.com:5000"
+
+
 // Colors
 var playerColors = {
     "red": "#E62E2E",
@@ -24,7 +26,26 @@ var claimedColors = {
     "blue": "#9999FF"
 };
 
-document.getElementsByClassName('play')[0].onclick = function startGame() {
+document.getElementsByClassName('play')[0].onclick = function initialize() {
+
+    var login = document.getElementById("login");
+    login.parentNode.removeChild(login);
+
+    getInitial(); // Gets team, coordinate, and max lobby players.
+    
+    // TODO IP Handling, most likely not necessary
+
+    // Create scoreboard before table to prevent CSS glitching.
+    createScoreboard();
+    createInfo();
+    createTable();
+    // Update score before creating player so scoreboard starts at 0
+    updateScore();
+    waitForPlayers();
+};
+
+function getInitial() {
+
     uuid4 = function() {
         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, _uuid4);
     };
@@ -34,95 +55,41 @@ document.getElementsByClassName('play')[0].onclick = function startGame() {
         return (cc === 'x' ? rr : (rr & 0x3 | 0x8)).toString(16);
     };
 
-    username = uuid4();
+    myUsername = uuid4();
-    spectatedUser = username;
+    var userId = {
-    getInitial();
+        username: myUsername
-    
-    // TODO IP Handling, most likely not necessary
-
-    var login = document.getElementById("login");
-    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();
-    waitForPlayers(username);
-};
-
-function getInitial() {
-    $.ajax({
-        url: serverurl + '/game',
-        type: 'GET',
-        // data: '',
-        success: function(data) {
-            //called when successful
-            playerCoordinate = data.coordinate;
-            playerTeam = data.team;
-            maxPlayers = data.max;
-        },
-        error: function(e) {
-            //called when there is an error
-            //1(e.message);
-        }
-    });
-}
-
-function serverTransfer(coordinate,team,turn,username) {
-    var move = {
-        coordinate: coordinate,
-        team: team,
-        turn: turn,
-        username: username
     };
-    // Sending Data
+
-    $.ajax(serverurl + '/game', {
+    $.ajax({
-        method: 'POST',
+        url: serverURL + '/game',
-        type : "POST",
+        type: 'POST',
-        data: JSON.stringify(move, null, '\t'),
+        type : 'POST',
+        data: JSON.stringify(userId, null, '\t'),
         dataType: "json",
         contentType: 'application/json;charset=UTF-8'
     })
-    // Server Response
     .then(
         function success(data) {
-            for (var user in data) {
+            myTeam = data.team;
-                if (data.hasOwnProperty(user) &&
+            myCoord = data.coordinate
-                        (user != username) &&
+            maxPlayers = data.max;
-                        (data[user].length > turn) &&
-                        (data[user][turn][2] != "spectator")
-                     ) {
-                    if ((data[user].length > data[spectatedUser].length) &&
-                         data[spectatedUser][turn][2] === "spectator") {
-                        spectatedUser = user;
-                    }
-                    var theMove = data[user][turn];
-                    updateTable(user, theMove[1], theMove[2]);
-                    if (theMove[2] != "spectator") {
-                        var oldMove = data[user][turn - 1];
-                        updateOldTable(oldMove[1], oldMove[2]);
-                    }
-                }
-            }
         },
-
+        function error(e) {
-        function fail(data, status) {
+            console.log(e);
-            alert('Request failed.    Returned status of ' + status);
+            alert(e);
         }
     );
 }
 
-function waitForPlayers(username) {
+function waitForPlayers() {
-    timer = setTimeout(function() {
+    timer1 = setTimeout(function() {
-        // Sending "I'm here."
         var sending = {
-                username: username
+                username: myUsername
         };
 
-        $.ajax(serverurl + '/pregame', {
+        $.ajax(serverURL + '/pregame', {
             method: 'POST',
-            type : "POST",
+            type : 'POST',
             data: JSON.stringify(sending, null, '\t'),
             dataType: "json",
             contentType: 'application/json;charset=UTF-8'
@@ -134,51 +101,72 @@ function waitForPlayers(username) {
                 if (numberOfPlayers == maxPlayers) {
                     countdown();
                 } else {
-                    waitForPlayers(username);
+                    waitForPlayers();
                 }
             },
             function error(e) {
-                //called when there is an error
+                console.log(e);
-                //(e.message);
+                alert(e);
             }
         );                
     }, 3000);
 }
 
 function countdown() {
-    timer = setTimeout(function() {
+    timer2 = setTimeout(function() {
         $.ajax({
-            url: serverurl + '/pregame',
+            url: serverURL + '/pregame',
             type: 'GET',
             success: function(data) {
                 timeLeft = data.timeLeft;
-                console.log(data);
                 updateTimer(timeLeft);
-                if (timeLeft === 0) {
+                delete data['timeLeft'];
-                    canMove = true;
+                playerInfo = data;
-                    createPlayer();
+                animate();
-                    autoScroll('start');
-                    document.onkeydown = movePlayer;
-                    remove = document.getElementsByClassName("info")[0];
-                    remove.parentNode.removeChild(remove);
 
-                    if (playerCoordinate[1] == 10) {
+                if (timeLeft === 0) {
-                        movement(-1,0);  
+                    startGame();
-                    } else {
-                        movement(1,0);
-                    }
-                } else {
-                    countdown();
-                }
             },
             error: function(e) {
-            //called when there is an error
+                console.log(e);
-            //(e.message);
+                alert(e);
             } 
         });
     }, 250); //Prevent too many requests
 }
 
+function startGame() {
+    remove = document.getElementsByClassName("info")[0];
+    remove.parentNode.removeChild(remove);
+    //SET UP VISUALS
+}
+
+function sendMove(x,y) {
+    var move = {
+        coordinate: [x,y],
+        team: myTeam,
+        username: myUsername,
+    };
+
+    $.ajax(serverURL + '/game', {
+        method: 'POST',
+        type : 'POST',
+        data: JSON.stringify(move, null, '\t'),
+        dataType: "json",
+        contentType: 'application/json;charset=UTF-8'
+    })
+    .then(
+        function success(data) {
+            playerInfo = data;
+            animate();
+        },
+        function error(e) {
+            console.log(e);
+            alert(e);
+        }
+    );
+}
+
 // CREATION
 
 // Creation of Table 
@@ -217,15 +205,6 @@ function createScoreboard() {
     blueNumber.appendChild(document.createTextNode(""));
 }
 
-// Creation of Player 
-
-function createPlayer() {
-    startSquare = table.rows[playerCoordinate[0]].cells[playerCoordinate[1]];
-    startSquare.style.backgroundColor = playerColors[playerTeam];
-    startSquare.className = "player " + playerTeam;
-    startSquare.id = username;
-}
-
 // Creation of Information box
 
 function createInfo() {
@@ -236,20 +215,6 @@ function createInfo() {
 
 // UPDATING
 
-function updateTable(username, coordinate, team) {
-    otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]];
-    otherPlayer.style.backgroundColor = playerColors[team];
-    otherPlayer.className = "player " + team; 
-    otherPlayer.id = username;
-}
-
-function updateOldTable(coordinate, team) {
-    otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]];
-    otherPlayer.style.backgroundColor = claimedColors[team];
-    otherPlayer.className = otherPlayer.className.replace("player ", "");
-    otherPlayer.id = "";
-}
-
 function updateScore() {
     var score = [
         document.getElementsByClassName('red').length,
@@ -269,9 +234,36 @@ function updateTimer(timeLeft) {
 
 // PLAYER HANDLING 
 
-function movement(x,y) {
+function animate(x,y) {
-    if (playerTeam != "spectator") {
+    for (var user in playerInfo) {
-        try {
+        if (data.hasOwnProperty(user)) {
+            var playerCoord = data[user]['coordinate'];
+            var playerTeam = data[user]['team'];
+
+            //if coords out of bounds, animate kill
+
+
+        }
+    }
+    /* func create player
+    startSquare = table.rows[coordinate[0]].cells[coordinate[1]];
+    startSquare.style.backgroundColor = playerColors[team];
+    startSquare.className = "player " + team;
+    startSquare.id = username;
+
+            function updateTable(coordinate, team, username) {
+    otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]];
+    otherPlayer.style.backgroundColor = playerColors[team];
+    otherPlayer.className = "player " + team; 
+    otherPlayer.id = username;
+}
+
+function updateOldTable(coordinate, team) {
+    otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]];
+    otherPlayer.style.backgroundColor = claimedColors[team];
+    otherPlayer.className = otherPlayer.className.replace("player ", "");
+    otherPlayer.id = "";
+}
             previousSquare = table.rows[playerCoordinate[0]].cells[playerCoordinate[1]];
             nextSquare = table.rows[playerCoordinate[0] + y].cells[playerCoordinate[1] + x];
         } catch(err) {
@@ -279,7 +271,10 @@ function movement(x,y) {
             killPlayer(playerCoordinate, playerTeam);
         }
     }
-
+  deathSquare = table.rows[coordinate[0]].cells[coordinate[1]];
+            deathSquare.style.backgroundColor = claimedColors[team]; 
+            deathSquare.className = deathSquare.className.replace("player ", "");
+            deathSquare.id = "";
     timer =
         setTimeout(function() {
             try {
@@ -312,44 +307,56 @@ function movement(x,y) {
                 killPlayer(playerCoordinate, playerTeam);
             }
         }, 100);
-}
+}*/
 
 function movePlayer(e) {
 
-    if (canMove) {
+    e = e || window.event;
-        e = e || window.event;
 
-        if (e.keyCode === 38 && type != "up") {
+    if (e.keyCode === 38 && type != "up") {
-            type = "up";
+        type = "up";
-            clearTimeout(timer);
+        sendMove(0,-1);
-            movement(0,-1);
+    } else if (e.keyCode === 40 && type != "down") {
-        } else if (e.keyCode === 40 && type != "down") {
+        type = "down";
-            type = "down";
+        sendMove(0,1);
-            clearTimeout(timer);
+    } else if (e.keyCode === 37 && type != "left") {
-            movement(0,1);
+        type = "left";
-        } else if (e.keyCode === 37 && type != "left") {
+        sendMove(-1,0);
-            type = "left";
+    } else if (e.keyCode === 39 && type != "right") {
-            clearTimeout(timer);
+        type = "right";
-            movement(-1,0);
+        sendMove(1,0);
-        } else if (e.keyCode === 39 && type != "right") {
-            type = "right";
-            clearTimeout(timer);
-            movement(1,0);
-        }
     }
 }
+
 function killPlayer(coordinate, team) {
-    if (playerTeam != "spectator") {
+    var death = {
-        deathSquare = table.rows[coordinate[0]].cells[coordinate[1]];
+        myUsername: ["death"]
-        deathSquare.style.backgroundColor = claimedColors[team]; 
+    };
-        deathSquare.className = deathSquare.className.replace("player ", "");
-        deathSquare.id = "";
-    }
-    // Spectator mode first to set team to spectator
-    spectatorMode();
-    serverTransfer(coordinate,team,turn,username);     
-}
 
+    $.ajax(serverURL + '/game', {
+        method: 'POST',
+        type : 'POST',
+        data: JSON.stringify(death, null, '\t'),
+        dataType: "json",
+        contentType: 'application/json;charset=UTF-8'
+    })
+    .then(
+        function success(data) {
+            animate();
+            // Spectator mode first to set team to spectator
+            //spectatorMode();
+            //serverTransfer(coordinate,team,turn,username);  
+
+        },
+        function error(e) {
+            console.log(e);
+            alert(e);
+        }
+    );
+   
+       
+}
+/*
 function spectatorMode() {
     playerCoordinate = null;
     playerTeam = 'spectator';
@@ -376,7 +383,8 @@ function spectatorFull() {
         document.getElementsByTagName('td')[i].style.minWidth = "75px";
         document.getElementsByTagName('td')[i].style.height = "75px";
     }
-}
+}*/
+
 function autoScroll(type) {
     center = [
         window.innerHeight / -2,