Merge pull request #4 from setpixel/buildtesting

Buildtesting

.gitignore

@@ -0,0 +1,5 @@
+.sass-cache
+node_modules/
+bower_components/
+public/
+tmp/

README.md

@@ -17,4 +17,6 @@ COMMAND+ Arrow: change order
 ```
 
 I'm writing this in all vanilla JS, trying not to use any backend code.
-I'm using Google Drive Realtime API, and AWS SDK.
+
+
+I'm using Google Drive Realtime API, and AWS SDK.

js/contextmenu.js → assets/js/contextmenu.js

@@ -53,6 +53,7 @@
     init();
 
     $(document).on("contextmenu", function(e){
+      console.log(visible)
       e.preventDefault();
       if (visible == false) {
         var maxY = $(window).height() - 215;
@@ -69,11 +70,15 @@
     });
 
     $(document).on("click", function(e){
+      console.log("SUP")
+
       if (visible && (e.button != 2)) {
+
+
         visible = false;
         $("#context-menu").toggleClass("hidden", true);
         setTimeout(function(){$("#context-menu").hide();}, 200);
-        setTimeout(function(){$("#context-menu").css("left", 10000);;}, 200);
+        setTimeout(function(){$("#context-menu").css("left", 10000);}, 200);
       }
     });
 

js/main.js → assets/js/main.js

@@ -165,6 +165,21 @@
     Do beats have a type? Character or Plot?
 */
 
+import "./speech";
+import "./contextmenu";
+import "./awesomplete";
+import "./outlinerutils";
+import "./gamepad";
+import "./chatwindow";
+import "./inspectorwindow";
+import "./toolbarui";
+import "./scriptdoctor";
+import "./stats";
+import "./realtimeModel";
+import "./awsuploader";
+import "./circlebob";
+import "./namesdb";
+
 ;(function() {
   'use strict';
 
@@ -213,6 +228,7 @@
     var fieldList = ['title', 'synopsis', 'imageURL','setting','timeOfDay','text', 'tags', 'actors', 'duration', 'completion'];
 
     for (var i = 0; i < fieldList.length; i++) {
+      if (node[fieldList[i]] == "[]") { node[fieldList[i]] = ""; };
       $("#inspector #" + fieldList[i] ).val(node[fieldList[i]]);
     }
 
@@ -288,6 +304,10 @@
         });
       }
 
+      $("#" + nodeID).dblclick(function(event) {
+        inspectorWindow.toggle(true);
+      });
+
       $("#" + nodeID).on("mousedown", function(event) {
         $('input').blur()
 
@@ -1153,4 +1173,4 @@
     twoplus: function() { return 2+2; }
   };
 
-}).call(this);
+}).call(this);

js/realtimeModel.js → assets/js/realtimeModel.js

@@ -365,6 +365,7 @@ TODO
 
     for (var i = 0; i < nodes.length; i++) {
       if (typeof nodes[i][property] === 'string') {
+        if (nodes[i][property] == "[]") { nodes[i][property] = ""; };
         if (isList) {
           var propertyItems = nodes[i][property].split(",");
           for (var z = 0; z < propertyItems.length; z++) {

js/tinycolor.js → assets/js/tinycolor.js

@@ -1160,4 +1160,4 @@ else {
     window.tinycolor = tinycolor;
 }
 
-})();
+})();

assets/scss/components/_auth-window.scss

@@ -0,0 +1,44 @@
+#auth_window {
+  position: absolute;
+  background-color: rgba(0,0,0,0.7);
+  width: 400px;
+  height: 400px;
+  z-index: 999;
+  border-radius: 12px;
+  top: 30%;
+  left: 50%;
+  margin-left: -200px;
+  color: #ddd;
+  padding: 30px;
+  box-sizing: border-box;
+}
+
+#auth_window .logo {
+  width: 230px;
+  display: block;
+  margin-bottom: 20px;
+  -webkit-filter: drop-shadow(0px 2px 0px rgba(0,0,0,.5));
+}
+
+#auth_button {
+  font-family: 'proximanova';
+  font-size: 20px;
+  font-weight: 100;
+  padding: 15px 20px;
+  border-radius: 6px;
+  border: 0;
+  display: block;
+  color: #fff;
+  background-color: #00aeef;
+  bottom: 30px;
+  right: 30px;
+  position: absolute;
+  box-shadow: 0px 0px 0px 4px #022a3d, 0px 0px 0px 7px rgba(255,255,255,0.4);
+  outline: 0;
+}
+
+#auth_button:hover {
+  background-color: #2fb9f2;
+}
+
+

assets/scss/components/_base.scss

@@ -0,0 +1,11 @@
+@import "cards";
+@import "inspector";
+@import "toolbar";
+@import "canvas";
+@import "stats";
+@import "help";
+@import "filter";
+@import "circle-bob";
+@import "auth-window";
+@import "chat";
+@import "context-menu";

assets/scss/components/_canvas.scss

@@ -0,0 +1,19 @@
+#canvas {
+	transform: translate3d(0,0,0) scale(.2);
+	transform-origin: top left;
+	transition: transform 150ms ease;
+	margin: 20px;
+	width: 0px;
+	height: 0px;
+	/* -webkit-perspective: 1000;*/
+}
+
+#canvas-container {
+	overflow: scroll; 
+	width: 9000px;
+	height: 2000px;
+}
+
+#canvas-container::-webkit-scrollbar {
+	display: none;
+}

assets/scss/components/_cards.scss

@@ -0,0 +1,179 @@
+.card {
+	visibility: hidden;
+	background-color: #fff;
+	width: 200px;
+	border-radius: 3px;
+	display: block;
+	position: absolute;
+	padding: 10px;
+	/*  margin-bottom: 10px;
+	margin-right: 10px;
+	 */  
+	box-sizing: border-box;
+	transition: transform 200ms ease, top 200ms ease, left 200ms ease, opacity 200ms ease;
+
+	box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.36);
+	/*z-index: 500;*/
+}
+
+
+.card img {
+	width: 100%;
+	border: 1px solid rgba(0,0,0,0.2);
+	pointer-events: none;
+	min-height: 20px;
+}
+
+.selected {
+	box-shadow: 0px 0px 0px 3px #0e76bc, 0px 0px 0px 5px rgba(255,255,255,0.4);
+	/*transition: none;
+	 */z-index: 99;
+}
+
+.card.dragged {
+	opacity: 0.5;
+	transform: translate3d(0,0,0) scale(1.1);
+	transition: transform 100ms ease-out, top 0s, left 0s;
+	cursor:move;
+}
+
+.card .go-left {
+	position: relative;
+	float: left;
+	margin: 0;
+}
+
+.card .go-right {
+	position: relative;
+	float: right;
+	margin: 0;
+}
+
+.card div {
+	margin-bottom: 5px;
+}
+
+.card div:nth-last-child(2) {
+	margin-bottom: 0px;
+}
+
+.card div:last-child {
+	margin-top: 5px;
+	margin-bottom: 0px;
+}
+
+.card div:first-child {
+	margin-top: 0px !important;
+}
+
+.card.scene {
+	border-left: 5px #f66 solid;
+}
+
+.card.beat {
+	border-left: 5px #aaa solid;
+	background-color: #ddd;
+}
+
+.beats .beat {
+	border-left: 7px #bbb solid;
+	background-color: #ddd;
+
+	width: 170px;
+	border-radius: 3px;
+	display: block;
+	position: relative;
+	padding: 5px;
+	margin-bottom: 10px;
+	box-sizing: border-box;
+}
+
+.beats .beat .title {
+	font-size: 12px;
+	line-height: 14px;
+}
+
+.card.note {
+	border-left: 5px #88f solid;
+	background-color: #bbf;
+}
+
+.card .image {
+	background-color: #999;
+	height: 100px;
+}
+
+.card .title {
+	font-size: 20px;
+	font-weight: 700;
+	line-height: 1;
+	box-sizing: border-box;
+}
+
+.card.beat .title {
+	font-size: 12px;
+	line-height: 14px;
+}
+
+.card.note .title {
+	font-size: 10px;
+	font-weight: 400;
+	line-height: 12px;
+}
+
+.card.dim {
+	opacity: 0.2;
+	transition: transform 200ms ease, top 200ms ease, left 200ms ease, opacity 200ms ease;
+}
+
+.card .label-container {
+	position: absolute;
+	bottom: 17px;
+	right: 3px;
+	text-align: right;
+	height: 0px;
+}
+
+.card .label-container div {
+	text-transform: capitalize;
+	color: rgba(0,0,0,0.6);
+	padding: 1px 3px 0px 3px;
+	display: inline-block;
+	font-size: 6px;
+	min-height: 10px;
+	border-radius: 2px;
+	margin-left: 2px;
+}
+
+.card .synopsis {
+	font-size: 10px;
+	text-overflow: ellipsis;
+	line-height: 12px;
+	max-height: 36px;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+}
+
+.card .setting {
+	text-transform: uppercase;
+	font-size: 8px;
+	float: left;
+	font-weight: 400;
+	opacity: 0.5;
+}
+
+.card .time-of-day {
+	text-transform: uppercase;
+	font-size: 8px;
+	float: right;
+	font-weight: 400;
+}
+
+
+.card div:empty {
+	display: block;
+	height: auto;
+	min-width: 2px;
+}