New, "old-school" hud

app/assets/javascripts/player/hud_view.js.coffee

@@ -1,5 +1,5 @@
 class AsciiIo.HudView extends Backbone.View
-  tagName: 'div'
+  tagName: 'pre'
   className: 'hud'
 
   events:
@@ -7,12 +7,20 @@ class AsciiIo.HudView extends Backbone.View
 
   initialize: (options) ->
     @duration = undefined
+    @cols = options.cols
+    @lastArrowWidth = undefined
+    @calculateElementWidths()
     @createChildViews()
 
+  calculateElementWidths: ->
+    @toggleWidth = 4
+    @timeWidth = 7
+    @progressWidth = @cols - @toggleWidth - @timeWidth
+
   createChildViews: ->
-    toggle   = '<div class="toggle">'
+    toggle   = '<span class="toggle"> <span class="play">=></span><span class="pause">||</span> '
-    progress = '<div class="progress progress-info progress-striped active"><div class="bar gutter">'
+    progress = '<span class="progress">'
-    time     = '<div class="time">'
+    time     = '<span class="time">'
 
     @$el.append(toggle)
     @$el.append(progress)
@@ -37,13 +45,20 @@ class AsciiIo.HudView extends Backbone.View
       @setProgress progress
 
   setProgress: (percent) ->
-    @$('.gutter').width("#{percent}%")
+    arrowWidth = Math.floor((percent / 100.0) * (@progressWidth - 3))
+    arrowWidth = 1 if arrowWidth < 1
+
+    if arrowWidth != @lastArrowWidth
+      arrow = '='.times(arrowWidth) + '>'
+      filler = ' '.times(@progressWidth - 3 - arrowWidth)
+      @$('.progress').text('[' + arrow + filler + ']')
+      @lastArrowWidth = arrowWidth
 
   formattedTime: (time) ->
     secondsTotal = time / 1000
     minutes = (secondsTotal / 60).toFixed(0)
     seconds = (secondsTotal % 60).toFixed(0)
-    "#{@pad2(minutes)}:#{@pad2(seconds)}"
+    " #{@pad2(minutes)}:#{@pad2(seconds)} "
 
   pad2: (number) ->
     if number < 10

app/assets/javascripts/player/player_view.js.coffee

@@ -21,15 +21,17 @@ class AsciiIo.PlayerView extends Backbone.View
     @createChildViews()
 
   createChildViews: ->
+    @$el.addClass('not-started')
     @$el.append(@rendererView.$el)
     @rendererView.afterInsertedToDom()
     @showLoadingIndicator()
 
-    @hudView = new AsciiIo.HudView()
+    @hudView = new AsciiIo.HudView(cols:  this.options.cols)
     @$el.append(@hudView.$el)
 
   onStartPromptClick: ->
     @hideToggleOverlay()
+    @$el.removeClass('not-started')
     @movie.togglePlay()
 
   onMovieLoaded: (asciicast) ->

app/assets/stylesheets/player.css.scss

@@ -33,7 +33,19 @@ $color5: #EDC951;
   // margin: 0px 0px 30px 20px;
   position: relative;
 
-  .terminal, .font-sample {
+  &.not-started .hud .toggle {
+    background-color: $color4;
+
+    .play {
+      display: inline;
+    }
+
+    .pause {
+      display: none;
+    }
+  }
+
+  .terminal, .font-sample, .hud {
     font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace;
     font-size: 12px;
     line-height: inherit;
@@ -89,51 +101,53 @@ $color5: #EDC951;
   }
 
   .hud {
-    background-color: #333;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background-color: #eee;
     opacity: 0;
     position: absolute;
-    left: 0px;
+    left: 2px;
-    right: 0px;
+    right: 2px;
-    bottom: 0px;
+    bottom: 2px;
-    height: 30px;
+    color: black;
-    color: white;
-    font-weight: bold;
-    font-family: monospace;
 
     -webkit-transition: opacity 0.3s ease-in-out;
 
     .toggle {
-      background-color: $color1;
+      background-color: black;
-      width: 30px;
+      color: white;
-      height: 100%;
-      float: left;
       cursor: pointer;
 
+      .play {
+        display: none;
+      }
+
+      .pause {
+        display: inline;
+      }
+
       &.paused {
         background-color: $color4;
+
+        .play {
+          display: inline;
+        }
+
+        .pause {
+          display: none;
+        }
       }
+
     }
 
     .progress {
-      background-color: $color2;
+      color: black;
-      width: 60%;
-      // height: 100%;
-      float: left;
-      // cursor: pointer;
-
-      // .gutter {
-      //   background-color: $color5;
-      //   width: 0px;
-      //   height: 100%;
-      // }
     }
 
     .time {
-      background-color: $color3;
+      background-color: black;
-      width: 30%;
+      color: white;
-      height: 100%;
-      float: left;
-      text-align: center;
     }
   }