started adding passive tree to ingame

.gitignore

@@ -5,3 +5,4 @@ storage.db
 *.css
 !helpers/item-tooltip/styles.css
 !helpers/passives/**/*.css
+creds.js

helpers/passives/server/index.js

@@ -26,7 +26,7 @@ var mod = {
 
 		io.on('connection', this.listeners.onConnection.bind(this));
 
-		var port = process.env.PORT || 4000;
+		var port = process.env.PORT || 5000;
 		server.listen(port, function () {
 			var message = 'Server: Ready';
 			console.log(message);

src/client/ui/factory.js

@@ -49,7 +49,8 @@ define([
 				'leaderboard',
 				'reputation',
 				'mail',
-				'wardrobe'
+				'wardrobe',
+				'passives'
 			].forEach(function (u) {
 				this.build(u);
 			}, this);

src/client/ui/templates/passives/constants.js

@@ -0,0 +1,13 @@
+define([
+
+], function (
+
+) {
+	return {
+		lineWidth: 5,
+		blockSize: 20,
+		gridSize: 30,
+
+		scrollSpeed: 0.75
+	};
+});

src/client/ui/templates/passives/passives.js

@@ -0,0 +1,178 @@
+define([
+	'js/system/events',
+	'js/system/client',
+	'html!ui/templates/passives/template',
+	'css!ui/templates/passives/styles',
+	'ui/templates/passives/constants',
+	'ui/templates/passives/temp'
+], function (
+	events,
+	client,
+	tpl,
+	styles,
+	constants,
+	temp
+) {
+	return {
+		tpl: tpl,
+
+		modal: true,
+		centered: true,
+
+		canvas: null,
+		size: {},
+		ctx: null,
+
+		pos: {
+			x: 0,
+			y: 0
+		},
+
+		data: {
+			nodes: null,
+			links: null
+		},
+
+		postRender: function () {
+			var data = JSON.parse(temp.json);
+			this.data.nodes = data.nodes;
+			this.data.links = data.links;
+
+			//We need to be able to determine the size of elements
+			this.el.css({
+				visibility: 'hidden',
+				display: 'block'
+			});
+
+			this.canvas = this.find('.canvas')[0];
+			this.size.w = this.canvas.width = this.find('.bottom').width();
+			this.size.h = this.canvas.height = this.find('.bottom').height();
+			this.ctx = this.canvas.getContext('2d');
+
+			//Reset styles after determining size
+			this.el.css({
+				visibility: 'visible',
+				display: 'none'
+			});
+
+			this.ctx.lineWidth = constants.lineWidth;
+
+			$(this.canvas)
+				.on('contextmenu', function () {
+					return false;
+				});
+
+			this.onEvent('onKeyDown', this.onKeyDown.bind(this));
+
+			//Calculate midpoint
+			this.data.nodes.forEach(function (n) {
+				this.pos.x += n.pos.x;
+				this.pos.y += n.pos.y;
+			}, this);
+
+			this.pos.x = ~~(this.pos.x / this.data.nodes.length) * constants.gridSize;
+			this.pos.y = ~~(this.pos.y / this.data.nodes.length) * constants.gridSize;
+		},
+
+		renderNodes: function () {
+			this.renderers.clear.call(this);
+
+			var links = this.data.links;
+			var nodes = this.data.nodes;
+
+			links.forEach(function (l) {
+				var linked = (
+					nodes.find(n => (n.id == l.from.id)).selected &&
+					nodes.find(n => (n.id == l.to.id)).selected
+				);
+				this.renderers.line.call(this, l.from, l.to, linked);
+			}, this);
+
+			nodes.forEach(function (n) {
+				this.renderers.node.call(this, n, n.pos.x, n.pos.y);
+			}, this);
+		},
+
+		toggle: function (show) {
+			this.shown = !this.el.is(':visible');
+
+			if (this.shown) {
+				this.show();
+				this.renderNodes();
+			} else
+				this.hide();
+		},
+
+		onKeyDown: function (key) {
+			if (key == 'p')
+				this.toggle();
+		},
+
+		renderers: {
+			clear: function () {
+				var pos = this.oldPos || this.pos;
+
+				this.ctx.clearRect(0, 0, this.size.w, this.size.h);
+
+				delete this.oldPos;
+			},
+
+			node: function (node) {
+				var color = (node.color >= 0) ? (node.color + 1) : -1;
+				if ((!node.stats) || (Object.keys(node.stats).length == 0))
+					color = 0;
+
+				this.ctx.fillStyle = ([
+					'#69696e',
+					'#c0c3cf',
+					'#3fa7dd',
+					'#4ac441',
+					'#d43346',
+					'#a24eff'
+				])[color];
+				var size = ([
+					constants.blockSize,
+					constants.blockSize * 2,
+					constants.blockSize * 3
+				])[node.size];
+				var x = (node.pos.x * constants.gridSize) - ((size - constants.blockSize) / 2) - this.pos.x;
+				var y = (node.pos.y * constants.gridSize) - ((size - constants.blockSize) / 2) - this.pos.y;
+
+				this.ctx.fillRect(x, y, size, size);
+
+				this.ctx.strokeStyle = ([
+					'#69696e',
+					'#69696e',
+					'#42548d',
+					'#386646',
+					'#763b3b',
+					'#533399'
+				])[color];
+				this.ctx.strokeRect(x, y, size, size);
+
+				if (node.selected) {
+					this.ctx.strokeStyle = '#fafcfc';
+					this.ctx.strokeRect(x, y, size, size);
+				}
+			},
+
+			line: function (fromNode, toNode, linked) {
+				var ctx = this.ctx;
+				var halfSize = constants.blockSize / 2;
+
+				var fromX = (fromNode.pos.x * constants.gridSize) + halfSize - this.pos.x;
+				var fromY = (fromNode.pos.y * constants.gridSize) + halfSize - this.pos.y;
+
+				var toX = (toNode.pos.x * constants.gridSize) + halfSize - this.pos.x;
+				var toY = (toNode.pos.y * constants.gridSize) + halfSize - this.pos.y;
+
+				ctx.strokeStyle = linked ? '#fafcfc' : '#69696e';
+				ctx.beginPath();
+				ctx.moveTo(fromX, fromY);
+				ctx.lineTo(toX, toY);
+				ctx.closePath();
+				ctx.stroke();
+			}
+		}
+	}
+});

src/client/ui/templates/passives/styles.less

@@ -0,0 +1,27 @@
+@import "../../../css/ui.less";
+
+.uiPassives {
+	display: none;
+	z-index: 2;
+	border: 5px solid @blackB;
+	text-align: center;
+	height: 700px;
+	width: 900px;
+
+	> .heading {
+		color: @white;
+		width: 100%;
+		height: 36px;
+		background-color: @blackB;
+
+		.heading-text {
+			padding-top: 8px;
+			margin: auto;
+		}
+	}
+
+	.bottom {
+		height: calc(100% - 36px);
+		background-color: @blackC;
+	}
+}

src/client/ui/templates/passives/template.html

@@ -0,0 +1,8 @@
+<div class="uiPassives">
+	<div class="heading">
+		<div class="heading-text">passives</div>
+	</div>
+	<div class="bottom">
+		<canvas class="canvas"></canvas>
+	</div>
+</div>