kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

visual fixes

Browse Source
This commit is contained in:
yamanq 2016-01-17 20:46:58 -05:00
parent 230124e9af
commit f308fb1a40
2 changed files with 277 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
clashingcomrades/server.py
View File

@ -9,7 +9,7 @@ color = 0
vertical = 0 vertical = 0
playersInGame = [] playersInGame = []
# Testing 1 Player for now # Testing 1 Player for now
maxPlayers = 1 maxPlayers = 2
timeLeft = 11.0 timeLeft = 11.0
# Renders client # Renders client

553
clashingcomrades/static/main.js
View File

@ -4,7 +4,6 @@ var username;
var playerTeam; var playerTeam;
var timer; var timer;
var type; var type;
var username;
var playerColor; var playerColor;
var claimColor; var claimColor;
var turn = 0; var turn = 0;
@ -12,160 +11,160 @@ var spectatorChoose = 1;
var spectatedUser; var spectatedUser;
var numberOfPlayers; var numberOfPlayers;
var canMove = false; var canMove = false;
// Colors // Colors
var playerColors = { var playerColors = {
"red": "#E62E2E", "red": "#E62E2E",
"blue": "#4343D8" "blue": "#4343D8"
}; };
var claimedColors = { var claimedColors = {
"red": "#FF9999", "red": "#FF9999",
"blue": "#9999FF" "blue": "#9999FF"
} };
document.getElementsByClassName('play')[0].onclick = function startGame() { document.getElementsByClassName('play')[0].onclick = function startGame() {
uuid4 = function() { uuid4 = function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, _uuid4); return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, _uuid4);
}; };
//// OPTIMIZATION - cache callback //// OPTIMIZATION - cache callback
_uuid4 = function(cc) { _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(); username = uuid4();
spectatedUser = username; spectatedUser = username;
getInitial(); getInitial();
// TODO IP Handling, most likely not necessary // TODO IP Handling, most likely not necessary
var login = document.getElementById("login"); var login = document.getElementById("login");
login.parentNode.removeChild(login); login.parentNode.removeChild(login);
// Create scoreboard before table to prevent css glitching // Create scoreboard before table to prevent css glitching
createScoreboard(); createScoreboard();
createTable(); createTable();
// Update score before creating player so scoreboard starts at 0 // Update score before creating player so scoreboard starts at 0
updateScore(); updateScore();
waitForPlayers(username); waitForPlayers(username);
};
}
function getInitial() { function getInitial() {
$.ajax({ $.ajax({
url: 'http://localhost:5000/game', url: 'http://localhost:5000/game',
type: 'GET', type: 'GET',
async: false, async: false,
// data: '', // data: '',
success: function(data) { success: function(data) {
//called when successful //called when successful
playerCoordinate = data["coordinate"]; playerCoordinate = data.coordinate;
playerTeam = data["team"]; playerTeam = data.team;
}, },
error: function(e) { error: function(e) {
//called when there is an error //called when there is an error
//1(e.message); //1(e.message);
} }
}); });
} }
function serverTransfer(coordinate,team,turn,username) { function serverTransfer(coordinate,team,turn,username) {
var move = { var move = {
coordinate: coordinate, coordinate: coordinate,
team: team, team: team,
turn: turn, turn: turn,
username: username username: username
}; };
// Sending Data // Sending Data
$.ajax('http://localhost:5000/game', { $.ajax('http://localhost:5000/game', {
method: 'POST', method: 'POST',
type : "POST", type : "POST",
data: JSON.stringify(move, null, '\t'), data: JSON.stringify(move, null, '\t'),
async: false, async: false,
dataType: "json", dataType: "json",
contentType: 'application/json;charset=UTF-8' contentType: 'application/json;charset=UTF-8'
}) })
// Server Response // Server Response
.then( .then(
function success(data) { function success(data) {
for (var user in data) { for (var user in data) {
if (data.hasOwnProperty(user) if (data.hasOwnProperty(user) &&
&& (user != username) (user != username) &&
&& (data[user].length > turn) (data[user].length > turn) &&
&& (data[user][turn][2] != "spectator") (data[user][turn][2] != "spectator")
) { ) {
if ((data[user].length > data[spectatedUser].length) if ((data[user].length > data[spectatedUser].length) &&
&& data[spectatedUser][turn][2] === "spectator") { data[spectatedUser][turn][2] === "spectator") {
spectatedUser = user; 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]);
}
}
} }
}, var theMove = data[user][turn];
updateTable(user, theMove[1], theMove[2]);
function fail(data, status) { if (theMove[2] != "spectator") {
alert('Request failed. Returned status of ' + status); var oldMove = data[user][turn - 1];
updateOldTable(oldMove[1], oldMove[2]);
}
}
} }
},
function fail(data, status) {
alert('Request failed. Returned status of ' + status);
}
); );
} }
function waitForPlayers(uuid4) { function waitForPlayers(uuid4) {
timer = setTimeout(function() { timer = setTimeout(function() {
// Sending "I'm here." // Sending "I'm here."
$.ajax('http://localhost:5000/pregame', { $.ajax('http://localhost:5000/pregame', {
method: 'POST', method: 'POST',
type : "POST", type : "POST",
data: JSON.stringify(uuid4, null, '\t'), data: JSON.stringify(uuid4, null, '\t'),
async: false, async: false,
dataType: "json", dataType: "json",
contentType: 'application/json;charset=UTF-8', contentType: 'application/json;charset=UTF-8'
}) })
.then( .then(
function success(data) { function success(data) {
numberOfPlayers = data["playersInGame"]; numberOfPlayers = data.playersInGame;
if (numberOfPlayers == 1) { if (numberOfPlayers == 1) {
countdown(); countdown();
// try catch delete table for visuals later. // try catch delete table for visuals later.
} else { } else {
waitForPlayers(); waitForPlayers();
} }
}, },
function error(e) { function error(e) {
//called when there is an error //called when there is an error
//(e.message); //(e.message);
} }
// Repeat this function until 10 players are here. // Repeat this function until 10 players are here.
); );
}, 3000); }, 3000);
} }
function countdown() { function countdown() {
timer = setTimeout(function() { timer = setTimeout(function() {
$.ajax({ $.ajax({
url: 'http://localhost:5000/pregame', url: 'http://localhost:5000/pregame',
type: 'GET', type: 'GET',
async: false, async: false,
success: function(data) { success: function(data) {
timeLeft = data["timeLeft"]; timeLeft = data.timeLeft;
console.log(data) console.log(data);
//MAKE VISUAL STUFF HERE //MAKE VISUAL STUFF HERE
if(timeLeft == 0) { if(timeLeft === 0) {
canMove = true; canMove = true;
createPlayer(); createPlayer();
autoScroll('start'); autoScroll('start');
document.onkeydown = movePlayer; document.onkeydown = movePlayer;
} else { } else {
countdown(); countdown();
} }
}, },
error: function(e) { error: function(e) {
//called when there is an error //called when there is an error
//(e.message); //(e.message);
} }
}) });
}, 750); //Prevent too many requests }, 750); //Prevent too many requests
} }
// CREATION // CREATION
@ -173,194 +172,194 @@ function countdown() {
// Creation of Table // Creation of Table
function createTable() { function createTable() {
var body = document.body var body = document.body;
var tbl = document.createElement('table'); var tbl = document.createElement('table');
tbl.style.border = "1px solid black"; tbl.style.border = "1px solid black";
for(var i = 0; i < 20; i++) { for(var i = 0; i < 20; i++) {
var tr = tbl.insertRow(); var tr = tbl.insertRow();
for(var j = 0; j < 20; j++) { for(var j = 0; j < 20; j++) {
var td = tr.insertCell(); var td = tr.insertCell();
}
} }
body.appendChild(tbl); }
table = document.getElementsByTagName('table')[0]; body.appendChild(tbl);
table = document.getElementsByTagName('table')[0];
} }
// Creation of Scoreboard // Creation of Scoreboard
function createScoreboard() { function createScoreboard() {
var scoreboard = document.getElementsByTagName('body')[0].appendChild(document.createElement("DIV")); var scoreboard = document.getElementsByTagName('body')[0].appendChild(document.createElement("DIV"));
scoreboard.className = 'scoreboard'; scoreboard.className = 'scoreboard';
var redScore = scoreboard.appendChild(document.createElement("SPAN")); var redScore = scoreboard.appendChild(document.createElement("SPAN"));
redScore.id = "redscore"; redScore.id = "redscore";
var redNumber = scoreboard.appendChild(document.createElement("SPAN")); var redNumber = scoreboard.appendChild(document.createElement("SPAN"));
redNumber.id = "rednumber"; redNumber.id = "rednumber";
redScore.appendChild(document.createTextNode("___")); redScore.appendChild(document.createTextNode("___"));
redNumber.appendChild(document.createTextNode("")); redNumber.appendChild(document.createTextNode(""));
scoreboard.appendChild(document.createElement("BR")); scoreboard.appendChild(document.createElement("BR"));
var blueScore = scoreboard.appendChild(document.createElement("SPAN")); var blueScore = scoreboard.appendChild(document.createElement("SPAN"));
blueScore.id = "bluescore"; blueScore.id = "bluescore";
var blueNumber = scoreboard.appendChild(document.createElement("SPAN")); var blueNumber = scoreboard.appendChild(document.createElement("SPAN"));
blueNumber.id = "bluenumber"; blueNumber.id = "bluenumber";
blueScore.appendChild(document.createTextNode("___")); blueScore.appendChild(document.createTextNode("___"));
blueNumber.appendChild(document.createTextNode("")); blueNumber.appendChild(document.createTextNode(""));
} }
// Creation of Player // Creation of Player
function createPlayer() { function createPlayer() {
startSquare = table.rows[playerCoordinate[0]].cells[playerCoordinate[1]]; startSquare = table.rows[playerCoordinate[0]].cells[playerCoordinate[1]];
startSquare.style.backgroundColor = playerColors[playerTeam]; startSquare.style.backgroundColor = playerColors[playerTeam];
startSquare.className = "player " + playerTeam; startSquare.className = "player " + playerTeam;
startSquare.id = username; startSquare.id = username;
} }
// UPDATING // UPDATING
function updateTable(username, coordinate, team) { function updateTable(username, coordinate, team) {
otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]]; otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]];
otherPlayer.style.backgroundColor = playerColors[team]; otherPlayer.style.backgroundColor = playerColors[team];
otherPlayer.className = "player " + team; otherPlayer.className = "player " + team;
otherPlayer.id = username; otherPlayer.id = username;
} }
function updateOldTable(coordinate, team) { function updateOldTable(coordinate, team) {
otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]]; otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]];
otherPlayer.style.backgroundColor = claimedColors[team]; otherPlayer.style.backgroundColor = claimedColors[team];
otherPlayer.className = otherPlayer.className.replace("player ", ""); otherPlayer.className = otherPlayer.className.replace("player ", "");
otherPlayer.id = "" otherPlayer.id = "";
} }
function updateScore() { function updateScore() {
var score = [ var score = [
document.getElementsByClassName('red').length, document.getElementsByClassName('red').length,
document.getElementsByClassName('blue').length document.getElementsByClassName('blue').length
]; ];
document.getElementById('rednumber').childNodes[0].nodeValue = " : " + score[0]; document.getElementById('rednumber').childNodes[0].nodeValue = " : " + score[0];
document.getElementById('bluenumber').childNodes[0].nodeValue = " : " + score[1]; document.getElementById('bluenumber').childNodes[0].nodeValue = " : " + score[1];
} }
// PLAYER HANDLING // PLAYER HANDLING
function movement(x,y) { function movement(x,y) {
if (playerTeam != "spectator") { if (playerTeam != "spectator") {
try { try {
previousSquare = table.rows[playerCoordinate[0]].cells[playerCoordinate[1]]; previousSquare = table.rows[playerCoordinate[0]].cells[playerCoordinate[1]];
nextSquare = table.rows[playerCoordinate[0] + y].cells[playerCoordinate[1] + x]; nextSquare = table.rows[playerCoordinate[0] + y].cells[playerCoordinate[1] + x];
} catch(err) { } catch(err) {
//Hitting top/down //Hitting top/down
killPlayer(playerCoordinate, playerTeam); killPlayer(playerCoordinate, playerTeam);
}
} }
}
timer = timer =
setTimeout(function() { setTimeout(function() {
try { try {
if (nextSquare == undefined if (nextSquare === undefined ||
|| nextSquare.className.includes('player') nextSquare.className.includes('player') ||
|| playerTeam === "spectator" playerTeam === "spectator" ||
|| nextSquare.className.includes(playerTeam)) { nextSquare.className.includes(playerTeam)) {
killPlayer(playerCoordinate, playerTeam); killPlayer(playerCoordinate, playerTeam);
} }
else { else {
// Changing new square // Changing new square
nextSquare.style.backgroundColor = playerColors[playerTeam]; nextSquare.style.backgroundColor = playerColors[playerTeam];
nextSquare.className = "player " + playerTeam; nextSquare.className = "player " + playerTeam;
nextSquare.id = username; nextSquare.id = username;
// Resetting old square // Resetting old square
previousSquare.style.backgroundColor = claimedColors[playerTeam]; previousSquare.style.backgroundColor = claimedColors[playerTeam];
previousSquare.className = previousSquare.className.replace("player ", ""); previousSquare.className = previousSquare.className.replace("player ", "");
previousSquare.id = ""; previousSquare.id = "";
// Recursive actions // Recursive actions
playerCoordinate = [playerCoordinate[0] + y, playerCoordinate[1] + x]; playerCoordinate = [playerCoordinate[0] + y, playerCoordinate[1] + x];
updateScore(); updateScore();
serverTransfer(playerCoordinate,playerTeam,turn,username); serverTransfer(playerCoordinate,playerTeam,turn,username);
} }
turn = turn + 1; turn = turn + 1;
autoScroll('spectator'); autoScroll('spectator');
movement(x,y); movement(x,y);
} }
catch(err) { catch(err) {
// Hitting left/right // Hitting left/right
killPlayer(playerCoordinate, playerTeam); killPlayer(playerCoordinate, playerTeam);
} }
}, 100); }, 100);
} }
function movePlayer(e) { function movePlayer(e) {
if (canMove) { 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); clearTimeout(timer);
movement(0,-1); movement(0,-1);
} else if (e.keyCode === 40 && type != "down") { } else if (e.keyCode === 40 && type != "down") {
type = "down"; type = "down";
clearTimeout(timer); clearTimeout(timer);
movement(0,1); movement(0,1);
} else if (e.keyCode === 37 && type != "left") { } else if (e.keyCode === 37 && type != "left") {
type = "left" type = "left";
clearTimeout(timer); clearTimeout(timer);
movement(-1,0); movement(-1,0);
} else if (e.keyCode === 39 && type != "right") { } else if (e.keyCode === 39 && type != "right") {
type = "right" type = "right";
clearTimeout(timer); clearTimeout(timer);
movement(1,0); movement(1,0);
} }
} }
} }
function killPlayer(coordinate, team) { function killPlayer(coordinate, team) {
if (playerTeam != "spectator") { if (playerTeam != "spectator") {
deathSquare = table.rows[coordinate[0]].cells[coordinate[1]]; deathSquare = table.rows[coordinate[0]].cells[coordinate[1]];
deathSquare.style.backgroundColor = claimedColors[team]; deathSquare.style.backgroundColor = claimedColors[team];
deathSquare.className = deathSquare.className.replace("player ", ""); deathSquare.className = deathSquare.className.replace("player ", "");
deathSquare.id = ""; deathSquare.id = "";
} }
// Spectator mode first to set team to spectator // Spectator mode first to set team to spectator
spectatorMode(); spectatorMode();
serverTransfer(coordinate,team,turn,username); serverTransfer(coordinate,team,turn,username);
} }
function spectatorMode() { function spectatorMode() {
playerCoordinate = null; playerCoordinate = null;
playerTeam = 'spectator'; playerTeam = 'spectator';
document.getElementsByClassName('spectator')[0].style.opacity = 0.7; document.getElementsByClassName('spectator')[0].style.opacity = 0.7;
spectatorType = 'spectatorFull'; spectatorType = 'spectatorFull';
spectatorFull(); spectatorFull();
document.getElementsByClassName('spectator')[0].onclick = function changeText() { document.getElementsByClassName('spectator')[0].onclick = function changeText() {
spectatorChoose = spectatorChoose * (-1); spectatorChoose = spectatorChoose * (-1);
if(spectatorChoose == -1) { if(spectatorChoose == -1) {
document.getElementsByClassName('spectator')[0].childNodes[0].childNodes[0].nodeValue = "Following"; document.getElementsByClassName('spectator')[0].childNodes[0].childNodes[0].nodeValue = "Following";
spectatorType = 'spectatorFollow'; spectatorType = 'spectatorFollow';
document.getElementsByTagName('body')[0].style.overflow = "hidden"; document.getElementsByTagName('body')[0].style.overflow = "hidden";
} else { } else {
document.getElementsByClassName('spectator')[0].childNodes[0].childNodes[0].nodeValue = "Full View"; document.getElementsByClassName('spectator')[0].childNodes[0].childNodes[0].nodeValue = "Full View";
spectatorType = 'spectatorFull'; spectatorType = 'spectatorFull';
spectatorFull(); spectatorFull();
}
} }
};
} }
function spectatorFull() { function spectatorFull() {
for(var i = 0; i < document.getElementsByTagName('td').length;i++) { for(var i = 0; i < document.getElementsByTagName('td').length;i++) {
document.getElementsByTagName('body')[0].style.overflow = "auto"; document.getElementsByTagName('body')[0].style.overflow = "auto";
document.getElementsByTagName('td')[i].style.minWidth = "75px"; document.getElementsByTagName('td')[i].style.minWidth = "75px";
document.getElementsByTagName('td')[i].style.height = "75px"; document.getElementsByTagName('td')[i].style.height = "75px";
} }
} }
function autoScroll(type) { function autoScroll(type) {
center = [ center = [
window.innerHeight / -2, window.innerHeight / -2,
window.innerWidth / -2 window.innerWidth / -2
]; ];
if(type == 'start') { if(type == 'start') {
$('body').scrollTo(document.getElementById(username), 0, {offset: {top: center[0] , left: center[1]} }); $('body').scrollTo(document.getElementById(username), 0, {offset: {top: center[0] , left: center[1]} });
} else if (type == "spectator") { } else if (type == "spectator") {
$('body').scrollTo(document.getElementById(spectatedUser), 100, {offset: {top: center[0] , left: center[1]} }); $('body').scrollTo(document.getElementById(spectatedUser), 100, {offset: {top: center[0] , left: center[1]} });
} else { } else {
alert("Broken?") alert("Broken?");
// $('body').scrollTo(document.getElementById(username), 100, {offset: {top: center[0] , left: center[1]} }); // $('body').scrollTo(document.getElementById(username), 100, {offset: {top: center[0] , left: center[1]} });
} }
} }