Merge branch 'master' of https://github.com/codecombat/codecombat

app/lib/surface/CastingScreen.coffee

@@ -4,6 +4,7 @@ module.exports = class CastingScreen extends CocoClass
   subscriptions:
     'tome:cast-spells': 'onCastingBegins'
     'god:new-world-created': 'onCastingEnds'
+    'god:world-load-progress-changed': 'onWorldLoadProgressChanged'
 
   constructor: (options) ->
     super()
@@ -14,11 +15,8 @@ module.exports = class CastingScreen extends CocoClass
     console.error @toString(), "needs a layer." unless @layer
     @build()
     
-  onCastingBegins: ->
-    @show()
-    
-  onCastingEnds: ->
-    @hide()
+  onCastingBegins: -> @show()
+  onCastingEnds: -> @hide()
 
   toString: -> "<CastingScreen>"
 
@@ -28,21 +26,56 @@ module.exports = class CastingScreen extends CocoClass
     @dimLayer.layerIndex = -11
     @dimLayer.addChild @dimScreen = new createjs.Shape()
     @dimScreen.graphics.beginFill("rgba(0,0,0,0.5)").rect 0, 0, @camera.canvasWidth, @camera.canvasHeight
-    @dimLayer.cache 0, 0, @camera.canvasWidth, @camera.canvasHeight
     @dimLayer.alpha = 0
     @layer.addChild @dimLayer
+    @dimLayer.addChild @makeProgressBar()
+    @dimLayer.addChild @makeCastingText()
+
+  onWorldLoadProgressChanged: (e) ->
+    if new Date().getTime() - @t0 > 500
+      createjs.Tween.removeTweens @progressBar
+      createjs.Tween.get(@progressBar).to({scaleX:e.progress}, 200)
+
+  makeProgressBar: ->
+    BAR_PIXEL_HEIGHT = 3
+    BAR_PCT_WIDTH = .75
+    pixelWidth = parseInt(@camera.canvasWidth * BAR_PCT_WIDTH)
+    pixelMargin = (@camera.canvasWidth - (@camera.canvasWidth * BAR_PCT_WIDTH)) / 2
+    barY = 3 * (@camera.canvasHeight / 5)
+
+    g = new createjs.Graphics()
+    g.beginFill(createjs.Graphics.getRGB(255,255, 255))
+    g.drawRoundRect(0,0,pixelWidth, BAR_PIXEL_HEIGHT, 3)
+    @progressBar = new createjs.Shape(g)
+    @progressBar.x = pixelMargin
+    @progressBar.y = barY
+    @progressBar.scaleX = 0
+    @dimLayer.addChild(@progressBar)
+
+  makeCastingText: ->
+    size = @camera.canvasHeight / 15
+    text = new createjs.Text("Casting", "#{size}px cursive", "#aaaaaa")
+    text.regX = text.getMeasuredWidth() / 2
+    text.regY = text.getMeasuredHeight() / 2
+    text.x = @camera.canvasWidth / 2
+    text.y = @camera.canvasHeight / 2
+    @text = text
+    return text
 
   show: ->
-    return if @on
-    @on = true
-    
+    return if @showing
+    @showing = true
+    @t0 = new Date().getTime()
+
+    @progressBar.scaleX = 0
     @dimLayer.alpha = 0
     createjs.Tween.removeTweens @dimLayer
     createjs.Tween.get(@dimLayer).to({alpha:1}, 500)
 
   hide: ->
-    return unless @on
-    @on = false
-    
+    return unless @showing
+    @showing = false
+
+    createjs.Tween.removeTweens @progressBar
     createjs.Tween.removeTweens @dimLayer
     createjs.Tween.get(@dimLayer).to({alpha:0}, 500)

app/views/play/level/tome/cast_button_view.coffee

@@ -62,6 +62,7 @@ module.exports = class CastButtonView extends View
     @onWorldLoadProgressChanged progress: 0
 
   onWorldLoadProgressChanged: (e) ->
+    return # trying out showing progress on the canvas instead
     overlay = @castButtonGroup.find '.button-progress-overlay'
     overlay.css 'width', e.progress * @castButton.outerWidth() + 1