pwning features

helpers/passives/client/js/constants.js

@@ -12,7 +12,7 @@ define([
 		defaultAngleInc: Math.PI / 8,
 		gridSize: 30,
 
-		scrollSpeed: 0.5,
+		scrollSpeed: 0.75,
 
 		stats: {
 			vit: 'vitality',

helpers/passives/client/js/generator.js

@@ -63,8 +63,17 @@ define([
 		},
 
 		actions: {
+			reset: function () {
+				this.nodes = [];
+				this.links = [];
+			},
+
 			load: function (data) {
 				this.nodes = data.nodes;
+				this.nodes.forEach(function (n) {
+					if ((n.group) && (!n.group.push))
+						n.group = [n.group];
+				});
 
 				this.links = data.links.map(function (l) {
 					l.from = this.nodes.find(n => (n.id == l.from.id));
@@ -86,7 +95,7 @@ define([
 						(!this.nodes.some(n => ((n.selected) && (n == options.node))))
 					) &&
 					(
-						(!input.isKeyDown('ctrl')) ||
+						(!input.isKeyDown('shift')) ||
 						(options.force)
 					)
 				)
@@ -108,12 +117,16 @@ define([
 					x: options.x,
 					y: options.y
 				}));
+
+				this.callAction('selectNode');
 			},
 
 			connectNode: function (options) {
 				var node = options.node;
-				if (!node)
+				if (!node) {
+					this.callAction('selectNode');
 					return true;
+				}
 
 				var singleSelected = this.getSelected(true);
 

helpers/passives/client/js/input.js

@@ -147,8 +147,8 @@ define([
 					if ((!el.hasClass('canvas')) || (el.hasClass('blocking')))
 						return;
 
-					var x = ~~((e.offsetX + renderer.pos.x) / constants.gridSize);
-					var y = ~~((e.offsetY + renderer.pos.y) / constants.gridSize);
+					var x = ~~((renderer.pos.x + (e.offsetX / renderer.currentZoom)) / constants.gridSize);
+					var y = ~~((renderer.pos.y + (e.offsetY / renderer.currentZoom)) / constants.gridSize);
 
 					this.mouse.x = x;
 					this.mouse.y = y;

helpers/passives/client/js/main.js

@@ -27,6 +27,8 @@ define([
 
 		events: {
 			onConnected: function () {
+				uiFactory.init();
+
 				generator.init();
 				renderer.init();
 				input.init();
@@ -37,6 +39,8 @@ define([
 				events.on('onMouseWheel', this.events.onMouseWheel.bind(this));
 				events.on('onKeyDown', this.events.onKeyDown.bind(this));
 
+				$(window).on('focus', this.events.onFocus.bind(this));
+
 				uiFactory.build('menu');
 				uiFactory.build('groups');
 				uiFactory.build('nodeInfo');
@@ -90,19 +94,28 @@ define([
 			},
 
 			onMouseWheel: function (e) {
+				var delta = (e.delta > 0) ? 1 : 0;
+
 				var action = ([
 					'resizeNode',
 					'recolorNode'
-				])[(e.delta > 0) ? 1 : 0];
+				])[delta];
 				if (!action)
 					return;
 
-				generator.callAction(action, {});
+				if (!generator.callAction(action, {}))
+					renderer.zoom(delta);
 
 				renderer.makeDirty();
 			},
 
 			onKeyDown: function (key) {
+				if (key == 'z') {
+					renderer.zoom(0, 1);
+					renderer.makeDirty();
+					return;
+				}
+
 				var action = ({
 					d: 'deleteNode'
 				})[key];
@@ -111,6 +124,10 @@ define([
 
 				generator.callAction(action, {});
 
+				renderer.makeDirty();
+			},
+
+			onFocus: function () {
 				renderer.makeDirty();
 			}
 		}

helpers/passives/client/js/renderer.js

@@ -9,8 +9,11 @@ define([
 		canvas: null,
 		ctx: null,
 
+		areaSelectOrigin: null,
 		panOrigin: null,
 
+		currentZoom: 1,
+
 		screen: {
 			w: 0,
 			h: 0
@@ -46,6 +49,7 @@ define([
 			events.on('onMouseMove', this.events.onMouseMove.bind(this));
 			events.on('onStartAreaSelect', this.events.onStartAreaSelect.bind(this));
 			events.on('onEndAreaSelect', this.events.onEndAreaSelect.bind(this));
+			events.on('onSelectGroup', this.events.onSelectGroup.bind(this));
 		},
 
 		center: function (node) {
@@ -93,6 +97,29 @@ define([
 			this.renderers.grid.call(this);
 
 			this.renderNodes(nodes, links);
+
+			if (this.areaSelectOrigin)
+				this.renderers.selectArea.call(this);
+		},
+
+		zoom: function (delta, zoom) {
+			delta = delta ? -1 : 1;
+
+			this.renderers.clear.call(this);
+			this.ctx.restore();
+
+			var newZoom = zoom || (this.currentZoom + (delta * 0.2));
+			this.currentZoom = newZoom;
+			if (this.currentZoom < 0.4)
+				this.currentZoom = 0.4;
+			else if (this.currentZoom > 3)
+				this.currentZoom = 3;
+
+			this.screen.w = $('body').width() / this.currentZoom;
+			this.screen.h = $('body').height() / this.currentZoom;
+
+			this.ctx.save();
+			this.ctx.scale(this.currentZoom, this.currentZoom);
 		},
 
 		renderers: {
@@ -104,6 +131,25 @@ define([
 				delete this.oldPos;
 			},
 
+			selectArea: function () {
+				var ctx = this.ctx;
+				var area = this.areaSelectOrigin;
+				var mouse = this.mouse;
+
+				ctx.fillStyle = '#51fc9a';
+				ctx.globalAlpha = 0.1;
+
+				var lowX = (Math.min(area.x, mouse.x) * constants.gridSize) - this.pos.x;
+				var lowY = (Math.min(area.y, mouse.y) * constants.gridSize) - this.pos.y;
+
+				var highX = (Math.max(area.x, mouse.x) * constants.gridSize) - this.pos.x;
+				var highY = (Math.max(area.y, mouse.y) * constants.gridSize) - this.pos.y;
+
+				ctx.fillRect(lowX, lowY, highX - lowX, highY - lowY);
+
+				ctx.globalAlpha = 1;
+			},
+
 			grid: function () {
 				var gridSize = constants.gridSize;
 				var ctx = this.ctx;
@@ -213,8 +259,11 @@ define([
 					};
 				}
 
-				this.pos.x += (this.panOrigin.x - e.clientX) * constants.scrollSpeed;
-				this.pos.y += (this.panOrigin.y - e.clientY) * constants.scrollSpeed;
+				var zoomPanMultiplier = this.currentZoom;
+				var scrollSpeed = constants.scrollSpeed / zoomPanMultiplier;
+
+				this.pos.x += (this.panOrigin.x - e.clientX) * scrollSpeed;
+				this.pos.y += (this.panOrigin.y - e.clientY) * scrollSpeed;
 
 				this.panOrigin = {
 					x: e.clientX,
@@ -238,6 +287,13 @@ define([
 			onEndAreaSelect: function (e) {
 				events.emit('onAreaSelect', this.areaSelectOrigin, e);
 				this.areaSelectOrigin = null;
+			},
+
+			onSelectGroup: function (pos) {
+				this.pos.x = pos.x;
+				this.pos.y = pos.y;
+
+				this.makeDirty();
 			}
 		}
 	};

helpers/passives/client/ui/factory.js

@@ -1,7 +1,9 @@
 define([
-	'ui/uiBase'
+	'ui/uiBase',
+	'js/events'
 ], function (
-	uiBase
+	uiBase,
+	events
 ) {
 	return {
 		uis: [],
@@ -10,6 +12,8 @@ define([
 		init: function (root) {
 			if (root)
 				this.root = root + '/';
+
+			events.on('onKeyDown', this.events.onKeyDown.bind(this));
 		},
 
 		build: function (type, options) {
@@ -44,18 +48,6 @@ define([
 			}, this);
 		},
 
-		onKeyDown: function (key) {
-			if (key == 'esc') {
-				this.uis.forEach(function (u) {
-					if (!u.modal)
-						return;
-
-					u.hide();
-				});
-				$('.uiOverlay').hide();
-			}
-		},
-
 		update: function () {
 			var uis = this.uis;
 			var uLen = uis.length;
@@ -64,6 +56,20 @@ define([
 				if (u.update)
 					u.update();
 			}
+		},
+
+		events: {
+			onKeyDown: function (key) {
+				if (key == 'esc') {
+					this.uis.forEach(function (u) {
+						if (!u.modal)
+							return;
+
+						u.hide();
+					});
+					$('.uiOverlay').hide();
+				}
+			}
 		}
 	};
 });

helpers/passives/client/ui/templates/groups/groups.js

@@ -3,13 +3,15 @@ define([
 	'css!./styles',
 	'js/generator',
 	'js/client',
-	'js/renderer'
+	'js/renderer',
+	'js/input'
 ], function (
 	template,
 	styles,
 	generator,
 	client,
-	renderer
+	renderer,
+	input
 ) {
 	return {
 		tpl: template,
@@ -18,13 +20,14 @@ define([
 			this.onEvent('onTreeLoaded', this.events.onTreeLoaded.bind(this));
 
 			this.on('.btnAdd', 'click', this.actions.add.bind(this));
-			this.on('.btnRename', 'click', this.actions.rename.bind(this));
-			this.on('.btnRemove', 'click', this.actions.remove.bind(this));
+			this.on('.btnRename', 'click', this.events.onClickRename.bind(this));
+			this.on('.btnRemove', 'click', this.events.onClickRemove.bind(this));
 		},
 
 		addGroup: function (groupName) {
 			$('<div class="item">' + groupName + '</div>')
 				.appendTo(this.find('.list'))
+				.attr('group', groupName)
 				.on('click', this.events.onClickGroup.bind(this, groupName));
 		},
 
@@ -33,21 +36,41 @@ define([
 				var selected = generator.nodes.filter(n => n.selected);
 				var groupName = 'group-' + this.find('.list .item').length;
 
-				selected.forEach(s => (s.group = groupName));
+				selected.forEach(function (s) {
+					if (!s.group)
+						s.group = [];
+
+					s.group.push(groupName)
+				});
 
 				this.addGroup(groupName);
 			},
 
-			rename: function () {
+			rename: function (group) {
 
 			},
 
-			remove: function () {
+			remove: function (group) {
+				generator.nodes.forEach(function (g) {
+					if ((g.group) && (g.group.indexOf(group) > -1))
+						g.group.spliceWhere(g => (g == group));
+				});
 
+				this.find('.item[group="' + group + '"]').remove();
 			}
 		},
 
 		events: {
+			onClickRename: function (e) {
+				this.find('.activeMode').removeClass('activeMode');
+				this.find('.btnRename').addClass('activeMode');
+			},
+
+			onClickRemove: function (e) {
+				this.find('.activeMode').removeClass('activeMode');
+				this.find('.btnRemove').addClass('activeMode');
+			},
+
 			onTreeLoaded: function (tree) {
 				var container = this.find('.list').empty();
 				var groups = [];
@@ -61,19 +84,53 @@ define([
 							return 1;
 					})
 					.forEach(function (n) {
-						if (groups.indexOf(n.group) > -1)
-							return;
+						n.group.forEach(function (g) {
+							if (groups.indexOf(g) > -1)
+								return;
 
-						this.addGroup(n.group);
-						groups.push(n.group);
+							this.addGroup(g);
+							groups.push(g);
+						}, this);
 					}, this);
 			},
 
 			onClickGroup: function (group) {
+				var mode = this.find('.activeMode').eq(0);
+				if (mode) {
+					if (mode.hasClass('btnRemove'))
+						this.actions.remove.call(this, group);
+					else if (mode.hasClass('btnRename'))
+						this.actions.rename.call(this, group);
+
+					this.find('.activeMode').removeClass('activeMode');
+				}
+
+				var pos = {
+					x: 0,
+					y: 0
+				};
+
 				var nodes = generator.nodes
-					.filter(n => (n.group == group));
+					.filter(function (n) {
+						if ((!n.group) || (n.group.indexOf(group) == -1))
+							return false;
+
+						pos.x += n.pos.x;
+						pos.y += n.pos.y;
+
+						return true;
+					});
+
+				pos.x /= nodes.length;
+				pos.y /= nodes.length;
 
 				generator.callAction('selectNode', nodes);
+
+				if (input.isKeyDown('shift')) {
+					renderer.center({
+						pos: pos
+					});
+				}
 				renderer.makeDirty();
 			}
 		}

helpers/passives/client/ui/templates/groups/styles.css

@@ -1 +1 @@
-.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiGroups{position:absolute;left:10px;bottom:10px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiGroups .heading-text{color:#f2f5f5;margin-bottom:15px}.uiGroups .list:not(:empty){margin-bottom:15px}.uiGroups .list .item{width:100%;color:#f2f5f5;background-color:#505360;padding:5px 0 5px 0;margin-bottom:5px}.uiGroups .list .item:last-child{margin-bottom:0}.uiGroups .btn{width:calc((100% - 30px) / 3);color:#f2f5f5;background-color:#3fa7dd;padding:5px;box-sizing:border-box;float:left}.uiGroups .btn:not(:last-child){margin-right:15px}
+.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiGroups{position:absolute;left:10px;bottom:10px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiGroups .heading-text{color:#f2f5f5;margin-bottom:15px}.uiGroups .list:not(:empty){margin-bottom:15px}.uiGroups .list .item{width:100%;color:#f2f5f5;background-color:#505360;padding:5px 0 5px 0;margin-bottom:5px}.uiGroups .list .item:last-child{margin-bottom:0}.uiGroups .btn{width:calc((100% - 20px) / 2);color:#f2f5f5;background-color:#3fa7dd;padding:5px;box-sizing:border-box;float:left;cursor:pointer}.uiGroups .btn.activeMode{background-color:#51fc9a}.uiGroups .btn:hover{background-color:#51fc9a;color:#3c3f4c}.uiGroups .btn:not(:last-child){margin-right:15px}

helpers/passives/client/ui/templates/groups/styles.less

@@ -33,12 +33,22 @@
 	}
 
 	.btn {
-		width: calc((100% - 30px) / 3);
+		width: calc((100% - 20px) / 2);
 		color: @white;
 		background-color: @blueB;
 		padding: 5px;
 		box-sizing: border-box;
 		float: left;
+		cursor: pointer;
+
+		&.activeMode {
+			background-color: @tealB;
+		}
+
+		&:hover {
+			background-color: @tealB;
+			color: @blackB;
+		}
 
 		&:not(:last-child) {
 			margin-right: 15px;

helpers/passives/client/ui/templates/groups/template.html

@@ -7,7 +7,6 @@
 			
 		</div>
 		<div class="btn btnAdd">+</div>
-		<div class="btn btnRename">" "</div>
 		<div class="btn btnRemove">-</div>
 	</div>
 </div>

helpers/passives/client/ui/templates/load/load.js

@@ -40,6 +40,8 @@ define([
 
 			onClickItem: function (item) {
 				this.actions.onLoad.call(this, item);
+
+				$('.uiMenu').data('ui').loaded = item;
 			}
 		}
 	}

helpers/passives/client/ui/templates/load/styles.css

@@ -1 +1 @@
-.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiLoad{position:absolute;right:10px;top:10px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiLoad .heading-text{color:#f2f5f5;margin-bottom:15px}.uiLoad .list .item{width:100%;color:#f2f5f5;background-color:#505360;padding:5px 0 5px 0;margin-bottom:5px}.uiLoad .list .item:last-child{margin-bottom:0}
+.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiLoad{position:absolute;right:10px;top:10px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiLoad .heading-text{color:#f2f5f5;margin-bottom:15px}.uiLoad .list .item{width:100%;color:#f2f5f5;background-color:#505360;padding:5px 0 5px 0;margin-bottom:5px;cursor:pointer}.uiLoad .list .item:hover{background-color:#929398}.uiLoad .list .item:last-child{margin-bottom:0}

helpers/passives/client/ui/templates/load/styles.less

@@ -23,6 +23,11 @@
 			background-color: @blackA;
 			padding: 5px 0px 5px 0px;
 			margin-bottom: 5px;
+			cursor: pointer;
+
+			&:hover {
+				background-color: @grayC;
+			}
 
 			&:last-child {
 				margin-bottom: 0px;

helpers/passives/client/ui/templates/menu/menu.js

@@ -1,21 +1,34 @@
 define([
 	'html!./template',
 	'css!./styles',
-	'ui/factory'
+	'ui/factory',
+	'js/generator',
+	'js/renderer'
 ], function (
 	template,
 	styles,
-	uiFactory
+	uiFactory,
+	generator,
+	renderer
 ) {
 	return {
 		tpl: template,
 
+		loaded: null,
+
 		postRender: function () {
+			this.on('.btnNew', 'click', this.actions.onNew.bind(this));
 			this.on('.btnLoad', 'click', this.actions.onLoad.bind(this));
 			this.on('.btnSave', 'click', this.actions.onSave.bind(this));
 		},
 
 		actions: {
+			onNew: function () {
+				this.loaded = null;
+				generator.callAction('reset');
+				renderer.makeDirty();
+			},
+
 			onLoad: function () {
 				uiFactory.build('load');
 			},

helpers/passives/client/ui/templates/menu/styles.css

@@ -1 +1 @@
-.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiMenu{position:absolute;right:10px;bottom:10px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiMenu .heading{color:#f2f5f5;margin-bottom:15px}.uiMenu input{border:none;outline:none;width:calc(100% - 10px);height:20px;padding:5px;display:box}.uiMenu .btn{float:left;width:calc((100% - 15px) / 2);color:#f2f5f5;background-color:#3fa7dd;padding:5px;box-sizing:border-box}.uiMenu .btn:nth-child(1){margin-right:15px}
+.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiMenu{position:absolute;right:10px;bottom:10px;padding:10px;width:120px;background-color:#373041;text-align:center}.uiMenu .heading{color:#f2f5f5;margin-bottom:15px}.uiMenu input{border:none;outline:none;width:calc(100% - 10px);height:20px;padding:5px;display:box}.uiMenu .btn{float:left;width:100%;color:#f2f5f5;background-color:#3fa7dd;padding:5px;box-sizing:border-box;cursor:pointer}.uiMenu .btn:not(:last-child){margin-bottom:15px}.uiMenu .btn:hover{background-color:#51fc9a;color:#3c3f4c}.uiMenu .btn:nth-child(3){clear:both}

helpers/passives/client/ui/templates/menu/styles.less

@@ -5,7 +5,7 @@
 	right: 10px;
 	bottom: 10px;
 	padding: 10px;
-	width: 200px;
+	width: 120px;
 	background-color: @blackC;
 	text-align: center;
 
@@ -25,14 +25,24 @@
 
 	.btn {
 		float: left;
-		width: calc((100% - 15px) / 2);
-		color:@white;
+		width: 100%;
+		color: @white;
 		background-color: @blueB;
 		padding: 5px;
 		box-sizing: border-box;
+		cursor: pointer;
+
+		&:not(:last-child) {
+			margin-bottom: 15px;
+		}
+
+		&:hover {
+			background-color: @tealB;
+			color: @blackB;
+		}
 
-		&:nth-child(1) {
-			margin-right: 15px;
+		&:nth-child(3) {
+			clear: both;
 		}
 	}
 }

helpers/passives/client/ui/templates/menu/template.html

@@ -5,5 +5,6 @@
 	<div class="content">
 		<div class="btn btnLoad">Load</div>
 		<div class="btn btnSave">Save</div>
+		<div class="btn btnNew">New</div>
 	</div>
 </div>

helpers/passives/client/ui/templates/nodeInfo/nodeInfo.js

@@ -143,6 +143,7 @@ define([
 			onShowLookup: function (e) {
 				this.statEl = $(e.currentTarget);
 				this.find('.lookup').show();
+				this.el.addClass('picking');
 			},
 
 			onScrollStat: function (e) {

helpers/passives/client/ui/templates/nodeInfo/styles.css

@@ -1 +1 @@
-.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiNodeInfo{position:absolute;right:10px;top:10px;padding:10px;width:200px;height:250px;background-color:#373041;text-align:center}.uiNodeInfo .heading-text{color:#f2f5f5;margin-bottom:15px}.uiNodeInfo .content{height:calc(100% - 15px)}.uiNodeInfo .lbl{color:#f2f5f5}.uiNodeInfo .lbl:not(:empty).lblId:before{content:'Id: '}.uiNodeInfo .lbl:not(:empty).lblGroup:before{content:'Group: '}.uiNodeInfo .lbl:not(:empty).lblType:before{content:'Type: '}.uiNodeInfo .lbl:not(:empty).lblPos:before{content:'Pos: '}.uiNodeInfo .lbl:not(:empty).lblLinks:before{content:'Links: '}.uiNodeInfo .stats:not(:empty){margin-top:15px}.uiNodeInfo .stats .item{width:100%;height:28px;color:#f2f5f5;background-color:#505360;padding:5px 0 5px 0;margin-bottom:5px}.uiNodeInfo .stats .item:last-child{margin-bottom:0}.uiNodeInfo .lookup{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#373041;overflow:auto}.uiNodeInfo .lookup .item{width:100%;color:#f2f5f5;background-color:#505360;padding:5px 0 5px 0;margin-bottom:5px}.uiNodeInfo .lookup .item:last-child{margin-bottom:0}
+.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiNodeInfo{position:absolute;right:10px;top:10px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiNodeInfo.picking{height:calc(100% - 15px)}.uiNodeInfo .heading-text{color:#f2f5f5;margin-bottom:15px}.uiNodeInfo .content{height:calc(100% - 15px)}.uiNodeInfo .lbl{color:#f2f5f5}.uiNodeInfo .lbl:not(:empty).lblId:before{content:'Id: '}.uiNodeInfo .lbl:not(:empty).lblGroup:before{content:'Group: '}.uiNodeInfo .lbl:not(:empty).lblType:before{content:'Type: '}.uiNodeInfo .lbl:not(:empty).lblPos:before{content:'Pos: '}.uiNodeInfo .lbl:not(:empty).lblLinks:before{content:'Links: '}.uiNodeInfo .stats:not(:empty){margin-top:15px}.uiNodeInfo .stats .item{width:100%;height:28px;color:#f2f5f5;background-color:#505360;padding:5px 0 5px 0;margin-bottom:5px;cursor:pointer}.uiNodeInfo .stats .item:hover{background-color:#929398}.uiNodeInfo .stats .item:last-child{margin-bottom:0}.uiNodeInfo .lookup{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#373041;overflow:auto}.uiNodeInfo .lookup .item{width:100%;color:#f2f5f5;background-color:#505360;padding:5px 0 5px 0;margin-bottom:5px;cursor:pointer}.uiNodeInfo .lookup .item:hover{background-color:#929398}.uiNodeInfo .lookup .item:last-child{margin-bottom:0}

helpers/passives/client/ui/templates/nodeInfo/styles.less

@@ -6,10 +6,13 @@
 	top: 10px;
 	padding: 10px;
 	width: 200px;
-	height: 250px;
 	background-color: #373041;
 	text-align: center;
 
+	&.picking {
+		height: calc(100% - 15px);
+	}
+
 	.heading-text {
 		color: @white;
 		margin-bottom: 15px;
@@ -57,6 +60,11 @@
 			background-color: @blackA;
 			padding: 5px 0px 5px 0px;
 			margin-bottom: 5px;
+			cursor: pointer;
+
+			&:hover {
+				background-color: @grayC;
+			}
 
 			&:last-child {
 				margin-bottom: 0px;
@@ -80,6 +88,11 @@
 			background-color: @blackA;
 			padding: 5px 0px 5px 0px;
 			margin-bottom: 5px;
+			cursor: pointer;
+
+			&:hover {
+				background-color: @grayC;
+			}
 
 			&:last-child {
 				margin-bottom: 0px;

helpers/passives/client/ui/templates/save/save.js

@@ -16,6 +16,10 @@ define([
 
 		postRender: function () {
 			this.on('.btnSave', 'click', this.actions.onSave.bind(this));
+
+			var loaded = $('.uiMenu').data('ui').loaded;
+			if (loaded)
+				this.find('.fileName').val(loaded);
 		},
 
 		actions: {

helpers/passives/client/ui/templates/save/styles.css

@@ -1 +1 @@
-.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiSave{position:absolute;right:10px;top:10px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiSave .heading{color:#f2f5f5;margin-bottom:15px}.uiSave input{border:none;outline:none;width:calc(100% - 10px);height:20px;padding:5px;display:box;margin-bottom:15px}.uiSave .btn{width:calc((100% - 15px) / 2);color:#f2f5f5;margin-top:15px;background-color:#3fa7dd;padding:5px;box-sizing:border-box;margin:0 auto}
+.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}.uiSave{position:absolute;right:10px;top:10px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiSave .heading{color:#f2f5f5;margin-bottom:15px}.uiSave input{border:none;outline:none;width:100%;display:block;height:28px;padding:5px;display:box;margin-bottom:15px;font-size:16px}.uiSave .btn{width:calc((100% - 15px) / 2);color:#f2f5f5;margin-top:15px;background-color:#3fa7dd;padding:5px;box-sizing:border-box;margin:0 auto;cursor:pointer}.uiSave .btn:hover{background-color:#51fc9a;color:#3c3f4c}

helpers/passives/client/ui/templates/save/styles.less

@@ -17,11 +17,13 @@
 	input {
 		border: none;
 		outline: none;
-		width: calc(100% - 10px);
-		height: 20px;
+		width: 100%;
+		display: block;
+		height: 28px;
 		padding: 5px;
 		display: box;
 		margin-bottom: 15px;
+		font-size: 16px;
 	}
 
 	.btn {
@@ -32,5 +34,11 @@
 		padding: 5px;
 		box-sizing: border-box;
 		margin: 0 auto;
+		cursor: pointer;
+
+		&:hover {
+			background-color: @tealB;
+			color: @blackB;
+		}
 	}
 }

helpers/passives/todo

@@ -0,0 +1,2 @@
+* Rename Group
+* Stat tooltips