ilikecats/papercats
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Have the leaderboard bars roll animate up and down

Browse Source
This commit is contained in:
theKidOfArcrania 2017-03-02 22:38:29 +00:00
parent 6949374b8e
commit 01b0b5833c
3 changed files with 72 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
game-renderer.js
View File

@ -38,8 +38,8 @@ $(function () {
var allowAnimation = true; var allowAnimation = true;
var animateGrid, players, allPlayers, playerPortion, portionsRolling, grid, var animateGrid, players, allPlayers, playerPortion, portionsRolling,
animateTo, offset, user, lagPortion, portionSpeed, zoom, kills, showedDead; barProportionRolling, grid, animateTo, offset, user, zoom, kills, showedDead;
grid = new Grid(GRID_SIZE, function(row, col, before, after) { grid = new Grid(GRID_SIZE, function(row, col, before, after) {
//Keep track of areas. //Keep track of areas.
@ -66,13 +66,12 @@ function init() {
allPlayers = []; allPlayers = [];
playerPortion = []; playerPortion = [];
portionsRolling = []; portionsRolling = [];
barProportionRolling = [];
animateTo = [0, 0]; animateTo = [0, 0];
offset = [0, 0]; offset = [0, 0];
user = null; user = null;
lagPortion = 0;
portionSpeed = 0;
zoom = 1; zoom = 1;
kills = 0; kills = 0;
showedDead = false; showedDead = false;
@ -209,7 +208,8 @@ function paintUIBar(ctx)
ctx.fillStyle = "rgba(180, 180, 180, .3)"; ctx.fillStyle = "rgba(180, 180, 180, .3)";
ctx.fillRect(barOffset, 0, BAR_WIDTH, BAR_HEIGHT); ctx.fillRect(barOffset, 0, BAR_WIDTH, BAR_HEIGHT);
var barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * lagPortion + MIN_BAR_WIDTH); var userPortions = portionsRolling[user.num] ? portionsRolling[user.num].lag : 0;
var barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * userPortions + MIN_BAR_WIDTH);
ctx.fillStyle = user ? user.baseColor.rgbString() : ""; ctx.fillStyle = user ? user.baseColor.rgbString() : "";
ctx.fillRect(barOffset, 0, barSize, CELL_WIDTH); ctx.fillRect(barOffset, 0, barSize, CELL_WIDTH);
ctx.fillStyle = user ? user.shadowColor.rgbString() : ""; ctx.fillStyle = user ? user.shadowColor.rgbString() : "";
@ -219,7 +219,7 @@ function paintUIBar(ctx)
//Percentage //Percentage
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.font = "18px Changa"; ctx.font = "18px Changa";
ctx.fillText((lagPortion * 100).toFixed(3) + "%", 5 + barOffset, CELL_WIDTH - 5); ctx.fillText((userPortions * 100).toFixed(3) + "%", 5 + barOffset, CELL_WIDTH - 5);
//Number of kills //Number of kills
var killsText = "Kills: " + kills; var killsText = "Kills: " + kills;
@ -240,14 +240,25 @@ function paintUIBar(ctx)
ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length, ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length,
ctx.measureText(killsText).width + killsOffset + 20, CELL_WIDTH - 5); ctx.measureText(killsText).width + killsOffset + 20, CELL_WIDTH - 5);
//Rolling the leaderboard bars.
if (sorted.length > 0)
{
var maxPortion = sorted[0].portion;
for (var i = 0; i < players.length; i++)
{
var rolling = barProportionRolling[players[i].num];
rolling.value = playerPortion[players[i].num] / maxPortion;
rolling.update();
}
}
//Show leaderboard. //Show leaderboard.
var maxPortion = sorted[0] ? sorted[0].portion : 0;
var leaderboardNum = Math.min(5, sorted.length); var leaderboardNum = Math.min(5, sorted.length);
for (var i = 0; i < leaderboardNum; i++) for (var i = 0; i < leaderboardNum; i++)
{ {
var player = sorted[i].player; var player = sorted[i].player;
var name = player.name || "Unnamed"; var name = player.name || "Unnamed";
var portion = sorted[i].portion / maxPortion; var portion = barProportionRolling[player.num].lag;
var nameWidth = ctx.measureText(name).width; 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);
@ -263,10 +274,9 @@ function paintUIBar(ctx)
ctx.fillRect(barX, barY + CELL_WIDTH, barSize, SHADOW_OFFSET); ctx.fillRect(barX, barY + CELL_WIDTH, barSize, SHADOW_OFFSET);
ctx.fillStyle = "black"; ctx.fillStyle = "black";
ctx.fillText(name, barX - nameWidth - 10, barY + 27); ctx.fillText(name, barX - nameWidth - 15, barY + 27);
var percentage = (sorted[i].portion / GRID_SIZE / GRID_SIZE * 100).toFixed(3) + "%"; var percentage = (portionsRolling[player.num].lag * 100).toFixed(3) + "%";
var metrics = ctx.measureText(percentage);
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5); ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5);
} }
@ -335,29 +345,17 @@ function update() {
} }
} }
//Change area percentage //Calculate player portions.
var userPortion; for (var i = 0; i < players.length; i++)
if (user) userPortion = playerPortion[user.num] / (GRID_SIZE * GRID_SIZE);
else userPortion = 0;
if (lagPortion !== userPortion)
{ {
if (allowAnimation) var roll = portionsRolling[players[i].num];
{ roll.value = playerPortion[players[i].num] / GRID_SIZE / GRID_SIZE;
delta = userPortion - lagPortion; roll.update();
dir = Math.sign(delta);
mag = Math.min(Math.abs(portionSpeed), Math.abs(delta));
lagPortion += dir * mag;
}
else
lagPortion = userPortion;
} }
//Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this? //Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this?
zoom = 1 / (lagPortion + 1); if (portionsRolling[user.num])
zoom = 1 / (portionsRolling[user.num].lag + 1);
//Update user's portions and top ranks.
portionSpeed = Math.abs(userPortion - lagPortion) / ANIMATE_FRAMES;
var dead = []; var dead = [];
core.updateFrame(grid, players, dead, function addKill(killer, other) core.updateFrame(grid, players, dead, function addKill(killer, other)
@ -419,7 +417,8 @@ module.exports = exports = {
return; //Already added. return; //Already added.
allPlayers[player.num] = players[players.length] = player; allPlayers[player.num] = players[players.length] = player;
playerPortion[player.num] = 0; playerPortion[player.num] = 0;
portionsRolling = new Rolling(0, .2); portionsRolling[player.num] = new Rolling(9 / GRID_SIZE / GRID_SIZE, ANIMATE_FRAMES);
barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
return players.length - 1; return players.length - 1;
}, },
getPlayer: function(ind) { getPlayer: function(ind) {

72
public/bundle.js
View File

@ -807,8 +807,8 @@ $(function () {
var allowAnimation = true; var allowAnimation = true;
var animateGrid, players, allPlayers, playerPortion, portionsRolling, grid, var animateGrid, players, allPlayers, playerPortion, portionsRolling,
animateTo, offset, user, lagPortion, portionSpeed, zoom, kills, showedDead; barProportionRolling, grid, animateTo, offset, user, zoom, kills, showedDead;
grid = new Grid(GRID_SIZE, function(row, col, before, after) { grid = new Grid(GRID_SIZE, function(row, col, before, after) {
//Keep track of areas. //Keep track of areas.
@ -835,13 +835,12 @@ function init() {
allPlayers = []; allPlayers = [];
playerPortion = []; playerPortion = [];
portionsRolling = []; portionsRolling = [];
barProportionRolling = [];
animateTo = [0, 0]; animateTo = [0, 0];
offset = [0, 0]; offset = [0, 0];
user = null; user = null;
lagPortion = 0;
portionSpeed = 0;
zoom = 1; zoom = 1;
kills = 0; kills = 0;
showedDead = false; showedDead = false;
@ -978,7 +977,8 @@ function paintUIBar(ctx)
ctx.fillStyle = "rgba(180, 180, 180, .3)"; ctx.fillStyle = "rgba(180, 180, 180, .3)";
ctx.fillRect(barOffset, 0, BAR_WIDTH, BAR_HEIGHT); ctx.fillRect(barOffset, 0, BAR_WIDTH, BAR_HEIGHT);
var barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * lagPortion + MIN_BAR_WIDTH); var userPortions = portionsRolling[user.num] ? portionsRolling[user.num].lag : 0;
var barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * userPortions + MIN_BAR_WIDTH);
ctx.fillStyle = user ? user.baseColor.rgbString() : ""; ctx.fillStyle = user ? user.baseColor.rgbString() : "";
ctx.fillRect(barOffset, 0, barSize, CELL_WIDTH); ctx.fillRect(barOffset, 0, barSize, CELL_WIDTH);
ctx.fillStyle = user ? user.shadowColor.rgbString() : ""; ctx.fillStyle = user ? user.shadowColor.rgbString() : "";
@ -988,7 +988,7 @@ function paintUIBar(ctx)
//Percentage //Percentage
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.font = "18px Changa"; ctx.font = "18px Changa";
ctx.fillText((lagPortion * 100).toFixed(3) + "%", 5 + barOffset, CELL_WIDTH - 5); ctx.fillText((userPortions * 100).toFixed(3) + "%", 5 + barOffset, CELL_WIDTH - 5);
//Number of kills //Number of kills
var killsText = "Kills: " + kills; var killsText = "Kills: " + kills;
@ -1009,14 +1009,25 @@ function paintUIBar(ctx)
ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length, ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length,
ctx.measureText(killsText).width + killsOffset + 20, CELL_WIDTH - 5); ctx.measureText(killsText).width + killsOffset + 20, CELL_WIDTH - 5);
//Rolling the leaderboard bars.
if (sorted.length > 0)
{
var maxPortion = sorted[0].portion;
for (var i = 0; i < players.length; i++)
{
var rolling = barProportionRolling[players[i].num];
rolling.value = playerPortion[players[i].num] / maxPortion;
rolling.update();
}
}
//Show leaderboard. //Show leaderboard.
var maxPortion = sorted[0] ? sorted[0].portion : 0;
var leaderboardNum = Math.min(5, sorted.length); var leaderboardNum = Math.min(5, sorted.length);
for (var i = 0; i < leaderboardNum; i++) for (var i = 0; i < leaderboardNum; i++)
{ {
var player = sorted[i].player; var player = sorted[i].player;
var name = player.name || "Unnamed"; var name = player.name || "Unnamed";
var portion = sorted[i].portion / maxPortion; var portion = barProportionRolling[player.num].lag;
var nameWidth = ctx.measureText(name).width; 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);
@ -1032,10 +1043,9 @@ function paintUIBar(ctx)
ctx.fillRect(barX, barY + CELL_WIDTH, barSize, SHADOW_OFFSET); ctx.fillRect(barX, barY + CELL_WIDTH, barSize, SHADOW_OFFSET);
ctx.fillStyle = "black"; ctx.fillStyle = "black";
ctx.fillText(name, barX - nameWidth - 10, barY + 27); ctx.fillText(name, barX - nameWidth - 15, barY + 27);
var percentage = (sorted[i].portion / GRID_SIZE / GRID_SIZE * 100).toFixed(3) + "%"; var percentage = (portionsRolling[player.num].lag * 100).toFixed(3) + "%";
var metrics = ctx.measureText(percentage);
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5); ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5);
} }
@ -1104,29 +1114,17 @@ function update() {
} }
} }
//Change area percentage //Calculate player portions.
var userPortion; for (var i = 0; i < players.length; i++)
if (user) userPortion = playerPortion[user.num] / (GRID_SIZE * GRID_SIZE);
else userPortion = 0;
if (lagPortion !== userPortion)
{ {
if (allowAnimation) var roll = portionsRolling[players[i].num];
{ roll.value = playerPortion[players[i].num] / GRID_SIZE / GRID_SIZE;
delta = userPortion - lagPortion; roll.update();
dir = Math.sign(delta);
mag = Math.min(Math.abs(portionSpeed), Math.abs(delta));
lagPortion += dir * mag;
}
else
lagPortion = userPortion;
} }
//Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this? //Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this?
zoom = 1 / (lagPortion + 1); if (portionsRolling[user.num])
zoom = 1 / (portionsRolling[user.num].lag + 1);
//Update user's portions and top ranks.
portionSpeed = Math.abs(userPortion - lagPortion) / ANIMATE_FRAMES;
var dead = []; var dead = [];
core.updateFrame(grid, players, dead, function addKill(killer, other) core.updateFrame(grid, players, dead, function addKill(killer, other)
@ -1188,7 +1186,8 @@ module.exports = exports = {
return; //Already added. return; //Already added.
allPlayers[player.num] = players[players.length] = player; allPlayers[player.num] = players[players.length] = player;
playerPortion[player.num] = 0; playerPortion[player.num] = 0;
portionsRolling = new Rolling(0, .2); portionsRolling[player.num] = new Rolling(9 / GRID_SIZE / GRID_SIZE, ANIMATE_FRAMES);
barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
return players.length - 1; return players.length - 1;
}, },
getPlayer: function(ind) { getPlayer: function(ind) {
@ -9559,12 +9558,12 @@ function move(data)
module.exports = Player; module.exports = Player;
},{"./color.js":3,"./game-consts.js":5,"./grid.js":8,"./stack.js":58}],57:[function(require,module,exports){ },{"./color.js":3,"./game-consts.js":5,"./grid.js":8,"./stack.js":58}],57:[function(require,module,exports){
function Rolling(value, maxSpeed) function Rolling(value, frames)
{ {
var lag = 0; var lag = 0;
if (!maxSpeed) if (!frames)
maxSpeed = 5; frames = 24;
this.value = value; this.value = value;
@ -9573,9 +9572,10 @@ function Rolling(value, maxSpeed)
enumerable: true enumerable: true
}); });
this.update = function() { this.update = function() {
var delta = value - lag; var delta = this.value - lag;
var dir = Math.sign(delta); var dir = Math.sign(delta);
var mag = Math.min(Math.abs(maxSpeed), Math.abs(delta)); var speed = Math.abs(delta) / frames;
var mag = Math.min(Math.abs(speed), Math.abs(delta));
lag += mag * dir; lag += mag * dir;
return lag; return lag;

11
rolling.js
View File

@ -1,10 +1,10 @@
function Rolling(value, maxSpeed) function Rolling(value, frames)
{ {
var lag = 0; var lag = 0;
if (!maxSpeed) if (!frames)
maxSpeed = 5; frames = 24;
this.value = value; this.value = value;
@ -13,9 +13,10 @@ function Rolling(value, maxSpeed)
enumerable: true enumerable: true
}); });
this.update = function() { this.update = function() {
var delta = value - lag; var delta = this.value - lag;
var dir = Math.sign(delta); var dir = Math.sign(delta);
var mag = Math.min(Math.abs(maxSpeed), Math.abs(delta)); var speed = Math.abs(delta) / frames;
var mag = Math.min(Math.abs(speed), Math.abs(delta));
lag += mag * dir; lag += mag * dir;
return lag; return lag;