add start of client rendering

public/js/starbugs/main.js

@@ -2,8 +2,28 @@
 
 window.addEventListener('load', init);
 
-var socket;
+var game;
 
 function init() {
-	socket = io.connect('http://localhost:8080');
+	game = new Game();
+
+	game.tick();
+
+	game.net.connect();
+}
+
+function Game() {
+	var self = this;
+
+	this.connected = false;
+	this.state = 'connecting';
+
+	this.net = new Net();
+	this.renderer = new Renderer();
+
+	this.tick = function() {
+		self.renderer.render(self.state);
+
+		requestAnimationFrame(self.tick);
+	}
 }

public/js/starbugs/net.js

@@ -0,0 +1,17 @@
+function Net() {
+	this.socket;
+
+	this.connect = function() {
+		this.socket = io.connect('http://localhost:8080');
+
+		this.socket.on('connect', function() {
+			game.connected = true;
+			game.state = 'connected';
+		});
+
+		this.socket.on('disconnect', function() {
+			game.connected = false;
+			game.state = 'disconnected';
+		});
+	};
+}

public/js/starbugs/render/render.js

@@ -0,0 +1,24 @@
+function Renderer() {
+	var self = this;
+
+	var canvas = document.getElementsByTagName('canvas')[0];
+	var context = canvas.getContext('2d');
+	var pallet = new Pallet();
+
+	this.render = function(state) {
+		if (state == 'connecting' || state == 'disconnected') {
+			pallet.clear();
+			pallet.fill('#111');
+			var str = state == 'connecting' ? 'Connecting' : 'Shit\'s ' +
+			'diconnected, yo!';
+			pallet.text(str, canvas.width / 2, canvas.height / 2, '#fff', 'FreePixel', 16, 'center', 'middle');
+			return;
+		}
+
+		pallet.clear();
+		pallet.fill('#000');
+	}
+
+	pallet.fillScreen();
+	window.addEventListener('resize', pallet.fillScreen);
+}

public/js/starbugs/world/player.js

@@ -0,0 +1,5 @@
+function Player(own, name, ship) {
+	this.name = name;
+	this.ship = ship;
+	this.own = own;
+}