Have the leaderboard bars roll animate up and down
This commit is contained in:
parent
6949374b8e
commit
01b0b5833c
@ -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) {
|
||||||
|
@ -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
11
rolling.js
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user