Upgraded the Preview to support SpringRoll Connect controls

Author: Matt Karl

bower.json

@@ -1,16 +1,17 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.10",
+	"version": "0.2.11",
 	"private": true,
 	"dependencies": {
 		"jqueryui": "*",
 		"bootstrap": "~3.2.0",
-		"cloudkid-namespace": "*",
+		"springroll": "*",
 		"requestAnimationFrame": "*",
 		"bootstrap-confirmation2": "*",
 		"wavesurfer.js": "*",
 		"underscore": "~1.7.0",
 		"node-webkit-app": "*",
+		"pbskids-pt-client": "SpringRoll/ProgressTrackerClient",
 		"sortable": "farhadi/html5sortable",
 		"default": "https://github.com/SpringRoll/SpringRollTemplate.git",
 		"sunlight": "https://github.com/CloudKidStudio/sunlight.git#master"

deploy/assets/fonts/glyphicons-halflings-regular.eot

@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"description": "Application for SpringRoll projects",
-	"version": "0.2.10",
+	"version": "0.2.11",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SpringRoll/SpringRollStudio"

deploy/assets/fonts/glyphicons-halflings-regular.svg

@@ -4,7 +4,7 @@
 # These three must be integers
 !define VERSIONMAJOR 0
 !define VERSIONMINOR 2
-!define VERSIONBUILD 10
+!define VERSIONBUILD 11
 # 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"

deploy/assets/fonts/glyphicons-halflings-regular.ttf

@@ -4,7 +4,7 @@
 # These three must be integers
 !define VERSIONMAJOR 0
 !define VERSIONMINOR 2
-!define VERSIONBUILD 10
+!define VERSIONBUILD 11
 # 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"

deploy/assets/fonts/glyphicons-halflings-regular.woff

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

deploy/assets/fonts/preview.eot

@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.10",
+	"version": "0.2.11",
 	"main": [
 		"components/node-webkit-app/src/utils/UpdateChecker.js",
 		"components/node-webkit-app/src/utils/Browser.js",
@@ -18,7 +18,9 @@
 		"components/jqueryui/ui/draggable.js",
 		"components/sortable/jquery.sortable.js",
 		"components/bootstrap/dist/js/bootstrap.min.js",
-		"components/cloudkid-namespace/dist/namespace.min.js",
+		"components/bellhop/dist/bellhop.min.js",
+		"components/pbskids-pt-client/dist/progress-tracker-client.min.js",
+		"components/springroll/dist/modules/container.min.js",
 		"components/bootstrap/less/bootstrap.less",
 		"components/bootstrap-confirmation2/bootstrap-confirmation.js",
 		"components/underscore/underscore.js",
@@ -35,7 +37,9 @@
 		"components/jqueryui/ui/draggable.js",
 		"components/sortable/jquery.sortable.js",
 		"components/bootstrap/dist/js/bootstrap.js",
-		"components/cloudkid-namespace/dist/namespace.js",
+		"components/bellhop/dist/bellhop.js",
+		"components/pbskids-pt-client/dist/progress-tracker-client.js",
+		"components/springroll/dist/modules/container.js",
 		"components/bootstrap/less/bootstrap.less",
 		"components/bootstrap-confirmation2/bootstrap-confirmation.min.js",
 		"components/underscore/underscore.js",
@@ -87,6 +91,7 @@
 			"src/less/new/NewProject.less"
 		],
 		"preview": [
+			"src/js/preview/PreviewContainer.js",
 			"src/js/preview/Preview.js",
 			"src/less/preview/Preview.less"
 		]

deploy/assets/fonts/preview.svg

@@ -8,11 +8,140 @@ html
 		link(href='assets/css/preview.css', rel='stylesheet')
 		script(src='assets/js/preview.js')
 	body
-		header.fixed
-			h1#title
-			button#refreshButton.btn.btn-md
-				span.glyphicon.glyphicon-refresh
-			button#devToolsButton.btn.btn-md
-				span.glyphicon.glyphicon-cog
-		#previewContainer
-			iframe#preview(scrolling='no', frameborder='0')
+		#frame.loading.show-title.show-controls
+			#pausedScreen
+				.container
+					h2 Game is Paused.
+					button#resumeButton.btn.btn-lg.btn-primary
+						span.icon.icon-play
+						|  Resume
+			#appTitle Loading...
+			.controls
+				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')
+					span.icon.icon-sound.on
+					span.icon.icon-sound-off.off
+				button#soundToggle.btn.btn-primary.main.drop-handle.disabled(data-toggle-div='#soundContexts')
+					span.arrow-down
+				form#soundContexts.drop-down.form.form-horizontal
+					.form-group.form-title
+						button.close(data-toggle-div='#soundContexts')
+							| ×
+						| Audio Settings
+					.form-group: .col-xs-12
+						button#sfxButton.btn.btn-primary.btn-block.muted.disabled
+							span.icon.icon-sfx.on
+							span.icon.icon-sfx-off.off
+							span.label.on Sound FX On
+							span.label.off Sound FX Off
+						button#musicButton.btn.btn-primary.btn-block.muted.disabled
+							span.icon.icon-music.on
+							span.icon.icon-music-off.off
+							span.label.on Music On
+							span.label.off Music Off
+						button#voButton.btn.btn-primary.btn-block.muted.disabled
+							span.icon.icon-vo.on
+							span.icon.icon-vo-off.off
+							span.label.on Voice-Over On
+							span.label.off Voice-Over Off						
+				button#captionsButton.btn.btn-primary.main.muted.disabled(data-toggle='tooltip', title='Toggle Captions')
+					span.icon.icon-captions.on
+					span.icon.icon-captions-off.off
+				button#captionsToggle.btn.btn-primary.main.drop-handle.disabled(data-toggle-div='#captionsStyles')
+					span.arrow-down
+				form#captionsStyles.drop-down.form.form-horizontal
+					.form-group.form-title
+						button.close(data-toggle-div='#captionsStyles')
+							| ×
+						| Captions Style
+					.form-group
+						label.col-xs-4.control-label Align
+						.col-xs-8: select.form-control(name='align')
+							option(value='top', selected='') Top
+							option(value='bottom') Bottom
+					.form-group
+						label.col-xs-4.control-label Text Color
+						.col-xs-8: select.form-control(name='color')
+							option(value='white', selected='') White
+							option(value='white-semi') White (50%)
+							option(value='black') Black
+							option(value='black-semi') Black (50%)
+							option(value='yellow') Yellow
+							option(value='yellow-semi') Yellow (50%)
+							option(value='pink') Pink
+							option(value='pink-semi') Pink (50%)
+							option(value='blue') Blue
+							option(value='blue-semi') Blue (50%)
+					.form-group
+						label.col-xs-4.control-label Background Color
+						.col-xs-8: select.form-control(name='background')
+							option(value='none') [None]
+							option(value='white') White
+							option(value='white-semi') White (50%)
+							option(value='black') Black
+							option(value='black-semi', selected='') Black (50%)
+							option(value='yellow') Yellow
+							option(value='yellow-semi') Yellow (50%)
+							option(value='pink') Pink
+							option(value='pink-semi') Pink (50%)
+							option(value='blue') Blue
+							option(value='blue-semi') Blue (50%)
+					.form-group
+						label.col-xs-4.control-label Edge Style
+						.col-xs-8: select.form-control(name='edge')
+							option(value='none', selected='') [None]
+							option(value='raise') Beveled Up
+							option(value='depress') Beveled Down
+							option(value='uniform') Stroke
+							option(value='drop') Drop Shadow
+					.form-group
+						label.col-xs-4.control-label Size
+						.col-xs-8: select.form-control(name='size')
+							option(value='xs') Extra Small
+							option(value='sm') Small
+							option(value='md', selected='') Medium
+							option(value='lg') Large
+							option(value='xl') Extra Large
+					.form-group
+						label.col-xs-4.control-label Font
+						.col-xs-8: select.form-control(name='font')
+							option(value='arial', selected='') Arial
+							option(value='arial-black') Arial Black
+							option(value='comic-sans') Comic Sans MS
+							option(value='courier') Courier New
+							option(value='georgia') Georgia
+							option(value='impact') Impact
+							option(value='console') Lucida Console
+							option(value='lucida') Lucida Grande
+							option(value='palatino') Palatino Linotype
+							option(value='tahoma') Tahoma
+							option(value='times') Times New Roman
+							option(value='trebuchet') Trebuchet MS
+							option(value='verdana') Verdana						
+				button#settingsButton.btn.btn-primary.main.disabled(data-toggle-div='#settings', data-toggle='tooltip', title='Logging Service')
+					span.icon.icon-gear
+				form#settings.drop-down.form.form-horizontal
+					.form-group.form-title
+						button#cancelSettings.close(data-toggle-div='#settings')
+							| ×
+						| Logging Service
+					.form-group
+						label.col-xs-4.control-label Host or IP
+						.col-xs-8: input.form-control#remoteHost(type='text', name='remoteHost')
+					.form-group
+						label.col-xs-4.control-label Channel Name
+						.col-xs-8: input.form-control#remoteChannel(type='text', name='remoteChannel')
+					.form-group.text-center
+						.col-xs-8.col-xs-offset-4
+							button#remoteConnect.btn.btn-primary.btn-block.disabled(data-toggle-div='#settings')
+								| Connect
+				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
+			.appWrapper
+				iframe#appContainer(frameborder='0', scrolling='no')

deploy/assets/fonts/preview.ttf

@@ -8,7 +8,11 @@
 	}
 
 	// Import classes
-	var Module = springroll.Module;
+	var Module = springroll.Module,
+		PreviewContainer = springroll.PreviewContainer;
+
+	// The local port to use for the preview server
+	var SERVER_PORT = 3030;
 
 	/**
 	 *  Preview the current project
@@ -29,36 +33,41 @@
 		 * The local location for the iframe
 		 * @property {string} location
 		 */
-		this.location = "http://localhost:3000";
+		this.location = "http://localhost:" + SERVER_PORT;
 
 		/**
 		 * The current iframe
 		 * @property {jquery} iframe
 		 */
-		this.iframe = $("#preview");
+		this.container = new PreviewContainer();
 
-		var project = localStorage.getItem('project');
+		// Grab the opened project
+		this.project = localStorage.getItem('project');
 
 		$("#refreshButton").click(this.refresh.bind(this));
 		$("#devToolsButton").click(this.toggleDevTools.bind(this));
-
-		// Set the project title
-		$("#title").text(path.basename(project));
+		
+		// Disable the form submitting
+		$('form').submit(function(e)
+		{
+			return false;
+		});
 
 		if (APP)
 		{
 			var app = connect();
-			this.server = app.listen(3000);
+			this.server = app.listen(SERVER_PORT);
 			app.use(serveStatic(
-				path.join(project, 'deploy'),
+				path.join(this.project, 'deploy'),
 				{'index': ['index.html']}
 			));
 
 			// Initialize the menu
 			this.initMenubar(false, true);
 		}
 
-		this.refresh();
+		// When the app closes re-open it
+		this.open();
 	};
 
 	// Reference to the prototype
@@ -70,8 +79,25 @@
 	 */
 	p.refresh = function()
 	{
-		// Goto the webserver
-		this.iframe.prop('src', this.location);
+		this.container.close();
+	};
+
+	/**
+	 * Open the project's deploy folder
+	 * @method  open
+	 */
+	p.open = function()
+	{
+		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.connectLoggingService();
+		}
+
+		this.container.open(this.location);
+		this.container.once('closed', this.open.bind(this));
 	};
 
 	/**
@@ -88,7 +114,7 @@
 		{
 			// Run the dev tools in jailed mode
 			// edit the iframe contents only
-			this.main.showDevTools(this.iframe[0]);
+			this.main.showDevTools(this.container.dom);
 		}
 	};
 
@@ -98,7 +124,8 @@
 	*/
 	p.shutdown = function()
 	{
-		this.iframe = null;
+		this.container = null;
+		this.project = null;
 
 		if (this.server)
 		{