Added a screen for when playback ends.

app/lib/surface/PlaybackOverScreen.coffee

@@ -0,0 +1,40 @@
+CocoClass = require 'lib/CocoClass'
+
+module.exports = class PlaybackoverScreen extends CocoClass
+  constructor: (options) ->
+    super()
+    options ?= {}
+    @camera = options.camera
+    @layer = options.layer
+    console.error @toString(), "needs a camera." unless @camera
+    console.error @toString(), "needs a layer." unless @layer
+    @build()
+
+  toString: -> "<PlaybackoverScreen>"
+
+  build: ->
+    @dimLayer = new createjs.Container()
+    @dimLayer.mouseEnabled = @dimLayer.mouseChildren = false
+    @dimLayer.layerIndex = -12
+    @dimLayer.addChild @dimScreen = new createjs.Shape()
+    @dimScreen.graphics.beginFill("rgba(0,0,0,0.4)").rect 0, 0, @camera.canvasWidth, @camera.canvasHeight
+    @dimLayer.cache 0, 0, @camera.canvasWidth, @camera.canvasHeight
+    @dimLayer.alpha = 0
+    @layer.addChild @dimLayer
+
+  show: ->
+    console.log 'show playback over screen', @showing
+    return if @showing
+    @showing = true
+    
+    @dimLayer.alpha = 0
+    createjs.Tween.removeTweens @dimLayer
+    createjs.Tween.get(@dimLayer).to({alpha:1}, 500)
+
+  hide: ->
+    console.log 'hide playback over screen', @showing
+    return unless @showing
+    @showing = false
+    
+    createjs.Tween.removeTweens @dimLayer
+    createjs.Tween.get(@dimLayer).to({alpha:0}, 500)

app/lib/surface/SpriteBoss.coffee

@@ -212,11 +212,16 @@ module.exports = class SpriteBoss extends CocoClass
 
   onNewWorld: (e) ->
     @world = @options.world = e.world
+    @play()
+
+  onCastSpells: -> @stop()
+  
+  play: ->
     sprite.imageObject.play() for thangID, sprite of @sprites
     @selectionMark?.play()
     @targetMark?.play()
   
-  onCastSpells: ->
+  stop: ->
     sprite.imageObject.stop() for thangID, sprite of @sprites
     @selectionMark?.stop()
     @targetMark?.stop()

app/lib/surface/Surface.coffee

@@ -9,6 +9,7 @@ Layer = require './Layer'
 Letterbox = require './Letterbox'
 Dimmer = require './Dimmer'
 CastingScreen = require './CastingScreen'
+PlaybackOverScreen = require './PlaybackOverScreen'
 DebugDisplay = require './DebugDisplay'
 CoordinateDisplay = require './CoordinateDisplay'
 SpriteBoss = require './SpriteBoss'
@@ -90,6 +91,7 @@ module.exports = Surface = class Surface extends CocoClass
     @chooser?.destroy()
     @dimmer?.destroy()
     @castingScreen?.destroy()
+    @playbackOverScreen?.destroy()
     @stage.clear()
     @musicPlayer?.destroy()
     @stage.removeAllChildren()
@@ -179,7 +181,7 @@ module.exports = Surface = class Surface extends CocoClass
     container.addChild shape
 
   setProgress: (progress, scrubDuration=500) ->
-    progress = Math.max(Math.min(progress, 0.99), 0.0)
+    progress = Math.max(Math.min(progress, 1), 0.0)
 
     @scrubbing = true
     onTweenEnd = =>
@@ -193,7 +195,7 @@ module.exports = Surface = class Surface extends CocoClass
       createjs.Tween.removeTweens(@)
       @currentFrame = @scrubbingTo
 
-    @scrubbingTo = Math.floor(progress * @world.totalFrames)
+    @scrubbingTo = Math.min(Math.floor(progress * @world.totalFrames), @world.totalFrames)
     @scrubbingPlaybackSpeed = Math.sqrt(Math.abs(@scrubbingTo - @currentFrame) * @world.dt / (scrubDuration or 0.5))
     if scrubDuration
       t = createjs.Tween
@@ -298,6 +300,18 @@ module.exports = Surface = class Surface extends CocoClass
       frame: @currentFrame
       world: @world
     )
+
+    if @lastFrame < @world.totalFrames and @currentFrame >= @world.totalFrames
+      @spriteBoss.stop()
+      @playbackOverScreen.show()
+      @ended = true
+      Backbone.Mediator.publish 'surface:playback-ended'
+    else if @currentFrame < @world.totalFrames and @ended
+      @spriteBoss.play()
+      @playbackOverScreen.hide()
+      @ended = false
+      Backbone.Mediator.publish 'surface:playback-restarted'
+
     @lastFrame = @currentFrame
 
   onCastSpells: (event) ->
@@ -353,6 +367,7 @@ module.exports = Surface = class Surface extends CocoClass
     @screenLayer.addChild new Letterbox canvasWidth: canvasWidth, canvasHeight: canvasHeight
     @spriteBoss = new SpriteBoss camera: @camera, surfaceLayer: @surfaceLayer, surfaceTextLayer: @surfaceTextLayer, world: @world, thangTypes: @options.thangTypes, choosing: @options.choosing, navigateToSelection: @options.navigateToSelection, showInvisible: @options.showInvisible
     @castingScreen ?= new CastingScreen camera: @camera, layer: @screenLayer
+    @playbackOverScreen ?= new PlaybackOverScreen camera: @camera, layer: @screenLayer
     @stage.enableMouseOver(10)
     @stage.addEventListener 'stagemousemove', @onMouseMove
     @stage.addEventListener 'stagemousedown', @onMouseDown

app/styles/play/level/goals.sass

@@ -3,6 +3,10 @@
   left: 10px
   top: 42px
   background-color: rgba(200,200,200,0.8)
+  
+  &.brighter
+    background-color: rgba(200,200,200,1.0)
+  
   border: black
   padding: 5px 7px 5px 5px
   box-sizing: border-box

app/views/play/level/goals_view.coffee

@@ -14,6 +14,8 @@ module.exports = class GoalsView extends View
   subscriptions:
     'goal-manager:new-goal-states': 'onNewGoalStates'
     'level-set-letterbox': 'onSetLetterbox'
+    'surface:playback-restarted': 'onSurfacePlaybackRestarted'
+    'surface:playback-ended': 'onSurfacePlaybackEnded'
 
   events:
     'click': 'toggleCollapse'
@@ -48,6 +50,12 @@ module.exports = class GoalsView extends View
       goals.push goal
     @$el.removeClass('secret') if goals.length > 0
 
+  onSurfacePlaybackRestarted: ->
+    @$el.removeClass 'brighter'
+
+  onSurfacePlaybackEnded: ->
+    @$el.addClass 'brighter'
+
   render: ->
     super()
     @$el.addClass('secret').addClass('expanded')