add grappling hook sprite

public/static/js/wingbase/assets.js

@@ -16,6 +16,9 @@ Game.prototype.loadAssets = _ => {
 					small: 'img/turrets/01/normal.png'
 				}
 			},
+			projectiles: {
+				'02': 'img/projectiles/02.png'
+			},
 			backgrounds: {
 				'01': 'img/space.jpg'
 			}

public/static/js/wingbase/gui/gui.js

@@ -34,6 +34,9 @@ class GUI {
 	}
 
 	set visible(visible) {
-		this.guiElement.style.display = visible ? 'block' : 'hidden';
+		if (visible)
+			this.guiElement.classList.remove('hidden');
+		else
+			this.guiElement.classList.add('hidden');
 	}
 }

public/static/js/wingbase/main.js

@@ -62,9 +62,9 @@ class Game {
 		this._state = state;
 
 		if (state != 'connected') {
-			this.gui.visible = true;
-		} else {
 			this.gui.visible = false;
+		} else {
+			this.gui.visible = true;
 		}
 	}
 }

public/static/js/wingbase/render/body.js

@@ -6,7 +6,7 @@ class BodyRenderer {
 	}
 
 	render(body) {
-		let pos = body.getPos();
+		let pos = body.pos;
 		let x = pos.x * SCALE;
 		let y = pos.y * SCALE;
 		let vx = -game.world.center.x;
@@ -28,6 +28,8 @@ class BodyRenderer {
 			this.renderShip(body);
 		} else if (body.bodyType == 'asteroid') {
 			this.renderAsteroid(body);
+		} else if (body.bodyClass == 'projectile') {
+			this.renderProjectile(body);
 		} else {
 			this.renderBody(body);
 		}
@@ -110,4 +112,16 @@ class BodyRenderer {
 		this.pallet.opacity(0.3);
 		this.pallet.text(ship.name, x, y, '#fff', 'FreePixel', 16, 'center', 'bottom');
 	}
+
+	renderProjectile(body) {
+		if (body.bodyType != 'grapple') {
+			this.renderBody(body);
+			return;
+		}
+
+		let img = game.assets.images.projectiles['02'];
+		let pos = body.pos;
+		this.pallet.image(img, -32, -32, 0);
+		this.pallet.restore();
+	}
 };

public/static/js/wingbase/render/render.js

@@ -38,13 +38,17 @@ class Renderer {
 
 		this.context.save();
 		
+		this.context.beginPath();
+		this.context.rect(0, 0, cw, ch);
+		this.context.clip();
+
 		this.pallet.view(cw / 2, ch / 2, 1, 0);
 
 		this.pallet.opacity(0.3);
 		let img = game.assets.images.backgrounds['01'];
 		let bgx = -img.width / 2 - center.x / 20;
 		let bgy = -img.height / 2 - center.y / 20;
-		this.pallet.image(img, bgx, bgy);
+		this.pallet.image(img, bgx, bgy, 0, img.width * 1.5, img.height * 1.5);
 		this.pallet.opacity(1);
 
 		this.renderGrid();

public/static/js/wingbase/world/body.js

@@ -10,6 +10,8 @@ class Body {
 		this.fixtures = data.fixtures;
 		this.b2body = false;
 		this.updated = 0;
+		this.bodyClass = data.class;
+		this.bodyType = data.type;
 
 		this.update(data.delta.slice(1));
 

public/static/js/wingbase/world/ship.js

@@ -13,7 +13,6 @@ class Ship extends Body {
 			'large': 24
 		}[data.size];
 		this.lastMove = [];
-		this.bodyType = 'ship';
 		this.activeFixture = 0;
 	}
 

public/stylus/styles.styl

@@ -21,6 +21,8 @@ body
 
 #gui
 	color #fff
+	&.hidden *
+		display: none
 	.container
 		position fixed
 	#chat

server/game/room/world/body/body.js

@@ -116,6 +116,7 @@ class Body {
 	packFull() {
 		let packet = {
 			type: this.type,
+			class: this.class,
 			id: this.id,
 			frame: this.frame,
 			fixtures: this.mounts.map(m => m.packFull()),