basic command line history done

src/git.js

@@ -249,6 +249,11 @@ GitEngine.prototype._deleteBranch = function(name) {
   delete this.refs[id];
 };
 
+GitEngine.prototype.dispatch = function(commandObj) {
+  // TODO: parse arguments
+  this[commandObj.method](); 
+};
+
 GitEngine.prototype.add = function() {
   throw new Error(
     "This demo is meant to demonstrate git branching, so don't worry about " +

src/index.html

@@ -12,15 +12,17 @@
   <canvas id="viewport" width="800" height="600"></canvas>
 
   <div id="controls">
+    <div id="commandLineHistory">
+      <div id="commandDisplay">
+        
+      </div>
+    </div>
     <div id="commandLineBar">
-      <form id="commandForm">
+      <textarea id="commandTextField"></textarea>
-        <input id="commandTextField" type="text"></input>
-      </form>
     </div>
   </div>
 
 
-
    <script src="../lib/jquery-1.8.0.min.js"></script>
    <!-- Include the individual arbor source files so we can extend-->
    <script src="../arbor_src/etc.js"></script>

src/mine.js

@@ -13,6 +13,10 @@ $(document).ready(function(){
   new CommandLineView({
     el: $('#commandLineBar')
   });
+  new CommandLineHistoryView({
+    el: $('#commandLineHistory')
+  });
+
   gitEngine = new GitEngine();
 
   var repulsionBreathe = function(r) {

src/style/main.css

@@ -26,5 +26,29 @@ html,body {
 }
 
 #commandTextField {
-  width: 100%;
+  width: 90%;
+}
+
+p.commandLine {
+  opacity: 1;
+  font-size: 18px;
+  margin: 2px;
+}
+
+span.arrows {
+  color: greenyellow;
+  font-weight: bold;
+}
+
+#commandLineBar {
+  text-align: center;
+}
+
+#commandLineHistory {
+  width: 100%;
+  height: 500px;
+  overflow-y: scroll;
+  background: #000;
+  opacity: 0.85;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3) inset;
 }

src/views.js

@@ -0,0 +1,78 @@
+var CommandLineView = Backbone.View.extend({
+  initialize: function(options) {
+    this.commands = [];
+
+    this.$('#commandTextField').keyup(
+      $.proxy(this.keyUp, this)
+    );
+  },
+
+  keyUp: function(e) {
+    console.log(e);
+
+    // we need to capture some of these events
+    var keyMap = {
+      13: _.bind(function() {
+        this.submit();
+      }, this)
+    };
+
+    if (keyMap[e.which] !== undefined) {
+      e.preventDefault();
+      keyMap[e.which]();
+    }
+  },
+
+  addCommand: function(e) {
+    e.preventDefault();
+    this.submit();
+  },
+
+  submit: function() {
+    var value = this.$('#commandTextField').val();
+    this.$('#commandTextField').val('');
+    events.trigger('commandConsumed', value);
+
+    if (!value.length) {
+      // return early, just want a blank line
+    }
+    console.log('the value');
+    console.log(value);
+
+    try {
+      var command = new Command(value);
+      console.log(command);
+      // immediately execute for now TODO
+      gitEngine.dispatch(command);
+    } catch (e) {
+      alert('Error with that command: ' + String(e));
+    }
+  }
+});
+
+var CommandLineHistoryView = Backbone.View.extend({
+  initialize: function(options) {
+    events.on('commandConsumed', _.bind(
+      this.addCommand, this
+    ));
+
+    this.commandTemplate = ' \
+      <p class="commandLine <%= name %>"> \
+        <span class="arrows">&gt; &gt; &gt;</span> \
+        <%= command %>  \
+      </p> \
+    ';
+  },
+
+  addCommand: function(commandText) {
+    this.$('#commandDisplay').append(
+      _.template(
+        this.commandTemplate,
+        {
+          class: 'pastCommand',
+          command: commandText
+        }
+      )
+    );
+  }
+});