use smaller font

demo.js

@@ -3,6 +3,7 @@ var instructions = document.querySelector('#blocker')
 var images = document.querySelector('#images')
 var exportButton = document.querySelector('#export')
 var resetButton = document.querySelector('#reset')
+var message = document.querySelector('#middleMessage')
 
 var game = require('voxel-hello-world')({
   texturePath: textures,
@@ -12,6 +13,9 @@ var game = require('voxel-hello-world')({
   statsDisabled: true
 })
 
+message.innerHTML = "Click to play!"
+if (game.notCapable()) instructions.style.visibility = 'hidden'
+
 game.interact.on('attain', function() { instructions.style.visibility = 'hidden' })
 game.interact.on('release', function() { instructions.style.visibility = 'visible' })
 
@@ -38,6 +42,7 @@ function shutter() {
 
 var stopMotion = require('voxel-stop-motion')(game)
 window.stop = stopMotion
+window.game = game
 
 stopMotion.cam.position.y = 7
 stopMotion.cam.position.z = 10

index.html

@@ -11,7 +11,7 @@
       <div id="instructions">
         <span class="bigger">GIF Blocks!</span>
         <br>
-        <span class="big">Click to play</span>
+        <span id="middleMessage" class="big">Loading... please wait</span>
         <br>
         <span>(ENTER = Take photo, W, A, S, D = Move, SPACE = Jump, MOUSE = Look around)</span>
       </div>
@@ -21,9 +21,7 @@
   <div id="right">
     <a id="export" href="#" class="button">Export GIF</a>
     <a id="reset" href="#" class="button danger">Reset</a>
-    <div id="images">
-
-    </div>
+    <div id="images"></div>
   </div>
   <script type="text/javascript" src="lib/LZWEncoder.js"></script>
   <script type="text/javascript" src="lib/NeuQuant.js"></script>

style.css

@@ -1,12 +1,11 @@
-@font-face {
-  font-family: Azuki;
-  src: url(azuki.ttf);
-}
-html, body { font-family: Azuki, Arial, sans-serif; margin: 0; padding: 0; width: 100%; height: 100%; }
+@import url("http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic");
+
+html, body { font-family: Lato, Helvetica, Open Sans, Arial, sans-serif; margin: 0; padding: 0; width: 100%; height: 100%; }
 .bigger { position: relative; top: -45px; font-size: 50px; margin-bottom: 10px; }
 .big { position: relative; top: -25px; font-size: 30px; margin-bottom: 10px; }
 #left { position: fixed; top: 0; left: 0; right: 20%; bottom: 0;}
 #right { position: absolute; top: 0; bottom: 0; right: 0; width: 20%; background-color: #D7DCE0;  }
+.errorMessage, .errorMessage a { font-size: 40px; margin: 20px; }
 #images img { width: 90%; padding: 0 5% 5% 5%; }
 #crosshair {
   position: absolute;