Merge remote-tracking branch 'upstream/master'

app/lib/LevelLoader.coffee

@@ -105,7 +105,7 @@ module.exports = class LevelLoader extends CocoClass
       @loadThangsRequiredByThangType heroThangType
 
     for itemThangType in _.values(heroConfig.inventory)
-      url = "/db/thang.type/#{itemThangType}/version?project=name,components,original"
+      url = "/db/thang.type/#{itemThangType}/version?project=name,components,original,rasterIcon"
       if itemResource = @maybeLoadURL(url, ThangType, 'thang')
         @worldNecessities.push itemResource
       else
@@ -183,7 +183,7 @@ module.exports = class LevelLoader extends CocoClass
       else if component.config.requiredThangTypes
         requiredThangTypes = requiredThangTypes.concat component.config.requiredThangTypes
     for thangType in requiredThangTypes
-      url = "/db/thang.type/#{thangType}/version?project=name,components,original"
+      url = "/db/thang.type/#{thangType}/version?project=name,components,original,rasterIcon"
       @worldNecessities.push @maybeLoadURL(url, ThangType, 'thang')
 
   onThangNamesLoaded: (thangNames) ->

app/styles/mixins.sass

@@ -58,3 +58,54 @@
   -moz-filter: $filters
   -o-filter: $filters
   filter: $filters
+
+@mixin flexbox()
+  display: -webkit-box
+  display: -moz-box
+  display: -ms-flexbox
+  display: -webkit-flex
+  display: flex
+
+@mixin flex($values)
+  -webkit-box-flex: $values
+  -moz-box-flex: $values
+  -webkit-flex: $values
+  -ms-flex: $values
+  flex: $values
+ 
+@mixin order($val)
+  -webkit-box-ordinal-group: $val
+  -moz-box-ordinal-group: $val
+  -ms-flex-order: $val
+  -webkit-order: $val
+  order: $val
+
+@mixin flex-justify()
+  -webkit-box-pack: justify
+  -webkit-justify-content: space-between
+  -ms-flex-pack: justify
+  justify-content: space-between
+
+@mixin flex-align-content-start()
+  -webkit-align-content: flex-start
+  -ms-flex-align-content: flex-start
+  align-content: flex-start
+
+@mixin flex-center()
+  -webkit-box-align: center
+  -webkit-align-items: center
+  -ms-flex-align: center
+  align-items: center
+
+@mixin flex-wrap()
+  -webkit-flex-wrap: wrap
+  -ms-flex-wrap: wrap
+  flex-wrap: wrap
+
+@mixin flex-column()
+  -webkit-box-orient: vertical
+  -moz-box-orient: vertical
+  -ms-box-orient: vertical
+  -webkit-flex-direction: column
+  -ms-flex-direction: column
+  -flex-direction: column

app/styles/play/level/tome/spell_palette.sass

@@ -69,6 +69,37 @@
     margin-right: 3px
     vertical-align: top
 
+  &.hero .properties
+    @include flexbox()
+    @include flex-wrap()
+    @include flex-column()
+    @include flex-align-content-start()
+
+    .property-entry-item-group
+      display: inline-block
+      min-height: 38px
+      max-width: 212px
+      @include flexbox()
+      @include flex-wrap()
+      @include flex-center()
+      outline: 1px dashed #b86
+      position: relative
+  
+      img.item-image
+        width: 38px
+        height: 38px
+        position: absolute
+
+      &:not(:hover) img.item-image
+        -webkit-filter: sepia(100%)
+        filter: sepia(100%)
+  
+      .spell-palette-entry-view
+        margin-left: 38px
+        width: 174px
+        width: -webkit-calc(100% - 38px)
+        width: calc(100% - 38px)
+
   .code-language-logo
     position: absolute
     width: 16px

app/styles/play/level/tome/spell_palette_entry.sass

@@ -13,6 +13,10 @@
   border: 1px solid transparent
   cursor: pointer
   @include user-select(all)
+  height: 19px
+  text-overflow: ellipsis
+  overflow: hidden
+  white-space: nowrap
 
   &:hover
     border: 1px solid #000000

app/templates/play/level/tome/spell_palette.jade

@@ -1,12 +1,17 @@
 img(src="/images/level/code_palette_background.png").code-palette-background
 span.code-palette-background
-.code-language-logo
-ul(class="nav nav-pills" + (tabbed ? ' multiple-tabs' : ''))
-  each slug, group in entryGroupSlugs
-    li(class=group == "this" || slug == "available-spells" ? "active" : "")
-      a(data-toggle="pill", data-target='#palette-tab-' + slug)
-        h4= entryGroupNames[group]
-.tab-content
-  each slug, group in entryGroupSlugs
-    div(id="palette-tab-" + slug, class="tab-pane nano" + (group == "this" || slug == defaultGroupSlug ? " active" : ""))
-      div(class="properties properties-" + slug + " nano-content")
+if entryGroupSlugs
+  // Non-hero; group by entry groups, or maybe nothing.
+  .code-language-logo
+  ul(class="nav nav-pills" + (tabbed ? ' multiple-tabs' : ''))
+    each slug, group in entryGroupSlugs
+      li(class=group == "this" || slug == "available-spells" ? "active" : "")
+        a(data-toggle="pill", data-target='#palette-tab-' + slug)
+          h4= entryGroupNames[group]
+  .tab-content
+    each slug, group in entryGroupSlugs
+      div(id="palette-tab-" + slug, class="tab-pane nano" + (group == "this" || slug == defaultGroupSlug ? " active" : ""))
+        div(class="properties properties-" + slug + " nano-content")
+else
+  // Hero; group by items, no tabs.
+  .properties

app/templates/play/level/tome/spell_palette_entry.jade

@@ -1 +1 @@
-span= doc.title
+span.doc-title= doc.title

app/templates/play/level/tome/spell_palette_entry_popover.jade

@@ -105,6 +105,10 @@ if doc.returns
       if doc.returns.description
         div!= marked(doc.returns.description)
 
+if item
+  p
+    em Granted by #{item.get('name')}.
+
 if selectedMethod
   p
     em Write the body of this method below.

app/views/game-menu/InventoryView.coffee

@@ -334,7 +334,7 @@ module.exports = class InventoryView extends CocoView
       'the-second-kithmaze': {feet: 'simple-boots', 'programming-book': 'programmaticon-i'}
       'new-sight': {'right-hand': 'longsword', 'programming-book': 'programmaticon-i'}
       'lowly-kithmen': {feet: 'simple-boots', 'right-hand': 'longsword', 'programming-book': 'programmaticon-i', eyes: 'crude-glasses'}
-      'a-bolt-in-the-dark': {feet: 'simple-boots', 'right-hand': 'longsword', torso: 'leather-tunic', eyes: 'crude-glasses'}
+      'closing-the-distance': {feet: 'simple-boots', 'right-hand': 'longsword', torso: 'leather-tunic', eyes: 'crude-glasses'}
       'the-final-kithmaze': {feet: 'simple-boots', 'right-hand': 'longsword', torso: 'leather-tunic', 'programming-book': 'programmaticon-i', eyes: 'crude-glasses'}
       'kithgard-gates': {feet: 'simple-boots', 'right-hand': 'builders-hammer'}
       'defence-of-plainswood': {feet: 'simple-boots', 'right-hand': 'builders-hammer'}

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

@@ -93,7 +93,7 @@ module.exports = class DocFormatter
         obj[prop] = null
 
   formatPopover: ->
-    content = popoverTemplate doc: @doc, language: @options.language, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? []), writable: @options.writable, selectedMethod: @options.selectedMethod, cooldowns: @inferCooldowns()
+    content = popoverTemplate doc: @doc, language: @options.language, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? []), writable: @options.writable, selectedMethod: @options.selectedMethod, cooldowns: @inferCooldowns(), item: @options.item
     owner = if @doc.owner is 'this' then @options.thang else window[@doc.owner]
     content = content.replace /#{spriteName}/g, @options.thang.type ? @options.thang.spriteName  # Prefer type, and excluded the quotes we'd get with @formatValue
     content.replace /\#\{(.*?)\}/g, (s, properties) => @formatValue downTheChain(owner, properties.split('.'))

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

@@ -4,6 +4,7 @@ template = require 'templates/play/level/tome/spell_palette'
 filters = require 'lib/image_filter'
 SpellPaletteEntryView = require './SpellPaletteEntryView'
 LevelComponent = require 'models/LevelComponent'
+ThangType = require 'models/ThangType'
 EditorConfigModal = require '../modal/EditorConfigModal'
 
 N_ROWS = 4
@@ -26,6 +27,7 @@ module.exports = class SpellPaletteView extends CocoView
     super options
     @thang = options.thang
     @createPalette()
+    $(window).on 'resize', @onResize
 
   getRenderData: ->
     c = super()
@@ -38,15 +40,26 @@ module.exports = class SpellPaletteView extends CocoView
 
   afterRender: ->
     super()
-    for group, entries of @entryGroups
-      groupSlug = @entryGroupSlugs[group]
-      for columnNumber, entryColumn of entries
-        col = $('<div class="property-entry-column"></div>').appendTo @$el.find(".properties-#{groupSlug}")
-        for entry in entryColumn
-          col.append entry.el
+    if @entryGroupSlugs
+      for group, entries of @entryGroups
+        groupSlug = @entryGroupSlugs[group]
+        for columnNumber, entryColumn of entries
+          col = $('<div class="property-entry-column"></div>').appendTo @$el.find(".properties-#{groupSlug}")
+          for entry in entryColumn
+            col.append entry.el
+            entry.render()  # Render after appending so that we can access parent container for popover
+      $('.nano').nanoScroller()
+      @updateCodeLanguage @options.language
+    else
+      @entryGroupElements = {}
+      for group, entries of @entryGroups
+        @entryGroupElements[group] = itemGroup = $('<div class="property-entry-item-group"></div>').appendTo @$el.find('.properties')
+        itemGroup.append $('<img class="item-image"></img>').attr('src', entries[0].options.item.getPortraitURL()).css('top', Math.max(0, 19 * (entries.length - 2) / 2)) if entries[0].options.item?.getPortraitURL
+        for entry in entries
+          itemGroup.append entry.el
           entry.render()  # Render after appending so that we can access parent container for popover
-    $('.nano').nanoScroller()
-    @updateCodeLanguage @options.language
+      @$el.addClass 'hero'
+      @updateMaxHeight()
 
   afterInsert: ->
     super()
@@ -56,6 +69,24 @@ module.exports = class SpellPaletteView extends CocoView
     @options.language = language
     @$el.find('.code-language-logo').removeClass().addClass 'code-language-logo ' + language
 
+  updateMaxHeight: ->
+    return unless @isHero
+    nColumns = Math.floor @$el.find('.properties').innerWidth() / 212   # ~212px is a good max entry width; will always have 2 columns
+    columns = ({items: [], nEntries: 0} for i in [0 ... nColumns])
+    nRows = 0
+    for group, entries of @entryGroups
+      shortestColumn = _.sortBy(columns, (column) -> column.nEntries)[0]
+      shortestColumn.nEntries += Math.max 2, entries.length
+      shortestColumn.items.push @entryGroupElements[group]
+      nRows = Math.max nRows, shortestColumn.nEntries
+    for column in columns
+      for item in column.items
+        item.detach().appendTo @$el.find('.properties')
+    @$el.find('.properties').css('height', 19 * (nRows + 1))
+
+  onResize: (e) =>
+    @updateMaxHeight()
+
   createPalette: ->
     Backbone.Mediator.publish 'tome:palette-cleared', {thangID: @thang.id}
     lcs = @supermodel.getModels LevelComponent
@@ -90,6 +121,12 @@ module.exports = class SpellPaletteView extends CocoView
     else
       propStorage =
         'this': ['apiProperties', 'apiMethods']
+    if @options.level.get('type', true) isnt 'hero' or not @options.programmable
+      @organizePalette propStorage, allDocs, excludedDocs
+    else
+      @organizePaletteHero propStorage, allDocs, excludedDocs
+
+  organizePalette: (propStorage, allDocs, excludedDocs) ->
     count = 0
     propGroups = {}
     for owner, storages of propStorage
@@ -99,13 +136,11 @@ module.exports = class SpellPaletteView extends CocoView
         added = _.sortBy(props).slice()
         propGroups[owner] = (propGroups[owner] ? []).concat added
         count += added.length
+    Backbone.Mediator.publish 'tome:update-snippets', propGroups: propGroups, allDocs: allDocs, language: @options.language
 
     shortenize = count > 6
     tabbify = count >= 10
     @entries = []
-
-    Backbone.Mediator.publish 'tome:update-snippets', propGroups: propGroups, allDocs: allDocs, language: @options.language
-
     for owner, props of propGroups
       for prop in props
         doc = _.find (allDocs['__' + prop] ? []), (doc) ->
@@ -134,22 +169,68 @@ module.exports = class SpellPaletteView extends CocoView
       @defaultGroupSlug = _.string.slugify defaultGroup
     @entryGroupSlugs = {}
     @entryGroupNames = {}
-    iOSEntryGroups = {}
     for group, entries of @entryGroups
       @entryGroups[group] = _.groupBy entries, (entry, i) -> Math.floor i / N_ROWS
       @entryGroupSlugs[group] = _.string.slugify group
       @entryGroupNames[group] = group
-      iOSEntryGroups[group] = (entry.doc for entry in entries)
     if thisName = {coffeescript: '@', lua: 'self', clojure: 'self'}[@options.language]
       if @entryGroupNames.this
         @entryGroupNames.this = thisName
-        iOSEntryGroups[thisName] = iOSEntryGroups.this
-        delete iOSEntryGroups.this
-    Backbone.Mediator.publish 'tome:palette-updated', thangID: @thang.id, entryGroups: JSON.stringify(iOSEntryGroups)  # TODO: make it sort these by granting items if it's a hero level
 
-  addEntry: (doc, shortenize, tabbify, isSnippet=false) ->
+  organizePaletteHero: (propStorage, allDocs, excludedDocs) ->
+    # Assign any kind of programmable properties to the items that grant them.
+    @isHero = true
+    itemThangTypes = {}
+    itemThangTypes[tt.get('name')] = tt for tt in @supermodel.getModels ThangType
+    propsByItem = {}
+    propCount = 0
+    itemsByProp = {}
+    for slot, inventoryID of @thang.inventoryIDs ? {}
+      if item = itemThangTypes[inventoryID]
+        for component in item.get('components') when component.config
+          for owner, storages of propStorage
+            if props = component.config[storages]
+              for prop in _.sortBy(props) when prop[0] isnt '_'  # no private properties
+                propsByItem[item.get('name')] ?= []
+                propsByItem[item.get('name')].push owner: owner, prop: prop, item: item
+                itemsByProp[prop] = item
+                ++propCount
+      else
+        console.log @thang.id, "couldn't find item ThangType for", slot, inventoryID
+
+    # Assign any unassigned properties to the hero itself.
+    for owner, storage of propStorage
+      for prop in _.reject(@thang[storage] ? [], (prop) -> itemsByProp[prop] or prop[0] is '_')  # no private properties
+        propsByItem['Hero'] ?= []
+        propsByItem['Hero'].push owner: owner, prop: prop, item: null
+        ++propCount
+
+    Backbone.Mediator.publish 'tome:update-snippets', propGroups: propsByItem, allDocs: allDocs, language: @options.language
+
+    shortenize = propCount > 6
+    @entries = []
+    for itemName, props of propsByItem
+      for prop, propIndex in props
+        item = prop.item
+        owner = prop.owner
+        prop = prop.prop
+        doc = _.find (allDocs['__' + prop] ? []), (doc) ->
+          return true if doc.owner is owner
+          return (owner is 'this' or owner is 'more') and (not doc.owner? or doc.owner is 'this')
+        if not doc and not excludedDocs['__' + prop]
+          console.log 'could not find doc for', prop, 'from', allDocs['__' + prop], 'for', owner, 'of', propGroups, 'with item', item
+          doc ?= prop
+        if doc
+          @entries.push @addEntry(doc, shortenize, false, owner is 'snippets', item, propIndex > 0)
+    @entryGroups = _.groupBy @entries, (entry) -> itemsByProp[entry.doc.name]?.get('name') ? 'Hero'
+    iOSEntryGroups = {}
+    for group, entries of @entryGroups
+      iOSEntryGroups[group] = (entry.doc for entry in entries)
+    Backbone.Mediator.publish 'tome:palette-updated', thangID: @thang.id, entryGroups: JSON.stringify(iOSEntryGroups)
+
+  addEntry: (doc, shortenize, tabbify, isSnippet=false, item=null, showImage=false) ->
     writable = (if _.isString(doc) then doc else doc.name) in (@thang.apiUserProperties ? [])
-    new SpellPaletteEntryView doc: doc, thang: @thang, shortenize: shortenize, tabbify: tabbify, isSnippet: isSnippet, language: @options.language, writable: writable, level: @options.level
+    new SpellPaletteEntryView doc: doc, thang: @thang, shortenize: shortenize, tabbify: tabbify, isSnippet: isSnippet, language: @options.language, writable: writable, level: @options.level, item: item, showImage: showImage
 
   onDisableControls: (e) -> @toggleControls e, false
   onEnableControls: (e) -> @toggleControls e, true
@@ -185,4 +266,5 @@ module.exports = class SpellPaletteView extends CocoView
   destroy: ->
     entry.destroy() for entry in @entries
     @toggleBackground = null
+    $(window).off 'resize', @onResize
     super()

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

@@ -209,8 +209,13 @@ module.exports = class SpellView extends CocoView
   addZatannaSnippets: (e) ->
     return unless @zatanna and @autocomplete
     snippetEntries = []
-    for owner, props of e.propGroups
+    for group, props of e.propGroups
       for prop in props
+        if _.isString prop  # organizePalette
+          owner = group
+        else                # organizePaletteHero
+          owner = prop.owner
+          prop = prop.prop
         doc = _.find (e.allDocs['__' + prop] ? []), (doc) ->
           return true if doc.owner is owner
           return (owner is 'this' or owner is 'more') and (not doc.owner? or doc.owner is 'this')
@@ -394,10 +399,11 @@ module.exports = class SpellView extends CocoView
     @onCodeChangeMetaHandler = =>
       return if @eventsSuppressed
       Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'code-change', volume: 0.5
-      @spell.hasChangedSignificantly @getSource(), @spellThang.aether.raw, (hasChanged) =>
-        if not @spellThang or hasChanged
-          callback() for callback in onSignificantChange  # Do these first
-        callback() for callback in onAnyChange  # Then these
+      if @spellThang
+        @spell.hasChangedSignificantly @getSource(), @spellThang.aether.raw, (hasChanged) =>
+          if not @spellThang or hasChanged
+            callback() for callback in onSignificantChange  # Do these first
+          callback() for callback in onAnyChange  # Then these
     @aceDoc.on 'change', @onCodeChangeMetaHandler
 
   setRecompileNeeded: (@recompileNeeded) =>