node info

helpers/passives/client/css/main.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}html,body{width:100vw;height:100vh}body{background-color:#2d2136;padding:0;margin:0;overflow:hidden}.canvas,.ui-container{position:absolute}.ui-container{width:100%;height:100%;pointer-events:none}.ui-container>*{pointer-events:auto}*{box-sizing:border-box;font-family:bitty;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}html,body{width:100vw;height:100vh}body{background-color:#2d2136;padding:0;margin:0;overflow:hidden}.canvas,.ui-container{position:absolute}.ui-container{width:100%;height:100%;pointer-events:none}.ui-container>*{pointer-events:auto}*{box-sizing:border-box;font-family:bitty;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{background-color:#3c3f4c;-webkit-border-radius:0;border-radius:0}::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:0;background:#929398}

helpers/passives/client/css/main.less

@@ -36,3 +36,18 @@ body {
 	-ms-user-select: none;
 	user-select: none;
 }
+
+::-webkit-scrollbar {
+    width: 16px;
+}
+::-webkit-scrollbar-track {
+	background-color: @gray;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 0px;
+    background: @lightGray; 
+}
+

helpers/passives/client/js/constants.js

@@ -12,6 +12,47 @@ define([
 		defaultAngleInc: Math.PI / 8,
 		gridSize: 30,
 
-		scrollSpeed: 0.5
+		scrollSpeed: 0.5,
+
+		stats: {
+			vit: 'vitality',
+			regenHp: 'health regeneration',
+			manaMax: 'maximum mana',
+			regenMana: 'mana regeneration',
+			str: 'strength',
+			int: 'intellect',
+			dex: 'dexterity',
+			armor: 'armor',
+			blockAttackChance: 'chance to block attacks',
+			blockSpellChance: 'chance to block spells',
+			addCritChance: 'increased crit chance',
+			addCritMultiplier: 'increased crit multiplier',
+			magicFind: 'increased item quality',
+			itemQuantity: 'increased item quantity',
+			sprintChance: 'sprint chance',
+			dmgPercent: 'to all damage',
+			allAttributes: 'to all attributes',
+			xpIncrease: 'additional xp per kill',
+			lvlRequire: 'level requirement reduction',
+			elementArcanePercent: 'increased arcane damage',
+			elementFrostPercent: 'increased frost damage',
+			elementFirePercent: 'increased fire damage',
+			elementHolyPercent: 'increased holy damage',
+			elementPoisonPercent: 'increased poison damage',
+			elementAllResist: 'all resistance',
+			elementArcaneResist: 'arcane resistance',
+			elementFrostResist: 'frost resistance',
+			elementFireResist: 'fire resistance',
+			elementHolyResist: 'holy resistance',
+			elementPoisonResist: 'poison resistance',
+			elementAllResist: 'all resistance',
+			attackSpeed: 'attack speed',
+			castSpeed: 'cast speed',
+			catchChance: 'extra catch chance',
+			catchSpeed: 'faster catch speed',
+			fishRarity: 'higher fish rarity',
+			fishWeight: 'increased fish weight',
+			fishItems: 'extra chance to hook items'
+		}
 	};
 });

helpers/passives/client/js/generator.js

@@ -85,7 +85,10 @@ define([
 						(!options.node) ||
 						(!this.nodes.some(n => ((n.selected) && (n == options.node))))
 					) &&
-					(!input.isKeyDown('ctrl'))
+					(
+						(!input.isKeyDown('ctrl')) ||
+						(options.force)
+					)
 				)
 					this.nodes.forEach(n => (n.selected = false));
 
@@ -94,6 +97,8 @@ define([
 				else if (options instanceof Array)
 					options.forEach(n => (n.selected = true));
 
+				events.emit('onSelectNode', this.nodes.filter(n => n.selected));
+
 				return !options.node;
 			},
 
@@ -112,7 +117,7 @@ define([
 
 				var singleSelected = this.getSelected(true);
 
-				if (singleSelected) {
+				if ((singleSelected) && (input.isKeyDown('ctrl'))) {
 					if (options.shiftDown) {
 						this.links.spliceWhere(l => (
 							(
@@ -131,7 +136,13 @@ define([
 							to: node
 						});
 					}
-					return this.callAction('selectNode');
+					this.callAction('selectNode', {
+						force: true
+					});
+
+					this.callAction('selectNode', {
+						node: options.node
+					});
 				} else {
 					return this.callAction('selectNode', {
 						node: node
@@ -207,6 +218,8 @@ define([
 						node.selected = true;
 					}
 				}
+
+				events.emit('onSelectNode', this.nodes.filter(n => n.selected));
 			}
 		}
 	};

helpers/passives/client/js/main.js

@@ -39,6 +39,7 @@ define([
 
 				uiFactory.build('menu');
 				uiFactory.build('groups');
+				uiFactory.build('nodeInfo');
 
 				renderer.center(generator.nodes[0]);
 				this.render();

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;right:10px;top:110px;padding:10px;width:200px;background-color:#373041;text-align:center}.uiGroups .heading-text{color:#f2f5f5;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;margin-top:15px;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% - 30px) / 3);color:#f2f5f5;background-color:#3fa7dd;padding:5px;box-sizing:border-box;float:left}.uiGroups .btn:not(:last-child){margin-right:15px}

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

@@ -2,8 +2,8 @@
 
 .uiGroups {
 	position: absolute;
-	right: 10px;
-	top: 110px;
+	left: 10px;
+	bottom: 10px;
 	padding: 10px;
 	width: 200px;
 	background-color: #373041;
@@ -15,7 +15,9 @@
 	}
 
 	.list {
-		
+		&:not(:empty) {
+			margin-bottom: 15px;
+		}
 
 		.item {
 			width: 100%;
@@ -33,7 +35,6 @@
 	.btn {
 		width: calc((100% - 30px) / 3);
 		color: @white;
-		margin-top: 15px;
 		background-color: @blueB;
 		padding: 5px;
 		box-sizing: border-box;

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;top: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: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}

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

@@ -3,7 +3,7 @@
 .uiMenu {
 	position: absolute;
 	right: 10px;
-	top: 10px;
+	bottom: 10px;
 	padding: 10px;
 	width: 200px;
 	background-color: @blackC;

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

@@ -0,0 +1,167 @@
+define([
+	'html!./template',
+	'css!./styles',
+	'js/constants',
+	'js/input'
+], function (
+	template,
+	styles,
+	constants,
+	input
+) {
+	return {
+		tpl: template,
+
+		nodes: null,
+		statEl: null,
+
+		postRender: function () {
+			this.onEvent('onSelectNode', this.events.onSelectNode.bind(this));
+
+			this.buildLookup();
+		},
+
+		buildLookup: function () {
+			var container = this.find('.lookup');
+
+			for (var p in constants.stats) {
+				var statName = constants.stats[p];
+
+				$('<div class="item">' + statName + '</div>')
+					.appendTo(container)
+					.on('click', this.events.onClickStat.bind(this, p));
+			}
+		},
+
+		updateLabels: function () {
+			var nodes = this.nodes;
+			if (nodes.length == 1)
+				nodes = nodes[0];
+			var isArray = !!nodes.push;
+
+			this.find('.lblId').html(isArray ? '' : nodes.id);
+
+			var group = nodes.group;
+			if (isArray) {
+				group = nodes[0].group;
+				if (nodes.some(n => (n.group != group)))
+					group = '';
+			}
+			this.find('.lblGroup').html(group);
+
+			var size = nodes.size;
+			if (isArray) {
+				size = nodes[0].size;
+				if (nodes.some(n => (n.size != size)))
+					size = '';
+			}
+			size = ([
+				'Lesser',
+				'Greater',
+				'Core'
+			])[size];
+			this.find('.lblType').html(size);
+
+			var pos = isArray ? '' : nodes.pos.x + ', ' + nodes.pos.y;
+			this.find('.lblPos').html(pos);
+		},
+
+		setStats: function () {
+			var node = this.nodes[0];
+
+			this.find('.stats').empty();
+
+			if (!node.stats)
+				node.stats = {};
+
+			for (var p in node.stats) {
+				this.buildStatSelector(p, node.stats[p]);
+			}
+
+			this.buildStatSelector();
+		},
+
+		buildStatSelector: function (stat, value) {
+			var string = stat ? stat + ': ' + value : 'Select a stat...';
+
+			$('<div class="item">' + string + '</div>')
+				.appendTo(this.find('.stats'))
+				.data('stat', {
+					stat: stat,
+					value: value
+				})
+				.on('mousewheel', this.events.onScrollStat.bind(this))
+				.on('click', this.events.onShowLookup.bind(this));
+		},
+
+		updateNode: function () {
+			var stats = {};
+			this.find('.stats .item').toArray().forEach(function (s) {
+				var stat = $(s).data('stat');
+				if (!stat.stat)
+					return;
+
+				stats[stat.stat] = stat.value;
+			});
+
+			this.nodes[0].stats = stats;
+		},
+
+		actions: {
+
+		},
+
+		events: {
+			onSelectNode: function (nodes) {
+				this.nodes = nodes;
+
+				if (nodes.length > 0)
+					this.updateLabels();
+				else if (nodes.length == 0)
+					return;
+
+				this.setStats();
+			},
+
+			onClickStat: function (stat) {
+				var string = stat + ': 1';
+				this.statEl
+					.html(string)
+					.data('stat', {
+						stat: stat,
+						value: 1
+					});
+
+				this.statEl = null;
+
+				this.find('.lookup').hide();
+
+				this.buildStatSelector();
+				this.updateNode();
+			},
+
+			onShowLookup: function (e) {
+				this.statEl = $(e.currentTarget);
+				this.find('.lookup').show();
+			},
+
+			onScrollStat: function (e) {
+				var el = $(e.currentTarget);
+				var stat = el.data('stat');
+				var delta = (e.originalEvent.deltaY > 0) ? -1 : 1;
+
+				if (input.isKeyDown('shift')) {
+					var nextValue = ~~((stat.value + (delta * 10)) / 10) * 10;
+					delta = nextValue - stat.value;
+				}
+
+				stat.value += delta;
+
+				var string = stat.stat + ': ' + stat.value;
+				el.html(string);
+
+				this.updateNode();
+			}
+		}
+	}
+});

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

@@ -0,0 +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}

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

@@ -0,0 +1,89 @@
+@import "../../../css/ui.less";
+
+.uiNodeInfo {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	padding: 10px;
+	width: 200px;
+	height: 250px;
+	background-color: #373041;
+	text-align: center;
+
+	.heading-text {
+		color: @white;
+		margin-bottom: 15px;
+	}
+
+	.content {
+		height: calc(100% - 15px);
+	}
+
+	.lbl {
+		color: @white;
+
+		&:not(:empty) {
+			&.lblId:before {
+				content: 'Id: ';
+			}
+
+			&.lblGroup:before {
+				content: 'Group: ';
+			}
+
+			&.lblType:before {
+				content: 'Type: ';
+			}
+
+			&.lblPos:before {
+				content: 'Pos: ';
+			}
+
+			&.lblLinks:before {
+				content: 'Links: ';
+			}
+		}
+	}
+
+	.stats {
+		&:not(:empty) {
+			margin-top: 15px;
+		}
+
+		.item {
+			width: 100%;
+			height: 28px;
+			color: @white;
+			background-color: @blackA;
+			padding: 5px 0px 5px 0px;
+			margin-bottom: 5px;
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+	}
+
+	.lookup {
+		display: none;
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		width: 100%;
+		height: 100%;
+		background-color: #373041;
+		overflow: auto;
+
+		.item {
+			width: 100%;
+			color: @white;
+			background-color: @blackA;
+			padding: 5px 0px 5px 0px;
+			margin-bottom: 5px;
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,15 @@
+<div class="uiNodeInfo">
+	<div uiLoad="heading">
+		<div class="heading-text">Node Info</div>
+	</div>
+	<div class="content">
+		<div class="lbl lblId"></div>
+		<div class="lbl lblGroup"></div>
+		<div class="lbl lblType"></div>
+		<div class="lbl lblPos"></div>
+		<div class="stats"></div>
+
+	</div>
+
+	<div class="lookup"></div>
+</div>