mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 08:08:15 -05:00
104 lines
2.6 KiB
CoffeeScript
104 lines
2.6 KiB
CoffeeScript
CocoClass = require 'lib/CocoClass'
|
|
|
|
module.exports = class LoadingScreen extends CocoClass
|
|
progress: 0
|
|
|
|
constructor: (canvas) ->
|
|
super()
|
|
@width = canvas.width
|
|
@height = canvas.height
|
|
@stage = new createjs.Stage(canvas)
|
|
|
|
subscriptions:
|
|
'level-loader:progress-changed': 'onLevelLoaderProgressChanged'
|
|
|
|
show: ->
|
|
@stage.removeChild(@screen) if @screen
|
|
@screen = @makeScreen()
|
|
@stage.addChild(@screen)
|
|
@updateProgressBar()
|
|
|
|
hide: ->
|
|
@stage.removeChild(@screen) if @screen
|
|
@screen = null
|
|
|
|
makeScreen: ->
|
|
c = new createjs.Container()
|
|
c.addChild(@makeLoadBackground())
|
|
c.addChild(@makeLoadText())
|
|
c.addChild(@makeProgressBar())
|
|
@makeLoadLogo(c)
|
|
c
|
|
|
|
makeLoadBackground: ->
|
|
g = new createjs.Graphics()
|
|
g.beginFill(createjs.Graphics.getRGB(30,30,60))
|
|
g.drawRoundRect(0, 0, @width, @height, 0.0)
|
|
s = new createjs.Shape(g)
|
|
s.y = 0
|
|
s.x = 0
|
|
s
|
|
|
|
makeLoadLogo: (container) ->
|
|
logoImage = new Image()
|
|
$(logoImage).load =>
|
|
@logo = new createjs.Bitmap logoImage
|
|
@logo.x = @width / 2 - logoImage.width / 2
|
|
@logo.y = 40
|
|
container.addChild @logo
|
|
logoImage.src = "/images/loading_image.png"
|
|
|
|
makeLoadText: ->
|
|
size = @height / 10
|
|
text = new createjs.Text("LOADING", "#{size}px Monospace", "#ff7700")
|
|
text.regX = text.getMeasuredWidth() / 2
|
|
text.regY = text.getMeasuredHeight() / 2
|
|
text.x = @width / 2
|
|
text.y = @height / 2
|
|
@text = text
|
|
return text
|
|
|
|
makeProgressBar: ->
|
|
BAR_PIXEL_HEIGHT = 20
|
|
BAR_PCT_WIDTH = .75
|
|
pixelWidth = parseInt(@width * BAR_PCT_WIDTH)
|
|
pixelMargin = (@width - (@width * BAR_PCT_WIDTH)) / 2
|
|
barY = 2 * (@height / 3)
|
|
|
|
c = new createjs.Container()
|
|
c.x = pixelMargin
|
|
c.y = barY
|
|
|
|
g = new createjs.Graphics()
|
|
g.beginFill(createjs.Graphics.getRGB(255,0,0))
|
|
g.drawRoundRect(0,0,pixelWidth, BAR_PIXEL_HEIGHT, 5)
|
|
@progressBar = new createjs.Shape(g)
|
|
c.addChild(@progressBar)
|
|
|
|
g = new createjs.Graphics()
|
|
g.setStrokeStyle(2)
|
|
g.beginStroke(createjs.Graphics.getRGB(230,230,230))
|
|
g.drawRoundRect(0,0,pixelWidth, BAR_PIXEL_HEIGHT, 5)
|
|
c.addChild(new createjs.Shape(g))
|
|
c
|
|
|
|
onLevelLoaderProgressChanged: (e) ->
|
|
@progress = e.progress
|
|
@updateProgressBar()
|
|
|
|
updateProgressBar: ->
|
|
newProg = parseInt((@progress or 0) * 100)
|
|
newProg = ' '+newProg while newProg.length < 4
|
|
@lastProg = newProg
|
|
@text.text = "BUILDING" if @progress is 1
|
|
@progressBar.scaleX = @progress
|
|
@stage.update()
|
|
|
|
showReady: ->
|
|
@text.text = 'READY'
|
|
@text.regX = @text.getMeasuredWidth() / 2
|
|
@stage.update()
|
|
|
|
destroy: ->
|
|
@stage.canvas = null
|
|
super()
|