Why I'm not a front-end developer.

game.js

var intervalID = -1,
  frameNumber = 0;
var QueueNewFrame = function () {
	frameNumber++;
	if(frameNumber > 60) frameNumber = 0;
    if (window.requestAnimationFrame)
        window.requestAnimationFrame(renderLoop);
    else if (window.msRequestAnimationFrame)
        window.msRequestAnimationFrame(renderLoop);
    else if (window.webkitRequestAnimationFrame)
        window.webkitRequestAnimationFrame(renderLoop);
    else if (window.mozRequestAnimationFrame)
        window.mozRequestAnimationFrame(renderLoop);
    else if (window.oRequestAnimationFrame)
        window.oRequestAnimationFrame(renderLoop);
    else {
        QueueNewFrame = function () {
        };
        intervalID = window.setInterval(renderLoop, 16.7);
    }
};

var Game = {
	renderFrame: function() {
		context.drawSvg('/img/ship.svg',15,15,canvas.width - 30, canvas.height - 30);
	},
};

var canvas = {
	width: $("#gameView").attr('width'),
	height: $("#gameView").attr('height')
};

var lobbymates = [],
	lobbySize = 0,
	lobbyErrorMargin = 0,
	queuedPlayerCount = 0;

var context = $("#gameView")[0].getContext('2d');

var gameState = 'splash',
	showFPS = false,
	fps = 0,
	now,
	lastUpdate = Date.now();

var views = {
	searching: function() {
		var	searchingString = frameNumber < 30 ? "Searching for game..." : "",
			textDimensions = context.measureText(searchingString);
		context.clearRect(0,0,canvas.width,canvas.height);
		context.fillStyle = "#FFFFFF";
		context.font = "16pt Arial";
		context.fillText(searchingString,(canvas.width / 2) - (textDimensions.width / 2),100);
	},
	splash: function() {
		// don't do anything, the div does it at the moment (replace with a proper splash screen later)
	},
	game: function() {
		context.fillStyle = "#FFFFFF";
		context.font = "16pt Arial";
		context.fillText("Game found!",(canvas.width / 2) - (context.measureText("Game found!").width / 2),canvas.height/2);
		setTimeout(function() {
			gameState = 'game_real';
		},1500);
	},
	game_real: function() {
		Game.renderFrame();
	},
	lobby: function() {
		context.fillStyle = "#FFFFFF";
		context.font = "14pt Arial";
		for(var i = 0; i < lobbySize; i++) {
			var nextName = (i < lobbymates.length ?
							lobbymates[i].name + ' [' + lobbymates[i].rank + ']' :
							"Waiting for player");
			context.fillText(nextName,canvas.width - (15 + context.measureText(nextName).width), (i*16) + 32);
		}
		context.fillText("Searching within " + lobbyErrorMargin + " rank points of average lobby rank",15,29);
		context.fillText("Players in queue: " + queuedPlayerCount,15,canvas.height-15);
	}
}

function renderLoop() {
	context.clearRect(0,0,canvas.width,canvas.height);
	views[gameState]();
	if(showFPS) {
		context.font = "16pt Arial";
		context.fillStyle = "#00FFFF";
		context.fillText("FPS: " + Math.floor(fps).toString(),0,16);
	}
	var thisFrameFPS = 1000 / ((now = Date.now()) - lastUpdate);
	fps += (thisFrameFPS - fps) / ramper();
	lastUpdate = now;
	QueueNewFrame();
};

var ramp = 1, target = 50;
var ramper = function() {
	if(ramp < target) {
		ramp += ramp/2;
	}
	return ramp;
}

$(function() {
	var socket = io.connect('http://' + window.location.host);
	$("#StartButton").on('click',function() {
		socket.emit('findGame');
		gameState = 'searching';
		$("#splash").hide();
		$("#gameView").show();
		$("#gameView").css({display:"block"});
		QueueNewFrame();
	});
	socket.on('lobby join',function(lobbyInfo) {
		gameState = 'lobby';
		lobbymates = lobbyInfo.players;
		lobbySize = lobbyInfo.size;
	});
	socket.on('lobby player joined',function(playerInfo) {
		lobbymates.push(playerInfo);
	});
	socket.on('lobby create',function(lobbyInfo) {
		gameState = 'lobby';
		lobbymates = lobbyInfo.players;
		lobbySize = lobbyInfo.size;
	});
	socket.on('lobby player left',function(playerInfo) {
		lobbymates.splice(lobbymates.indexOf(playerInfo),1);
	});
	socket.on('lobby margin update',function(newMargin) {
		lobbyErrorMargin = newMargin;
	});
	socket.on('queue count',function(count) {
		queuedPlayerCount = count;
	});
	socket.on('game joined',function() {
		gameState = 'game';
	});
	$("body").on('keypress',function(event) {
		console.log('key pressed');
		if(event.which == 102) {
			showFPS = !showFPS;
		}
	})
});