Have the leaderboard bars roll animate up and down
This commit is contained in:
theKidOfArcrania
parent
6949374b8e
commit
01b0b5833c
@ -38,8 +38,8 @@ $(function () {
|
||||
|
||||
|
||||
var allowAnimation = true;
|
||||
var animateGrid, players, allPlayers, playerPortion, portionsRolling, grid,
|
||||
animateTo, offset, user, lagPortion, portionSpeed, zoom, kills, showedDead;
|
||||
var animateGrid, players, allPlayers, playerPortion, portionsRolling,
|
||||
barProportionRolling, grid, animateTo, offset, user, zoom, kills, showedDead;
|
||||
|
||||
grid = new Grid(GRID_SIZE, function(row, col, before, after) {
|
||||
//Keep track of areas.
|
||||
@ -66,13 +66,12 @@ function init() {
|
||||
allPlayers = [];
|
||||
playerPortion = [];
|
||||
portionsRolling = [];
|
||||
barProportionRolling = [];
|
||||
|
||||
animateTo = [0, 0];
|
||||
offset = [0, 0];
|
||||
|
||||
user = null;
|
||||
lagPortion = 0;
|
||||
portionSpeed = 0;
|
||||
zoom = 1;
|
||||
kills = 0;
|
||||
showedDead = false;
|
||||
@ -209,7 +208,8 @@ function paintUIBar(ctx)
|
||||
ctx.fillStyle = "rgba(180, 180, 180, .3)";
|
||||
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.fillRect(barOffset, 0, barSize, CELL_WIDTH);
|
||||
ctx.fillStyle = user ? user.shadowColor.rgbString() : "";
|
||||
@ -219,7 +219,7 @@ function paintUIBar(ctx)
|
||||
//Percentage
|
||||
ctx.fillStyle = "white";
|
||||
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
|
||||
var killsText = "Kills: " + kills;
|
||||
@ -240,14 +240,25 @@ function paintUIBar(ctx)
|
||||
ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length,
|
||||
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.
|
||||
var maxPortion = sorted[0] ? sorted[0].portion : 0;
|
||||
var leaderboardNum = Math.min(5, sorted.length);
|
||||
for (var i = 0; i < leaderboardNum; i++)
|
||||
{
|
||||
var player = sorted[i].player;
|
||||
var name = player.name || "Unnamed";
|
||||
var portion = sorted[i].portion / maxPortion;
|
||||
var portion = barProportionRolling[player.num].lag;
|
||||
|
||||
var nameWidth = ctx.measureText(name).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.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 metrics = ctx.measureText(percentage);
|
||||
var percentage = (portionsRolling[player.num].lag * 100).toFixed(3) + "%";
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5);
|
||||
}
|
||||
@ -335,29 +345,17 @@ function update() {
|
||||
}
|
||||
}
|
||||
|
||||
//Change area percentage
|
||||
var userPortion;
|
||||
if (user) userPortion = playerPortion[user.num] / (GRID_SIZE * GRID_SIZE);
|
||||
else userPortion = 0;
|
||||
|
||||
if (lagPortion !== userPortion)
|
||||
//Calculate player portions.
|
||||
for (var i = 0; i < players.length; i++)
|
||||
{
|
||||
if (allowAnimation)
|
||||
{
|
||||
delta = userPortion - lagPortion;
|
||||
dir = Math.sign(delta);
|
||||
mag = Math.min(Math.abs(portionSpeed), Math.abs(delta));
|
||||
lagPortion += dir * mag;
|
||||
}
|
||||
else
|
||||
lagPortion = userPortion;
|
||||
var roll = portionsRolling[players[i].num];
|
||||
roll.value = playerPortion[players[i].num] / GRID_SIZE / GRID_SIZE;
|
||||
roll.update();
|
||||
}
|
||||
|
||||
//Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this?
|
||||
zoom = 1 / (lagPortion + 1);
|
||||
|
||||
//Update user's portions and top ranks.
|
||||
portionSpeed = Math.abs(userPortion - lagPortion) / ANIMATE_FRAMES;
|
||||
if (portionsRolling[user.num])
|
||||
zoom = 1 / (portionsRolling[user.num].lag + 1);
|
||||
|
||||
var dead = [];
|
||||
core.updateFrame(grid, players, dead, function addKill(killer, other)
|
||||
@ -419,7 +417,8 @@ module.exports = exports = {
|
||||
return; //Already added.
|
||||
allPlayers[player.num] = players[players.length] = player;
|
||||
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;
|
||||
},
|
||||
getPlayer: function(ind) {
|
||||
|
||||
@ -807,8 +807,8 @@ $(function () {
|
||||
|
||||
|
||||
var allowAnimation = true;
|
||||
var animateGrid, players, allPlayers, playerPortion, portionsRolling, grid,
|
||||
animateTo, offset, user, lagPortion, portionSpeed, zoom, kills, showedDead;
|
||||
var animateGrid, players, allPlayers, playerPortion, portionsRolling,
|
||||
barProportionRolling, grid, animateTo, offset, user, zoom, kills, showedDead;
|
||||
|
||||
grid = new Grid(GRID_SIZE, function(row, col, before, after) {
|
||||
//Keep track of areas.
|
||||
@ -835,13 +835,12 @@ function init() {
|
||||
allPlayers = [];
|
||||
playerPortion = [];
|
||||
portionsRolling = [];
|
||||
barProportionRolling = [];
|
||||
|
||||
animateTo = [0, 0];
|
||||
offset = [0, 0];
|
||||
|
||||
user = null;
|
||||
lagPortion = 0;
|
||||
portionSpeed = 0;
|
||||
zoom = 1;
|
||||
kills = 0;
|
||||
showedDead = false;
|
||||
@ -978,7 +977,8 @@ function paintUIBar(ctx)
|
||||
ctx.fillStyle = "rgba(180, 180, 180, .3)";
|
||||
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.fillRect(barOffset, 0, barSize, CELL_WIDTH);
|
||||
ctx.fillStyle = user ? user.shadowColor.rgbString() : "";
|
||||
@ -988,7 +988,7 @@ function paintUIBar(ctx)
|
||||
//Percentage
|
||||
ctx.fillStyle = "white";
|
||||
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
|
||||
var killsText = "Kills: " + kills;
|
||||
@ -1009,14 +1009,25 @@ function paintUIBar(ctx)
|
||||
ctx.fillText("Rank: " + (rank === -1 ? "--" : rank + 1) + " of " + sorted.length,
|
||||
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.
|
||||
var maxPortion = sorted[0] ? sorted[0].portion : 0;
|
||||
var leaderboardNum = Math.min(5, sorted.length);
|
||||
for (var i = 0; i < leaderboardNum; i++)
|
||||
{
|
||||
var player = sorted[i].player;
|
||||
var name = player.name || "Unnamed";
|
||||
var portion = sorted[i].portion / maxPortion;
|
||||
var portion = barProportionRolling[player.num].lag;
|
||||
|
||||
var nameWidth = ctx.measureText(name).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.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 metrics = ctx.measureText(percentage);
|
||||
var percentage = (portionsRolling[player.num].lag * 100).toFixed(3) + "%";
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5);
|
||||
}
|
||||
@ -1104,29 +1114,17 @@ function update() {
|
||||
}
|
||||
}
|
||||
|
||||
//Change area percentage
|
||||
var userPortion;
|
||||
if (user) userPortion = playerPortion[user.num] / (GRID_SIZE * GRID_SIZE);
|
||||
else userPortion = 0;
|
||||
|
||||
if (lagPortion !== userPortion)
|
||||
//Calculate player portions.
|
||||
for (var i = 0; i < players.length; i++)
|
||||
{
|
||||
if (allowAnimation)
|
||||
{
|
||||
delta = userPortion - lagPortion;
|
||||
dir = Math.sign(delta);
|
||||
mag = Math.min(Math.abs(portionSpeed), Math.abs(delta));
|
||||
lagPortion += dir * mag;
|
||||
}
|
||||
else
|
||||
lagPortion = userPortion;
|
||||
var roll = portionsRolling[players[i].num];
|
||||
roll.value = playerPortion[players[i].num] / GRID_SIZE / GRID_SIZE;
|
||||
roll.update();
|
||||
}
|
||||
|
||||
//Zoom goes from 1 to .5, decreasing as portion goes up. TODO: maybe can modify this?
|
||||
zoom = 1 / (lagPortion + 1);
|
||||
|
||||
//Update user's portions and top ranks.
|
||||
portionSpeed = Math.abs(userPortion - lagPortion) / ANIMATE_FRAMES;
|
||||
if (portionsRolling[user.num])
|
||||
zoom = 1 / (portionsRolling[user.num].lag + 1);
|
||||
|
||||
var dead = [];
|
||||
core.updateFrame(grid, players, dead, function addKill(killer, other)
|
||||
@ -1188,7 +1186,8 @@ module.exports = exports = {
|
||||
return; //Already added.
|
||||
allPlayers[player.num] = players[players.length] = player;
|
||||
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;
|
||||
},
|
||||
getPlayer: function(ind) {
|
||||
@ -9559,12 +9558,12 @@ function move(data)
|
||||
module.exports = Player;
|
||||
},{"./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;
|
||||
|
||||
if (!maxSpeed)
|
||||
maxSpeed = 5;
|
||||
if (!frames)
|
||||
frames = 24;
|
||||
|
||||
this.value = value;
|
||||
|
||||
@ -9573,9 +9572,10 @@ function Rolling(value, maxSpeed)
|
||||
enumerable: true
|
||||
});
|
||||
this.update = function() {
|
||||
var delta = value - lag;
|
||||
var delta = this.value - lag;
|
||||
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;
|
||||
return lag;
|
||||
|
||||
11
rolling.js
11
rolling.js
@ -1,10 +1,10 @@
|
||||
|
||||
function Rolling(value, maxSpeed)
|
||||
function Rolling(value, frames)
|
||||
{
|
||||
var lag = 0;
|
||||
|
||||
if (!maxSpeed)
|
||||
maxSpeed = 5;
|
||||
if (!frames)
|
||||
frames = 24;
|
||||
|
||||
this.value = value;
|
||||
|
||||
@ -13,9 +13,10 @@ function Rolling(value, maxSpeed)
|
||||
enumerable: true
|
||||
});
|
||||
this.update = function() {
|
||||
var delta = value - lag;
|
||||
var delta = this.value - lag;
|
||||
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;
|
||||
return lag;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user