AMAZING now command prompt is looking badass

src/commandViews.js

@@ -3,13 +3,28 @@ var CommandPromptView = Backbone.View.extend({
     this.collection = options.collection;
     this.commands = [];
     this.index = -1;
+
+    this.commandSpan = this.$('#prompt span.command')[0];
+
+    // this is evil, but we will refer to HTML outside the document
+    // and attach a click event listener
+    $(document).delegate('#commandLineHistory', 'click', _.bind(function() {
+      this.focus();
+    }, this));
   },
 
   events: {
     'keyup #commandTextField': 'keyUp'
   },
 
+  focus: function() {
+    this.$('#commandTextField').focus();
+  },
+
   keyUp: function(e) {
+    var el = e.srcElement;
+    this.updatePrompt(el)
+
     // we need to capture some of these events.
     // WARNING: this key map is not internationalized :(
     var keyMap = {
@@ -30,9 +45,24 @@ var CommandPromptView = Backbone.View.extend({
     if (keyMap[e.which] !== undefined) {
       e.preventDefault();
       keyMap[e.which]();
+      this.updatePrompt(el);
     }
   },
 
+  updatePrompt: function(el) {
+    // i WEEEPPPPPPpppppppppppp that this reflow takes so long. it adds this
+    // super annoying delay to every keystroke... I have tried everything
+    // to make this more performant. getting the srcElement from the event,
+    // getting the value directly from the dom, etc etc. yet still,
+    // there's a very annoying and sightly noticeable command delay.
+    // try.github.com also has this, so I'm assuming those engineers gave up as
+    // well...
+
+    var val = el.value;
+    this.commandSpan.innerText = val;
+    //console.log(val, el.selectionStart, el.selectionEnd);
+  },
+
   commandSelectChange: function(delta) {
     this.index += delta;
     
@@ -103,7 +133,6 @@ var CommandView = Backbone.View.extend({
   },
 
   clicked: function(e) {
-    console.log('was clicked');
   },
 
   initialize: function() {

src/index.html

@@ -41,12 +41,16 @@
           <div id="commandDisplay" class="box vertical flex1">
           </div>
         </div>
-      </div>
 
         <div id="commandLineBar" class="box vertical flex0">
+          <div id="prompt">
+            <span class="promptSign">$</span>
+            <span class="command"></span>
+          </div>
           <textarea id="commandTextField"></textarea>
         </div>
       </div>
+    </div>
 
     <div id="canvasWrapper" class="box flex1 horizontal">
     </div>

src/style/main.css

@@ -85,7 +85,6 @@ div.horizontal {
 
 #controls {
   max-width: 400px;
-  /* background: #4183C4; */
   background: #EEE;
 }
 
@@ -253,13 +252,16 @@ p.commandError, p.errorResult {
   color: red;
 }
 
+#commandLineBar #prompt span.promptSign,
 p.commandLine span.prompt {
   color: greenyellow;
   font-weight: bold;
 }
 
-#commandLineBar {
+#commandLineBar #commandTextField {
-  text-align: center;
+  position:fixed;
+  top: 0px;
+  left: 0px;
 }
 
 #commandLineHistory {
@@ -268,11 +270,30 @@ p.commandLine span.prompt {
   box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
 }
 
+#prompt {
+  text-align: left;
+}
+
+#commandLineBar,
 #terminal {
   background: #424242;
-  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3) inset;
+}
+
+#terminal {
   border: 1px solid #6287A4;
-  border-radius: 0 0 5px 5px;
+  border-bottom: 0;
+
   -webkit-box-align: start;
 }
 
+#commandLineBar {
+  border: 1px solid #6287A4;
+  border-top: 0;
+  border-radius: 0 0 5px 5px;
+  padding: 3px;
+}
+
+#commandLineBar {
+
+}
+