Merge branch 'loading-view'

app/lib/LoadingScreen.coffee

@@ -2,7 +2,7 @@ CocoClass = require 'lib/CocoClass'
 
 module.exports = class LoadingScreen extends CocoClass
   progress: 0
-  
+
   constructor: (canvas) ->
     super()
     @width = canvas.width
@@ -93,12 +93,12 @@ module.exports = class LoadingScreen extends CocoClass
     @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()
+    super()

app/lib/surface/CoordinateDisplay.coffee

@@ -23,7 +23,7 @@ module.exports = class CoordinateDisplay extends createjs.Container
 
   build: ->
     @mouseEnabled = @mouseChildren = false
-    @addChild @label = new createjs.Text("", "20px Arial", "#003300")
+    @addChild @label = new createjs.Text("", "40px Arial", "#003300")
     @label.name = 'position text'
     @label.shadow = new createjs.Shadow("#FFFFFF", 1, 1, 0)
 

app/lib/surface/DebugDisplay.coffee

@@ -25,10 +25,10 @@ module.exports = class DebugDisplay extends createjs.Container
 
   build: ->
     @mouseEnabled = @mouseChildren = false
-    @addChild @frameText = new createjs.Text "...", "20px Arial", "#FFF"
+    @addChild @frameText = new createjs.Text "...", "40px Arial", "#FFF"
     @frameText.name = 'frame text'
-    @frameText.x = @canvasWidth - 50
-    @frameText.y = @canvasHeight - 25
+    @frameText.x = @canvasWidth - 100
+    @frameText.y = @canvasHeight - 50
     @frameText.alpha = 0.5
 
   updateFrame: (currentFrame) ->
@@ -42,4 +42,4 @@ module.exports = class DebugDisplay extends createjs.Container
       @framesRenderedThisSecond = 0
 
     @frameText.text = Math.round(currentFrame) + (if @fps? then " - " + @fps + ' fps' else '')
-    @frameText.x = @canvasWidth - @frameText.getMeasuredWidth() - 10
+    @frameText.x = @canvasWidth - @frameText.getMeasuredWidth() - 20

app/lib/surface/Label.coffee

@@ -59,7 +59,7 @@ module.exports = class Label extends CocoClass
     o.fontWeight = {D: "bold", S: "bold", N: "bold"}[st]
     o.shadow = {D: false, S: true, N: true}[st]
     o.shadowColor = {D: "#FFF", S: "#000", N: "#FFF"}[st]
-    o.fontSize = {D: 25, S: 12, N: 12}[st]
+    o.fontSize = {D: 50, S: 24, N: 24}[st]
     fontFamily = {D: "Arial", S: "Arial", N: "Arial"}[st]
     o.fontDescriptor = "#{o.fontWeight} #{o.fontSize}px #{fontFamily}"
     o.fontColor = {D: "#000", S: "#FFF", N: "#00a"}[st]

app/lib/surface/Mark.coffee

@@ -81,7 +81,7 @@ module.exports = class Mark extends CocoClass
     shape.graphics.endStroke()
     shape.graphics.endFill()
 
-    text = new createjs.Text "" + index, "20px Arial", color.replace('0.5', '1')
+    text = new createjs.Text "" + index, "40px Arial", color.replace('0.5', '1')
     text.regX = text.getMeasuredWidth() / 2
     text.regY = text.getMeasuredHeight() / 2
     text.shadow = new createjs.Shadow("#000000", 1, 1, 0)

app/styles/base.sass

@@ -4,6 +4,10 @@
 html
   background-color: #2f261d
 
+html, body
+  // For level loading view wings
+  overflow-x: hidden
+
 // https://github.com/twbs/bootstrap/issues/9237 -- need a version that's not !important
 .secret
   display: none

app/styles/play/level.sass

@@ -18,8 +18,6 @@
     display: block
     z-index: 1
     
-    
-  //max-width: 1680px   // guideline, but for now let's let it stretch out
   min-width: 1024px
   position: relative
 

app/styles/play/level/loading.sass

@@ -0,0 +1,65 @@
+@import "app/styles/bootstrap/mixins"
+@import "app/styles/mixins"
+
+@mixin sky-background($url: '', $backgroundPosition: left)
+  $top: #95D9EF
+  $mid: #FFFFFF
+  $bot: #8EC643
+  $stop: 99.6%
+  background: $mid
+  background-image: url($url)  // fallback
+  background-image: url($url), -webkit-linear-gradient(top, $top, $mid $stop, $bot)
+  background-image: url($url),     -ms-linear-gradient(top, $top, $mid $stop, $bot)
+  background-image: url($url),         linear-gradient(to bottom, $top, $mid $stop, $bot)
+  background-repeat: no-repeat
+  background-position: top $backgroundPosition
+
+#level-loading-view
+  color: blue
+  width: 100%
+  height: 100%
+  position: absolute
+  z-index: 20
+  $UNVEIL_TIME: 1.2s
+  pointer-events: none
+  
+  .loading-details
+    position: absolute
+    top: 20px
+    left: 50%
+    $WIDTH: 1000px
+    width: $WIDTH
+    margin-left: (-$WIDTH / 2)
+    z-index: 100
+    background-color: rgba(220, 255, 230, 0.5)
+    border-radius: 30px
+    padding: 10px
+    text-align: center
+    // http://matthewlein.com/ceaser/  Bounce down a bit, then snap up.
+    -webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, 0, 0.670, 0)
+    -webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
+    -moz-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
+    -o-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
+    transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
+
+    .load-progress
+      width: 100%
+
+      .progress-bar
+        width: 1%
+        transition-duration: 1.2s
+
+  .left-wing, .right-wing
+    width: 100%
+    height: 100%
+    position: absolute
+
+  .left-wing
+    @include sky-background('/images/level/loading_left_wing.png', right)
+    left: -50%
+    transition: all $UNVEIL_TIME ease
+
+  .right-wing
+    @include sky-background('/images/level/loading_right_wing.png', left)
+    right: -50%
+    transition: all $UNVEIL_TIME ease

app/styles/play/spectate.sass

@@ -1,7 +1,6 @@
 @import "app/styles/bootstrap/mixins"
 @import "app/styles/mixins"
 
-
 #spectate-level-view
   #playback-view
     width: 100%
@@ -24,12 +23,16 @@
       line-height: 15px
       left: 0
 
-
+  max-width: 1920px
   margin: 0 auto
   @include user-select(none)
+  
+  #level-loading-view
+    max-height: 1284px
 
   .level-content
     position: relative
+    margin: 0px auto
 
   #canvas-wrapper
     height: 100%
@@ -38,6 +41,8 @@
 
   canvas#surface
     background-color: #ddd
+    max-height: 93%
+    max-height: -webkit-calc(100% - 60px)
     max-height: calc(100% - 60px)
     height: auto
     max-width: 100%
@@ -46,7 +51,6 @@
     margin: 0 auto
 
 
-  //max-width: 1680px   // guideline, but for now let's let it stretch out
   min-width: 1024px
   position: relative
   #thang-hud

app/templates/editor/level/modal/world_select.jade

@@ -27,7 +27,7 @@
         div.alert.alert-info 
           strong Enter
           |  to confirm
-      canvas(width=924, height=590)
+      canvas(width=1920, height=1224)
     .modal-footer
       a.btn.btn-primary#done-button Done
   

app/templates/editor/level/thangs_tab.jade

@@ -17,7 +17,7 @@
 .world-container.thangs-column
   h3(data-i18n="editor.level_tab_thangs_conditions") Starting Conditions
   #canvas-wrapper
-    canvas(width=924, height=589)#surface
+    canvas(width=1920, height=1224)#surface
     #canvas-left-gradient.gradient
     #canvas-top-gradient.gradient
 

app/templates/play/level.jade

@@ -1,3 +1,5 @@
+#level-loading-view
+
 .level-content
 
   #control-bar-view
@@ -7,7 +9,7 @@
     #tome-view
   
   #canvas-wrapper
-    canvas(width=924, height=589)#surface
+    canvas(width=1920, height=1224)#surface
     #canvas-left-gradient.gradient
     #canvas-top-gradient.gradient
   

app/templates/play/level/level_loading.jade

@@ -0,0 +1,13 @@
+.left-wing
+
+.right-wing
+
+.loading-details
+
+  h2(data-i18n='play_level.loading_level') Loading Level
+
+  .load-progress
+    .progress.progress-striped.active
+      .progress-bar.progress-bar-success
+
+  h4 Tip: you can shift+click a position on the map to insert it into the spell editor.

app/templates/play/spectate.jade

@@ -1,7 +1,9 @@
+#level-loading-view
+
 .level-content
   #control-bar-view
   #canvas-wrapper
-    canvas(width=1848, height=1178)#surface
+    canvas(width=1920, height=1224)#surface
     #canvas-left-gradient.gradient
     #canvas-top-gradient.gradient
   #gold-view.secret.expanded

app/views/play/level/level_loading_view.coffee

@@ -0,0 +1,40 @@
+View = require 'views/kinds/CocoView'
+template = require 'templates/play/level/level_loading'
+
+module.exports = class LevelLoadingView extends View
+  id: "level-loading-view"
+  template: template
+
+  subscriptions:
+    'level-loader:progress-changed': 'onLevelLoaderProgressChanged'
+
+  onLevelLoaderProgressChanged: (e) ->
+    @progress = e.progress
+    @updateProgressBar()
+
+  updateProgressBar: ->
+    #@text.text = "BUILDING" if @progress is 1
+    @$el.find('.progress-bar').css('width', (100 * @progress) + '%')
+
+  showReady: ->
+    return
+
+  unveil: ->
+    _.delay @reallyUnveil, 1000
+
+  reallyUnveil: =>
+    return if @destroyed
+    loadingDetails = @$el.find('.loading-details')
+    duration = parseFloat loadingDetails.css 'transition-duration'
+    loadingDetails.css 'top', -loadingDetails.outerHeight(true)
+    @$el.find('.left-wing').css left: '-100%', backgroundPosition: 'right -400px top 0'
+    @$el.find('.right-wing').css right: '-100%', backgroundPosition: 'left -400px top 0'
+    _.delay @onUnveilEnded, duration * 1000
+
+  onUnveilEnded: =>
+    return if @destroyed
+    Backbone.Mediator.publish 'onLoadingViewUnveiled', view: @
+
+  getRenderData: (c={}) ->
+    super c
+    c

app/views/play/level_view.coffee

@@ -22,6 +22,7 @@ Camera = require 'lib/surface/Camera'
 AudioPlayer = require 'lib/AudioPlayer'
 
 # subviews
+LoadingView = require './level/level_loading_view'
 TomeView = require './level/tome/tome_view'
 ChatView = require './level/level_chat_view'
 HUDView = require './level/hud_view'
@@ -32,8 +33,6 @@ GoldView = require './level/gold_view'
 VictoryModal = require './level/modal/victory_modal'
 InfiniteLoopModal = require './level/modal/infinite_loop_modal'
 
-LoadingScreen = require 'lib/LoadingScreen'
-
 PROFILE_ME = false
 
 module.exports = class PlayLevelView extends View
@@ -62,6 +61,8 @@ module.exports = class PlayLevelView extends View
     'level:session-will-save': 'onSessionWillSave'
     'level:set-team': 'setTeam'
     'god:new-world-created': 'loadSoundsForWorld'
+    'level:started': 'onLevelStarted'
+    'level:loading-view-unveiled': 'onLoadingViewUnveiled'
 
   events:
     'click #level-done-button': 'onDonePressed'
@@ -122,8 +123,7 @@ module.exports = class PlayLevelView extends View
 
   afterRender: ->
     window.onPlayLevelViewLoaded? @  # still a hack
-    @loadingScreen = new LoadingScreen(@$el.find('canvas')[0])
-    @loadingScreen.show()
+    @insertSubView @loadingView = new LoadingView {}
     @$el.find('#level-done-button').hide()
     super()
 
@@ -151,14 +151,13 @@ module.exports = class PlayLevelView extends View
     return unless @levelLoader.progress() is 1 # double check, since closing the guide may trigger this early
     # Save latest level played in local storage
     if window.currentModal and not window.currentModal.destroyed
-      @loadingScreen.showReady()
+      @loadingView.showReady()
       return Backbone.Mediator.subscribeOnce 'modal-closed', @onLevelLoaderLoaded, @
 
     localStorage["lastLevel"] = @levelID if localStorage?
     @grabLevelLoaderData()
     team = @getQueryVariable("team") ? @world.teamForPlayer(0)
     @loadOpponentTeam(team)
-    @loadingScreen.destroy()
     @god.level = @level.serialize @supermodel
     @god.worldClassMap = @world.classMap
     @setTeam team
@@ -202,6 +201,12 @@ module.exports = class PlayLevelView extends View
       # For now, ladderGame will disallow multiplayer, because session code combining doesn't play nice yet.
       @session.set 'multiplayer', false
 
+  onLevelStarted: (e) ->
+    @loadingView?.unveil()
+
+  onLoadingViewUnveiled: (e) ->
+    @removeSubView @loadingView
+    @loadingView = null
 
   onSupermodelLoadedOne: =>
     @modelsLoaded ?= 0

app/views/play/spectate_view.coffee

@@ -20,6 +20,7 @@ Camera = require 'lib/surface/Camera'
 AudioPlayer = require 'lib/AudioPlayer'
 
 # subviews
+LoadingView = require './level/level_loading_view'
 TomeView = require './level/tome/tome_view'
 ChatView = require './level/level_chat_view'
 HUDView = require './level/hud_view'
@@ -30,8 +31,6 @@ GoldView = require './level/gold_view'
 VictoryModal = require './level/modal/victory_modal'
 InfiniteLoopModal = require './level/modal/infinite_loop_modal'
 
-LoadingScreen = require 'lib/LoadingScreen'
-
 PROFILE_ME = false
 
 module.exports = class SpectateLevelView extends View
@@ -57,6 +56,8 @@ module.exports = class SpectateLevelView extends View
     'level:set-team': 'setTeam'
     'god:new-world-created': 'loadSoundsForWorld'
     'next-game-pressed': 'onNextGamePressed'
+    'level:started': 'onLevelStarted'
+    'level:loading-view-unveiled': 'onLoadingViewUnveiled'
 
   events:
     'click #level-done-button': 'onDonePressed'
@@ -70,7 +71,7 @@ module.exports = class SpectateLevelView extends View
     super options
     $(window).on('resize', @onWindowResize)
     @supermodel.once 'error', @onLevelLoadError
-    
+
     @sessionOne = @getQueryVariable 'session-one'
     @sessionTwo = @getQueryVariable 'session-two'
     if options.spectateSessions
@@ -116,8 +117,7 @@ module.exports = class SpectateLevelView extends View
 
   afterRender: ->
     window.onPlayLevelViewLoaded? @  # still a hack
-    @loadingScreen = new LoadingScreen(@$el.find('canvas')[0])
-    @loadingScreen.show()
+    @insertSubView @loadingView = new LoadingView {}
     @$el.find('#level-done-button').hide()
     super()
 
@@ -145,14 +145,13 @@ module.exports = class SpectateLevelView extends View
     return unless @levelLoader.progress() is 1 # double check, since closing the guide may trigger this early
     # Save latest level played in local storage
     if window.currentModal and not window.currentModal.destroyed
-      @loadingScreen.showReady()
+      @loadingView.showReady()
       return Backbone.Mediator.subscribeOnce 'modal-closed', @onLevelLoaderLoaded, @
 
     @grabLevelLoaderData()
     #at this point, all requisite data is loaded, and sessions are not denormalized
     team = @world.teamForPlayer(0)
     @loadOpponentTeam(team)
-    @loadingScreen.destroy()
     @god.level = @level.serialize @supermodel
     @god.worldClassMap = @world.classMap
     @setTeam team
@@ -161,7 +160,7 @@ module.exports = class SpectateLevelView extends View
     @initScriptManager()
     @insertSubviews ladderGame: @otherSession?
     @initVolume()
-    
+
     @originalSessionState = _.cloneDeep(@session.get('state'))
     @register()
     @controlBar.setBus(@bus)
@@ -205,6 +204,12 @@ module.exports = class SpectateLevelView extends View
       # For now, ladderGame will disallow multiplayer, because session code combining doesn't play nice yet.
       @session.set 'multiplayer', false
 
+  onLevelStarted: (e) ->
+    @loadingView?.unveil()
+
+  onLoadingViewUnveiled: (e) ->
+    @removeSubView @loadingView
+    @loadingView = null
 
   onSupermodelLoadedOne: =>
     @modelsLoaded ?= 0
@@ -452,10 +457,10 @@ module.exports = class SpectateLevelView extends View
           cb("error", jqxhr.statusText)
         else
           cb(null, $.parseJSON(jqxhr.responseText))
-        
-      
-    
-    
+
+
+
+
 
   destroy: ()->
     @supermodel?.off 'error', @onLevelLoadError