Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
78767491fa |
2
compile
Executable file
2
compile
Executable file
@ -0,0 +1,2 @@
|
||||
#!/bin/sh
|
||||
browserify game-client.js | uglifyjs -c > public/bundle.min.js
|
@ -109,6 +109,47 @@ $(function() {
|
||||
var user, socket, frame;
|
||||
|
||||
//Event listeners
|
||||
//Used from http://stackoverflow.com/a/23230280/7344257
|
||||
document.addEventListener('touchstart', handleTouchStart, false);
|
||||
document.addEventListener('touchmove', handleTouchMove, false);
|
||||
|
||||
var xDown = null;
|
||||
var yDown = null;
|
||||
|
||||
function handleTouchStart(evt) {
|
||||
xDown = evt.touches[0].clientX;
|
||||
yDown = evt.touches[0].clientY;
|
||||
}
|
||||
|
||||
function handleTouchMove(evt) {
|
||||
if ( xDown === null || yDown === null )
|
||||
return;
|
||||
|
||||
var xUp = evt.touches[0].clientX;
|
||||
var yUp = evt.touches[0].clientY;
|
||||
|
||||
var xDiff = xDown - xUp;
|
||||
var yDiff = yDown - yUp;
|
||||
|
||||
//Set new heading.
|
||||
var newHeading;
|
||||
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) /*most significant*/
|
||||
{
|
||||
if ( xDiff > 0 ) newHeading = 3; /* left swipe */
|
||||
else newHeading = 1; /* right swipe */
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( yDiff > 0 ) newHeading = 0; /* up swipe */
|
||||
else newHeading = 2; /* down swipe */
|
||||
}
|
||||
setHeading(newHeading);
|
||||
|
||||
/* reset values */
|
||||
xDown = null;
|
||||
yDown = null;
|
||||
};
|
||||
|
||||
$(document).keydown(function(e) {
|
||||
if (!user || user.dead)
|
||||
return;
|
||||
@ -121,7 +162,12 @@ $(document).keydown(function(e) {
|
||||
case 40: newHeading = 2; break; //DOWN
|
||||
default: return; //exit handler for other keys.
|
||||
}
|
||||
|
||||
setHeading(newHeading);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
function setHeading(newHeading)
|
||||
{
|
||||
if (newHeading === user.currentHeading || ((newHeading % 2 === 0) ^
|
||||
(user.currentHeading % 2 === 0)))
|
||||
{
|
||||
@ -135,10 +181,7 @@ $(document).keydown(function(e) {
|
||||
console.error(msg);
|
||||
});
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
var grid = renderer.grid;
|
||||
var timeout = undefined;
|
||||
@ -215,14 +258,15 @@ function connectServer() {
|
||||
dirty = true;
|
||||
paintLoop();
|
||||
|
||||
showStats();
|
||||
//TODO: Show score stats.
|
||||
//Show score stats.
|
||||
$("#stats").removeClass("hidden");
|
||||
$("#stats").animate({
|
||||
opacity: .9999
|
||||
}, 3000, function() {
|
||||
showStats();
|
||||
});
|
||||
// $("#stats").removeClass("hidden");
|
||||
// $("#stats").animate({
|
||||
// opacity: .9999
|
||||
// }, 3000, function() {
|
||||
|
||||
// });
|
||||
|
||||
//Then fade back into the login screen.
|
||||
|
||||
@ -230,6 +274,8 @@ function connectServer() {
|
||||
}
|
||||
|
||||
function showStats() {
|
||||
var stats =
|
||||
|
||||
$("#begin").removeClass("hidden");
|
||||
$("#begin").animate({
|
||||
opacity: .9999
|
||||
|
@ -19,7 +19,7 @@ var BAR_HEIGHT = SHADOW_OFFSET + CELL_WIDTH;
|
||||
var BAR_WIDTH = 400;
|
||||
|
||||
|
||||
var canvasWidth, canvasHeight, gameWidth, gameHeight, ctx, offctx, offscreenCanvas;
|
||||
var canvasWidth, canvasHeight, gameWidth, gameHeight, ctx, offctx, offscreenCanvas, initZoom;
|
||||
|
||||
$(function () {
|
||||
var canvas = $("#main-ui")[0];
|
||||
@ -30,6 +30,7 @@ $(function () {
|
||||
|
||||
canvasWidth = offscreenCanvas.width = canvas.width = window.innerWidth;
|
||||
canvasHeight = offscreenCanvas.height = canvas.height = window.innerHeight - 20;
|
||||
zoom = initZoom = (canvasWidth / 1280);
|
||||
canvas.style.marginTop = 20 / 2;
|
||||
|
||||
gameWidth = canvasWidth;
|
||||
@ -147,10 +148,10 @@ function paintGrid(ctx)
|
||||
{
|
||||
|
||||
ctx.fillStyle = shadowColor.rgbString();
|
||||
ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH + 1, SHADOW_OFFSET);
|
||||
ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH + 1 / zoom, SHADOW_OFFSET);
|
||||
}
|
||||
ctx.fillStyle = baseColor.rgbString();
|
||||
ctx.fillRect(x, y, CELL_WIDTH + 1, CELL_WIDTH + 1);
|
||||
ctx.fillRect(x, y, CELL_WIDTH + 1 / zoom, CELL_WIDTH + 1 / zoom);
|
||||
}
|
||||
}
|
||||
|
||||
@ -180,7 +181,7 @@ function paintGrid(ctx)
|
||||
ctx.fillStyle = shadowColor.rgbString();
|
||||
ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH, SHADOW_OFFSET);
|
||||
ctx.fillStyle = baseColor.rgbString();
|
||||
ctx.fillRect(x, y, CELL_WIDTH + 1, CELL_WIDTH + 1);
|
||||
ctx.fillRect(x, y, CELL_WIDTH + 1 / zoom, CELL_WIDTH + 1 / zoom);
|
||||
}
|
||||
|
||||
animateSpec.frame++;
|
||||
@ -191,40 +192,46 @@ function paintGrid(ctx)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//TODO: mobile-friendly UI bar and mobile-friendly ranks
|
||||
function paintUIBar(ctx)
|
||||
{
|
||||
var Z_CELL_WIDTH = CELL_WIDTH * initZoom;
|
||||
var Z_BAR_HEIGHT = BAR_HEIGHT * initZoom;
|
||||
var L_PADDING = 20 * initZoom;
|
||||
var PADDING = 10 * initZoom;
|
||||
var S_PADDING = 5 * initZoom;
|
||||
|
||||
//UI Bar background
|
||||
ctx.fillStyle = "#24422c";
|
||||
ctx.fillRect(0, 0, canvasWidth, BAR_HEIGHT);
|
||||
ctx.fillRect(0, 0, canvasWidth, Z_BAR_HEIGHT);
|
||||
|
||||
var barOffset;
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "24px Changa";
|
||||
barOffset = (user && user.name) ? (ctx.measureText(user.name).width + 20) : 0;
|
||||
ctx.fillText(user ? user.name : "", 5, CELL_WIDTH - 5);
|
||||
barOffset = (user && user.name) ? (ctx.measureText(user.name).width + L_PADDING) : 0;
|
||||
ctx.fillText(user ? user.name : "", S_PADDING, Z_CELL_WIDTH - S_PADDING);
|
||||
|
||||
//Draw filled bar.
|
||||
ctx.fillStyle = "rgba(180, 180, 180, .3)";
|
||||
ctx.fillRect(barOffset, 0, BAR_WIDTH, BAR_HEIGHT);
|
||||
ctx.fillRect(barOffset, 0, BAR_WIDTH * initZoom, Z_BAR_HEIGHT);
|
||||
|
||||
var userPortions = portionsRolling[user.num] ? portionsRolling[user.num].lag : 0;
|
||||
var barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * userPortions + MIN_BAR_WIDTH);
|
||||
var barSize = Math.ceil(((BAR_WIDTH - MIN_BAR_WIDTH) * userPortions + MIN_BAR_WIDTH) * initZoom);
|
||||
ctx.fillStyle = user ? user.baseColor.rgbString() : "";
|
||||
ctx.fillRect(barOffset, 0, barSize, CELL_WIDTH);
|
||||
ctx.fillRect(barOffset, 0, barSize, Z_CELL_WIDTH);
|
||||
ctx.fillStyle = user ? user.shadowColor.rgbString() : "";
|
||||
ctx.fillRect(barOffset, CELL_WIDTH, barSize, SHADOW_OFFSET);
|
||||
ctx.fillRect(barOffset, Z_CELL_WIDTH, barSize, SHADOW_OFFSET * initZoom);
|
||||
|
||||
//TODO: dont reset kill count and zoom when we request frames.
|
||||
//Percentage
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "18px Changa";
|
||||
ctx.fillText((userPortions * 100).toFixed(3) + "%", 5 + barOffset, CELL_WIDTH - 5);
|
||||
ctx.fillText((userPortions * 100).toFixed(3) + "%", S_PADDING + barOffset, Z_CELL_WIDTH - S_PADDING);
|
||||
|
||||
//Number of kills
|
||||
var killsText = "Kills: " + kills;
|
||||
var killsOffset = 20 + BAR_WIDTH + barOffset;
|
||||
ctx.fillText(killsText, killsOffset, CELL_WIDTH - 5);
|
||||
var killsOffset = L_PADDING + BAR_WIDTH + barOffset;
|
||||
ctx.fillText(killsText, killsOffset, Z_CELL_WIDTH - S_PADDING);
|
||||
|
||||
//Calcuate rank
|
||||
var sorted = [];
|
||||
@ -238,7 +245,7 @@ function paintUIBar(ctx)
|
||||
|
||||
var rank = sorted.findIndex(function(val) {return val.player === user});
|
||||
ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length,
|
||||
ctx.measureText(killsText).width + killsOffset + 20, CELL_WIDTH - 5);
|
||||
ctx.measureText(killsText).width + killsOffset + L_PADDING, Z_CELL_WIDTH - S_PADDING);
|
||||
|
||||
//Rolling the leaderboard bars.
|
||||
if (sorted.length > 0)
|
||||
@ -261,24 +268,24 @@ function paintUIBar(ctx)
|
||||
var portion = barProportionRolling[player.num].lag;
|
||||
|
||||
var nameWidth = ctx.measureText(name).width;
|
||||
barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * portion + MIN_BAR_WIDTH);
|
||||
barSize = Math.ceil(((BAR_WIDTH - MIN_BAR_WIDTH) * portion + MIN_BAR_WIDTH) * initZoom);
|
||||
var barX = canvasWidth - barSize;
|
||||
var barY = BAR_HEIGHT * (i + 1);
|
||||
var offset = i == 0 ? 10 : 0;
|
||||
var barY = Z_BAR_HEIGHT * (i + 1) * initZoom;
|
||||
var offset = i == 0 ? PADDING : 0;
|
||||
|
||||
ctx.fillStyle = 'rgba(10, 10, 10, .3)';
|
||||
ctx.fillRect(barX - 10, barY + 10 - offset, barSize + 10, BAR_HEIGHT + offset);
|
||||
ctx.fillRect(barX - PADDING, barY + PADDING - offset, barSize + PADDING, Z_BAR_HEIGHT + offset);
|
||||
ctx.fillStyle = player.baseColor.rgbString();
|
||||
ctx.fillRect(barX, barY, barSize, CELL_WIDTH);
|
||||
ctx.fillRect(barX, barY, barSize, CELL_WIDTH * initZoom);
|
||||
ctx.fillStyle = player.shadowColor.rgbString();
|
||||
ctx.fillRect(barX, barY + CELL_WIDTH, barSize, SHADOW_OFFSET);
|
||||
ctx.fillRect(barX, barY + CELL_WIDTH * initZoom, barSize, SHADOW_OFFSET * initZoom);
|
||||
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillText(name, barX - nameWidth - 15, barY + 27);
|
||||
ctx.fillText(name, barX - nameWidth - 15 * initZoom, barY + 27 * initZoom);
|
||||
|
||||
var percentage = (portionsRolling[player.num].lag * 100).toFixed(3) + "%";
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5);
|
||||
ctx.fillText(percentage, barX + 5 * initZoom, barY + (CELL_WIDTH - 5) * initZoom);
|
||||
}
|
||||
|
||||
}
|
||||
@ -355,7 +362,7 @@ function update() {
|
||||
|
||||
//Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this?
|
||||
if (portionsRolling[user.num])
|
||||
zoom = 1 / (portionsRolling[user.num].lag + 1);
|
||||
zoom = initZoom / (portionsRolling[user.num].lag + 1);
|
||||
|
||||
var dead = [];
|
||||
core.updateFrame(grid, players, dead, function addKill(killer, other)
|
||||
|
@ -23,6 +23,8 @@
|
||||
},
|
||||
"homepage": "https://github.com/theKidOfArcrania/Blockly-IO#readme",
|
||||
"dependencies": {
|
||||
"compression": "^1.6.2",
|
||||
"express": "^4.15.0",
|
||||
"finalhandler": "^1.0.0",
|
||||
"serve-static": "^1.11.2",
|
||||
"socket.io": "^1.7.3",
|
||||
|
125
public/bundle.js
125
public/bundle.js
@ -395,6 +395,47 @@ $(function() {
|
||||
var user, socket, frame;
|
||||
|
||||
//Event listeners
|
||||
//Used from http://stackoverflow.com/a/23230280/7344257
|
||||
document.addEventListener('touchstart', handleTouchStart, false);
|
||||
document.addEventListener('touchmove', handleTouchMove, false);
|
||||
|
||||
var xDown = null;
|
||||
var yDown = null;
|
||||
|
||||
function handleTouchStart(evt) {
|
||||
xDown = evt.touches[0].clientX;
|
||||
yDown = evt.touches[0].clientY;
|
||||
}
|
||||
|
||||
function handleTouchMove(evt) {
|
||||
if ( xDown === null || yDown === null )
|
||||
return;
|
||||
|
||||
var xUp = evt.touches[0].clientX;
|
||||
var yUp = evt.touches[0].clientY;
|
||||
|
||||
var xDiff = xDown - xUp;
|
||||
var yDiff = yDown - yUp;
|
||||
|
||||
//Set new heading.
|
||||
var newHeading;
|
||||
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) /*most significant*/
|
||||
{
|
||||
if ( xDiff > 0 ) newHeading = 3; /* left swipe */
|
||||
else newHeading = 1; /* right swipe */
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( yDiff > 0 ) newHeading = 0; /* up swipe */
|
||||
else newHeading = 2; /* down swipe */
|
||||
}
|
||||
setHeading(newHeading);
|
||||
|
||||
/* reset values */
|
||||
xDown = null;
|
||||
yDown = null;
|
||||
};
|
||||
|
||||
$(document).keydown(function(e) {
|
||||
if (!user || user.dead)
|
||||
return;
|
||||
@ -407,7 +448,12 @@ $(document).keydown(function(e) {
|
||||
case 40: newHeading = 2; break; //DOWN
|
||||
default: return; //exit handler for other keys.
|
||||
}
|
||||
|
||||
setHeading(newHeading);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
function setHeading(newHeading)
|
||||
{
|
||||
if (newHeading === user.currentHeading || ((newHeading % 2 === 0) ^
|
||||
(user.currentHeading % 2 === 0)))
|
||||
{
|
||||
@ -421,10 +467,7 @@ $(document).keydown(function(e) {
|
||||
console.error(msg);
|
||||
});
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
var grid = renderer.grid;
|
||||
var timeout = undefined;
|
||||
@ -501,14 +544,15 @@ function connectServer() {
|
||||
dirty = true;
|
||||
paintLoop();
|
||||
|
||||
showStats();
|
||||
//TODO: Show score stats.
|
||||
//Show score stats.
|
||||
$("#stats").removeClass("hidden");
|
||||
$("#stats").animate({
|
||||
opacity: .9999
|
||||
}, 3000, function() {
|
||||
showStats();
|
||||
});
|
||||
// $("#stats").removeClass("hidden");
|
||||
// $("#stats").animate({
|
||||
// opacity: .9999
|
||||
// }, 3000, function() {
|
||||
|
||||
// });
|
||||
|
||||
//Then fade back into the login screen.
|
||||
|
||||
@ -516,6 +560,8 @@ function connectServer() {
|
||||
}
|
||||
|
||||
function showStats() {
|
||||
var stats =
|
||||
|
||||
$("#begin").removeClass("hidden");
|
||||
$("#begin").animate({
|
||||
opacity: .9999
|
||||
@ -812,7 +858,7 @@ var BAR_HEIGHT = SHADOW_OFFSET + CELL_WIDTH;
|
||||
var BAR_WIDTH = 400;
|
||||
|
||||
|
||||
var canvasWidth, canvasHeight, gameWidth, gameHeight, ctx, offctx, offscreenCanvas;
|
||||
var canvasWidth, canvasHeight, gameWidth, gameHeight, ctx, offctx, offscreenCanvas, initZoom;
|
||||
|
||||
$(function () {
|
||||
var canvas = $("#main-ui")[0];
|
||||
@ -823,6 +869,7 @@ $(function () {
|
||||
|
||||
canvasWidth = offscreenCanvas.width = canvas.width = window.innerWidth;
|
||||
canvasHeight = offscreenCanvas.height = canvas.height = window.innerHeight - 20;
|
||||
zoom = initZoom = (canvasWidth / 1280);
|
||||
canvas.style.marginTop = 20 / 2;
|
||||
|
||||
gameWidth = canvasWidth;
|
||||
@ -940,10 +987,10 @@ function paintGrid(ctx)
|
||||
{
|
||||
|
||||
ctx.fillStyle = shadowColor.rgbString();
|
||||
ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH + 1, SHADOW_OFFSET);
|
||||
ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH + 1 / zoom, SHADOW_OFFSET);
|
||||
}
|
||||
ctx.fillStyle = baseColor.rgbString();
|
||||
ctx.fillRect(x, y, CELL_WIDTH + 1, CELL_WIDTH + 1);
|
||||
ctx.fillRect(x, y, CELL_WIDTH + 1 / zoom, CELL_WIDTH + 1 / zoom);
|
||||
}
|
||||
}
|
||||
|
||||
@ -973,7 +1020,7 @@ function paintGrid(ctx)
|
||||
ctx.fillStyle = shadowColor.rgbString();
|
||||
ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH, SHADOW_OFFSET);
|
||||
ctx.fillStyle = baseColor.rgbString();
|
||||
ctx.fillRect(x, y, CELL_WIDTH + 1, CELL_WIDTH + 1);
|
||||
ctx.fillRect(x, y, CELL_WIDTH + 1 / zoom, CELL_WIDTH + 1 / zoom);
|
||||
}
|
||||
|
||||
animateSpec.frame++;
|
||||
@ -984,40 +1031,46 @@ function paintGrid(ctx)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//TODO: mobile-friendly UI bar and mobile-friendly ranks
|
||||
function paintUIBar(ctx)
|
||||
{
|
||||
var Z_CELL_WIDTH = CELL_WIDTH * initZoom;
|
||||
var Z_BAR_HEIGHT = BAR_HEIGHT * initZoom;
|
||||
var L_PADDING = 20 * initZoom;
|
||||
var PADDING = 10 * initZoom;
|
||||
var S_PADDING = 5 * initZoom;
|
||||
|
||||
//UI Bar background
|
||||
ctx.fillStyle = "#24422c";
|
||||
ctx.fillRect(0, 0, canvasWidth, BAR_HEIGHT);
|
||||
ctx.fillRect(0, 0, canvasWidth, Z_BAR_HEIGHT);
|
||||
|
||||
var barOffset;
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "24px Changa";
|
||||
barOffset = (user && user.name) ? (ctx.measureText(user.name).width + 20) : 0;
|
||||
ctx.fillText(user ? user.name : "", 5, CELL_WIDTH - 5);
|
||||
barOffset = (user && user.name) ? (ctx.measureText(user.name).width + L_PADDING) : 0;
|
||||
ctx.fillText(user ? user.name : "", S_PADDING, Z_CELL_WIDTH - S_PADDING);
|
||||
|
||||
//Draw filled bar.
|
||||
ctx.fillStyle = "rgba(180, 180, 180, .3)";
|
||||
ctx.fillRect(barOffset, 0, BAR_WIDTH, BAR_HEIGHT);
|
||||
ctx.fillRect(barOffset, 0, BAR_WIDTH * initZoom, Z_BAR_HEIGHT);
|
||||
|
||||
var userPortions = portionsRolling[user.num] ? portionsRolling[user.num].lag : 0;
|
||||
var barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * userPortions + MIN_BAR_WIDTH);
|
||||
var barSize = Math.ceil(((BAR_WIDTH - MIN_BAR_WIDTH) * userPortions + MIN_BAR_WIDTH) * initZoom);
|
||||
ctx.fillStyle = user ? user.baseColor.rgbString() : "";
|
||||
ctx.fillRect(barOffset, 0, barSize, CELL_WIDTH);
|
||||
ctx.fillRect(barOffset, 0, barSize, Z_CELL_WIDTH);
|
||||
ctx.fillStyle = user ? user.shadowColor.rgbString() : "";
|
||||
ctx.fillRect(barOffset, CELL_WIDTH, barSize, SHADOW_OFFSET);
|
||||
ctx.fillRect(barOffset, Z_CELL_WIDTH, barSize, SHADOW_OFFSET * initZoom);
|
||||
|
||||
//TODO: dont reset kill count and zoom when we request frames.
|
||||
//Percentage
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "18px Changa";
|
||||
ctx.fillText((userPortions * 100).toFixed(3) + "%", 5 + barOffset, CELL_WIDTH - 5);
|
||||
ctx.fillText((userPortions * 100).toFixed(3) + "%", S_PADDING + barOffset, Z_CELL_WIDTH - S_PADDING);
|
||||
|
||||
//Number of kills
|
||||
var killsText = "Kills: " + kills;
|
||||
var killsOffset = 20 + BAR_WIDTH + barOffset;
|
||||
ctx.fillText(killsText, killsOffset, CELL_WIDTH - 5);
|
||||
var killsOffset = L_PADDING + BAR_WIDTH + barOffset;
|
||||
ctx.fillText(killsText, killsOffset, Z_CELL_WIDTH - S_PADDING);
|
||||
|
||||
//Calcuate rank
|
||||
var sorted = [];
|
||||
@ -1031,7 +1084,7 @@ function paintUIBar(ctx)
|
||||
|
||||
var rank = sorted.findIndex(function(val) {return val.player === user});
|
||||
ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length,
|
||||
ctx.measureText(killsText).width + killsOffset + 20, CELL_WIDTH - 5);
|
||||
ctx.measureText(killsText).width + killsOffset + L_PADDING, Z_CELL_WIDTH - S_PADDING);
|
||||
|
||||
//Rolling the leaderboard bars.
|
||||
if (sorted.length > 0)
|
||||
@ -1054,24 +1107,24 @@ function paintUIBar(ctx)
|
||||
var portion = barProportionRolling[player.num].lag;
|
||||
|
||||
var nameWidth = ctx.measureText(name).width;
|
||||
barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * portion + MIN_BAR_WIDTH);
|
||||
barSize = Math.ceil(((BAR_WIDTH - MIN_BAR_WIDTH) * portion + MIN_BAR_WIDTH) * initZoom);
|
||||
var barX = canvasWidth - barSize;
|
||||
var barY = BAR_HEIGHT * (i + 1);
|
||||
var offset = i == 0 ? 10 : 0;
|
||||
var barY = Z_BAR_HEIGHT * (i + 1) * initZoom;
|
||||
var offset = i == 0 ? PADDING : 0;
|
||||
|
||||
ctx.fillStyle = 'rgba(10, 10, 10, .3)';
|
||||
ctx.fillRect(barX - 10, barY + 10 - offset, barSize + 10, BAR_HEIGHT + offset);
|
||||
ctx.fillRect(barX - PADDING, barY + PADDING - offset, barSize + PADDING, Z_BAR_HEIGHT + offset);
|
||||
ctx.fillStyle = player.baseColor.rgbString();
|
||||
ctx.fillRect(barX, barY, barSize, CELL_WIDTH);
|
||||
ctx.fillRect(barX, barY, barSize, CELL_WIDTH * initZoom);
|
||||
ctx.fillStyle = player.shadowColor.rgbString();
|
||||
ctx.fillRect(barX, barY + CELL_WIDTH, barSize, SHADOW_OFFSET);
|
||||
ctx.fillRect(barX, barY + CELL_WIDTH * initZoom, barSize, SHADOW_OFFSET * initZoom);
|
||||
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillText(name, barX - nameWidth - 15, barY + 27);
|
||||
ctx.fillText(name, barX - nameWidth - 15 * initZoom, barY + 27 * initZoom);
|
||||
|
||||
var percentage = (portionsRolling[player.num].lag * 100).toFixed(3) + "%";
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5);
|
||||
ctx.fillText(percentage, barX + 5 * initZoom, barY + (CELL_WIDTH - 5) * initZoom);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1148,7 +1201,7 @@ function update() {
|
||||
|
||||
//Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this?
|
||||
if (portionsRolling[user.num])
|
||||
zoom = 1 / (portionsRolling[user.num].lag + 1);
|
||||
zoom = initZoom / (portionsRolling[user.num].lag + 1);
|
||||
|
||||
var dead = [];
|
||||
core.updateFrame(grid, players, dead, function addKill(killer, other)
|
||||
|
5
public/bundle.min.js
vendored
Normal file
5
public/bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,25 +1,40 @@
|
||||
<head>
|
||||
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||
<link href="changa.css" rel="stylesheet">
|
||||
<link href="styles.css" rel="stylesheet">
|
||||
<script src="jquery.min.js"></script>
|
||||
<script src="bundle.js"></script>
|
||||
<script src="bundle.min.js"></script>
|
||||
<title>Blockly.IO</title>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="main-ui"></canvas>
|
||||
<div id="stats" style="opacity: 0" class="fullscreen hidden"></div>
|
||||
<div id="stats" style="opacity: 0" class="fullscreen hidden">
|
||||
<div style="padding-top: 100px"></div>
|
||||
<div class="card">
|
||||
<h1 id="score">Score: <span id="score-num">0</span></h1>
|
||||
<h1 id="high-score">High Score: <span id="high-score-num">0</span></h1>
|
||||
<h1 id="time">Time Alive: <span id="time-num">0</span></h1>
|
||||
<h1 id="killed">Killed: <span id="killed-num">0</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div id="begin" style="opacity: .99999" class="fullscreen">
|
||||
<div class="center">
|
||||
<h1>Blockly.IO!</h1>
|
||||
<small>Todo: replace ^^^ with a picture. Work in progress.</small><br>
|
||||
|
||||
<h1>Enter your name</h1>
|
||||
<input autocomplete="off" id="name" placeholder="An awesome name!">
|
||||
<button type="submit">Play!</button>
|
||||
<div>
|
||||
<input autocomplete="off" id="name" placeholder="An awesome name!">
|
||||
</div>
|
||||
<div class="blockless">
|
||||
<button type="submit">Play!</button>
|
||||
</div>
|
||||
<div class="blockless">
|
||||
<small id="error">Your browser does not support JavaScript!</small>
|
||||
</div>
|
||||
<br>
|
||||
<small>Visit the open-source code on <a href="https://github.com/theKidOfArcrania/PaperIO-Web">GitHub</a>!</small>
|
||||
</div>
|
||||
</div>
|
||||
<small>Visit the open-source code on <a href="https://github.com/theKidOfArcrania/PaperIO-Web">GitHub</a>!</small>
|
||||
|
||||
</body>
|
@ -28,10 +28,9 @@ canvas {
|
||||
.center {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 1rem;
|
||||
margin-top: 0rem;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -40,6 +39,7 @@ input {
|
||||
padding: .5rem 1rem;
|
||||
border: 4px solid lightgray;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -51,6 +51,14 @@ button {
|
||||
font-family: "Changa", "Sans-serif";
|
||||
font-size: 24px;
|
||||
padding: .5rem 1rem;
|
||||
width: 100%;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px){
|
||||
button, input {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
button:active {
|
||||
|
29
server.js
29
server.js
@ -2,26 +2,17 @@
|
||||
var hostname = process.argv[2] || "0.0.0.0";
|
||||
var port = parseInt(process.argv[3]) || 80;
|
||||
|
||||
var finalhandler = require('finalhandler');
|
||||
var express = require('express');
|
||||
var compression = require('compression')
|
||||
var app = express();
|
||||
|
||||
//Create static server
|
||||
app.use(compression());
|
||||
app.use(express.static('public'));
|
||||
app.listen(port, hostname);
|
||||
|
||||
var http = require('http');
|
||||
var serveStatic = require('serve-static');
|
||||
|
||||
// Serve up public/ftp folder
|
||||
var serve = serveStatic('public/', {'setHeaders': setHeaders});
|
||||
|
||||
function setHeaders(res, path) {
|
||||
res.setHeader('Cache-Control', 'public, max-age=0');
|
||||
}
|
||||
|
||||
// Create server
|
||||
var server = http.createServer(function onRequest (req, res) {
|
||||
serve(req, res, finalhandler(req, res));
|
||||
});
|
||||
|
||||
// Listen
|
||||
server.listen(port, hostname);
|
||||
|
||||
server = http.createServer();
|
||||
var server = http.createServer();
|
||||
var io = require('socket.io')(server);
|
||||
io.set('transports', ['websocket']);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user