grouping!

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}
+.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}

helpers/passives/client/css/main.less

@@ -25,3 +25,14 @@ body {
 		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;
+}

helpers/passives/client/js/generator.js

@@ -53,15 +53,30 @@ define([
 			});
 		},
 
+		getNextId: function () {
+			for (var i = 0; i < this.nodes.length; i++) {
+				if (!this.nodes.some(n => (n.id == i)))
+					return i;
+			}
+
+			return this.nodes.length;
+		},
+
 		actions: {
 			load: function (data) {
 				this.nodes = data.nodes;
+
 				this.links = data.links.map(function (l) {
 					l.from = this.nodes.find(n => (n.id == l.from.id));
 					l.to = this.nodes.find(n => (n.id == l.to.id));
 
 					return l;
 				}, this);
+
+				events.emit('onTreeLoaded', {
+					nodes: this.nodes,
+					links: this.links
+				});
 			},
 
 			selectNode: function (options) {
@@ -76,13 +91,15 @@ define([
 
 				if (options.node)
 					options.node.selected = true;
+				else if (options instanceof Array)
+					options.forEach(n => (n.selected = true));
 
 				return !options.node;
 			},
 
 			addNode: function (options) {
 				this.nodes.push(tplNode.build({
-					id: this.nodes.length,
+					id: this.getNextId(),
 					x: options.x,
 					y: options.y
 				}));

helpers/passives/client/js/main.js

@@ -38,6 +38,7 @@ define([
 				events.on('onKeyDown', this.events.onKeyDown.bind(this));
 
 				uiFactory.build('menu');
+				uiFactory.build('groups');
 
 				renderer.center(generator.nodes[0]);
 				this.render();

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

@@ -0,0 +1,81 @@
+define([
+	'html!./template',
+	'css!./styles',
+	'js/generator',
+	'js/client',
+	'js/renderer'
+], function (
+	template,
+	styles,
+	generator,
+	client,
+	renderer
+) {
+	return {
+		tpl: template,
+
+		postRender: function () {
+			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));
+		},
+
+		addGroup: function (groupName) {
+			$('<div class="item">' + groupName + '</div>')
+				.appendTo(this.find('.list'))
+				.on('click', this.events.onClickGroup.bind(this, groupName));
+		},
+
+		actions: {
+			add: function () {
+				var selected = generator.nodes.filter(n => n.selected);
+				var groupName = 'group-' + this.find('.list .item').length;
+
+				selected.forEach(s => (s.group = groupName));
+
+				this.addGroup(groupName);
+			},
+
+			rename: function () {
+
+			},
+
+			remove: function () {
+
+			}
+		},
+
+		events: {
+			onTreeLoaded: function (tree) {
+				var container = this.find('.list').empty();
+				var groups = [];
+
+				tree.nodes
+					.filter(n => !!n.group)
+					.sort(function (a, b) {
+						if (a.group < b.group)
+							return -1;
+						else if (b.group < a.group)
+							return 1;
+					})
+					.forEach(function (n) {
+						if (groups.indexOf(n.group) > -1)
+							return;
+
+						this.addGroup(n.group);
+						groups.push(n.group);
+					}, this);
+			},
+
+			onClickGroup: function (group) {
+				var nodes = generator.nodes
+					.filter(n => (n.group == group));
+
+				generator.callAction('selectNode', nodes);
+				renderer.makeDirty();
+			}
+		}
+	}
+});

helpers/passives/client/ui/templates/groups/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}.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}

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

@@ -0,0 +1,46 @@
+@import "../../../css/ui.less";
+
+.uiGroups {
+	position: absolute;
+	right: 10px;
+	top: 110px;
+	padding: 10px;
+	width: 200px;
+	background-color: #373041;
+	text-align: center;
+
+	.heading-text {
+		color: @white;
+		margin-bottom: 15px;
+	}
+
+	.list {
+		
+
+		.item {
+			width: 100%;
+			color: @white;
+			background-color: @blackA;
+			padding: 5px 0px 5px 0px;
+			margin-bottom: 5px;
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+	}
+
+	.btn {
+		width: calc((100% - 30px) / 3);
+		color: @white;
+		margin-top: 15px;
+		background-color: @blueB;
+		padding: 5px;
+		box-sizing: border-box;
+		float: left;
+
+		&:not(:last-child) {
+			margin-right: 15px;
+		}
+	}
+}

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

@@ -0,0 +1,13 @@
+<div class="uiGroups">
+	<div uiLoad="heading">
+		<div class="heading-text">Groups</div>
+	</div>
+	<div class="content">
+		<div class="list">
+			
+		</div>
+		<div class="btn btnAdd">+</div>
+		<div class="btn btnRename">" "</div>
+		<div class="btn btnRemove">-</div>
+	</div>
+</div>

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}
+.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}

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

@@ -22,6 +22,11 @@
 			color: @white;
 			background-color: @blackA;
 			padding: 5px 0px 5px 0px;
+			margin-bottom: 5px;
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
 		}
 	}
 }

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:10px;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;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}

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

@@ -28,7 +28,7 @@
 		width: calc((100% - 15px) / 2);
 		color:@white;
 		background-color: @blueB;
-		padding: 10px;
+		padding: 5px;
 		box-sizing: border-box;
 
 		&:nth-child(1) {

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:10px;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: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}

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

@@ -29,7 +29,7 @@
 		color: @white;
 		margin-top: 15px;
 		background-color: @blueB;
-		padding: 10px;
+		padding: 5px;
 		box-sizing: border-box;
 		margin: 0 auto;
 	}

helpers/passives/server/saves/abc.json

@@ -1 +0,0 @@
-{"nodes":[{"color":0,"size":0,"pos":{"x":18,"y":11},"id":0,"selected":false},{"color":0,"size":0,"pos":{"x":17,"y":15},"id":1,"selected":false},{"color":0,"size":0,"pos":{"x":23,"y":18},"id":2,"selected":false},{"color":0,"size":0,"pos":{"x":29,"y":14},"id":3,"selected":false}],"links":[]}