Merge pull request mozilla#17 from dmose/game-over

Game over (r=humphd)
rhung · Sep 9, 2011 · 3c3a71f · 3c3a71f
2 parents 03baa08 + a9d8aa9
commit 3c3a71f
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 10 deletions.
diff --git a/src/flexbox-rules.css b/src/flexbox-rules.css
@@ -0,0 +1,110 @@
+/** 
+ * hbox and vbox classes, taken from 
+ * 
+ * http://infrequently.org/2009/08/css-3-progress/
+ * 
+ * Thanks to Alex Russell for writing these, and James Burke for turning me
+ * on to them!
+ */
+
+.hbox {
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-align: stretch;
+
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  -moz-box-align: stretch;
+
+  display: box;
+  box-orient: horizontal;
+  box-align: stretch;
+}
+
+.hbox > * {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  display: block;
+}
+
+.vbox {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
+
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-align: stretch;
+
+  display: box;
+  box-orient: vertical;
+  box-align: stretch;
+}
+
+.vbox > * {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  display: block;
+}
+
+.spacer {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  box-flex: 1;
+}
+
+.reverse {
+  -webkit-box-direction: reverse;
+  -moz-box-direction: reverse;
+  box-direction: reverse;
+}
+
+.boxFlex0 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+}
+
+.boxFlex1, .boxFlex {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  box-flex: 1;
+}
+
+.boxFlex2 {
+  -webkit-box-flex: 2;
+  -moz-box-flex: 2;
+  box-flex: 2;
+}
+
+.boxGroup1 {
+  -webkit-box-flex-group: 1;
+  -moz-box-flex-group: 1;
+  box-flex-group: 1;
+}
+
+.boxGroup2 {
+  -webkit-box-flex-group: 2;
+  -moz-box-flex-group: 2;
+  box-flex-group: 2;
+}
+
+.start {
+  -webkit-box-pack: start;
+  -moz-box-pack: start;
+  box-pack: start;
+}
+
+.end {
+  -webkit-box-pack: end;
+  -moz-box-pack: end;
+  box-pack: end;
+}
+
+.center {
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  box-pack: center;
+}
diff --git a/src/index.html b/src/index.html
@@ -2,12 +2,21 @@
 <html>
   <head>
     <title>RescueFox</title>
+    <link rel="stylesheet" type="text/css" href="flexbox-rules.css">
     <link rel="stylesheet" type="text/css" href="rescuefox.css">
     <script type="text/javascript" src="../external/paladin/external/CubicVR.js/lib/ammo.js"></script>
     <script type="text/javascript" src="../external/paladin/src/paladin.js"></script>
     <script type="text/javascript" src="rescuefox.js"></script>
   </head>
   <body>
-    <div id="secondsLeft"></div>
+    <div id="secondsLeft" class="aboveCanvas"></div>
+
+    <div id="bannerBox" class="fullScreen hbox center">
+      <div class="vbox center"> 
+        <div id="banner">Doh! You're out of air.</div>
+        <div id="banner2">Better luck next time.</div>
+      </div>
+    </div>
+
   </body>
 </html>
diff --git a/src/rescuefox.css b/src/rescuefox.css
@@ -1,12 +1,26 @@
+html {
+  height: 100%;
+  width: 100%
+}
 body {
   font-size: 3em;
   color: white;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+.aboveCanvas {
+  z-index: 10;
+}
+
+.fullScreen {
+  width: 100%;
+  height: 100%;
 }
 
 #secondsLeft {
   position: absolute;
   right: 30px;
   top: 30px;
-  z-index: 10;
 }
-
diff --git a/src/rescuefox.js b/src/rescuefox.js
@@ -1,4 +1,4 @@
-/*global console,paladin */
+/*global console,paladin,window */
 (function() {
 
 	var Game = function( options ) {
@@ -529,6 +529,9 @@
           engine.tasker.terminate();
           mainLoop.setPaused(true);
           CubicVR.setMainLoop(null);
+
+          // push the canvas behind the "game over" banner
+          CubicVR.getCanvas().style.zIndex = -1;
         }
       }
     };
@@ -544,12 +547,12 @@
 	};
 
 	document.addEventListener( 'DOMContentLoaded', function( event ) {
-		paladin.create( { debug: true },
-				function( engineInstance ) {
-			var game = new Game( { engine: engineInstance } );
-			console.log( "Starting game" );
-			game.run();
-		}
+
+		paladin.create( { debug: true }, 
+		  function( engineInstance ) {
+			  var game = new Game( { engine: engineInstance } );
+			  game.run();
+		  }
 		);
 		/*
 		paladin.create( {debug: true },