Preview can now be opened remotely

Author: Matt Karl

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.11",
+	"version": "0.2.12",
 	"private": true,
 	"dependencies": {
 		"jqueryui": "*",

deploy/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"description": "Application for SpringRoll projects",
-	"version": "0.2.11",
+	"version": "0.2.12",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SpringRoll/SpringRollStudio"
@@ -29,6 +29,7 @@
 		"fs-extra": "~0.12.0",
 		"glob": "~4.0.6",
 		"grunt-cli": "^0.1.13",
+		"ip": "^0.3.3",
 		"lodash": "^3.7.0",
 		"node-watch": "~0.3.4",
 		"replace": "~0.3.0",

installer/win32.nsi

@@ -4,7 +4,7 @@
 # These three must be integers
 !define VERSIONMAJOR 0
 !define VERSIONMINOR 2
-!define VERSIONBUILD 11
+!define VERSIONBUILD 12
 # These will be displayed by the "Click here for support information" link in "Add/Remove Programs"
 # It is possible to use "mailto:" links in here to open the email client
 !define HELPURL "https://github.com/SpringRoll/SpringRollStudio/issues"

installer/win64.nsi

@@ -4,7 +4,7 @@
 # These three must be integers
 !define VERSIONMAJOR 0
 !define VERSIONMINOR 2
-!define VERSIONBUILD 11
+!define VERSIONBUILD 12
 # These will be displayed by the "Click here for support information" link in "Add/Remove Programs"
 # It is possible to use "mailto:" links in here to open the email client
 !define HELPURL "https://github.com/SpringRoll/SpringRollStudio/issues"

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"private": true,
-	"version": "0.2.11",
+	"version": "0.2.12",
 	"dependencies": {
 		"grunt": "^0.4.5",
 		"grunt-appdmg": "^0.3.1",

project.json

@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.11",
+	"version": "0.2.12",
 	"main": [
 		"components/node-webkit-app/src/utils/UpdateChecker.js",
 		"components/node-webkit-app/src/utils/Browser.js",
@@ -91,9 +91,15 @@
 			"src/less/new/NewProject.less"
 		],
 		"preview": [
+			"src/js/preview/PreviewServer.js",
 			"src/js/preview/PreviewContainer.js",
 			"src/js/preview/Preview.js",
 			"src/less/preview/Preview.less"
+		],
+		"preview-client": [
+			"src/js/preview/PreviewContainer.js",
+			"src/js/preview/PreviewClient.js",
+			"src/less/preview/Preview.less"
 		]
 	}
 }

src/jade/preview.jade renamed to src/jade/preview-client.jade

@@ -4,9 +4,13 @@ html
 		meta(charset='utf-8')
 		title Preview
 		include partials/libraries
-		include partials/shared
-		link(href='assets/css/preview.css', rel='stylesheet')
-		script(src='assets/js/preview.js')
+		
+		block head
+
+			link(href='assets/css/shared.css', rel='stylesheet')
+			link(href='assets/css/preview.css', rel='stylesheet')
+			script(src='assets/js/preview-client.js')
+			meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0")
 	body
 		#frame.loading.show-title.show-controls
 			#pausedScreen
@@ -16,7 +20,7 @@ html
 						span.icon.icon-play
 						|  Resume
 			#appTitle Loading...
-			.controls
+			.controls.text-right
 				button#helpButton.btn.btn-primary.main.disabled(data-toggle='tooltip', title='Play Help')
 					span.icon.icon-help
 				button#soundButton.btn.btn-primary.main.muted.disabled(data-toggle='tooltip', title='Toggle All Sounds')
@@ -139,9 +143,8 @@ html
 				button#pauseButton.btn.btn-primary.main.unpaused.disabled(data-toggle='tooltip', title='Play/Pause')
 					span.icon.icon-pause.on
 					span.icon.icon-play.off
-				button#refreshButton.btn.btn-primary.main(data-toggle='tooltip', title='Reload')
-					span.glyphicon.glyphicon-refresh
-				button#devToolsButton.btn.btn-primary.main(data-toggle='tooltip', title='Toggle Console')
-					span.glyphicon.glyphicon-list
+
+				block controls
+
 			.appWrapper
 				iframe#appContainer(frameborder='0', scrolling='no')

src/js/preview/Preview.js

@@ -1,18 +1,9 @@
-(function(){
-	
-	if (APP)
-	{
-		var connect = require('connect');
-		var serveStatic = require('serve-static');
-		var path = require('path');
-	}
-
+(function()
+{
 	// Import classes
 	var Module = springroll.Module,
-		PreviewContainer = springroll.PreviewContainer;
-
-	// The local port to use for the preview server
-	var SERVER_PORT = 3030;
+		PreviewContainer = springroll.PreviewContainer,
+		Server = springroll.PreviewServer;
 
 	/**
 	 *  Preview the current project
@@ -24,50 +15,33 @@
 		Module.call(this);
 
 		/**
-		 * The web server
-		 * @property {Server} server
+		 * The web server for project view
+		 * @property {springroll.PreviewServer} server
 		 */
-		this.server = null;
+		this.server = new Server(localStorage.getItem('project'));
 
 		/**
 		 * The local location for the iframe
 		 * @property {string} location
 		 */
-		this.location = "http://localhost:" + SERVER_PORT;
+		this.location = "http://localhost:" + this.server.port + '/game';
 
 		/**
 		 * The current iframe
 		 * @property {jquery} iframe
 		 */
 		this.container = new PreviewContainer();
 
-		// Grab the opened project
-		this.project = localStorage.getItem('project');
-
 		$("#refreshButton").click(this.refresh.bind(this));
 		$("#devToolsButton").click(this.toggleDevTools.bind(this));
-		
-		// Disable the form submitting
-		$('form').submit(function(e)
-		{
-			return false;
-		});
 
 		if (APP)
 		{
-			var app = connect();
-			this.server = app.listen(SERVER_PORT);
-			app.use(serveStatic(
-				path.join(this.project, 'deploy'),
-				{'index': ['index.html']}
-			));
-
 			// Initialize the menu
 			this.initMenubar(false, true);
 		}
-
-		// When the app closes re-open it
-		this.open();
+		
+		this.open(); 
 	};
 
 	// Reference to the prototype
@@ -91,11 +65,12 @@
 		if (APP)
 		{
 			// Set the project title and 
-			this.container.appTitle.text(path.basename(this.project));
-			this.container.remoteChannel.val(path.basename(this.project));
+			this.container.appTitle.text(this.server.title);
+			this.container.remoteChannel.val(this.server.title);
 			this.container.connectLoggingService();
 		}
 
+		console.log("Open location " + this.location);
 		this.container.open(this.location);
 		this.container.once('closed', this.open.bind(this));
 	};
@@ -125,14 +100,20 @@
 	p.shutdown = function()
 	{
 		this.container = null;
-		this.project = null;
 
 		if (this.server)
 		{
-			this.server.close();
-			this.server = null;
+			this.server.destroy(function()
+			{
+				this.server = null;
+				this.close(true);
+			}
+			.bind(this));
+		}
+		else
+		{
+			this.close(true);
 		}
-		this.close(true);
 	};
 
 	// Create the module

src/js/preview/PreviewClient.js

@@ -0,0 +1,13 @@
+$(function()
+{
+	// Get the server info like the path etc
+	$.getJSON('/title', function(title)
+	{
+		var container = new springroll.PreviewContainer();
+		container.appTitle.text(title);
+		container.remoteChannel.val(title);
+		container.connectLoggingService();
+		container.open('/game');
+	});
+
+});

src/js/preview/PreviewContainer.js

@@ -23,6 +23,12 @@
 			pauseButton: "#pauseButton, #resumeButton"
 		});
 
+		// Disable the form submitting
+		$('form').submit(function(e)
+		{
+			return false;
+		});
+
 		/**
 		*  The entire game view including the standard game buttons
 		*  @property {jquery} frame

src/js/preview/PreviewServer.js

@@ -0,0 +1,119 @@
+(function()
+{
+	if (APP)
+	{
+		var connect = require('connect');
+		var serveStatic = require('serve-static');
+		var path = require('path');
+		var ip = require('ip');
+	}
+
+	/**
+	 * The server wrapper
+	 * @class PreviewServer
+	 * @constructor
+	 * @param {String} project Full path to the project
+	 */
+	var PreviewServer = function(project)
+	{
+		if (APP)
+		{
+			/**
+			 * Instance of the node server
+			 * @property {Server} _server
+			 * @private
+			 */
+			this._server = null;
+
+			/**
+			 * The default title
+			 * @property {String} title
+			 */
+			this.title = path.basename(project);
+
+			/**
+			 * The port to use
+			 * @property {int} port
+			 * @readOnly
+			 */
+			this.port = 3333;
+
+			/**
+			 * The default ip address
+			 * @property {String} address
+			 */
+			this.address = ip.address();
+
+			var app = connect();
+
+			// Create an alias for the game
+			app.use('/game', serveStatic(
+				path.join(project, 'deploy'),
+				{'index': ['index.html']}
+			));
+
+			// Made the main to the prevew page
+			app.use(serveStatic(
+				path.resolve('.'),
+				{'index': ['preview-client.html']} 
+			));
+
+			// Handle info for the remote server request
+			app.use('/title', function(req, res)
+			{
+				res.end(JSON.stringify(this.title));
+			}
+			.bind(this));
+
+			this._server = app.listen(this.port);
+			enableDestroy(this._server);
+		}
+	};
+
+	// Reference to the prototpye
+	var p = PreviewServer.prototype;
+
+	/**
+	 * Enable destroying of the server
+	 * @method enableDestroy
+	 * @param {Server} server The server reference
+	 */
+	function enableDestroy(server)
+	{
+		var connections = {};
+		server.on('connection', function(conn)
+		{
+			var key = conn.remoteAddress + ':' + conn.remotePort;
+			connections[key] = conn;
+			conn.on('close', function()
+			{
+				delete connections[key];
+			});
+		});
+
+		server.destroy = function(cb)
+		{
+			server.close(cb);
+			for (var key in connections)
+				connections[key].destroy();
+		};
+	}
+
+	/**
+	 * Destroy the server
+	 * @method destroy
+	 * @param {Function} callback Callback function
+	 */
+	p.destroy = function(callback)
+	{
+		if (this._server)
+		{
+			this._server.destroy(callback);
+			this._server = null;
+		}
+	};
+
+	// Assign to namespace
+	namespace('springroll').PreviewServer = PreviewServer;
+
+}());

tasks/jade.js

@@ -13,6 +13,7 @@ module.exports = {
 			"<%= distFolder %>/index.html": "src/jade/index.jade",
 			"<%= distFolder %>/new.html": "src/jade/new.jade",
 			"<%= distFolder %>/preview.html": "src/jade/preview.jade",
+			"<%= distFolder %>/preview-client.html": "src/jade/preview-client.jade",
 			"<%= distFolder %>/remote.html": "src/jade/remote.jade",
 			"<%= distFolder %>/tasks-terminal.html": "src/jade/tasks-terminal.jade",
 			"<%= distFolder %>/tasks-test.html": "src/jade/tasks-test.jade",