git demonstration co ming along

build/bundle.js

@@ -9752,6 +9752,10 @@ var ModalAlert = ContainedBase.extend({
       title: 'Alert!'
     });
     this.render();
+
+    if (!options.wait) {
+      this.show();
+    }
   },
 
   render: function() {
@@ -15059,7 +15063,11 @@ var MultiView = Backbone.View.extend({
     if (!this.typeToConstructor[type]) {
       throw new Error('no constructor for type "' + type + '"');
     }
-    var view = new this.typeToConstructor[type](viewJSON.options);
+    var view = new this.typeToConstructor[type](_.extend(
+      {},
+      viewJSON.options,
+      { wait: true }
+    ));
     return view;
   },
 
@@ -15806,6 +15814,62 @@ HeadlessGit.prototype.sendCommand = function(value) {
 exports.HeadlessGit = HeadlessGit;
 
 
+});
+
+require.define("/src/js/views/gitDemonstrationView.js",function(require,module,exports,__dirname,__filename,process,global){var _ = require('underscore');
+var Q = require('q');
+// horrible hack to get localStorage Backbone plugin
+var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
+
+var ModalTerminal = require('../views').ModalTerminal;
+var ContainedBase = require('../views').ContainedBase;
+var KeyboardListener = require('../util/keyboard').KeyboardListener;
+
+var GitDemonstrationView = ContainedBase.extend({
+  tagName: 'div',
+  className: 'gitDemonstrationView box horizontal',
+  template: _.template($('#git-demonstration-view').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.JSON = _.extend(
+      options,
+      {
+        beforeMarkdowns: [
+          '## Git Commits',
+          '',
+          'Awesome!'
+        ],
+        command: 'git commit',
+        afterMarkdowns: [
+          'Now you have seen it in action',
+          '',
+          'Go ahead and try the level!'
+        ]
+      }
+    );
+
+    var convert = function(markdowns) {
+      return require('markdown').markdown.toHTML(markdowns.join('\n'));
+    };
+
+    this.JSON.beforeHTML = convert(this.JSON.beforeMarkdowns);
+    this.JSON.afterHTML = convert(this.JSON.afterMarkdowns);
+
+    this.container = new ModalTerminal({
+      title: options.title || 'Git Demonstration'
+    });
+    this.render();
+
+    if (!options.wait) {
+      this.show();
+    }
+  }
+});
+
+exports.GitDemonstrationView = GitDemonstrationView;
+
+
 });
 
 require.define("/src/js/app/index.js",function(require,module,exports,__dirname,__filename,process,global){var _ = require('underscore');
@@ -19470,7 +19534,8 @@ var toGlobalize = {
   ZoomLevel: require('../util/zoomLevel'),
   VisBranch: require('../visuals/visBranch'),
   Level: require('../level'),
-  Sandbox: require('../level/sandbox')
+  Sandbox: require('../level/sandbox'),
+  GitDemonstrationView: require('../views/gitDemonstrationView')
 };
 
 _.each(toGlobalize, function(module) {
@@ -20191,11 +20256,52 @@ var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.
 
 var ModalTerminal = require('../views').ModalTerminal;
 var ContainedBase = require('../views').ContainedBase;
-var ConfirmCancelView = require('../views').ConfirmCancelView;
-var LeftRightView = require('../views').LeftRightView;
-var ModalAlert = require('../views').ModalAlert;
 var KeyboardListener = require('../util/keyboard').KeyboardListener;
 
+var GitDemonstrationView = ContainedBase.extend({
+  tagName: 'div',
+  className: 'gitDemonstrationView box horizontal',
+  template: _.template($('#git-demonstration-view').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.JSON = _.extend(
+      options,
+      {
+        beforeMarkdowns: [
+          '## Git Commits',
+          '',
+          'Awesome!'
+        ],
+        command: 'git commit',
+        afterMarkdowns: [
+          'Now you have seen it in action',
+          '',
+          'Go ahead and try the level!'
+        ]
+      }
+    );
+
+    var convert = function(markdowns) {
+      return require('markdown').markdown.toHTML(markdowns.join('\n'));
+    };
+
+    this.JSON.beforeHTML = convert(this.JSON.beforeMarkdowns);
+    this.JSON.afterHTML = convert(this.JSON.afterMarkdowns);
+
+    this.container = new ModalTerminal({
+      title: options.title || 'Git Demonstration'
+    });
+    this.render();
+
+    if (!options.wait) {
+      this.show();
+    }
+  }
+});
+
+exports.GitDemonstrationView = GitDemonstrationView;
+
 
 });
 require("/src/js/views/gitDemonstrationView.js");
@@ -20465,6 +20571,10 @@ var ModalAlert = ContainedBase.extend({
       title: 'Alert!'
     });
     this.render();
+
+    if (!options.wait) {
+      this.show();
+    }
   },
 
   render: function() {
@@ -20882,7 +20992,11 @@ var MultiView = Backbone.View.extend({
     if (!this.typeToConstructor[type]) {
       throw new Error('no constructor for type "' + type + '"');
     }
-    var view = new this.typeToConstructor[type](viewJSON.options);
+    var view = new this.typeToConstructor[type](_.extend(
+      {},
+      viewJSON.options,
+      { wait: true }
+    ));
     return view;
   },
 

src/index.html

@@ -179,6 +179,31 @@
     </div>
   </script>
 
+  <script type="text/html" id="git-demonstration-view">
+    <div class="demonstrationText box vertical">
+      <div class="beforeText box flex1 vertical center">
+        <p>
+          <%= beforeHTML %>
+        </p>
+      </div>
+
+      <div class="command box flex1 vertical center centerAlign">
+        <a class="uiButton uiButtonYellow">
+          <%= command %>
+        </a>
+      </div>
+
+      <div class="afterText box flex1 vertical center transitionOpacity">
+        <p>
+          <%= afterHTML %>
+        </p>
+      </div>
+    </div>
+
+    <div class="visHolder box vertical flex1">
+    </div>
+  </script>
+
   <script type="text/html" id="modal-alert-template">
     <h2>
       <%= title %>

src/js/util/debug.js

@@ -19,7 +19,8 @@ var toGlobalize = {
   ZoomLevel: require('../util/zoomLevel'),
   VisBranch: require('../visuals/visBranch'),
   Level: require('../level'),
-  Sandbox: require('../level/sandbox')
+  Sandbox: require('../level/sandbox'),
+  GitDemonstrationView: require('../views/gitDemonstrationView')
 };
 
 _.each(toGlobalize, function(module) {

src/js/views/gitDemonstrationView.js

@@ -5,8 +5,49 @@ var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.
 
 var ModalTerminal = require('../views').ModalTerminal;
 var ContainedBase = require('../views').ContainedBase;
-var ConfirmCancelView = require('../views').ConfirmCancelView;
-var LeftRightView = require('../views').LeftRightView;
-var ModalAlert = require('../views').ModalAlert;
 var KeyboardListener = require('../util/keyboard').KeyboardListener;
 
+var GitDemonstrationView = ContainedBase.extend({
+  tagName: 'div',
+  className: 'gitDemonstrationView box horizontal',
+  template: _.template($('#git-demonstration-view').html()),
+
+  initialize: function(options) {
+    options = options || {};
+    this.JSON = _.extend(
+      options,
+      {
+        beforeMarkdowns: [
+          '## Git Commits',
+          '',
+          'Awesome!'
+        ],
+        command: 'git commit',
+        afterMarkdowns: [
+          'Now you have seen it in action',
+          '',
+          'Go ahead and try the level!'
+        ]
+      }
+    );
+
+    var convert = function(markdowns) {
+      return require('markdown').markdown.toHTML(markdowns.join('\n'));
+    };
+
+    this.JSON.beforeHTML = convert(this.JSON.beforeMarkdowns);
+    this.JSON.afterHTML = convert(this.JSON.afterMarkdowns);
+
+    this.container = new ModalTerminal({
+      title: options.title || 'Git Demonstration'
+    });
+    this.render();
+
+    if (!options.wait) {
+      this.show();
+    }
+  }
+});
+
+exports.GitDemonstrationView = GitDemonstrationView;
+

src/js/views/index.js

@@ -263,6 +263,10 @@ var ModalAlert = ContainedBase.extend({
       title: 'Alert!'
     });
     this.render();
+
+    if (!options.wait) {
+      this.show();
+    }
   },
 
   render: function() {

src/js/views/multiView.js

@@ -140,7 +140,11 @@ var MultiView = Backbone.View.extend({
     if (!this.typeToConstructor[type]) {
       throw new Error('no constructor for type "' + type + '"');
     }
-    var view = new this.typeToConstructor[type](viewJSON.options);
+    var view = new this.typeToConstructor[type](_.extend(
+      {},
+      viewJSON.options,
+      { wait: true }
+    ));
     return view;
   },
 

src/style/main.css

@@ -13,6 +13,10 @@ html, body {
   color: #eee;
 }
 
+p {
+  word-wrap: break-word;
+}
+
 /* Box Model */
 html,
 body,
@@ -47,6 +51,10 @@ body,
   -webkit-box-orient: horizontal;
 }
 
+.centerAlign {
+  -webkit-box-align: center;
+}
+
 .center {
   -webkit-box-pack: center;
 }
@@ -130,6 +138,7 @@ div.canvasTerminalHolder {
   width: 100%;
 }
 
+div.gitDemonstrationView > div.visHolder,
 #mainVisSpace {
   background-color: #24A7FF;
 }
@@ -529,6 +538,7 @@ li.rebaseEntry.notPicked {
 
 .modalView .terminal-window-holder {
   border-radius: 5px;
+  max-width: 900px;
 }
 
 .modalView .terminal-window {
@@ -540,6 +550,26 @@ li.rebaseEntry.notPicked {
   -webkit-transform: translate3d(0,0,0);
 }
 
+/* Git demonstration view */
+
+.gitDemonstrationView > div.demonstrationText {
+  width: 50%;
+}
+
+.gitDemonstrationView > div.visHolder {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+  border-radius: 3px;
+  border: 1px solid black;
+}
+
+.gitDemonstrationView > div.demonstrationText p.command {
+  text-align: center;
+}
+
+.gitDemonstrationView {
+  min-height: 400px;
+}
+
 /* LeftRightView */
 
 .leftRightView div i {

todo.txt

@@ -2,6 +2,7 @@ Big Things
 ~~~~~~~~~~~~~~~~~~~~~~~~~
 [ ] levels dropdown selection?
 [ ] git demonstration view -- shouldnt be too bad
+
 [ ] level builder? :OOO