papercats/client-modes/user-mode.js

/* global $ */

var core = require("../game-core");
var client = require("../client");
var Rolling = require("./rolling");

var GRID_SIZE = core.GRID_SIZE;
var CELL_WIDTH = core.CELL_WIDTH;
var SPEED = core.SPEED;
var BORDER_WIDTH = core.BORDER_WIDTH;
var SHADOW_OFFSET = 5;
var ANIMATE_FRAMES = 24;
var BOUNCE_FRAMES = [8, 4];
var DROP_HEIGHT = 24;
var DROP_SPEED = 2;
var MIN_BAR_WIDTH = 65;
var BAR_HEIGHT = SHADOW_OFFSET + CELL_WIDTH;
var BAR_WIDTH = 400;

var canvas, canvasWidth, canvasHeight, gameWidth, gameHeight, ctx, offctx, offscreenCanvas;

$(function() {
	canvas = $("#main-ui")[0];
	ctx = canvas.getContext("2d");
	offscreenCanvas = document.createElement("canvas");
	offctx = offscreenCanvas.getContext("2d");
	canvas.style.marginTop = 10;
	updateSize();
});

var animateGrid, playerPortion, portionsRolling, barProportionRolling, animateTo, offset, user, zoom, showedDead;
var grid = client.grid;

function updateSize() {
	var changed = false;
	if (canvasWidth != window.innerWidth) {
		gameWidth = canvasWidth = offscreenCanvas.width = canvas.width = window.innerWidth;
		changed = true;
	}
	if (canvasHeight != window.innerHeight - 20) {
		canvasHeight = offscreenCanvas.height = canvas.height = window.innerHeight - 20;
		gameHeight = canvasHeight - BAR_HEIGHT;
		changed = true;
	}
	if (changed && user) centerOnPlayer(user, offset);
}

function reset() {
	animateGrid = new core.Grid(GRID_SIZE);
	playerPortion = [];
	portionsRolling = [];
	barProportionRolling = [];
	animateTo = [0, 0];
	offset = [0, 0];
	user = null;
	zoom = 1;
	showedDead = false;
}

reset();

//Paint methods
function paintGridBorder(ctx) {
	ctx.fillStyle = "lightgray";
	var gridWidth = CELL_WIDTH * GRID_SIZE;

	ctx.fillRect(-BORDER_WIDTH, 0, BORDER_WIDTH, gridWidth);
	ctx.fillRect(-BORDER_WIDTH, -BORDER_WIDTH, gridWidth + BORDER_WIDTH * 2, BORDER_WIDTH);
	ctx.fillRect(gridWidth, 0, BORDER_WIDTH, gridWidth);
	ctx.fillRect(-BORDER_WIDTH, gridWidth, gridWidth + BORDER_WIDTH * 2, BORDER_WIDTH);
}

function paintGrid(ctx) {
	//Paint background
	ctx.fillStyle = "rgb(211, 225, 237)";
	ctx.fillRect(0, 0, CELL_WIDTH * GRID_SIZE, CELL_WIDTH * GRID_SIZE);
	paintGridBorder(ctx);

	//paintGridLines(ctx);
	//Get viewing limits
	var offsetX = (offset[0] - BORDER_WIDTH);
	var offsetY = (offset[1] - BORDER_WIDTH);
	var minRow = Math.max(Math.floor(offsetY / CELL_WIDTH), 0);
	var minCol = Math.max(Math.floor(offsetX / CELL_WIDTH), 0);
	var maxRow = Math.min(Math.ceil((offsetY + gameHeight / zoom) / CELL_WIDTH), grid.size);
	var maxCol = Math.min(Math.ceil((offsetX + gameWidth / zoom) / CELL_WIDTH), grid.size);

	//Paint occupied areas. (and fading ones)
	for (var r = minRow; r < maxRow; r++) {
		for (var c = minCol; c < maxCol; c++) {
			var p = grid.get(r, c);
			var x = c * CELL_WIDTH, y = r * CELL_WIDTH, baseColor, shadowColor;
				var animateSpec = animateGrid.get(r, c);
			if (client.allowAnimation && animateSpec) {
				if (animateSpec.before) { //fading animation
					var frac = (animateSpec.frame / ANIMATE_FRAMES);
					var back = new core.Color(.58, .41, .92, 1);
					baseColor = animateSpec.before.lightBaseColor.interpolateToString(back, frac);
					shadowColor = animateSpec.before.shadowColor.interpolateToString(back, frac);
				}
				else continue;
			}
			else if (p) {
				baseColor = p.lightBaseColor;
				shadowColor = p.shadowColor;
			}
			else continue; //No animation nor is this player owned
				var hasBottom = !grid.isOutOfBounds(r + 1, c);
			var bottomAnimate = hasBottom && animateGrid.get(r + 1, c);
			var totalStatic = !bottomAnimate && !animateSpec;
			var bottomEmpty = totalStatic ? (hasBottom && !grid.get(r + 1, c)) :
				(!bottomAnimate || (bottomAnimate.after && bottomAnimate.before));
			if (hasBottom && ((!!bottomAnimate ^ !!animateSpec) || bottomEmpty)) {
				ctx.fillStyle = shadowColor.rgbString();
				ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH + 1, SHADOW_OFFSET);
			}
			ctx.fillStyle = baseColor.rgbString();
			ctx.fillRect(x, y, CELL_WIDTH + 1, CELL_WIDTH + 1);
		}
	}
	if (!client.allowAnimation) return;

	//Paint squares with drop in animation
	for (var r = 0; r < grid.size; r++) {
		for (var c = 0; c < grid.size; c++) {
			animateSpec = animateGrid.get(r, c);
			x = c * CELL_WIDTH, y = r * CELL_WIDTH;
			if (animateSpec && client.allowAnimation) {
				var viewable = r >= minRow && r < maxRow && c >= minCol && c < maxCol;
				if (animateSpec.after && viewable) {
					//Bouncing the squares.
					var offsetBounce = getBounceOffset(animateSpec.frame);
					y -= offsetBounce;
					shadowColor = animateSpec.after.shadowColor;
					baseColor = animateSpec.after.lightBaseColor.deriveLumination(-(offsetBounce / DROP_HEIGHT) * .1);
					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);
				}
				animateSpec.frame++;
				if (animateSpec.frame >= ANIMATE_FRAMES) animateGrid.set(r, c, null);
			}
		}
	}
}

function paintUIBar(ctx) {
	//UI Bar background
	ctx.fillStyle = "#24422c";
	ctx.fillRect(0, 0, canvasWidth, 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);

	//Draw filled bar
	ctx.fillStyle = "rgba(180, 180, 180, .3)";
	ctx.fillRect(barOffset, 0, BAR_WIDTH, 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);
	ctx.fillStyle = user ? user.baseColor.rgbString() : "";
	ctx.fillRect(barOffset, 0, barSize, CELL_WIDTH);
	ctx.fillStyle = user ? user.shadowColor.rgbString() : "";
	ctx.fillRect(barOffset, CELL_WIDTH, barSize, SHADOW_OFFSET);

	//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);

	//Number of kills
	var killsText = "Kills: " + client.kills;
	var killsOffset = 20 + BAR_WIDTH + barOffset;
	ctx.fillText(killsText, killsOffset, CELL_WIDTH - 5);

	//Calcuate rank
	var sorted = [];
	client.getPlayers().forEach(function(val) {
		sorted.push({player: val, portion: playerPortion[val.num]});
	});
	sorted.sort(function(a, b) {
		return (a.portion === b.portion) ? a.player.num - b.player.num : b.portion - a.portion;
	});

	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);

	//Rolling the leaderboard bars
	if (sorted.length > 0) {
		var maxPortion = sorted[0].portion;
		client.getPlayers().forEach(function(player) {
			var rolling = barProportionRolling[player.num];
			rolling.value = playerPortion[player.num] / maxPortion;
			rolling.update();
		});
	}

	//Show leaderboard
	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 = barProportionRolling[player.num].lag;
		var nameWidth = ctx.measureText(name).width;
		barSize = Math.ceil((BAR_WIDTH - MIN_BAR_WIDTH) * portion + MIN_BAR_WIDTH);
		var barX = canvasWidth - barSize;
		var barY = BAR_HEIGHT * (i + 1);
		var offset = i == 0 ? 10 : 0;
		ctx.fillStyle = "rgba(10, 10, 10, .3)";
		ctx.fillRect(barX - 10, barY + 10 - offset, barSize + 10, BAR_HEIGHT + offset);
		ctx.fillStyle = player.baseColor.rgbString();
		ctx.fillRect(barX, barY, barSize, CELL_WIDTH);
		ctx.fillStyle = player.shadowColor.rgbString();
		ctx.fillRect(barX, barY + CELL_WIDTH, barSize, SHADOW_OFFSET);
		ctx.fillStyle = "black";
		ctx.fillText(name, barX - nameWidth - 15, barY + 27);
		var percentage = (portionsRolling[player.num].lag * 100).toFixed(3) + "%";
		ctx.fillStyle = "white";
		ctx.fillText(percentage, barX + 5, barY + CELL_WIDTH - 5);
	}
}

function paint(ctx) {
	ctx.fillStyle = "#e2ebf3";	//"whitesmoke";
	ctx.fillRect(0, 0, canvasWidth, canvasHeight);

	//Move grid to viewport as said with the offsets, below the stats
	ctx.save();
	ctx.translate(0, BAR_HEIGHT);
	ctx.beginPath();
	ctx.rect(0, 0, gameWidth, gameHeight);
	ctx.clip();

	//Zoom in/out based on player stats
	ctx.scale(zoom, zoom);
	ctx.translate(-offset[0] + BORDER_WIDTH, -offset[1] + BORDER_WIDTH);

	paintGrid(ctx);
	client.getPlayers().forEach(function (p) {
		var fr = p.waitLag;
		if (fr < ANIMATE_FRAMES) p.render(ctx, fr / ANIMATE_FRAMES);
		else p.render(ctx);
	});

	//Reset transform to paint fixed UI elements
	ctx.restore();
	paintUIBar(ctx);

	if ((!user || user.dead) && !showedDead) {
		showedDead = true;
		console.log("You died!");
		//return;
	}
}

function paintDoubleBuff() {
	paint(offctx);
	ctx.drawImage(offscreenCanvas, 0, 0);
}

function update() {
	updateSize();

	//Change grid offsets
	for (var i = 0; i <= 1; i++) {
		if (animateTo[i] !== offset[i]) {
			if (client.allowAnimation) {
				var delta = animateTo[i] - offset[i];
				var dir = Math.sign(delta);
				var mag = Math.min(SPEED, Math.abs(delta));
				offset[i] += dir * mag;
			}
			else offset[i] = animateTo[i];
		}
	}

	//Calculate player portions
	client.getPlayers().forEach(function(player) {
		var roll = portionsRolling[player.num];
		roll.value = playerPortion[player.num] / GRID_SIZE / GRID_SIZE;
		roll.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);
	//TODO: animate player is dead. (maybe explosion?), and tail rewinds itself.
	if (user) centerOnPlayer(user, animateTo);
}

//Helper methods
function centerOnPlayer(player, pos) {
	var xOff = Math.floor(player.posX - (gameWidth / zoom - CELL_WIDTH) / 2);
	var yOff = Math.floor(player.posY - (gameHeight / zoom - CELL_WIDTH) / 2);
	var gridWidth = grid.size * CELL_WIDTH + BORDER_WIDTH * 2;
	pos[0] = xOff; //Math.max(Math.min(xOff, gridWidth + (BAR_WIDTH + 100) / zoom - gameWidth / zoom), 0);
	pos[1] = yOff; //Math.max(Math.min(yOff, gridWidth - gameHeight / zoom), 0);
}

function getBounceOffset(frame) {
	var offsetBounce = ANIMATE_FRAMES;
	var bounceNum = BOUNCE_FRAMES.length - 1;
	while (bounceNum >= 0 && frame < offsetBounce - BOUNCE_FRAMES[bounceNum]) {
		offsetBounce -= BOUNCE_FRAMES[bounceNum];
		bounceNum--;
	}
	if (bounceNum === -1) return (offsetBounce - frame) * DROP_SPEED;
	else {
		offsetBounce -= BOUNCE_FRAMES[bounceNum];
		frame = frame - offsetBounce;
		var midFrame = BOUNCE_FRAMES[bounceNum] / 2;
		return (frame >= midFrame) ? (BOUNCE_FRAMES[bounceNum] - frame) * DROP_SPEED : frame * DROP_SPEED;
	}
}

module.exports = exports = {
	addPlayer: function(player) {
		playerPortion[player.num] = 0;
		portionsRolling[player.num] = new Rolling(9 / GRID_SIZE / GRID_SIZE, ANIMATE_FRAMES);
		barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
	},
	disconnect: function() {
		$("#begin").fadeIn(1000);
		$("#main-ui").fadeOut(1000);
	},
	removePlayer: function(player) {
		delete playerPortion[player.num];
		delete portionsRolling[player.num];
		delete barProportionRolling[player.num];
	},
	setUser: function(player) {
		user = player;
		centerOnPlayer(user, offset);
	},
	reset: reset,
	updateGrid: function(row, col, before, after) {
		//Keep track of areas
		if (before) playerPortion[before.num]--;
		if (after) playerPortion[after.num]++;
		//Queue animation
		if (before === after || !client.allowAnimation) return;
		animateGrid.set(row, col, {
			before: before,
			after: after,
			frame: 0
		});
	},
	paint: paintDoubleBuff,
	update: update
};