Refactoring time!!

app/assets/javascripts/application.js

@@ -9,7 +9,7 @@
 //= require utf8
 //= require helpers
 //= require namespace
-//= require player
+//= require player_view
 //= require ansi-interpreter
-//= require terminal
+//= require terminal_view
 //= require_tree .

app/assets/javascripts/hud_view.js.coffee

@@ -0,0 +1,4 @@
+class AsciiIo.HudView
+  constructor: (element) ->
+    @element = $(element)
+

app/assets/javascripts/movie.js.coffee

@@ -1,17 +1,12 @@
-class AsciiIo.Player
+class AsciiIo.Movie
   MIN_DELAY: 0.01
   SPEED: 1.0
 
-  constructor: (cols, lines, data, timing) ->
-    @terminal = new AsciiIo.Terminal(cols, lines)
-    @interpreter = new AsciiIo.AnsiInterpreter(@terminal)
-    @data = data
-    @timing = timing
-    @dataIndex = 0
-    @frameNo = 0
-    @currentData = ""
-    console.log "started"
-    @startTime = (new Date()).getTime()
+  constructor: (@data, @timing) ->
+    @currentTime = 0
+    @processedFramesTime = 0
+
+  play: ->
     @nextFrame()
 
   nextFrame: () ->

app/assets/javascripts/player_view.js.coffee

@@ -0,0 +1,13 @@
+class AsciiIo.PlayerView
+
+  constructor: (@element, cols, lines, data, timing) ->
+    terminalElement = $('<pre class="terminal">')
+    hudElement = $('<div class="hud">')
+
+    @element.append(terminalElement)
+    @element.append(hudElement)
+
+    # @interpreter ?
+    @terminal = new AsciiIo.TerminalView(terminalElement[0], cols, lines)
+    @hud = new AsciiIo.HudView(hudElement[0])
+    @movie = new AsciiIo.Movie(data, timing)

app/assets/javascripts/terminal_view.js.coffee

@@ -1,8 +1,6 @@
-class AsciiIo.Terminal
-  constructor: (cols, lines) ->
-    @element = $(".player .term")
-    @cols = cols
-    @lines = lines
+class AsciiIo.TerminalView
+  constructor: (element, @cols, @lines) ->
+    @element = $(element) # $(".player .term")
     @cursorX = 0
     @cursorY = 0
     @normalBuffer = []

app/assets/stylesheets/asciicasts.css.scss

@@ -12,7 +12,7 @@
   position: relative;
 }
 
-.term {
+.terminal {
   padding: 2px;
   margin: 0px;
   display: block;
@@ -25,7 +25,7 @@
   overflow-x: hidden;
 }
 
-.term .line {
+.terminal .line {
   font-size: 12px;
   /* background-color: black;*/
   /* padding: 0;*/

app/views/asciicasts/show.html.erb

@@ -2,8 +2,8 @@
 
 <div class="asciicast">
   <div class="player">
-    <pre class="term"></pre>
-    <div class="hud">--------------========</div>
+    <%# <pre class="term"></pre> %>
+    <%# <div class="hud">--------------========</div> %>
   </div>
   <div class="clear"></div>
 </div>

spec/javascripts/ansi-interpreter_spec.coffee

@@ -0,0 +1,3 @@
+describe AsciiIo.AnsiInterpreter, ->
+  it 'rocks', ->
+    expect(1).toBeTruthy()

spec/javascripts/helpers/SpecHelper.js

@@ -0,0 +1,9 @@
+beforeEach(function() {
+  this.addMatchers({
+    toBePlaying: function(expectedSong) {
+      var player = this.actual;
+      return player.currentlyPlayingSong === expectedSong && 
+             player.isPlaying;
+    }
+  });
+});

spec/javascripts/hud_view_spec.coffee

@@ -0,0 +1,15 @@
+describe AsciiIo.HudView, ->
+
+  describe 'constructor', ->
+    it 'creates child elements', ->
+
+  describe 'play/pause button', ->
+    it 'triggers hud-play-click when click is fired', ->
+
+  describe 'progress bar', ->
+    it 'triggers hud-seek-click when click is fired', ->
+
+  describe 'fullscreen toggle', ->
+    it 'triggers hud-fullscreen-click when click is fired', ->
+
+  # describe 'time display', ->

spec/javascripts/movie_spec.coffee

@@ -0,0 +1,21 @@
+describe AsciiIo.Movie, ->
+
+  describe '#play', ->
+    it 'calls nextFrame', ->
+      movie = new AsciiIo.Movie('', [])
+      spyOn movie, 'nextFrame'
+      movie.play()
+      expect(movie.nextFrame).toHaveBeenCalled()
+
+  describe '#pause', ->
+
+  describe '#toggle', ->
+
+  describe '#seek', ->
+
+  describe '#nextFrame', ->
+    describe 'when playing', ->
+      it 'triggers movie-frame event', ->
+
+    describe 'when finished', ->
+      it 'triggers movie-finished event', ->

spec/javascripts/player_view_spec.coffee

@@ -0,0 +1,43 @@
+describe AsciiIo.PlayerView, ->
+  element = null
+  cols = 2
+  lines = 5
+  data = ''
+  timing = []
+
+  beforeEach ->
+    element = $('<div>')
+
+  describe 'constructor', ->
+    it 'creates needed DOM elements inside player element', ->
+      player = new AsciiIo.PlayerView(element, cols, lines, data, timing)
+      expect(element.find('.terminal').length).toBe(1)
+      expect(element.find('.hud').length).toBe(1)
+
+    it 'creates TerminalView instance passing proper DOM element', ->
+      spyOn(AsciiIo, 'TerminalView')
+      player = new AsciiIo.PlayerView(element, cols, lines, data, timing)
+      expect(AsciiIo.TerminalView).toHaveBeenCalledWith(element.find('.terminal')[0], cols, lines)
+
+    it 'creates HudView instance passing proper DOM element', ->
+      spyOn(AsciiIo, 'HudView')
+      player = new AsciiIo.PlayerView(element, cols, lines, data, timing)
+      expect(AsciiIo.HudView).toHaveBeenCalledWith(element.find('.hud')[0])
+
+    it 'creates Movie instance', ->
+      spyOn(AsciiIo, 'Movie')
+      player = new AsciiIo.PlayerView(element, cols, lines, data, timing)
+      expect(AsciiIo.Movie).toHaveBeenCalledWith(data, timing)
+
+  describe 'events', ->
+    it 'toggles movie playback when terminal-click is fired on terminal', ->
+
+    it 'toggles movie playback when hud-play-click is fired on hud', ->
+
+    it 'seeks movie playback when hud-seek-click is fired on hud', ->
+
+    it 'toggles fullscreen view when hud-fullscreen-click is fired on hud', ->
+
+    it 'stops cursor blinking when movie-finished is fired on movie', ->
+
+    # it '  when movie-frame is fired on movie', ->

spec/javascripts/terminal_view_spec.coffee

@@ -0,0 +1,10 @@
+describe AsciiIo.TerminalView, ->
+
+  describe 'constructor', ->
+    it 'creates child elements', ->
+
+
+  describe 'click event', ->
+    it 'triggers terminal-click when click is fired', ->
+
+    it 'shows visual clue when movie-play-toggle is fired', ->