add weapon selection gui

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

@@ -5,6 +5,7 @@ class GUI {
 		this.guiElement = document.getElementById('gui');
 
 		this.chat = new this.Chat(this);
+		this.weapons = new this.Weapons(this);
 	}
 
 	createElement(parent, type, data) {

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

@@ -8,10 +8,29 @@ GUI.prototype.Weapons = class {
 	}
 
 	update() {
-		
+		let ship = game.world.playerShip;
+		if (!ship) return;
+
+		this.element.innerHTML = '';
+		ship.fixtures.forEach((fixture, i) => {
+			if (!fixture.type) return;
+			let div = document.createElement('div');
+			div.classList.add('weapon');
+			if (ship.activeFixture == i)
+				div.classList.add('active');
+			let img = `url(/img/turrets/${fixture.type}/normal.png)`;
+			div.style.backgroundImage = img;
+			this.element.appendChild(div);
+		});
 	}
 
 	switchWeapon(slot) {
 		this.currentWeapon = 0;
+		let el = this.element.querySelector('.weapon.active');
+		if (el)
+			el.classList.remove('active');
+		let weapons = this.element.querySelectorAll('.weapon');
+		if (weapons[slot])
+			weapons[slot].classList.add('active');
 	}
 }

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

@@ -14,6 +14,7 @@ class Ship extends Body {
 		}[data.size];
 		this.lastMove = [];
 		this.bodyType = 'ship';
+		this.activeFixture = 0;
 	}
 
 	updateType(data) {

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

@@ -57,6 +57,7 @@ class World {
 	setPlayerShip(id) {
 		this.playerShip = this.bodies[id];
 		game.player.ship = this.playerShip;
+		game.gui.weapons.update();
 	}
 
 	tick() {

public/stylus/styles.styl

@@ -1,6 +1,6 @@
 @font-face
-    font-family 'FreePixel'
+	font-family 'FreePixel'
-    src url('/css/FreePixel.ttf')
+	src url('/css/FreePixel.ttf')
 
 @font-face
 	font-family 'PixelArial'
@@ -20,9 +20,9 @@ body
 	font-size 8px
 
 #gui
-    color #fff
+	color #fff
 	.container
-    	position fixed
+		position fixed
 	#chat
 		bottom 0
 		left 0
@@ -58,3 +58,15 @@ body
 		bottom 0
 		left 50%
 		transform translate(-50%, 0)
+		> .weapon
+			background-position center
+			background-size 64px
+			background-color rgba(0, 0, 0, 0.5)
+			float: left
+			width: 48px
+			height: 48px
+			&.active
+				background-color rgba(15, 15, 15, 0.3)
+				width 44px
+				height 44px
+				border 2px solid rgba(30, 30, 30, 0.2)