Port to electron + add new features

.gitignore

@@ -19,6 +19,9 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 
+# Vscode settings
+.vscode/
+
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
@@ -31,6 +34,9 @@ build/Release
 # Dependency directory
 node_modules
 
+# Updater
+electron-builder.yml
+
 # Optional npm cache directory
 .npm
 
@@ -85,3 +91,5 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
+
+dist/

README.md

@@ -2,13 +2,31 @@
 
 Dialogue editor created for "Night in the Woods" (and other projects) by @NoelFB and @infinite_ammo with contributions from @seiyria and @beeglebug. It is heavily inspired by and based on the amazing Twine software: http://twinery.org/
 
-![Screenshot](http://infiniteammo.com/Yarn/screenshot.jpg)
+This is a port to electron, made possible by Todor Imreorov. It adds a number of new features, such as:
+- Integration of bondage.js (yarnspinner port in javascript) inside Yarn - this allows testing yarn stories directly inside yarn.
+- Helper menu to create node links - with a search filter
+- Helper menu to test yarn story from a specific node - with a search filter (via bondage.js)
+- Support for multiple app instances and file drag and drop
+- Automatic creation of nodes with correct name and path when writing any new story threads that have no node created yet
+- Story tester tool that supports rendering of bbcode- enabling rich text (font colors, styles,images and even links) with typing animation. The tester is written in a very reusable way (as a class with methods)- so it is easy to integrate in html5 games!
+
+![yarn-testerbbcode](https://user-images.githubusercontent.com/6495061/41685950-2b8b3580-74da-11e8-89ea-c7d23dea19da.gif)
 
 # Builds
 
-Win64: http://infiniteammo.com/Yarn/Yarn-2016-08-15-win.zip
+Win64: https://github.com/blurymind/Yarn/releases/tag/untagged-1933231011a749959b56
+
+MacOS: in Progress
+
+# To compile and run from source:
+Make sure you have nodejs and electron installed. Then
 
-MacOS: http://infiniteammo.com/Yarn/Yarn-2016-08-15-mac.zip
+npm install
+
+npm start
+
+# To build a yarn executable yourself:
+npm run-script build
 
 # Examples
 
@@ -40,6 +58,9 @@ Node connections work similar to Twine.
 
 ![Screenshot](http://infiniteammo.com/Yarn/node-connections.jpg)
 
+With the difference that there is now a helper menu to create links:
+![yarn-linkmaking](https://user-images.githubusercontent.com/6495061/41685764-7bf48d1a-74d9-11e8-89bc-b7bae39470f6.gif)
+
 # Shortcut Options
 
 Shortcut options are a new method of creating dialogue branches that does not require creating new nodes.
@@ -62,17 +83,6 @@ You can find a more advanced Yarn interpreter here:
 
 https://github.com/thesecretlab/YarnSpinner
 
-# How to Run the Yarn Source as an App
-
-Download http://nwjs.io/ for your platform and extract the contents.
-
-Win64: Download the latest nwjs for Windows 64bit. Extract the content to wherever you like. Drag the yarn folder into nw.exe and it should run yarn! (if not ensure that the yarn folder has package.json in it). Alternatively run nw.exe and navigate to C:/path_to_yarn/Yarn/app/index.html 
-
-MacOS: Place source code in a new folder named "app.nw" inside the extracted nwjs.app's "Contents/Resources/" folder.
-(to explore an app's folder structure, right click and select "Show Package Contents")
-
-Linux: Download latest nwjs for linux. Extract the content to wherver you like. In that folder make a new folder named "package.nw". Clone yarn into the package.nw folder so that readme, licence and most imporatantly package.json are in the package.nw folder. Now open terminal, navigate to the folder where you extracted nwjs and run the "nw" executable.
-
 # Yarn Icon
 
 Yarn logo/icon created by @Mr_Alistair.

app/css/style.css

@@ -149,7 +149,7 @@ a:hover { color: #000;}
 {
 	transition: max-height 0.5s;
 	max-height: 0px;
-	overflow: hidden;
+	overflow: auto;
 	float: left;
 }
 
@@ -174,6 +174,15 @@ a:hover { color: #000;}
     color: #555;
 }
 
+.app-menu .dropdown .search-field
+{
+	box-sizing: border-box;
+	float: left;
+	display: block;
+	width: 100%;
+	padding: 10px;
+}
+
 .app-menu .menu:hover .dropdown
 {
 	max-height: 400px;

app/index.html

@@ -7,7 +7,8 @@
 		<link rel="stylesheet" href="css/style.css">
 
 		<!-- libraries -->
-		<script type="text/javascript" src="js/libs/jquery-1.11.2.min.js"></script>
+		<script>window.$ = window.jQuery = require('jquery');</script>
+		<!-- <script type="text/javascript" src="js/libs/jquery-1.11.2.min.js"></script> -->
 		<script type="text/javascript" src="js/libs/jquery.mousewheel.min.js"></script>
 		<script type="text/javascript" src="js/libs/transit.js"></script>
 		<script type="text/javascript" src="js/libs/knockout-3.3.0.js"></script>
@@ -25,7 +26,18 @@
 		<script type="text/javascript" src="js/classes/node.js"></script>
 	</head>
 	<body>
-
+		<button id="updateButton" onClick="ipcRenderer.send('quitAndInstall')"></button>
+		<script>
+			const ipcRenderer = require('electron').ipcRenderer;
+
+			// wait for an updateReady message
+			var updateButton = document.getElementById('updateButton');
+			updateButton.style.display = 'none';
+			ipcRenderer.on('updateReady', function(event, text) {
+				updateButton.innerHTML = "new version ready!";
+				updateButton.style.display = 'block';
+			})
+		</script>
 		<!-- Fancy Background -->
 		<div id="app-bg">&nbsp;</div>
 
@@ -35,6 +47,7 @@
 			<!-- search form -->
 			<div class="app-search">
 				<input type="text" class="search-field"/>
+
 				<div class="search-title search-item">
 					<input type="checkbox" checked="checked" id="search-title" />
 					<label for="search-title">Title</label>
@@ -81,33 +94,37 @@
 						<!-- ko if:data.editingPath() != null -->
 						<span class="item" data-bind="click: data.trySaveCurrent">Save</span>
 						<!-- /ko -->
-						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.JSON); }">Save As Json...</span>
+						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.JSON);}">Save As Json...</span>
 						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.YARNTEXT); }">Save As Yarn...</span>
 						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.TWEE); }">Save As Twee...</span>
 						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.TWEE2); }">Save As Twee2...</span>
 						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.XML); }">Save As Xml...</span>
-						<!--<span class="item" data-bind="click: app.quit">Close</span>-->
+						<span class="item" data-bind="click: app.quit">Close</span>
+					</div>
+				</div>
+
+				<div class="menu">
+					<span class="title" onmouseover="app.openNodeListMenu('run')">Run</span>
+					<div class="dropdown" id="runHelperMenu">
+						<input class="search-field" placeholder="search" type="text" id="runHelperMenuFilter" oninput="app.openNodeListMenu('run')"></input>
 					</div>
 				</div>
+
+				<!-- <div class="menu">
+					<span class="title" data-bind="click:data.sendToExternalApp">[ SAVE ]</span>
+				</div> -->
 			</div>
 
 			<!-- arrow bg canvas for linked nodes -->
 			<canvas class="arrows">
 
 			</canvas>
-
 			<!-- foreach loop  of the nodes -->
 			<div class="nodes">
 				<div class="nodes-holder" data-bind="foreach: { data: app.nodes, as: 'node' }">
 					<div class="node" data-bind="nodeBind: true, css: { inactive: !node.active()}" >
 						<div class="title" data-bind="text: node.title, style: {background:
-						node.colorID() == 1 ? '#6EA5E0' :
-						node.colorID() == 2 ? '#9EDE74' :
-						node.colorID() == 3 ? '#FFE374' :
-						node.colorID() == 4 ? '#F7A666' :
-						node.colorID() == 5 ? '#C47862' :
-						node.colorID() == 6 ? '#97E1E9' :
-						'#eee'}"></div>
+						node.titleColorValues[node.colorID()]}"></div>
 						<div class="body" data-bind="html: node.clippedBody"></div>
 						<div class="tags" data-bind="html: node.clippedTags"></div>
 						<div class="icon colorDown" data-bind="click: node.cycleColorDown"></div>
@@ -121,10 +138,22 @@
 
 			<!-- ko if:app.editing() != null -->
 			<div class="node-editor" data-bind="mousedown:app.saveNode">
-
 				<div class="form" data-bind="preventBubble: 'click', preventBubble: 'mousedown'">
 					<input type="text" class="title" data-bind="value: app.editing().title">
+
+					<!-- <div float="left"> </div> -->
+
+					<div class="app-menu">
+						<div class="menu" style="float:left">
+							<span class="title" onmouseover="app.openNodeListMenu('link')">Add Link</span>
+							<div id="linkHelperMenu" class="dropdown">
+								<input class="search-field" style="text-align:center" placeholder="search" type="text" id="linkHelperMenuFilter" oninput="app.openNodeListMenu('link')"></input>
+							</div>
+						</div>
+					</div>
+
 					<input type="text" data-bind="value: app.editing().tags">
+
 					<div class="editor-container">
 						<div class="editor" id="editor"
 							data-bind="
@@ -171,7 +200,6 @@
 				<span class="app-version" data-bind="text:app.version"></span>
 			</div>
 
-
 			<!-- marquee -->
 			<div id="marquee"></div>
 		</div>
@@ -189,8 +217,12 @@
 
 		<!-- start it all up! -->
 		<script type="text/javascript">
-			var app = new App("Yarn", "0.2.1");
-			app.run();
+			var app  
+			ipcRenderer.on('setVersionNumber', function(event, version) {
+				console.log(version)
+				app = new App("Yarn", version);
+				app.run();
+			})	
 		</script>
 
 	</body>