Implemented most of new inventory view.

app/schemas/subscriptions/play.coffee

@@ -156,3 +156,6 @@ module.exports =
   'level:edit-wizard-settings': c.object {}
 
   'level:hero-config-changed': c.object {}
+
+  'level:hero-selection-updated': c.object {required: ['hero']},
+    hero: {type: 'object'}

app/styles/game-menu/inventory-view.sass

@@ -1,26 +1,125 @@
-$selected-area-height: 150px
 @import "../bootstrap/mixins"
 
+$totalWidth: 706px - 2 * 20px
+// We get 666px to play with from our parent modals.
+$inventoryHeight: 530px
+$equippedWidth: 450px
+$itemSlotMargin: 5px
+$itemSlotSize: ($equippedWidth - 6 * 2 * $itemSlotMargin) / 6
+$itemSlotSizeWithMargin: $itemSlotSize + 2 * $itemSlotMargin
+$heroContainerBottomMargin: 10px
+$heroContainerWidth: 4 * $itemSlotSizeWithMargin
+$heroContainerHeight: $inventoryHeight - 2 * $itemSlotSizeWithMargin - $heroContainerBottomMargin
+$selectedAreaHeight: 150px
+$stashMargin: 20px
+$stashWidth: $totalWidth - $equippedWidth - $stashMargin
+
 #inventory-view
   position: relative
-  height: 600px
+  height: $inventoryHeight
   +user-select(none)
   
   h3
     margin: 0
+
+  .draggable-item
+    width: $itemSlotSize
+    height: $itemSlotSize
   
   #equipped
-    width: 75%
+    width: $equippedWidth
     position: absolute
     left: 0
     top: 0
-    bottom: $selected-area-height + 10
+    bottom: 0
+    //bottom: $selectedAreaHeight + 10
     right: 0
     overflow: scroll
+
+    .item-slot-row
+      //background-color: rgba(35, 112, 124, 0.5)
+      height: $itemSlotSizeWithMargin
+      clear: both
+      margin: 0px auto
+
+      &.row-4
+        width: 4 * $itemSlotSizeWithMargin
+
+    .item-slot-column
+      //background-color: rgba(112, 124, 35, 0.5)
+      width: $itemSlotSizeWithMargin
+      height: 4 * $itemSlotSizeWithMargin
+      float: left
+      margin-top: 30px
+      
+    .item-slot
+      width: $itemSlotSize
+      height: $itemSlotSize
+      margin: $itemSlotMargin
+      background-color: white
+      float: left
+      position: relative
+      cursor: pointer
+      
+      &.selected
+        .placeholder, .item-container .item-view img
+          border-color: #28f
+          @include box-shadow(0 0 10px #28f)
+
+      &.droppable
+        outline: 2px solid blue
+
+      &.droppable-hover
+        outline: 4px solid blue
+
+      .placeholder
+        width: 100%
+        height: 100%
+        background-size: cover
+        border: 2px solid #888
+
+      &[data-slot="waist"], &[data-slot="pet"], &[data-slot="minion"], &[data-slot="misc-1"]
+        // My spooging of the other placeholders had them dimmed; these didn't.
+        .placeholder
+          @include opacity(0.5)
+          border-color: black
+      &.selected
+        &[data-slot="waist"], &[data-slot="pet"], &[data-slot="minion"], &[data-slot="misc-1"]
+          .placeholder
+            border-color: #28f
+
+      .item-container
+        position: absolute
+        left: 0
+        top: 0
+
+        .item-view
+          img
+            width: $itemSlotSize
+            height: $itemSlotSize
+            border: 2px solid black
+            background-color: white
+
+          .item-info
+            display: none
     
     .item-slot.disabled
       opacity: 0.5
-    
+
+    .hero-container
+      //background-color: rgba(31, 0, 200, 0.25)
+      float: left
+
+      .equipped-hero-canvas
+        width: $heroContainerWidth
+        height: $heroContainerHeight
+
+    hr.slot-row-separator
+      clear: both
+      margin-top: 0
+      margin-bottom: $heroContainerBottomMargin / 2 - 1
+      border-top: 1px solid #aaa
+
     .panel
       text-align: center
       width: 31.3%
@@ -41,13 +140,18 @@ $selected-area-height: 150px
       font-size: 12px
 
   #available-equipment
-    width: 25%
+    width: $stashWidth
     position: absolute
     right: 0
     top: 0 
-    bottom: $selected-area-height + 10
+    bottom: 0
+    //bottom: $selectedAreaHeight + 10
     overflow: scroll
+    border: 2px solid #ccc
+    padding: 4px
+    background-color: white
     
+
     h3
       margin-bottom: 5px
       
@@ -62,7 +166,7 @@ $selected-area-height: 150px
     
   #selected-items
     position: absolute
-    height: $selected-area-height
+    height: $selectedAreaHeight
     left: 0
     right: 0
     bottom: 0
@@ -93,12 +197,12 @@ $selected-area-height: 150px
     #selected-available-item
       right: 0
 
-  $swap-item-height: 40px
+  $swapItemHeight: 40px
     
   #swap-button
     position: relative
-    top: ($selected-area-height / 2) - ($swap-item-height / 2)
-    height: $swap-item-height
+    top: ($selectedAreaHeight / 2) - ($swapItemHeight / 2)
+    height: $swapItemHeight
     font-size: 24px
     line-height: 24px
     display: inline-block

app/templates/game-menu/inventory-view.jade

@@ -1,26 +1,64 @@
 div#equipped
-  h3 Equipped
-  - for (var i=0; i < slots.length; i += 3) {
-    div
-      - for (var j=i; j < slots.length && j < i + 3; j++) {
-        - var slot = slots[j];
-        div.panel.panel-default.item-slot(data-slot=slot)
-          .panel-heading
-            .panel-title.slot-name= slot
-          .panel-body.slot-item
-            if equipment[slot]
-              - var item = equipment[slot]
-              .replace-me(data-item-id=item.id)
-      - }
-      .clearfix
-  - }
+  .item-slot-row
+    for slot in ['left-ring', 'neck', 'eyes', 'head', 'wrists', 'right-ring']
+      .item-slot(data-slot=slot)
+        .placeholder
+        .item-container
+          if equipment[slot]
+            .replace-me(data-item-id=equipment[slot].id)
+
+  .item-slot-column.pull-left
+    for slot in ['torso', 'gloves', 'left-hand', 'minion']
+      .item-slot(data-slot=slot)
+        .placeholder
+        .item-container
+          if equipment[slot]
+            .replace-me(data-item-id=equipment[slot].id)
+
+  .hero-container
+    //(data-hero-id=hero.get('original'))
+    canvas.equipped-hero-canvas
+
+  .item-slot-column.pull-right
+    for slot in ['waist', 'feet', 'right-hand', 'pet']
+      .item-slot(data-slot=slot)
+        .placeholder
+        .item-container
+          if equipment[slot]
+            .replace-me(data-item-id=equipment[slot].id)
+
+  hr.slot-row-separator
+
+  .item-slot-row.row-4
+    for slot in ['programming-book', 'spellbook', 'misc-0', 'misc-1']
+      .item-slot(data-slot=slot)
+        .placeholder
+        .item-container
+          if equipment[slot]
+            .replace-me(data-item-id=equipment[slot].id)
+  
+
+  //- for (var i=0; i < slots.length; i += 3) {
+  //  div
+  //    - for (var j=i; j < slots.length && j < i + 3; j++) {
+  //      - var slot = slots[j];
+  //      div.panel.panel-default.item-slot(data-slot=slot)
+  //        .panel-heading
+  //          .panel-title.slot-name= slot
+  //        .panel-body.slot-item
+  //          if equipment[slot]
+  //            - var item = equipment[slot]
+  //            .replace-me(data-item-id=item.id)
+  //    - }
+  //    .clearfix
+  //- }
     
 div#available-equipment
-  h3 Stash
+  h4#stash-description
   for item in items
     .list-group-item(class=item.classes, data-item-id=item.id)
       
-div#selected-items
+div#selected-items.secret
   #selected-equipped-item.well
     .item-view-stub
   #selected-available-item.well

app/views/game-menu/ChooseHeroView.coffee

@@ -4,6 +4,7 @@ template = require 'templates/game-menu/choose-hero-view'
 ThangType = require 'models/ThangType'
 CocoCollection = require 'collections/CocoCollection'
 SpriteBuilder = require 'lib/sprites/SpriteBuilder'
+AudioPlayer = require 'lib/AudioPlayer'
 
 module.exports = class ChooseHeroView extends CocoView
   id: 'choose-hero-view'
@@ -16,8 +17,8 @@ module.exports = class ChooseHeroView extends CocoView
     'change #option-code-language': 'onCodeLanguageChanged'
 
   shortcuts:
-    'left': -> @$el.find('#hero-carousel').carousel('prev')
-    'right': -> @$el.find('#hero-carousel').carousel('next')
+    'left': -> @$el.find('#hero-carousel').carousel('prev') unless @$el.hasClass 'secret'
+    'right': -> @$el.find('#hero-carousel').carousel('next') unless @$el.hasClass 'secret'
 
   constructor: (options) ->
     super options
@@ -78,12 +79,14 @@ module.exports = class ChooseHeroView extends CocoView
     locked = heroInfo.status is 'Locked'
     hero = @loadHero hero, heroIndex
     @selectedHero = hero unless locked
+    Backbone.Mediator.publish 'level:hero-selection-updated', hero: @selectedHero
     $('#choose-inventory-button').prop 'disabled', locked
 
   loadHero: (hero, heroIndex) ->
     createjs.Ticker.removeEventListener 'tick', stage for stage in _.values @stages
     if stage = @stages[heroIndex]
       createjs.Ticker.addEventListener 'tick', stage
+      @playSelectionSound hero
       return hero
     fullHero = new ThangType()
     fullHero.setURL "/db/thang.type/#{hero.get('original')}/version"
@@ -93,29 +96,48 @@ module.exports = class ChooseHeroView extends CocoView
       canvas.prop width: @canvasWidth, height: @canvasHeight
       builder = new SpriteBuilder(fullHero)
       movieClip = builder.buildMovieClip(fullHero.get('actions').attack?.animation ? fullHero.get('actions').idle.animation)
-      movieClip.scaleX = movieClip.scaleY = canvas.prop('height') / 170  # Tallest hero so far is 160px tall at normal resolution
+      movieClip.scaleX = movieClip.scaleY = canvas.prop('height') / 120  # Average hero height is ~110px tall at normal resolution
+      if fullHero.get('name') in ['Knight', 'Robot Walker']  # These are too big, so shrink them.
+        movieClip.scaleX *= 0.7
+        movieClip.scaleY *= 0.7
       movieClip.regX = -fullHero.get('positions').registration.x
       movieClip.regY = -fullHero.get('positions').registration.y
       movieClip.x = canvas.prop('width') * 0.5
-      movieClip.y = canvas.prop('height') * 0.85  # This is where the feet go.
+      movieClip.y = canvas.prop('height') * 0.925  # This is where the feet go.
       stage = new createjs.Stage(canvas[0])
       stage.addChild movieClip
       stage.update()
       createjs.Ticker.addEventListener 'tick', stage
       movieClip.gotoAndPlay 0
       @stages[heroIndex] = stage
+      @playSelectionSound hero
     if fullHero.loaded
       _.defer onLoaded
     else
       @listenToOnce fullHero, 'sync', onLoaded
     fullHero
 
-  onHidden: ->
+  playSelectionSound: (hero) ->
+    return if @$el.hasClass 'secret'
+    @currentSoundInstance?.stop()
+    return unless sounds = hero.get('soundTriggers')?.selected
+    return unless sound = sounds[Math.floor Math.random() * sounds.length]
+    name = AudioPlayer.nameForSoundReference sound
+    AudioPlayer.preloadSoundReference sound
+    @currentSoundInstance = AudioPlayer.playSound name, 1
+    @currentSoundInstance
 
   onCodeLanguageChanged: (e) ->
     @codeLanguage = @$el.find('#option-code-language').val()
     @codeLanguageChanged = true
 
+  onShown: ->
+    # Called when we switch tabs to this within the modal
+
+  onHidden: ->
+    # Called when the modal itself is dismissed
+
+
 temporaryHeroInfo =
   captain:
     fullName: 'Captain Anya Weston'

app/views/game-menu/GameMenuModal.coffee

@@ -32,13 +32,16 @@ module.exports = class GameMenuModal extends ModalView
 
   afterRender: ->
     super()
-    @$el.toggleClas
     @insertSubView new submenuView @options for submenuView in submenuViews
-    (if @options.showInventory then @subviews.inventory_view else @subviews.choose_hero_view).$el.addClass 'active'
+    firstView = (if @options.showInventory then @subviews.inventory_view else @subviews.choose_hero_view)
+    firstView.$el.addClass 'active'
+    firstView.onShown?()
     Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'game-menu-open', volume: 1
 
-  onTabShown: ->
+  onTabShown: (e) ->
     Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'game-menu-tab-switch', volume: 1
+    @subviews.inventory_view.selectedHero = @subviews.choose_hero_view.selectedHero
+    @subviews[e.target.hash.substring(1).replace(/-/g, '_')].onShown?()
 
   onHidden: ->
     super()

app/views/game-menu/InventoryView.coffee

@@ -4,6 +4,7 @@ template = require 'templates/game-menu/inventory-view'
 ThangType = require 'models/ThangType'
 CocoCollection = require 'collections/CocoCollection'
 ItemView = require './ItemView'
+SpriteBuilder = require 'lib/sprites/SpriteBuilder'
 
 module.exports = class InventoryView extends CocoView
   id: 'inventory-view'
@@ -18,6 +19,9 @@ module.exports = class InventoryView extends CocoView
     'dblclick .item-slot .item-view': 'onEquippedItemDoubleClick'
     'click #swap-button': 'onClickSwapButton'
 
+  subscriptions:
+    'level:hero-selection-updated': 'onHeroSelectionUpdated'
+
   shortcuts:
     'esc': 'clearSelection'
 
@@ -28,6 +32,10 @@ module.exports = class InventoryView extends CocoView
     @items.url = '/db/thang.type?view=items&project=name,components,original,rasterIcon'
     @supermodel.loadCollection(@items, 'items')
 
+  destroy: ->
+    @stage?.removeAllChildren()
+    super()
+
   onLoaded: ->
     super()
 
@@ -58,7 +66,7 @@ module.exports = class InventoryView extends CocoView
     for slottedItemStub in @$el.find('.replace-me')
       itemID = $(slottedItemStub).data('item-id')
       item = itemMap[itemID]
-      itemView = new ItemView({item: item, includes: {name: true}})
+      itemView = new ItemView({item: item, includes: {}})
       itemView.render()
       $(slottedItemStub).replaceWith(itemView.$el)
       @registerSubView(itemView)
@@ -70,20 +78,49 @@ module.exports = class InventoryView extends CocoView
       itemView.render()
       $(availableItemEl).append(itemView.$el)
       @registerSubView(itemView)
+      dragHelper = itemView.$el.find('img').clone().removeClass('img-thumbnail').addClass('draggable-item')
+      do (dragHelper, itemView) =>
+        itemView.$el.draggable
+          revert: 'invalid'
+          appendTo: @$el
+          cursorAt: {left: 35.5, top: 35.5}
+          #distance: 10
+          helper: -> dragHelper
+          revertDuration: 200
+          scroll: false
+          zIndex: 100
+        itemView.$el.on 'dragstart', =>
+          @onAvailableItemClick target: itemView.$el.parent()
+
+    for itemSlot in @$el.find '.item-slot'
+      slot = $(itemSlot).data 'slot'
+      $(itemSlot).find('.placeholder').css('background-image', "url(/images/pages/game-menu/slot-#{slot}.png)")
+      do (slot) =>
+        $(itemSlot).droppable
+          drop: (e, ui) => @onAvailableItemDoubleClick()
+          accept: (el) -> $(el).parent().hasClass slot
+          activeClass: 'droppable'
+          hoverClass: 'droppable-hover'
+          tolerance: 'pointer'
 
     @delegateEvents()
 
+  afterInsert: ->
+    super()
+    @canvasWidth = @$el.find('canvas').innerWidth()
+    @canvasHeight = @$el.find('canvas').innerHeight()
+
   clearSelection: ->
-    @$el.find('.panel-info').removeClass('panel-info')
+    @$el.find('.item-slot.selected').removeClass 'selected'
     @$el.find('.list-group-item').removeClass('active')
     @onSelectionChanged()
 
   onItemSlotClick: (e) ->
-    slot = $(e.target).closest('.panel')
-    wasActive = slot.hasClass('panel-info')
+    slot = $(e.target).closest('.item-slot')
+    wasActive = slot.hasClass('selected')
     @unselectAllSlots()
     @unselectAllAvailableEquipment() if slot.hasClass('disabled')
-    @selectSlot(slot) unless wasActive and not $(e.target).closest('.item-view')[0]
+    @selectSlot(slot) unless wasActive  # and not $(e.target).closest('.item-view')[0]
     @onSelectionChanged()
 
   onAvailableItemClick: (e) ->
@@ -94,7 +131,7 @@ module.exports = class InventoryView extends CocoView
 
   onAvailableItemDoubleClick: (e) ->
     slot = @getSelectedSlot()
-    slot = @$el.find('.panel:not(.disabled):first') if not slot.length
+    slot = @$el.find('.item-slot:not(.disabled):first') if not slot.length
     @unequipItemFromSlot(slot)
     @equipSelectedItemToSlot(slot)
     @onSelectionChanged()
@@ -109,7 +146,7 @@ module.exports = class InventoryView extends CocoView
     slot = @getSelectedSlot()
     selectedItemContainer = @$el.find('#available-equipment .list-group-item.active')
     return unless slot[0] or selectedItemContainer[0]
-    slot = @$el.find('.panel:not(.disabled):first') if not slot.length
+    slot = @$el.find('.item-slot:not(.disabled):first') if not slot.length
     itemContainer = @unequipItemFromSlot(slot)
     @equipSelectedItemToSlot(slot)
     @selectAvailableItem(itemContainer)
@@ -117,16 +154,16 @@ module.exports = class InventoryView extends CocoView
     @onSelectionChanged()
 
   getSelectedSlot: ->
-    @$el.find('#equipped .item-slot.panel-info')
+    @$el.find('#equipped .item-slot.selected')
 
   unselectAllAvailableEquipment: ->
     @$el.find('#available-equipment .list-group-item').removeClass('active')
 
   unselectAllSlots: ->
-    @$el.find('#equipped .panel').removeClass('panel-info')
+    @$el.find('#equipped .item-slot.selected').removeClass('selected')
 
   selectSlot: (slot) ->
-    slot.addClass('panel-info')
+    slot.addClass('selected')
 
   getSlot: (name) ->
     @$el.find(".item-slot[data-slot=#{name}]")
@@ -152,8 +189,8 @@ module.exports = class InventoryView extends CocoView
   equipSelectedItemToSlot: (slot) ->
     selectedItemContainer = @getSelectedAvailableItemContainer()
     newItemHTML = selectedItemContainer.html()
-    selectedItemContainer .addClass('equipped')
-    slotContainer = slot.find('.panel-body')
+    selectedItemContainer.addClass('equipped')
+    slotContainer = slot.find('.item-container')
     slotContainer.html(newItemHTML)
     slotContainer.find('.item-view').data('item-id', selectedItemContainer.find('.item-view').data('item-id'))
     @$el.find('.list-group-item').removeClass('active')
@@ -161,12 +198,13 @@ module.exports = class InventoryView extends CocoView
   onSelectionChanged: ->
     @$el.find('.item-slot').show()
 
-    selectedSlot = @$el.find('.panel.panel-info')
+    selectedSlot = @$el.find('.item-slot.selected')
     selectedItem = @$el.find('#available-equipment .list-group-item.active')
 
     if selectedSlot.length
       @$el.find('#available-equipment .list-group-item').hide()
-      @$el.find("#available-equipment .list-group-item.#{selectedSlot.data('slot')}").show()
+      count = @$el.find("#available-equipment .list-group-item.#{selectedSlot.data('slot')}").show().length
+      @$el.find('#stash-description').text "#{count} #{selectedSlot.data('slot')} items owned"
 
       selectedSlotItemID = selectedSlot.find('.item-view').data('item-id')
       if selectedSlotItemID
@@ -177,7 +215,8 @@ module.exports = class InventoryView extends CocoView
         @hideSelectedSlotItem()
 
     else
-      @$el.find('#available-equipment .list-group-item').show()
+      count = @$el.find('#available-equipment .list-group-item').show().length
+      @$el.find('#stash-description').text "#{count} items owned"
     @$el.find('#available-equipment .list-group-item.equipped').hide()
 
     @$el.find('.item-slot').removeClass('disabled')
@@ -236,4 +275,49 @@ module.exports = class InventoryView extends CocoView
       config[slotName] = item.get('original')
     config
 
+  onHeroSelectionUpdated: (e) ->
+    @selectedHero = e.hero
+    @loadHero()
+
+  loadHero: ->
+    return unless @selectedHero and not @$el.hasClass 'secret'
+    @stage?.removeAllChildren()
+    if @selectedHero.loaded and movieClip = @movieClips?[@selectedHero.get('original')]
+      @stage.addChild(movieClip)
+      @stage.update()
+      return
+    onLoaded = =>
+      return unless canvas = $(".equipped-hero-canvas")
+      @canvasWidth ||= canvas.width()
+      @canvasHeight ||= canvas.height()
+      canvas.prop width: @canvasWidth, height: @canvasHeight
+      builder = new SpriteBuilder(@selectedHero)
+      movieClip = builder.buildMovieClip(@selectedHero.get('actions').attack?.animation ? @selectedHero.get('actions').idle.animation)
+      movieClip.scaleX = movieClip.scaleY = canvas.prop('height') / 120  # Average hero height is ~110px at normal resolution
+      if @selectedHero.get('name') in ['Knight', 'Robot Walker']  # These are too big, so shrink them.
+        movieClip.scaleX *= 0.7
+        movieClip.scaleY *= 0.7
+      movieClip.regX = -@selectedHero.get('positions').registration.x
+      movieClip.regY = -@selectedHero.get('positions').registration.y
+      movieClip.x = canvas.prop('width') * 0.5
+      movieClip.y = canvas.prop('height') * 0.95  # This is where the feet go.
+      movieClip.gotoAndPlay 0
+      @stage ?= new createjs.Stage(canvas[0])
+      @stage.addChild movieClip
+      @stage.update()
+      @movieClips ?= {}
+      @movieClips[@selectedHero.get('original')] = movieClip
+    if @selectedHero.loaded
+      if @selectedHero.isFullyLoaded()
+        _.defer onLoaded
+      else
+        console.error 'Hmm, trying to render a hero we have not loaded...?', @selectedHero
+    else
+      @listenToOnce @selectedHero, 'sync', onLoaded
+
+  onShown: ->
+    # Called when we switch tabs to this within the modal
+    @loadHero()
+
   onHidden: ->
+    # Called when the modal itself is dismissed

app/views/game-menu/MultiplayerView.coffee

@@ -100,9 +100,9 @@ module.exports = class MultiplayerView extends CocoView
           @currentMultiplayerSession = ms
           @currentMultiplayerSession.on 'change', @onMultiplayerSessionChanged
           Backbone.Mediator.publish 'real-time-multiplayer:joined-game', session: @currentMultiplayerSession
-    
+
   onMultiplayerSessionAdded: (e) =>
-    console.log 'onMultiplayerSessionAdded', e
+    #console.log 'onMultiplayerSessionAdded', e
     @initMultiplayerSession e
     @render()
 

app/views/play/modal/PlayLevelModal.coffee

@@ -15,6 +15,9 @@ module.exports = class PlayLevelModal extends ModalView
     'click #choose-hero-button': 'onClickChooseHero'
     'click #play-level-button': 'onClickPlayLevel'
 
+  shortcuts:
+    'enter': 'onEnterPressed'
+
   constructor: (options) ->
     super options
     @options.showDevBits = true
@@ -42,6 +45,7 @@ module.exports = class PlayLevelModal extends ModalView
     @insertSubView @chooseHeroView = new ChooseHeroView @options
     @insertSubView @inventoryView = new InventoryView @options
     @inventoryView.$el.addClass 'secret'
+    @chooseHeroView.onShown()
 
   onHidden: ->
     unless @navigatingToPlay
@@ -81,10 +85,13 @@ module.exports = class PlayLevelModal extends ModalView
   onClickChooseInventory: (e) ->
     @chooseHeroView.$el.add('#choose-inventory-button, #choose-hero-header').addClass 'secret'
     @inventoryView.$el.add('#choose-hero-button, #play-level-button, #choose-inventory-header').removeClass 'secret'
+    @inventoryView.selectedHero = @chooseHeroView.selectedHero
+    @inventoryView.onShown()
 
   onClickChooseHero: (e) ->
     @chooseHeroView.$el.add('#choose-inventory-button, #choose-hero-header').removeClass 'secret'
     @inventoryView.$el.add('#choose-hero-button, #play-level-button, #choose-inventory-header').addClass 'secret'
+    @chooseHeroView.onShown()
 
   onClickPlayLevel: (e) ->
     @showLoading()
@@ -94,3 +101,6 @@ module.exports = class PlayLevelModal extends ModalView
         route: "/play/#{@options.levelPath || 'level'}/#{@options.levelID}",
         viewClass: PlayLevelView,
         viewArgs: [{supermodel: @supermodel}, @options.levelID]}
+
+  onEnterPressed: (e) ->
+    (if @chooseHeroView.$el.hasClass('secret') then @onClickPlayLevel else @onClickChooseInventory).apply @

vendor/styles/jquery-ui-1.11.1.custom.css

@@ -1,7 +1,7 @@
-/*! jQuery UI - v1.10.4 - 2014-04-11
+/*! jQuery UI - v1.11.1 - 2014-09-20
 * http://jqueryui.com
-* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.autocomplete.css, jquery.ui.menu.css, jquery.ui.slider.css, jquery.ui.theme.css
-* To view and modify this theme, visit http://jqueryui.com/themeroller/
+* Includes: core.css, draggable.css, resizable.css, sortable.css, autocomplete.css, menu.css, slider.css, theme.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
 * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
 
 /* Layout helpers
@@ -48,7 +48,7 @@
 	left: 0;
 	position: absolute;
 	opacity: 0;
-	filter:Alpha(Opacity=0);
+	filter:Alpha(Opacity=0); /* support: IE8 */
 }
 
 .ui-front {
@@ -86,6 +86,10 @@
 	width: 100%;
 	height: 100%;
 }
+.ui-draggable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
 .ui-resizable {
 	position: relative;
 }
@@ -93,6 +97,8 @@
 	position: absolute;
 	font-size: 0.1px;
 	display: block;
+	-ms-touch-action: none;
+	touch-action: none;
 }
 .ui-resizable-disabled .ui-resizable-handle,
 .ui-resizable-autohide .ui-resizable-handle {
@@ -154,6 +160,10 @@
 	right: -5px;
 	top: -5px;
 }
+.ui-sortable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
 .ui-autocomplete {
 	position: absolute;
 	top: 0;
@@ -162,72 +172,56 @@
 }
 .ui-menu {
 	list-style: none;
-	padding: 2px;
+	padding: 0;
 	margin: 0;
 	display: block;
 	outline: none;
 }
 .ui-menu .ui-menu {
-	margin-top: -3px;
 	position: absolute;
 }
 .ui-menu .ui-menu-item {
+	position: relative;
 	margin: 0;
-	padding: 0;
-	width: 100%;
+	padding: 3px 1em 3px .4em;
+	cursor: pointer;
+	min-height: 0; /* support: IE7 */
 	/* support: IE10, see #8844 */
-	list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
 }
 .ui-menu .ui-menu-divider {
-	margin: 5px -2px 5px -2px;
+	margin: 5px 0;
 	height: 0;
 	font-size: 0;
 	line-height: 0;
 	border-width: 1px 0 0 0;
 }
-.ui-menu .ui-menu-item a {
-	text-decoration: none;
-	display: block;
-	padding: 2px .4em;
-	line-height: 1.5;
-	min-height: 0; /* support: IE7 */
-	font-weight: normal;
-}
-.ui-menu .ui-menu-item a.ui-state-focus,
-.ui-menu .ui-menu-item a.ui-state-active {
-	font-weight: normal;
+.ui-menu .ui-state-focus,
+.ui-menu .ui-state-active {
 	margin: -1px;
 }
 
-.ui-menu .ui-state-disabled {
-	font-weight: normal;
-	margin: .4em 0 .2em;
-	line-height: 1.5;
-}
-.ui-menu .ui-state-disabled a {
-	cursor: default;
-}
-
 /* icon support */
 .ui-menu-icons {
 	position: relative;
 }
-.ui-menu-icons .ui-menu-item a {
-	position: relative;
+.ui-menu-icons .ui-menu-item {
 	padding-left: 2em;
 }
 
 /* left-aligned */
 .ui-menu .ui-icon {
 	position: absolute;
-	top: .2em;
+	top: 0;
+	bottom: 0;
 	left: .2em;
+	margin: auto 0;
 }
 
 /* right-aligned */
 .ui-menu .ui-menu-icon {
-	position: static;
-	float: right;
+	left: auto;
+	right: 0;
 }
 .ui-slider {
 	position: relative;
@@ -239,6 +233,8 @@
 	width: 1.2em;
 	height: 1.2em;
 	cursor: default;
+	-ms-touch-action: none;
+	touch-action: none;
 }
 .ui-slider .ui-slider-range {
 	position: absolute;
@@ -249,7 +245,7 @@
 	background-position: 0 0;
 }
 
-/* For IE8 - See #6727 */
+/* support: IE8 - See #6727 */
 .ui-slider.ui-state-disabled .ui-slider-handle,
 .ui-slider.ui-state-disabled .ui-slider-range {
 	filter: inherit;
@@ -296,7 +292,7 @@
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-	font-family: Verdana,Arial,sans-serif;
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
 	font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -306,25 +302,25 @@
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-	font-family: Verdana,Arial,sans-serif;
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
 	font-size: 1em;
 }
 .ui-widget-content {
-	border: 1px solid #aaaaaa;
-	background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
-	color: #222222;
+	border: 1px solid #dddddd;
+	background: #eeeeee url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;
+	color: #333333;
 }
 .ui-widget-content a {
-	color: #222222;
+	color: #333333;
 }
 .ui-widget-header {
-	border: 1px solid #aaaaaa;
-	background: #cccccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
-	color: #222222;
+	border: 1px solid #e78f08;
+	background: #f6a828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;
+	color: #ffffff;
 	font-weight: bold;
 }
 .ui-widget-header a {
-	color: #222222;
+	color: #ffffff;
 }
 
 /* Interaction states
@@ -332,15 +328,15 @@
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
-	border: 1px solid #d3d3d3;
-	background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
-	font-weight: normal;
-	color: #555555;
+	border: 1px solid #cccccc;
+	background: #f6f6f6 url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;
+	font-weight: bold;
+	color: #1c94c4;
 }
 .ui-state-default a,
 .ui-state-default a:link,
 .ui-state-default a:visited {
-	color: #555555;
+	color: #1c94c4;
 	text-decoration: none;
 }
 .ui-state-hover,
@@ -349,10 +345,10 @@
 .ui-state-focus,
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
-	border: 1px solid #999999;
-	background: #dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;
-	font-weight: normal;
-	color: #212121;
+	border: 1px solid #fbcb09;
+	background: #fdf5ce url("images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x;
+	font-weight: bold;
+	color: #c77405;
 }
 .ui-state-hover a,
 .ui-state-hover a:hover,
@@ -362,21 +358,21 @@
 .ui-state-focus a:hover,
 .ui-state-focus a:link,
 .ui-state-focus a:visited {
-	color: #212121;
+	color: #c77405;
 	text-decoration: none;
 }
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
-	border: 1px solid #aaaaaa;
+	border: 1px solid #fbd850;
 	background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
-	font-weight: normal;
-	color: #212121;
+	font-weight: bold;
+	color: #eb8f00;
 }
 .ui-state-active a,
 .ui-state-active a:link,
 .ui-state-active a:visited {
-	color: #212121;
+	color: #eb8f00;
 	text-decoration: none;
 }
 
@@ -385,8 +381,8 @@
 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
-	border: 1px solid #fcefa1;
-	background: #fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
+	border: 1px solid #fed22f;
+	background: #ffe45c url("images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;
 	color: #363636;
 }
 .ui-state-highlight a,
@@ -398,18 +394,18 @@
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
 	border: 1px solid #cd0a0a;
-	background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
-	color: #cd0a0a;
+	background: #b81900 url("images/ui-bg_diagonals-thick_18_b81900_40x40.png") 50% 50% repeat;
+	color: #ffffff;
 }
 .ui-state-error a,
 .ui-widget-content .ui-state-error a,
 .ui-widget-header .ui-state-error a {
-	color: #cd0a0a;
+	color: #ffffff;
 }
 .ui-state-error-text,
 .ui-widget-content .ui-state-error-text,
 .ui-widget-header .ui-state-error-text {
-	color: #cd0a0a;
+	color: #ffffff;
 }
 .ui-priority-primary,
 .ui-widget-content .ui-priority-primary,
@@ -420,18 +416,18 @@
 .ui-widget-content .ui-priority-secondary,
 .ui-widget-header .ui-priority-secondary {
 	opacity: .7;
-	filter:Alpha(Opacity=70);
+	filter:Alpha(Opacity=70); /* support: IE8 */
 	font-weight: normal;
 }
 .ui-state-disabled,
 .ui-widget-content .ui-state-disabled,
 .ui-widget-header .ui-state-disabled {
 	opacity: .35;
-	filter:Alpha(Opacity=35);
+	filter:Alpha(Opacity=35); /* support: IE8 */
 	background-image: none;
 }
 .ui-state-disabled .ui-icon {
-	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
+	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
 }
 
 /* Icons
@@ -447,24 +443,24 @@
 	background-image: url("images/ui-icons_222222_256x240.png");
 }
 .ui-widget-header .ui-icon {
-	background-image: url("images/ui-icons_222222_256x240.png");
+	background-image: url("images/ui-icons_ffffff_256x240.png");
 }
 .ui-state-default .ui-icon {
-	background-image: url("images/ui-icons_888888_256x240.png");
+	background-image: url("images/ui-icons_ef8c08_256x240.png");
 }
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon {
-	background-image: url("images/ui-icons_454545_256x240.png");
+	background-image: url("images/ui-icons_ef8c08_256x240.png");
 }
 .ui-state-active .ui-icon {
-	background-image: url("images/ui-icons_454545_256x240.png");
+	background-image: url("images/ui-icons_ef8c08_256x240.png");
 }
 .ui-state-highlight .ui-icon {
-	background-image: url("images/ui-icons_2e83ff_256x240.png");
+	background-image: url("images/ui-icons_228ef1_256x240.png");
 }
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
-	background-image: url("images/ui-icons_cd0a0a_256x240.png");
+	background-image: url("images/ui-icons_ffd27a_256x240.png");
 }
 
 /* positioning */
@@ -677,15 +673,15 @@
 
 /* Overlays */
 .ui-widget-overlay {
-	background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
-	opacity: .3;
-	filter: Alpha(Opacity=30);
+	background: #666666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;
+	opacity: .5;
+	filter: Alpha(Opacity=50); /* support: IE8 */
 }
 .ui-widget-shadow {
-	margin: -8px 0 0 -8px;
-	padding: 8px;
-	background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
-	opacity: .3;
-	filter: Alpha(Opacity=30);
-	border-radius: 8px;
+	margin: -5px 0 0 -5px;
+	padding: 5px;
+	background: #000000 url("images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;
+	opacity: .2;
+	filter: Alpha(Opacity=20); /* support: IE8 */
+	border-radius: 5px;
 }