put in animation: instruction box gets swapped out for canvas upon user

input

public/css/main.css

@@ -16,7 +16,7 @@ h1 {
 }
 h2 {
     font-size: 24px;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
 }
 p  {
     font-size: 18px;
@@ -25,12 +25,23 @@ p  {
     margin: auto;
     width: 650px;
 }
+.instruction-box {
+    height: 95px;
+    overflow: hidden;
+    -moz-transition: height 0.5s ease;
+    -webkit-transition: height 0.5s ease;
+    transition: height 0.5s ease;
+}
 #canvas {
     width: 600px;
     height: 600px;
     border: solid #3ef74e 5px;
     border-radius: 15px;
     background-color: black;
+    opacity: 0;
+    -moz-transition: opacity 0.5s ease;
+    -webkit-transition: opacity 0.5s ease;
+    transition: opacity 0.5s ease;
 
 }
 #programsInput {

public/index.html

@@ -12,10 +12,12 @@
             <h1>RobotWar</h1>
             <h2>Welcome to the future. It is the year 2002. <br />
                 Wars still rage, but they are only fought by robots.</h2>
-            <p>Type the names of up to five programs to load into the battle robots.</p>
-            <p>You may choose more than one of each.</p>
-            <p>Then press return.</p>
-            <p>(available robots: <span id="programNames"></span>)</p>
+            <div class="instruction-box">
+                <p>Type the names of up to five programs to load into the battle robots.</p>
+                <p>You may choose more than one of each.</p>
+                <p>Then press return.</p>
+                <p>(available robots: <span id="programNames"></span>)</p>
+            </div>
             <input id="programsInput" type="text" autofocus></input>
             <canvas id="canvas" width="600" height="600"></canvas>
         </div>

public/js/main.js

@@ -267,8 +267,21 @@
                     worlds.finish();
                 }
                 var programs = this.value;
-                worlds = new Worlds(programs, BUFFER_LENGTH, startGame);
-                $(this).blur();
+                worlds = new Worlds(programs, BUFFER_LENGTH, function(gameInfo) {
+                    // TODO: instead of these hacky setTimeouts, set up
+                    // some jQuery promise objects such that we make
+                    // sure the css animation happens WHILE the initial
+                    // info and the first 1000 worlds are
+                    // being downloaded, not after.
+                    $('.instruction-box').css({height: 0});
+                    setTimeout(function() {
+                        $('#canvas').css({opacity: 1});
+                        setTimeout(function() {
+                            startGame(gameInfo);
+                        }, 500);
+                    }, 500);
+                    $(this).blur();
+                }.bind(this));
             }
         });