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

autoscrolling, readded favicon, organized code

Browse Source
This commit is contained in:
unknown 2015-07-10 00:58:38 -04:00
parent bb98c7a82f
commit ca249361b6
3 changed files with 113 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
clashingcomrades/static/main.css
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
src: url('../static/resources/fonts/lato-light.woff'); src: url('./resources/fonts/lato-light.woff');
} }
html { html {
@ -11,6 +11,9 @@ html {
-ms-user-select: none; -ms-user-select: none;
} }
body {
overflow: hidden;
}
td { td {
min-width: 100px; min-width: 100px;
height: 100px; height: 100px;

181
clashingcomrades/static/main.js
View File

@ -1,14 +1,14 @@
//Global Variables // Global Variables
var coordinate; var playerCoordinate;
var username; var username;
var team; var playerTeam;
var timer; var timer;
var type; var type;
var username; var username;
var playerColor; var playerColor;
var claimColor; var claimColor;
var turn = 0; var turn = 0;
//Colors // Colors
var playerColors = { var playerColors = {
"red": "#E62E2E", "red": "#E62E2E",
"blue": "#4343D8" "blue": "#4343D8"
@ -31,18 +31,20 @@ document.getElementsByClassName('play')[0].onclick = function startGame() {
//********************* //*********************
// TODO Get from server // TODO Get from server
//********************* //*********************
coordinate = [0,0]; playerCoordinate = [0,0];
team = "blue"; playerTeam = "blue";
// 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
scoreboardCreate(); createScoreboard();
createTable();
// Update score before creating player so scoreboard starts at 0
updateScore(); updateScore();
tableCreate();
createPlayer(); createPlayer();
document.onkeydown = movePlayer; document.onkeydown = movePlayer;
} }
@ -55,6 +57,7 @@ function serverTransfer(coordinate,team,turn,username) {
}; };
// For debugging // For debugging
console.log(move); console.log(move);
// Sending Data
$.ajax('http://127.0.0.1:5000/game', { $.ajax('http://127.0.0.1:5000/game', {
method: 'POST', method: 'POST',
type : "POST", type : "POST",
@ -62,15 +65,16 @@ function serverTransfer(coordinate,team,turn,username) {
dataType: "json", dataType: "json",
contentType: 'application/json;charset=UTF-8' contentType: 'application/json;charset=UTF-8'
}) })
// Receiving Data
.then( .then(
function success(data) { function success(data) {
for (var user in data) { for (var user in data) {
if (data.hasOwnProperty(user) && (user != username)) { } if (data.hasOwnProperty(user) && (user != username)) {
console.log(data[user][turn]); console.log(data[user][turn]);
var theMove = data[user][turn]; var theMove = data[user][turn];
tableUpdate(theMove[1], theMove[2]); updateTable(theMove[1], theMove[2]);
var oldMove = data[user][turn - 1]; var oldMove = data[user][turn - 1];
oldTableUpdate(oldMove[1], oldMove[2]); updateOldTable(oldMove[1], oldMove[2]);
} }
} }
}, },
@ -81,9 +85,27 @@ function serverTransfer(coordinate,team,turn,username) {
); );
} }
// CREATION
// Creation of Table
function createTable() {
var body = document.body
var tbl = document.createElement('table');
tbl.style.border = "1px solid black";
for(var i = 0; i < 20; i++) {
var tr = tbl.insertRow();
for(var j = 0; j < 30; j++) {
var td = tr.insertCell();
}
}
body.appendChild(tbl);
table = document.getElementsByTagName('table')[0];
}
// Creation of Scoreboard // Creation of Scoreboard
function scoreboardCreate() { 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"));
@ -101,69 +123,70 @@ function scoreboardCreate() {
blueNumber.appendChild(document.createTextNode("")); blueNumber.appendChild(document.createTextNode(""));
} }
// Creation of Table // Creation of Player
function tableCreate() {
var body = document.body
var tbl = document.createElement('table');
tbl.style.border = "1px solid black";
for(var i = 0; i < 20; i++) {
var tr = tbl.insertRow();
for(var j = 0; j < 30; j++) {
var td = tr.insertCell();
}
}
body.appendChild(tbl);
table = document.getElementsByTagName('table')[0];
}
function tableUpdate (coordinate, team) {
table.rows[coordinate[0]].cells[coordinate[1]].className = "player ";
table.rows[coordinate[0]].cells[coordinate[1]].className += team;
table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = playerColors[team];
}
function oldTableUpdate(coordinate, team) {
table.rows[coordinate[0]].cells[coordinate[1]].className = table.rows[coordinate[0]].cells[coordinate[1]].className.replace("player ", "");
table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = claimedColors[team];
}
// Creation of Player
function createPlayer() { function createPlayer() {
table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = playerColors[team]; startSquare = table.rows[playerCoordinate[0]].cells[playerCoordinate[1]];
table.rows[coordinate[0]].cells[coordinate[1]].className = "player "; startSquare.style.backgroundColor = playerColors[playerTeam];
startSquare.className = "player " + playerTeam;
startSquare.id = username;
} }
// UPDATING
function updateTable(coordinate, team) {
otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]];
otherPlayer.style.backgroundColor = playerColors[team];
otherPlayer.className = "player " + team;
}
function updateOldTable(coordinate, team) {
otherPlayer = table.rows[coordinate[0]].cells[coordinate[1]];
otherPlayer.style.backgroundColor = claimedColors[team];
otherPlayer.className = otherPlayer.className.replace("player ", "");
}
function updateScore() {
var score = [
document.getElementsByClassName('red').length,
document.getElementsByClassName('blue').length
];
document.getElementById('rednumber').childNodes[0].nodeValue = " : " + score[0];
document.getElementById('bluenumber').childNodes[0].nodeValue = " : " + score[1];
}
// PLAYER HANDLING
function movement(x,y) { function movement(x,y) {
previousSquare = table.rows[playerCoordinate[0]].cells[playerCoordinate[1]];
nextSquare = table.rows[playerCoordinate[0] + y].cells[playerCoordinate[1] + x];
timer = timer =
setTimeout(function() { setTimeout(function() {
try { try {
if (table.rows[coordinate[0] + y].cells[coordinate[1] + x].className.includes(team)) { if(nextSquare.className.includes(playerTeam) || nextSquare.className.includes('player')) {
// Kills Player killPlayer(playerCoordinate, playerTeam);
table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = claimedColors[team];
document.getElementsByClassName('player')[0].className = "";
spectatorMode();
} }
else { else {
table.rows[coordinate[0]].cells[coordinate[1]].className = table.rows[coordinate[0]].cells[coordinate[1]].className.replace("player ", ""); // Changing new square
table.rows[coordinate[0] + y].cells[coordinate[1] + x].className = "player "; nextSquare.style.backgroundColor = playerColors[playerTeam];
table.rows[coordinate[0] + y].cells[coordinate[1] + x].className += team; nextSquare.className = "player " + playerTeam;
table.rows[coordinate[0] + y].cells[coordinate[1] + x].style.backgroundColor = playerColors[team]; nextSquare.id = username;
table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = claimedColors[team]; // Resetting old square
coordinate = [coordinate[0] + y, coordinate[1] + x]; previousSquare.style.backgroundColor = claimedColors[playerTeam];
previousSquare.className = previousSquare.className.replace("player ", "");
previousSquare.id = "";
// Recursive actions
playerCoordinate = [playerCoordinate[0] + y, playerCoordinate[1] + x];
updateScore(); updateScore();
serverTransfer(coordinate,team,turn,username); serverTransfer(playerCoordinate,playerTeam,turn,username);
autoScroll();
turn = turn + 1; turn = turn + 1;
movement(x,y); movement(x,y);
} }
} }
catch(err) { catch(err) {
//Kills Player // On hit wall
table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = claimColor; killPlayer(playerCoordinate, playerTeam);
document.getElementsByClassName('player')[0].className = "";
spectatorMode();
} }
}, 100); }, 100);
} }
@ -176,35 +199,45 @@ function movePlayer(e) {
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
else if(e.keyCode === 37 && type != "left") { if(e.keyCode === 37 && type != "left") {
type = "left" type = "left"
clearTimeout(timer); clearTimeout(timer);
movement(-1,0); movement(-1,0);
} } else
else if(e.keyCode === 39 && type != "right") { if(e.keyCode === 39 && type != "right") {
type = "right" type = "right"
clearTimeout(timer); clearTimeout(timer);
movement(1,0); movement(1,0);
} }
} }
function killPlayer(coordinate, team) {
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);
}
function spectatorMode() { function spectatorMode() {
//*************************** //***************************
// TODO Finish Spectator Mode // TODO Finish Spectator Mode
//*************************** //***************************
coordinate = null; playerCoordinate = null;
playerTeam = 'spectator';
} }
function updateScore() { function autoScroll() {
var score = [ center = [
document.getElementsByClassName('red').length, window.innerHeight / -2,
document.getElementsByClassName('blue').length window.innerWidth / -2
]; ];
document.getElementById('rednumber').childNodes[0].nodeValue = " : " + score[0]; $('body').scrollTo(document.getElementById(username), 100, {offset: {top: center[0] , left: center[1]} });
document.getElementById('bluenumber').childNodes[0].nodeValue = " : " + score[1]; }
}

2
clashingcomrades/templates/index.html
View File

@ -3,6 +3,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Coexistence</title> <title>Coexistence</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.png')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head> </head>
@ -22,4 +23,5 @@
</body> </body>
<script src="{{ url_for('static', filename='main.js') }}"></script> <script src="{{ url_for('static', filename='main.js') }}"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.1/jquery.scrollTo.js"></script>
</html> </html>