From abb9e4d67ba57f74aee331efb7a3749ba5182435 Mon Sep 17 00:00:00 2001 From: ksjdragon Date: Tue, 19 Jan 2016 23:21:34 -0500 Subject: [PATCH 1/2] reorganized server transferring --- clashingcomrades/static/main.js | 348 ++++++++++++++++---------------- 1 file changed, 178 insertions(+), 170 deletions(-) diff --git a/clashingcomrades/static/main.js b/clashingcomrades/static/main.js index 671c902..909ca86 100644 --- a/clashingcomrades/static/main.js +++ b/clashingcomrades/static/main.js @@ -1,19 +1,21 @@ // Global Variables -var playerCoordinate; -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 playerInfo = {}; 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(); - spectatedUser = username; - getInitial(); - - // 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 + myUsername = uuid4(); + var userId = { + username: myUsername }; - // Sending Data - $.ajax(serverurl + '/game', { - method: 'POST', - type : "POST", - data: JSON.stringify(move, null, '\t'), + + $.ajax({ + url: serverURL + '/game', + type: 'POST', + 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) { - if (data.hasOwnProperty(user) && - (user != username) && - (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]); - } - } - } + myTeam = data.team; + myCoord = data.coordinate + maxPlayers = data.max; }, - - function fail(data, status) { - alert('Request failed. Returned status of ' + status); + function error(e) { + console.log(e); + alert(e); } ); } -function waitForPlayers(username) { - timer = setTimeout(function() { - // Sending "I'm here." +function waitForPlayers() { + timer1 = setTimeout(function() { 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 - //(e.message); + console.log(e); + 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) { - canMove = true; - createPlayer(); - autoScroll('start'); - document.onkeydown = movePlayer; - remove = document.getElementsByClassName("info")[0]; - remove.parentNode.removeChild(remove); + delete data['timeLeft']; + playerInfo = data; + animate(); - if (playerCoordinate[1] == 10) { - movement(-1,0); - } else { - movement(1,0); - } - } else { - countdown(); - } + if (timeLeft === 0) { + startGame(); }, error: function(e) { - //called when there is an error - //(e.message); + console.log(e); + 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) { - if (playerTeam != "spectator") { - try { +function animate(x,y) { + for (var user in playerInfo) { + 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") { - type = "up"; - clearTimeout(timer); - movement(0,-1); - } else if (e.keyCode === 40 && type != "down") { - type = "down"; - clearTimeout(timer); - movement(0,1); - } else if (e.keyCode === 37 && type != "left") { - type = "left"; - clearTimeout(timer); - movement(-1,0); - } else if (e.keyCode === 39 && type != "right") { - type = "right"; - clearTimeout(timer); - movement(1,0); - } + if (e.keyCode === 38 && type != "up") { + type = "up"; + sendMove(0,-1); + } else if (e.keyCode === 40 && type != "down") { + type = "down"; + sendMove(0,1); + } else if (e.keyCode === 37 && type != "left") { + type = "left"; + sendMove(-1,0); + } else if (e.keyCode === 39 && type != "right") { + type = "right"; + sendMove(1,0); } } + function killPlayer(coordinate, team) { - if (playerTeam != "spectator") { - deathSquare = table.rows[coordinate[0]].cells[coordinate[1]]; - 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); -} + var death = { + myUsername: ["death"] + }; + $.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, @@ -390,4 +398,4 @@ function autoScroll(type) { alert("Broken?"); // $('body').scrollTo(document.getElementById(username), 100, {offset: {top: center[0] , left: center[1]} }); } -} +} \ No newline at end of file From af2d4f542d5ae077fdc14a48d81f4ef63b0d4e8a Mon Sep 17 00:00:00 2001 From: ksjdragon Date: Wed, 20 Jan 2016 21:56:43 -0500 Subject: [PATCH 2/2] added animations, and death handling --- clashingcomrades/server.py | 4 +- clashingcomrades/static/main.js | 264 +++++++++++++++++--------------- 2 files changed, 139 insertions(+), 129 deletions(-) diff --git a/clashingcomrades/server.py b/clashingcomrades/server.py index b8904bf..a52b57e 100644 --- a/clashingcomrades/server.py +++ b/clashingcomrades/server.py @@ -9,7 +9,7 @@ game = {} color = 0 vertical = 0 playersInGame = [] -maxPlayers = 2 +maxPlayers = 1 initialTime = 0 timeLeft = 3 @@ -65,7 +65,7 @@ def update_game(): # If the username that the player sent is already defined in game elif playerStatus["username"] in game: - elif abs(playerStatus["coordinate"][0]) + abs(playerStatus["coordinate"][1]) == 1: + if abs(playerStatus["coordinate"][0]) + abs(playerStatus["coordinate"][1]) == 1: if playerStatus["username"] in noMove: coord1 = playerStatus["coordinate"][0] + game[playerStatus["username"]][0][0] coord2 = playerStatus["coordinate"][1] + game[playerStatus["username"]][0][1] diff --git a/clashingcomrades/static/main.js b/clashingcomrades/static/main.js index 909ca86..e0a3cbb 100644 --- a/clashingcomrades/static/main.js +++ b/clashingcomrades/static/main.js @@ -1,20 +1,27 @@ // Global Variables var playerInfo = {}; var maxPlayers; +var numberOfPlayers = 1; // Client Player Info -var myTeam; +var myTeam; var myCoord; -var myUsername +var myUsername; -var type; +// Animation Handling +var move; // Prevents move spam. +var moveTimer; +var setup = true; /*var spectatorChoose = 1; var spectatedUser;*/ -var numberOfPlayers = 1; -var serverURL = "http://activate.adobe.com:5000" +// Timeout Handling +var canSend = true; +var turnTime = 3; +var hasSent = false; +var serverURL = "http://activate.adobe.com:5000" // Colors var playerColors = { @@ -57,7 +64,7 @@ function getInitial() { myUsername = uuid4(); var userId = { - username: myUsername + username: [myUsername] }; $.ajax({ @@ -71,12 +78,13 @@ function getInitial() { .then( function success(data) { myTeam = data.team; - myCoord = data.coordinate + myCoord = data.coordinate; maxPlayers = data.max; + }, function error(e) { console.log(e); - alert(e); + alert("Error, intial"); } ); } @@ -84,7 +92,7 @@ function getInitial() { function waitForPlayers() { timer1 = setTimeout(function() { var sending = { - username: myUsername + username: [myUsername] }; $.ajax(serverURL + '/pregame', { @@ -106,7 +114,7 @@ function waitForPlayers() { }, function error(e) { console.log(e); - alert(e); + alert("Error, waiting"); } ); }, 3000); @@ -118,53 +126,66 @@ function countdown() { url: serverURL + '/pregame', type: 'GET', success: function(data) { - timeLeft = data.timeLeft; + timeLeft = parseInt(data.timeLeft, 10); updateTimer(timeLeft); delete data['timeLeft']; playerInfo = data; animate(); - + if (timeLeft === 0) { startGame(); + } else { + countdown(); + } }, error: function(e) { console.log(e); - alert(e); + alert("Error, countdown"); } }); }, 250); //Prevent too many requests } function startGame() { - remove = document.getElementsByClassName("info")[0]; - remove.parentNode.removeChild(remove); - //SET UP VISUALS + document.onkeydown = movePlayer; + document.getElementsByClassName('info')[0].childNodes[0].nodeValue = "Next Turn: 3" + timeMove(); + autoScroll('start'); + setup = false; } function sendMove(x,y) { - var move = { - coordinate: [x,y], - team: myTeam, - username: myUsername, - }; + if (canSend) { + canSend = false; + hasSent = true; + 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); - } - ); + $.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(); + timeMove(); + updateScore(); + canSend = true; + hasSent = false; + }, + function error(e) { + console.log(e); + alert("Error, move"); + } + ); + } } // CREATION @@ -225,7 +246,7 @@ function updateScore() { } function updateInfo() { - document.getElementsByClassName("info")[0].childNodes[0].nodeValue = "Players in lobby: " + numberOfPlayers; + document.getElementsByClassName("info")[0].childNodes[0].nodeValue = "Players In Lobby: " + numberOfPlayers; } function updateTimer(timeLeft) { @@ -234,104 +255,80 @@ function updateTimer(timeLeft) { // PLAYER HANDLING -function animate(x,y) { +function animate() { for (var user in playerInfo) { - if (data.hasOwnProperty(user)) { - var playerCoord = data[user]['coordinate']; - var playerTeam = data[user]['team']; + if (playerInfo.hasOwnProperty(user)) { + var playerCoord = playerInfo[user][0]; + var playerTeam = playerInfo[user][1]; + var lastSquare; + var newSquare; - //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) { - //Hitting top/down - 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 { - if (nextSquare === undefined || - nextSquare.className.includes('player') || - playerTeam === "spectator" || - nextSquare.className.includes(playerTeam)) { - killPlayer(playerCoordinate, playerTeam); + if(!setup) { + lastSquare = document.getElementById(user); + toClaimed(lastSquare, playerTeam); } - else { - // Changing new square - nextSquare.style.backgroundColor = playerColors[playerTeam]; - nextSquare.className = "player " + playerTeam; - nextSquare.id = username; - // Resetting old square - previousSquare.style.backgroundColor = claimedColors[playerTeam]; - previousSquare.className = previousSquare.className.replace("player ", ""); - previousSquare.id = ""; - // Recursive actions - playerCoordinate = [playerCoordinate[0] + y, playerCoordinate[1] + x]; - updateScore(); - serverTransfer(playerCoordinate,playerTeam,turn,username); + } + catch(err) {} + finally { + try { + newSquare = coord(playerCoord[0],playerCoord[1]); + if(newSquare.className.includes("blue") || newSquare.className.includes("red")) { + if(!setup) { + killPlayer(lastSquare); + } + } else { + toPlayer(newSquare, playerTeam, user); + } + } + catch(err) { + console.log("errtoplayer") + killPlayer(lastSquare); } - turn = turn + 1; - autoScroll('spectator'); - movement(x,y); } - catch(err) { - // Hitting left/right - killPlayer(playerCoordinate, playerTeam); - } - }, 100); -}*/ + } + } + autoScroll('start'); +} + +function coord(x,y) { + return table.rows[x].cells[y]; +} + +function toPlayer(square,team,username) { + square.className = "player " + team; + square.style.backgroundColor = playerColors[team]; + square.id = username; +} + +function toClaimed(square,team) { + square.style.backgroundColor = claimedColors[team]; + square.className = square.className.replace("player ", ""); + square.id = ""; +} function movePlayer(e) { e = e || window.event; - if (e.keyCode === 38 && type != "up") { - type = "up"; - sendMove(0,-1); - } else if (e.keyCode === 40 && type != "down") { - type = "down"; - sendMove(0,1); - } else if (e.keyCode === 37 && type != "left") { - type = "left"; + if (e.keyCode === 38) { + sendMove(-1,0); - } else if (e.keyCode === 39 && type != "right") { - type = "right"; + } else if (e.keyCode === 40) { + sendMove(1,0); + } else if (e.keyCode === 37) { + + sendMove(0,-1); + } else if (e.keyCode === 39) { + + sendMove(0,1); } } -function killPlayer(coordinate, team) { - var death = { - myUsername: ["death"] - }; +function killPlayer(square) { + var death = {}; + death[myUsername] = ["death"]; $.ajax(serverURL + '/game', { method: 'POST', @@ -342,19 +339,32 @@ function killPlayer(coordinate, team) { }) .then( function success(data) { - animate(); + toClaimed(square,myTeam); + sendMove(0,0); // Spectator mode first to set team to spectator //spectatorMode(); //serverTransfer(coordinate,team,turn,username); - }, function error(e) { console.log(e); alert(e); } - ); - - + ); +} + +function timeMove() { + document.getElementsByClassName("info")[0].childNodes[0].nodeValue = "Next Turn: " + turnTime; + if(turnTime == 0) { + turnTime = 3; + if(!hasSent) { + sendMove(0,0); + } + } else { + moveTimer = setTimeout(function() { + turnTime -= 1; + timeMove(); + }, 1000) + } } /* function spectatorMode() { @@ -391,7 +401,7 @@ function autoScroll(type) { window.innerWidth / -2 ]; if(type == 'start') { - $('body').scrollTo(document.getElementById(username), 0, {offset: {top: center[0] , left: center[1]} }); + $('body').scrollTo(document.getElementById(myUsername), 0, {offset: {top: center[0] , left: center[1]} }); } else if (type == "spectator") { $('body').scrollTo(document.getElementById(spectatedUser), 100, {offset: {top: center[0] , left: center[1]} }); } else {