Integrate PuppetShow storage code into main #14

...uhh, just forgot to add all these files in previous commit
datavized · Mar 3, 2017 · c7cb0e0 · c7cb0e0
1 parent 13e08ff
commit c7cb0e0
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 6 deletions.
diff --git a/config/index.js b/config/index.js
@@ -19,14 +19,17 @@ module.exports = (function () {
 	].join('\n');
 
 	const THREE = require('three');
-	const externals = {};
+	const externals = {
+		firebase: 'firebase'
+	};
 
 	// don't use external three.js if running a dev version
 	if (/^[0-9]+$/.test(THREE.REVISION)) {
 		externals.three = 'THREE';
 	} else {
 		console.warn('Building with three.js r' + THREE.REVISION);
-}
+	}
+
 	const common = {
 		module: {
 			preLoaders: [

diff --git a/gulp/tasks/dist-html.js b/gulp/tasks/dist-html.js
@@ -44,6 +44,10 @@ module.exports = function () {
 					'https://cdnjs.cloudflare.com/ajax/libs/three.js/' + THREE.REVISION + '/three.min.js'
 				);
 			}
+
+			const firebaseVersion = require('firebase').SDK_VERSION;
+			vars.scripts.unshift('https://www.gstatic.com/firebasejs/' + firebaseVersion + '/firebase.js');
+
 			return vars;
 		}))
 		.pipe(nunjucksRender({

diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "event-emitter": "^0.3.4",
     "exports-loader": "^0.6.2",
     "file-loader": "^0.9.0",
+    "firebase": "^3.7.0",
     "fs-promise": "^0.5.0",
     "gulp": "^3.8.11",
     "gulp-data": "^1.2.0",

diff --git a/src/html/index.html b/src/html/index.html
@@ -23,14 +23,23 @@
 			top: 0;
 		}
 
-		#buttons {
+		#vr-buttons {
 			position: fixed;
 			top: 0;
 			right: 0;
 			z-index: 1;
 			background: white;
 		}
 
+		#show-buttons {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			z-index: 1;
+			background: rgba(100, 100, 100, 0.6);
+			padding: 10px;
+		}
+
 		/*
 		todo: nicer layout and design. see #8;
 		*/
@@ -46,14 +55,18 @@
 
 	<body>
 
-		<div id="buttons">
+		<div id="vr-buttons">
 			<button id="fullscreen">Fullscreen</button>
 			<button id="vr">VR (WebVR/Mobile only)</button>
 			<!-- <button id="reset">Reset</button> -->
 		</div>
 
 		<div id="sound-effects">
 		</div>
+
+		<div id="show-buttons">
+			<button id="new-show">New Puppet Show</button>
+		</div>
 	</body>
 
 	{% for script in scripts -%}

diff --git a/src/js/index.js b/src/js/index.js
@@ -22,6 +22,7 @@ require('imports?THREE=three!three/examples/js/loaders/MTLLoader');
 require('imports?THREE=three!three/examples/js/vr/ViveController');
 
 import SoundEffect from './sound-effect';
+import PuppetShow from './puppet-show';
 
 // Setup three.js WebGL renderer. Note: Antialiasing is a big performance hit.
 // Only enable it if you actually need to.
@@ -280,11 +281,42 @@ const sfx = {};
 	});
 });
 
+const puppetShow = new PuppetShow();
+puppetShow
+	.on('load', () => {
+		console.log('loaded puppet show', puppetShow.id);
+		// todo: set stage and force redraw
+
+		window.location.hash = '#' + puppetShow.id;
+	})
+	.on('unload', id => {
+		console.log('unloaded puppet show', id);
+		// todo: clear stage and force redraw
+	})
+	.on('error', id => {
+		console.log('error loading puppet show', id);
+		// todo: clear stage, force redraw and report error
+	});
+
+// load from URL or create a new one
+const showIdResults = /^#([a-z0-9\-_]+)/i.exec(window.location.hash);
+if (showIdResults && showIdResults[1]) {
+	puppetShow.load(showIdResults[1]);
+
+	// todo: handle not found or other error
+} else {
+	puppetShow.create();
+}
+
+document.getElementById('new-show').addEventListener('click', () => {
+	puppetShow.create();
+});
+
 // Request animation frame loop function
 let vrDisplay = null;
 let lastRender = 0;
 function animate(timestamp) {
-	const delta = Math.min(timestamp - lastRender, 500);
+	// const delta = Math.min(timestamp - lastRender, 500);
 	lastRender = timestamp;
 
 	// Update VR headset position and apply to camera.
@@ -399,7 +431,7 @@ requestAnimationFrame(animate);
 
 onVRDisplayPresentChange();
 
-window.addEventListener('keydown', e => {
+window.addEventListener('keydown', event => {
 	if (vrDisplay) {
 		if (event.keyCode === 13) { // enter
 			vrDisplay.requestPresent([{source: renderer.domElement}]);