clean client code

public/js/starbugs/assets.js

@@ -1,5 +1,5 @@
-function loadAssets() {
-	var sources = {
+Game.prototype.loadAssets = _ => {
+	let sources = {
 		images: {
 			ships: {
 				'01': {
@@ -19,11 +19,11 @@ function loadAssets() {
 		}
 	}
 
-	var result = {};
+	let result = {};
 
 	// Magical recursive magic.
 	(function r(o, t) {
-		for (var i in o) {
+		for (let i in o) {
 			if (typeof o[i] == 'string') {
 				t[i] = new Image();
 				t[i].src = o[i];

public/js/starbugs/consts.js

@@ -0,0 +1,9 @@
+//@20
+
+const b2Vec2 = Box2D.Common.Math.b2Vec2;
+const b2World = Box2D.Dynamics.b2World;
+const b2Body = Box2D.Dynamics.b2Body;
+const b2BodyDef = Box2D.Dynamics.b2BodyDef;
+const b2Fixture = Box2D.Dynamics.b2Fixture;
+const b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
+const b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;

public/js/starbugs/input.js

@@ -1,61 +1,55 @@
-function Input() {
+class Input {
+	constructor() {
 		this.mouse = {
 			x: 0,
 			y: 0,
 			held: {},
 			pressed: {}
 		};
+
 		this.keys = {
 			held: {},
 			pressed: {}
 		};
 
-	this.mouseMove = function (el) {
-		return function (event) {
+		document.addEventListener('mousemove', this.mouseMove.bind(this));
+		document.addEventListener('mousedown', this.mouseDown.bind(this));
+		document.addEventListener('mouseup', this.mouseUp.bind(this));
+		document.addEventListener('keydown', this.keyDown.bind(this));
+		document.addEventListener('keyup', this.keyUp.bind(this));
+	}
+
+	mouseMove() {
 		var rect = game.renderer.canvas.getBoundingClientRect();
-			el.mouse.x = event.clientX - rect.left;
-			el.mouse.y = event.clientY - rect.top;
-		}
+		this.mouse.x = event.clientX - rect.left;
+		this.mouse.y = event.clientY - rect.top;
 	};
 
-	this.mouseDown = function (el) {
-		return function (event) {
-			el.mouse.pressed[event.which] = true;
-			el.mouse.held[event.which] = true;
-		}
+	mouseDown() {
+		this.mouse.pressed[event.which] = true;
+		this.mouse.held[event.which] = true;
 	};
 
-	this.mouseUp = function (el) {
-		return function (event) {
-			el.mouse.held[event.which] = false;
-		}
+	mouseUp() {
+		this.mouse.held[event.which] = false;
 	}
 
-	this.keyDown = function (el) {
-		return function (event) {
-			if (!el.keys.held[event.which]) el.keys.pressed[event.which] = true;
-			el.keys.held[event.which] = true;
-		}
+	keyDown() {
+		if (!this.keys.held[event.which])
+			this.keys.pressed[event.which] = true;
+		this.keys.held[event.which] = true;
 	}
 
-	this.keyUp = function (el) {
-		return function (event) {
-			el.keys.held[event.which] = false;
-		}
+	keyUp() {
+		this.keys.held[event.which] = false;
 	}
 
-	document.addEventListener('mousemove', this.mouseMove(this));
-	document.addEventListener('mousedown', this.mouseDown(this));
-	document.addEventListener('mouseup', this.mouseUp(this));
-	document.addEventListener('keydown', this.keyDown(this));
-	document.addEventListener('keyup', this.keyUp(this));
-
-	this.mouseAnyPressed = function () {
+	mouseAnyPressed() {
 		var p = this.mouse.pressed;
 		return p[1] || p[2] || p[3];
 	}
 
-	this.clear = function () {
+	clear() {
 		for (var i in this.keys.pressed) this.keys.pressed[i] = false;
 		for (var i in this.mouse.pressed) this.mouse.pressed[i] = false;
 	};

public/js/starbugs/main.js

@@ -12,10 +12,9 @@ function init() {
 	game.net.connect();
 }
 
-function Game() {
-	var self = this;
-
-	this.assets = loadAssets();
+class Game {
+	constructor() {
+		this.assets = this.loadAssets();
 
 		this.connected = false;
 		this.state = 'connecting';
@@ -24,23 +23,22 @@ function Game() {
 		this.net = new Net();
 		this.world = new World();
 		this.renderer = new Renderer();
+	}
 
-	this.tick = function() {
-		self.renderer.render(self.state);
+	tick() {
+		this.renderer.render(this.state);
 
-		var ship = self.world ? self.world.playerShip : false;
+		var ship = this.world ? this.world.playerShip : false;
 
 		if(ship) {
-			ship.move[0] = self.input.keys.held[87] || false;
-			ship.move[1] = self.input.keys.held[65] || false;
-			ship.move[2] = self.input.keys.held[68] || false;
+			ship.move = [87, 65, 68].map(k => this.input.keys.held[k] || false);
 			ship.updateMove();
 		}
 
-		self.input.clear();
+		this.input.clear();
 
-		self.world.tick();
+		this.world.tick();
 
-		requestAnimationFrame(self.tick);
+		requestAnimationFrame(this.tick.bind(this));
 	}
 }

public/js/starbugs/net.js

@@ -1,7 +1,9 @@
-function Net() {
+class Net {
+	constructor() {
 		this.socket;
+	}
 
-	this.connect = function() {
+	connect() {
 		this.socket = io.connect('/');
 
 		this.socket.on('connect', function() {
@@ -22,12 +24,14 @@ function Net() {
 		this.socket.on('world', function(data) {
 			game.world.clear();
 			game.world.playerShipId = data.playerShipId;
+			game.world.bounds = data.bounds;
 			for (var i in data.bodies) {
 				game.world.add(data.bodies[i]);
 			}
 		});
 
 		this.socket.on('create', function(data) {
+			console.log(data.id);
 			game.world.add(data);
 		});
 
@@ -36,7 +40,7 @@ function Net() {
 		});
 	};
 
-	this.update = function(move) {
+	update(move) {
 		this.socket.emit('move', {
 			forward: move[0],
 			left: move[1],
@@ -44,7 +48,7 @@ function Net() {
 		});
 	}
 
-	this.send = function(msg, data) {
+	send(msg, data) {
 		this.socket.emit(msg, data);
 	}
 }

public/js/starbugs/render/asteroids.js

@@ -1,4 +1,4 @@
-function renderAsteroid(pallet, body) {
+Renderer.prototype.renderAsteroid = (pallet, body) => {
 	var pos = body.getPos();
 	var x = pos.x * SCALE;
 	var y = pos.y * SCALE;
@@ -16,7 +16,9 @@ function renderAsteroid(pallet, body) {
 	}
 	context.closePath();
 	context.strokeStyle = '#fff';
+	context.fillStyle = '#090909';
+	context.fill();
 	context.stroke();
 
 	pallet.restore();
-}
+};

public/js/starbugs/render/render.js

@@ -1,23 +1,30 @@
-function Renderer() {
-	var self = this;
+//@10
 
-	var s = SCALE;
-
-	var pallet = new Pallet();
-	var canvas = pallet.canvas;
-	var context = pallet.context;
+class Renderer {
+	constructor() {
+		let pallet = new Pallet();
+		let canvas = pallet.canvas;
+		let context = pallet.context;
 
 		this.pallet = pallet;
 		this.canvas = canvas;
 		this.context = context;
 
-	this.render = function(state) {
-		var ship = game.world.playerShip;
-		var cpos = game.world.getCenter();
-		var cx = -cpos.x;
-		var cy = -cpos.y;
-		var cw = canvas.width;
-		var ch = canvas.height;
+		pallet.fillScreen();
+		window.addEventListener('resize', pallet.fillScreen);
+	}
+
+	render(state) {
+		let canvas = this.canvas;
+		let context = this.context;
+		let pallet = this.pallet;
+
+		let ship = game.world.playerShip;
+		let cpos = game.world.getCenter();
+		let cx = -cpos.x;
+		let cy = -cpos.y;
+		let cw = canvas.width;
+		let ch = canvas.height;
 
 		if (state == 'connecting' || state == 'disconnected') {
 			pallet.clear();
@@ -40,9 +47,14 @@ function Renderer() {
 		// Grid
 		var gridx = cx % 50;
 		var gridy = cy % 50;
-		for (var x = gridx - cw / 2 - 50; x < cx + cw + 50; x += 50) {
-			for (var y = gridy - ch / 2 - 50; y < cy + ch + 50; y += 50) {
-				pallet.outline('#0a0a0a', x, y, 51, 51, 1);
+		for (var x = gridx - cw / 2 - 50; x < cw + 50; x += 50) {
+			for (var y = gridy - ch / 2 - 50; y < ch + 50; y += 50) {
+				var wx = (-cx + x) / SCALE;
+				var wy = (-cy + y) / SCALE;
+				var b = game.world.bounds;
+				if (wx > b.right || wx < b.left || wy > b.bottom || wy < b.top)
+				pallet.outline('#141424', x, y, 51, 51, 1);
+				else pallet.outline('#0a0a0a', x, y, 51, 51, 1);
 			}
 		}
 
@@ -50,9 +62,9 @@ function Renderer() {
 			var body = game.world.bodies[id];
 
 			if (body.bodyType == 'ship') {
-				renderShip(pallet, body);
+				this.renderShip(pallet, body);
 			} else if (body.bodyType == 'asteroid') {
-				renderAsteroid(pallet, body);
+				this.renderAsteroid(pallet, body);
 			} else {
 				// Render structures, projectiles etc..
 			}
@@ -61,9 +73,7 @@ function Renderer() {
 		pallet.restore();
 	}
 
-	this.renderGrid = function() {
-	}
+	renderGrid() {
 
-	pallet.fillScreen();
-	window.addEventListener('resize', pallet.fillScreen);
+	}
 }

public/js/starbugs/render/ships.js

@@ -1,30 +1,29 @@
-function renderShip(pallet, ship) {
-	var img = game.assets.images.ships[ship.hull].hull;
-	var teama = game.assets.images.ships[ship.hull].teama;
-	var teamb = game.assets.images.ships[ship.hull].teamb;
-	var thr0 = game.assets.images.ships[ship.hull].thrust0;
-	var thr5 = game.assets.images.ships[ship.hull].thrust5;
-	var thr8 = game.assets.images.ships[ship.hull].thrust8;
-	var turr = game.assets.images.turrets['01'].small;
+Renderer.prototype.renderShip = (pallet, ship) => {
+	let img = game.assets.images.ships[ship.hull].hull;
+	let teama = game.assets.images.ships[ship.hull].teama;
+	let teamb = game.assets.images.ships[ship.hull].teamb;
+	let thr0 = game.assets.images.ships[ship.hull].thrust0;
+	let thr5 = game.assets.images.ships[ship.hull].thrust5;
+	let thr8 = game.assets.images.ships[ship.hull].thrust8;
+	let turr = game.assets.images.turrets['01'].small;
 	//pallet.view(ship.x, ship.y, false, ship.r);
-	var pos = ship.getPos();
-	var x = pos.x * SCALE;
-	var y = pos.y * SCALE;
-	var vx = -game.world.getCenter().x;
-	var vy = -game.world.getCenter().y;
+	let pos = ship.getPos();
+	let x = pos.x * SCALE;
+	let y = pos.y * SCALE;
+	let vx = -game.world.getCenter().x;
+	let vy = -game.world.getCenter().y;
 
 	pallet.view(x + vx, y + vy, false, pos.r);
 
-	var ts = ship.size / 2;
-	for (var i = 0; i < ship.mounts.length; i++) {
+	let ts = ship.size / 2;
+	for (let i = 0; i < ship.mounts.length; i++) {
 		if (ship.turrets[i]) {
 			pallet.image(turr, ship.mounts[i][0] - ts, ship.mounts[i][1] - ts, 0);
 		}
 	}
 	pallet.image(ship.team == 'a' ? teama : teamb, 0, 0, 0);
-	pallet.image(ship.move[0] ? thr8 : thr0, 0, 0, 0);
 	pallet.image(img, 0, 0, 0);
-	pallet.image(ship.move[0] ? thr8 : thr0, 0, 0, 0);
+	pallet.image(ship.thrust.forward ? thr8 : thr0, 0, 0, 0);
 
 	pallet.restore();
 

public/js/starbugs/world/asteroid.js

@@ -1,36 +1,10 @@
-function Asteroid(data) {
-	this.id = data.id;
-	this.x = data.delta[0];
-	this.y = data.delta[1];
-	this.r = data.delta[2];
+class Asteroid extends Body {
+	constructor(data) {
+		super(data)
 		this.bodyType = 'asteroid';
-	this.frame = data.frame;
-	this.updated = false;
-
-	var b2Vec2 = Box2D.Common.Math.b2Vec2;
-	var s = SCALE;
-
-	this.getPos = function() {
-		var pos = this.b2body.GetPosition();
-		var angle = this.b2body.GetAngle();
-		return {
-			x: pos.x,
-			y: pos.y,
-			r: angle
-		};
-	};
-
-	this.update = function(data) {
-		this.x = data[0];
-		this.y = data[1];
-		this.xvel = data[2]
-		this.yvel = data[3];
-		this.r = data[4];
-		this.rvel = data[5];
-		this.updated = 10;
-	};
-
-	this.tick = function() {
-
-	};
+	}
+
+	tick() {
+
+	}
 }

public/js/starbugs/world/body.js

@@ -0,0 +1,57 @@
+//@10
+
+class Body {
+	constructor(data) {
+		this.x = data.delta[0];
+		this.y = data.delta[1];
+		this.xvel = data.delta[2];
+		this.yvel = data.delta[3];
+		this.r = data.delta[4];
+		this.rvel = data.delta[5];
+
+		this.id = data.id
+		this.frame = data.frame;
+		this.b2body = false;
+		this.updated = 0;
+
+		this.com = {
+			x: 0,
+			y: 0
+		};
+	}
+
+	getPos() {
+		var pos = this.b2body.GetPosition();
+		var angle = this.b2body.GetAngle();
+		return {
+			x: pos.x,
+			y: pos.y,
+			r: angle
+		};
+	}
+
+	applyForce(x, y) {
+		var b = this.b2body;
+		b.ApplyForce(new b2Vec2(x, y), b.GetWorldCenter());
+	}
+
+	applyTorque(f) {
+		this.b2body.ApplyTorque(f);
+	}
+
+	update(data) {
+		this.x = data[0];
+		this.y = data[1];
+		this.xvel = data[2]
+		this.yvel = data[3];
+		this.r = data[4];
+		this.rvel = data[5];
+		this.updated = 10;
+
+		this.updateType(data);
+	}
+
+	updateType() {
+
+	}
+}

public/js/starbugs/world/physics.js

@@ -1,11 +1,5 @@
-function Physics() {
-	var b2Vec2 = Box2D.Common.Math.b2Vec2;
-	var b2World = Box2D.Dynamics.b2World;
-	var b2Body = Box2D.Dynamics.b2Body;
-	var b2BodyDef = Box2D.Dynamics.b2BodyDef;
-	var b2Fixture = Box2D.Dynamics.b2Fixture;
-	var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
-	var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
+class Physics {
+	constructor() {
 
 		this.world = new b2World(new b2Vec2(0, 0));
 		this.toRemove = [];
@@ -18,10 +12,11 @@ function Physics() {
 		debugDraw.SetLineThickness(1.0);
 		debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
 		this.world.SetDebugDraw(debugDraw);
+	}
 
-	this.createBody = function(body) {
-		var s = SCALE;
-		var bodyDef = new b2BodyDef();
+	createBody(body) {
+		let s = SCALE;
+		let bodyDef = new b2BodyDef();
 		bodyDef.userData = body;
 		bodyDef.position = new b2Vec2(body.x || 0, body.y || 0);
 		bodyDef.fixedRotation = false;
@@ -54,7 +49,7 @@ function Physics() {
 
 		body.com = b2body.GetLocalCenter();
 		if (body.bodyType == 'ship') {
-			console.log(body.getPos());
+			//console.log(body.getPos());
 			//console.log(b2body.GetLocalCenter());
 			//console.log(body);
 			//console.log(b2body.GetMass());
@@ -62,11 +57,11 @@ function Physics() {
 		}
 	}
 
-	this.removeBody = function(body) {
+	removeBody(body) {
 		this.toRemove.push(body.b2body);
 	}
 
-	this.step = function() {
+	step() {
 		this.world.Step(1, 5, 1 / 60);
 		this.world.ClearForces();
 		//this.world.DrawDebugData();

public/js/starbugs/world/player.js

@@ -1,5 +1,7 @@
-function Player(own, name, ship) {
+class Player {
+	constructor(name, team, ship) {
 		this.name = name;
+		this.team = team;
 		this.ship = ship;
-	this.own = own;
+	}
 }

public/js/starbugs/world/ship.js

@@ -1,8 +1,7 @@
-function Ship(data) {
-	this.id = data.id;
-	this.x = data.delta[0];
-	this.y = data.delta[1];
-	this.r = data.delta[2];
+class Ship extends Body {
+	constructor(data) {
+		super(data);
+		this.player = new Player(data.name, data.team, this);
 		this.team = data.team;
 		this.name = data.name;
 		this.hull = '01';
@@ -11,65 +10,29 @@ function Ship(data) {
 		this.power = data.power;
 		this.mounts = data.mounts;
 		this.turrets = data.turrets;
-	this.frame = data.frame;
 		this.size = {
 			'small': 8,
 			'medium': 16,
 			'large': 24
 		}[data.size];
 		this.lastMove = [];
-	this.b2body = false;
 		this.bodyType = 'ship';
-	this.com = {
-		x: 0,
-		y: 0
-	};
-
-	var b2Vec2 = Box2D.Common.Math.b2Vec2;
-	var s = SCALE;
-
-	this.getPos = function() {
-		var pos = this.b2body.GetPosition();
-		var angle = this.b2body.GetAngle();
-		return {
-			x: pos.x,
-			y: pos.y,
-			r: angle
 	}
-	};
 
-	this.update = function (data) {
-		this.x = data[0];
-		this.y = data[1];
-		this.xvel = data[2]
-		this.yvel = data[3];
-		this.r = data[4];
-		this.rvel = data[5];
-		this.updated = 10;
-		this.thrust = {
-			forward: data[6],
-			left: data[7],
-			right: data[8]
-		}
-	};
-
-	this.updateMove = function() {
+	updateMove() {
 		if (JSON.stringify(this.move) != JSON.stringify(this.lastMove) || true) {
 			game.net.update(this.move);
 			this.lastMove = Array.apply(0, this.move); // Bloody Javascript.
 		}
-	};
+	}
 
-	this.applyForce = function(x, y) {
-		var b = this.b2body;
-		b.ApplyForce(new b2Vec2(x, y), b.GetWorldCenter());
-	};
+	updateType(data) {
+		this.thrust = {
+			forward: data[6]
+		}
+	}
 
-	this.applyTorque = function(f) {
-		this.b2body.ApplyTorque(f);
-	};
-
-	this.tick = function() {
+	tick() {
 		if (this.move[0]) {
 			var power = this.power.forward;
 			var x = Math.cos(this.getPos().r) * power;
@@ -84,5 +47,5 @@ function Ship(data) {
 		if (this.move[2]) {
 			this.applyTorque(this.power.rotation);
 		}
-	};
+	}
 }

public/js/starbugs/world/world.js

@@ -1,22 +1,27 @@
 var SCALE = 32;
 
-function World() {
+class World {
+	constructor() {
 		this.bodies = {};
 		this.playerShip = false;
 		this.playerShipId = false;
 		this.physics = new Physics();
 
-	var fr = false;
+		this.bounds = {
+			left: -50,
+			right: 50,
+			top: -50,
+			bottom: 50
+		}
+	}
 
-	this.getCenter = function() {
+	getCenter() {
 		if (!this.playerShip) return { x: 0, y: 0 };
 
 		var x = this.playerShip.getPos().x * SCALE;
 		var y = this.playerShip.getPos().y * SCALE;
 		var comx = this.playerShip.com.x * SCALE;
 		var comy = this.playerShip.com.y * SCALE;
-		comx = 0;
-		comy = 0;
 		var r = this.playerShip.getPos().r;
 		var d = Math.sqrt(comx * comx + comy * comy);
 		var a = Math.atan2(comy, comx);
@@ -27,33 +32,33 @@ function World() {
 		return { x: x, y: y };
 	};
 
-	this.add = function(data) {
+	add(data) {
 		var body;
 		if (data.type == 'asteroid') body = new Asteroid(data);
 		if (data.type == 'ship') body = new Ship(data);
 		if (data.type == 'structure') body = new Structure(data);
 
-		if(data.type == 'ship') console.log(body);
+		//if(data.type == 'ship') console.log(body);
 
 		this.bodies[body.id] = body;
-		if(data.type == 'ship') console.log(this.bodies);
+		//if(data.type == 'ship') console.log(this.bodies);
 		this.physics.createBody(body);
 	};
 
-	this.remove = function(id) {
-		console.log(id);
+	remove(id) {
+		//console.log(id);
 		this.physics.removeBody(this.bodies[id]);
 		delete this.bodies[id];
 	};
 
-	this.clear = function() {
+	clear() {
 		for (var i in this.bodies) {
 			this.remove(i);
 		}
 		this.playerShip = false;
 	};
 
-	this.update = function(data) {
+	update(data) {
 		this.playerShip = this.bodies[this.playerShipId];
 
 		for (var id in data) {
@@ -69,7 +74,7 @@ function World() {
 		}
 	};
 
-	this.tick = function() {
+	tick() {
 		this.physics.step();
 
 		for (var i in this.bodies) {

server/game/room/index.js

@@ -66,6 +66,7 @@ class Room {
 	sendWorld(player) {
 		let data = {
 			playerShipId: player.ship.id,
+			bounds: this.world.bounds,
 			bodies: Array.from(this.world.bodies).map(b => b.packFull())
 		};
 

server/game/room/world/body.js

@@ -33,10 +33,10 @@ class Body {
 		let pos = this.b2body.GetPosition();
 		let bounds = this.world.bounds;
 
-		if(pos.x < bounds.left) this.applyForce(0.003, 0);
-		if(pos.x > bounds.right) this.applyForce(-0.003, 0);
-		if(pos.y < bounds.top) this.applyForce(0, 0.003);
-		if(pos.y > bounds.bottom) this.applyForce(-0, -0.003);
+		if(pos.x < bounds.left) this.applyForce(0.03, 0);
+		if(pos.x > bounds.right) this.applyForce(-0.03, 0);
+		if(pos.y < bounds.top) this.applyForce(0, 0.03);
+		if(pos.y > bounds.bottom) this.applyForce(-0, -0.03);
 	}
 
 	packDelta() {

server/game/room/world/physics.js

@@ -66,7 +66,6 @@ class Physics {
 
 	step() {
 		this.world.Step(1, 5, 1 / 60);
-
 		for (var i = 0; i < this.toRemove.length; i++) {
 			this.world.DestroyBody(this.toRemove[i].b2body);
 		}

server/web/minify.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const colors = require('colors');
 const fs = require('fs');
 const path = require('path');
@@ -9,13 +11,25 @@ function minifyJs(callback) {
 
 	var dir = path.join(__dirname, '../../public/js/starbugs');
 	var cache = '';
+	var scripts = [];
+
+	var getPriority = (file) => {
+		if (file.slice(0, 3) == '//@') {
+			let a = +file.split('\n')[0].slice(3);
+			return a;
+		} else return 0;
+	}
 
 	recursive(dir, function(err, files) {
 		for(var i in files) {
-			cache += fs.readFileSync(files[i], 'utf8').toString();
+			scripts.push(fs.readFileSync(files[i], 'utf8').toString());
 		}
 
-		var comment = '';
+		scripts.sort((a, b) => getPriority(b) - getPriority(a));
+
+		let comment = '';
+
+		cache = scripts.join('');
 
 		// Remove to re-enable minifying.
 		callback(cache); return;