comeon keep going

build/bundle.js

@@ -4807,6 +4807,14 @@ var Level = Sandbox.extend({
     }, this));
   },
 
+  showGoal: function() {
+    this.goalCanvasHolder.slideIn();
+  },
+
+  hideGoal: function() {
+    this.goalCanvasHolder.slideOut();
+  },
+
   initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
 
@@ -4820,7 +4828,6 @@ var Level = Sandbox.extend({
         }).getInstantCommands()
       );
     }
-
   },
 
   initGitShim: function(options) {
@@ -4887,6 +4894,7 @@ var Level = Sandbox.extend({
 
   levelSolved: function(defer) {
     this.solved = true;
+    this.hideGoal();
     this.mainVis.gitVisuals.finishAnimation()
     .then(function() {
       defer.resolve();
@@ -6567,27 +6575,6 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
-  harshSlideChange: function(value) {
-  },
-
-  slideOut: function() {
-    this.toggleSlide(true);
-  },
-
-  slideIn: function() {
-    this.toggleSlide(false);
-  },
-
-  toggleSlide: function(value) {
-    if (!this.containerElement) {
-      console.warn('cant slide with absolute positioning');
-      return;
-    }
-
-    // no classes on svg :-/
-    $(this.containerElement).toggleClass('slideOut', value);
-  },
-
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {
@@ -9483,6 +9470,18 @@ var CanvasTerminalHolder = BaseView.extend({
     this.render();
   },
 
+  slideOut: function() {
+    this.slideToggle(true);
+  },
+
+  slideIn: function() {
+    this.slideToggle(false);
+  },
+
+  slideToggle: function(value) {
+    this.$('div.terminal-window-holder').toggleClass('slideOut', value);
+  },
+
   getCanvasLocation: function() {
     return this.$('div.inside')[0];
   }
@@ -17478,6 +17477,14 @@ var Level = Sandbox.extend({
     }, this));
   },
 
+  showGoal: function() {
+    this.goalCanvasHolder.slideIn();
+  },
+
+  hideGoal: function() {
+    this.goalCanvasHolder.slideOut();
+  },
+
   initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
 
@@ -17491,7 +17498,6 @@ var Level = Sandbox.extend({
         }).getInstantCommands()
       );
     }
-
   },
 
   initGitShim: function(options) {
@@ -17558,6 +17564,7 @@ var Level = Sandbox.extend({
 
   levelSolved: function(defer) {
     this.solved = true;
+    this.hideGoal();
     this.mainVis.gitVisuals.finishAnimation()
     .then(function() {
       defer.resolve();
@@ -19259,6 +19266,18 @@ var CanvasTerminalHolder = BaseView.extend({
     this.render();
   },
 
+  slideOut: function() {
+    this.slideToggle(true);
+  },
+
+  slideIn: function() {
+    this.slideToggle(false);
+  },
+
+  slideToggle: function(value) {
+    this.$('div.terminal-window-holder').toggleClass('slideOut', value);
+  },
+
   getCanvasLocation: function() {
     return this.$('div.inside')[0];
   }
@@ -21922,27 +21941,6 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
-  harshSlideChange: function(value) {
-  },
-
-  slideOut: function() {
-    this.toggleSlide(true);
-  },
-
-  slideIn: function() {
-    this.toggleSlide(false);
-  },
-
-  toggleSlide: function(value) {
-    if (!this.containerElement) {
-      console.warn('cant slide with absolute positioning');
-      return;
-    }
-
-    // no classes on svg :-/
-    $(this.containerElement).toggleClass('slideOut', value);
-  },
-
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {

src/index.html

@@ -97,6 +97,7 @@
 
   <script type="text/html" id="terminal-window-bare-template">
     <div class="terminal-window-holder box flex3 vertical transitionTransform">
+      <div class="wrapper box vertical">
         <div class="toolbar box vertical">
           <div class="controls box horizontal">
             <div class="box flex1">
@@ -117,10 +118,13 @@
             <%= title %>
           </div>
         </div>
-
+        <div class="terminal-text">
+          <p> yo </p>
+        </div>
         <div class="inside box flex1">
         </div>
       </div>
+    </div>
     <div class="box flex3">
     </div>
   </script>

src/js/level/index.js

@@ -77,6 +77,14 @@ var Level = Sandbox.extend({
     }, this));
   },
 
+  showGoal: function() {
+    this.goalCanvasHolder.slideIn();
+  },
+
+  hideGoal: function() {
+    this.goalCanvasHolder.slideOut();
+  },
+
   initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
 
@@ -90,7 +98,6 @@ var Level = Sandbox.extend({
         }).getInstantCommands()
       );
     }
-
   },
 
   initGitShim: function(options) {
@@ -157,6 +164,7 @@ var Level = Sandbox.extend({
 
   levelSolved: function(defer) {
     this.solved = true;
+    this.hideGoal();
     this.mainVis.gitVisuals.finishAnimation()
     .then(function() {
       defer.resolve();

src/js/views/index.js

@@ -323,6 +323,18 @@ var CanvasTerminalHolder = BaseView.extend({
     this.render();
   },
 
+  slideOut: function() {
+    this.slideToggle(true);
+  },
+
+  slideIn: function() {
+    this.slideToggle(false);
+  },
+
+  slideToggle: function(value) {
+    this.$('div.terminal-window-holder').toggleClass('slideOut', value);
+  },
+
   getCanvasLocation: function() {
     return this.$('div.inside')[0];
   }

src/js/visuals/visualization.js

@@ -87,27 +87,6 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
-  harshSlideChange: function(value) {
-  },
-
-  slideOut: function() {
-    this.toggleSlide(true);
-  },
-
-  slideIn: function() {
-    this.toggleSlide(false);
-  },
-
-  toggleSlide: function(value) {
-    if (!this.containerElement) {
-      console.warn('cant slide with absolute positioning');
-      return;
-    }
-
-    // no classes on svg :-/
-    $(this.containerElement).toggleClass('slideOut', value);
-  },
-
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {

src/style/main.css

@@ -131,32 +131,48 @@ div.canvasTerminalHolder {
 }
 
 #mainVisSpace {
-  background-color: #4183C4;
+  background-color: #24A7FF;
 }
 
 #interfaceWrapper {
   min-width: 600px;
-  min-height: 400px;
+  min-height: 600px;
 }
 
 div.canvasTerminalHolder div.terminal-window-holder {
-  margin: 50px 0;
+  margin: 10% 0;
   height: 100%;
+  -webkit-transform: translate3d(0,0,0);
+}
+
+div.canvasTerminalHolder div.terminal-window-holder.slideOut {
+  -webkit-transform: translate3d(-150%,0,0);
+}
+
+div.canvasTerminalHolder div.terminal-window-holder div.wrapper {
+  margin: 0 20px 0px 20px;
+  height: 80%;
+  box-shadow: 0 0 30px rgb(0,0,0);
+}
+
+div.canvasTerminalHolder div.terminal-window-holder div.terminal-text {
+  padding: 5px 10px;
 }
 
 div.canvasTerminalHolder div.terminal-window-holder div.toolbar,
+div.canvasTerminalHolder div.terminal-window-holder div.terminal-text,
 div.canvasTerminalHolder div.terminal-window-holder div.inside {
-  margin: 0px 20px;
   border: 0px;
 }
 
+div.canvasTerminalHolder div.terminal-window-holder div.terminal-text,
+div.canvasTerminalHolder div.terminal-window-holder div.inside {
+  background: #ff4c7e;
+}
+
 div.canvasTerminalHolder div.terminal-window-holder div.inside {
   min-height: 200px;
-  margin-bottom: 150px;
   border-radius: 0 0 5px 5px;
-  background: #4C7956;
-  background: -webkit-linear-gradient(top, #97ECAA 0%,#698D48 100%);
-  box-shadow: 0 0 10px rgba(0,0,0,0.7);
 }
 
 div.canvasTerminalHolder div.terminal-window-holder,