import/export

helpers/passives/client/js/constants.js

@@ -4,7 +4,7 @@ define([
 
 ) {
 	return {
-		standAlone: false,
+		standAlone: true,
 
 		lineWidth: 5,
 		blockSize: 20,

helpers/passives/client/js/renderer.js

@@ -170,8 +170,8 @@ define([
 					}
 				}
 
-				ctx.fillStyle = '#ff0000';
-				ctx.fillRect(
+				ctx.strokeStyle = '#44cb95';
+				ctx.strokeRect(
 					(this.mouse.x * constants.gridSize) - this.pos.x + (gapSize / 1),
 					(this.mouse.y * constants.gridSize) - this.pos.y + (gapSize / 1),
 					8,

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

@@ -0,0 +1,20 @@
+define([
+	'html!./template',
+	'css!./styles',
+	'js/generator'
+], function (
+	template,
+	styles,
+	generator
+) {
+	return {
+		tpl: template,
+		modal: true,
+		centered: true,
+
+		postRender: function () {
+			var data = generator.serialize();
+			this.find('textarea').val(data);
+		}
+	}
+});

helpers/passives/client/ui/templates/export/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}.uiExport{position:absolute;right:10px;top:10px;padding:10px;width:400px;height:300px;background-color:#373041;text-align:center}.uiExport .heading-text{color:#f2f5f5;margin-bottom:15px}.uiExport textarea{border:none;outline:none;width:100%;display:block;height:245px;padding:5px;display:box;font-size:16px}

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

@@ -0,0 +1,28 @@
+@import "../../../css/ui.less";
+
+.uiExport {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	padding: 10px;
+	width: 400px;
+	height: 300px;
+	background-color: #373041;
+	text-align: center;
+
+	.heading-text {
+		color: @white;
+		margin-bottom: 15px;
+	}
+
+	textarea {
+		border: none;
+		outline: none;
+		width: 100%;
+		display: block;
+		height: 245px;
+		padding: 5px;
+		display: box;
+		font-size: 16px;
+	}
+}

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

@@ -0,0 +1,8 @@
+<div class="uiExport">
+	<div uiLoad="heading">
+		<div class="heading-text">Export</div>
+	</div>
+	<div class="content">
+		<textarea class="data" />
+	</div>
+</div>

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

@@ -0,0 +1,31 @@
+define([
+	'html!./template',
+	'css!./styles',
+	'js/generator'
+], function (
+	template,
+	styles,
+	generator
+) {
+	return {
+		tpl: template,
+		modal: true,
+		centered: true,
+
+		postRender: function () {
+			this.on('.btnImport', 'click', this.events.onImport.bind(this));
+		},
+
+		events: {
+			onImport: function () {
+				var val = this.find('textarea').val();
+
+				try {
+					var data = JSON.parse(val);
+					generator.callAction('load', data);
+					this.destroy();
+				} catch (e) {}
+			}
+		}
+	}
+});

helpers/passives/client/ui/templates/import/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}.uiImport{position:absolute;right:10px;top:10px;padding:10px;width:400px;height:340px;background-color:#373041;text-align:center}.uiImport .heading-text{color:#f2f5f5;margin-bottom:15px}.uiImport textarea{border:none;outline:none;width:100%;display:block;height:245px;padding:5px;display:box;font-size:16px;margin-bottom:15px}.uiImport .btnImport{width:calc((100% - 15px) / 2);color:#f2f5f5;margin-top:15px;background-color:#3fa7dd;padding:5px;box-sizing:border-box;margin:0 auto;cursor:pointer}.uiImport .btnImport:hover{background-color:#51fc9a;color:#3c3f4c}

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

@@ -0,0 +1,45 @@
+@import "../../../css/ui.less";
+
+.uiImport {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	padding: 10px;
+	width: 400px;
+	height: 340px;
+	background-color: #373041;
+	text-align: center;
+
+	.heading-text {
+		color: @white;
+		margin-bottom: 15px;
+	}
+
+	textarea {
+		border: none;
+		outline: none;
+		width: 100%;
+		display: block;
+		height: 245px;
+		padding: 5px;
+		display: box;
+		font-size: 16px;
+		margin-bottom: 15px;
+	}
+
+	.btnImport {
+		width: calc((100% - 15px) / 2);
+		color: @white;
+		margin-top: 15px;
+		background-color: @blueB;
+		padding: 5px;
+		box-sizing: border-box;
+		margin: 0 auto;
+		cursor: pointer;
+
+		&:hover {
+			background-color: @tealB;
+			color: @blackB;
+		}
+	}
+}

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

@@ -0,0 +1,9 @@
+<div class="uiImport">
+	<div uiLoad="heading">
+		<div class="heading-text">Import</div>
+	</div>
+	<div class="content">
+		<textarea class="data" placeholder="Paste data here..."/>
+		<div class="btn btnImport">Import</div>
+	</div>
+</div>

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

@@ -20,7 +20,7 @@ define([
 
 		postRender: function () {
 			if (constants.standAlone) {
-				this.find('.content > *:not(.btnNew)').addClass('disabled');
+				this.find('.content > *:not(.btnNew):not(.btnImport):not(.btnExport)').addClass('disabled');
 			}
 
 			this.on('.btnNew', 'click', this.actions.onNew.bind(this));

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

@@ -1,6 +1,6 @@
 define([
-	'html!./template',
-	'css!./styles',
+	'html!ui/templates/nodeInfo/template',
+	'css!ui/templates/nodeInfo/styles',
 	'js/constants',
 	'js/input'
 ], function (