Made ItemView more general. Upgraded Bootstrap from 3.1 to 3.2. Fixed a few bugs.

app/models/ThangType.coffee

@@ -200,6 +200,7 @@ module.exports = class ThangType extends CocoModel
     $('<img />').attr('src', src)
 
   getPortraitSource: (spriteOptionsOrKey, size=100) ->
+    return @getPortraitURL() if @get 'rasterIcon'
     stage = @getPortraitStage(spriteOptionsOrKey, size)
     stage?.toDataURL()
 
@@ -274,43 +275,42 @@ module.exports = class ThangType extends CocoModel
     return itemComponentRef?.config?.slots or []
 
   getFrontFacingStats: ->
-    stats = []
-    for component in @get('components') or []
+    components = @get('components') or []
+    unless itemConfig = _.find(components, original: LevelComponent.ItemID)?.config
+      console.warn @get('name'), 'is not an item, but you are asking for its stats.'
+      return props: [], stats: {}
+    props = itemConfig.programmableProperties ? []
+    props = props.concat itemConfig.moreProgrammableProperties ? []
+    stats = {}
+    for stat, modifiers of itemConfig.stats ? {}
+      stats[stat] = @formatStatDisplay stat, modifiers
+    for stat in itemConfig.extraHUDProperties ? []
+      stats[stat] = null  # Find it in the other Components.
+    for component in components
       continue unless config = component.config
-      if config.attackDamage
-        stats.push { name: 'Attack Damage', value: config.attackDamage }
-      if config.attackRange
-        stats.push { name: 'Attack Range', value: "#{config.attackRange}m" }
-      if config.cooldown
-        stats.push { name: 'Cooldown', value: "#{config.cooldown}s" }
-      if config.maxSpeed
-        stats.push { name: 'Speed', value: "#{config.maxSpeed}m/s" }
-      if config.maxAcceleration
-        stats.push { name: 'Acceleration', value: "#{config.maxAcceleration}m/s^2" }
-      if config.stats
-        for stat, value of config.stats
-          if value.factor
-            value = "x#{value.factor}"
-          if value.addend and value.addend > 0
-            value = "+#{value.addend}"
-          if value.addend and value.addend < 0
-            value = "#{value.addend}"
-          if value.setTo
-            value = "=#{value.setTo}"
-          if stat is 'maxHealth'
-            stats.push { name: 'Health', value: value }
-          if stat is 'healthReplenishRate'
-            stats.push { name: 'Regen', value: value }
-      if config.programmableProperties
-        props = config.programmableProperties
-        if props.length
-          stats.push { name: 'Allows', value: props.join(', ') }
-      if config.visualRange
-        value = config.visualRange
-        if value is 9001 then value is "Infinite"
-        stats.push { name: 'Visual Range', value: "#{value}m"}
+      for stat, value of stats when not value?
+        value = config[stat]
+        continue unless value?
+        stats[stat] = @formatStatDisplay stat, setTo: value
       if config.programmableSnippets
-        snippets = config.programmableSnippets
-        if snippets.length
-          stats.push { name: 'Snippets', value: snippets.join(', ') }
-    stats
+        props = props.concat config.programmableSnippets
+    props: props, stats: stats
+
+  formatStatDisplay: (name, modifiers) ->
+    name = {maxHealth: 'Health', maxSpeed: 'Speed', healthReplenishRate: 'Regeneration'}[name] ? name
+    name = _.string.humanize name
+    format = ''
+    format = 'm' if /(range|radius|distance)$/i.test name
+    format ||= 's' if /cooldown$/i.test name
+    format ||= 'm/s' if /speed$/i.test name
+    format ||= '/s' if /(regeneration| rate)$/i.test name
+    value = modifiers.setTo
+    value = value.join ', ' if _.isArray value
+    display = []
+    display.push "#{value}#{format}" if value?
+    display.push "+#{modifiers.addend}#{format}" if modifiers.addend > 0
+    display.push "#{modifiers.addend}#{format}" if modifiers.addend < 0
+    display.push "x#{modifiers.factor}" if modifiers.factor? and modifiers.factor isnt 1
+    display = display.join ', '
+    display = display.replace /9001m?/, 'Infinity'
+    name: name, display: display

app/styles/base.sass

@@ -302,3 +302,11 @@ a[data-toggle="coco-modal"]
   bottom: 0px
   right: 0px
   z-index: 1001
+
+kbd
+  padding: 2px 4px
+  font-size: 90%
+  color: #fff
+  background-color: #333
+  border-radius: 3px
+  @include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .25))

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

@@ -1,9 +1,6 @@
 $selected-area-height: 150px
 @import "../bootstrap/mixins"
 
-//#inventory-view *
-  
-
 #inventory-view
   position: relative
   height: 600px
@@ -80,6 +77,8 @@ $selected-area-height: 150px
       padding: 10px
       height: 100%
       width: 49%
+      display: flex
+      align-items: center
       
       img
         width: 100px
@@ -102,4 +101,4 @@ $selected-area-height: 150px
     height: $swap-item-height
     font-size: 24px
     line-height: 24px
-    display: inline-block
+    display: inline-block

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

@@ -8,7 +8,7 @@
     
   .item-info
     margin-left: 45px
-    
+
   ul
     margin-top: 5px
-    padding-left: 20px
+

app/templates/editor/level/level-feedback-view.jade

@@ -11,7 +11,7 @@ ul.user-feedback-list.list-group
       em= moment(new Date(feedback.created)).fromNow()
       span.spl.spr -
       a(href="/user/#{feedback.creator}")
-        strong= feedback.creatorName
+        strong= feedback.creatorName || 'Anoner'
       if feedback.review
         span.spr :
         span= feedback.review

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

@@ -2,11 +2,20 @@ img(src=item.getPortraitURL()).img-thumbnail
 div.item-info
   if includes.name
     strong= item.get('name')
-  if includes.stats
-    - var stats = item.getFrontFacingStats()
-    ul
-      for stat in stats
-        li #{stat.name}: #{stat.value}
+  if includes.stats || (includes.props && props.length)
+    ul.list-unstyled
+      if includes.stats
+        for stat, prop in stats
+          if stat.display == 'true'
+            li= stat.name
+          else
+            li #{stat.name}: #{stat.display}
+      if includes.props && props.length
+        li Grants:
+          for prop in props
+            |  
+            code= prop
+
 .clearfix
 
  

app/templates/play/level/modal/keyboard_shortcuts.jade

@@ -6,71 +6,71 @@ block modal-header-content
 block modal-body-content
   dl.dl-horizontal
     dt(title=shift + "+" + enter)
-      code ⇧+#{enter}
+      kbd ⇧+#{enter}
     dd(data-i18n="keyboard_shortcuts.cast_spell") Cast current spell.
   dl.dl-horizontal
     dt(title=ctrlName + "+" + shift + "+" + enter)
-      code #{ctrl}+⇧+#{enter}
+      kbd #{ctrl}+⇧+#{enter}
     dd(data-i18n="keyboard_shortcuts.run_real_time") Run in real time.
   dl.dl-horizontal
     dt(title=shift + "+" + space)
-      code ⇧+#{space}
+      kbd ⇧+#{space}
     dd(data-i18n="keyboard_shortcuts.continue_script") Continue past current script.
   dl.dl-horizontal
     dt(title=escapeKey)
-      code Esc
+      kbd Esc
     dd(data-i18n="keyboard_shortcuts.skip_scripts") Skip past all skippable scripts.
   dl.dl-horizontal
     dt(title=ctrlName + "+P")
-      code #{ctrl}+P
+      kbd #{ctrl}+P
     dd(data-i18n="keyboard_shortcuts.toggle_playback") Toggle play/pause.
   dl.dl-horizontal
     dt(title=ctrlName + "+[, " + ctrlName + "+]")
-      code #{ctrl}+[
+      kbd #{ctrl}+[
       | , 
-      code #{ctrl}+]
+      kbd #{ctrl}+]
     dd(data-i18n="keyboard_shortcuts.scrub_playback") Scrub back and forward through time.
   dl.dl-horizontal
     dt(title=ctrlName + "+[, " + ctrlName + "+]")
-      code #{ctrl}+⇧+[
+      kbd #{ctrl}+⇧+[
       | ,
-      code #{ctrl}+⇧+]
+      kbd #{ctrl}+⇧+]
     dd(data-i18n="keyboard_shortcuts.single_scrub_playback") Scrub back and forward through time by a single frame.
   dl.dl-horizontal
     dt(title=ctrlName + "+" + altName + "+[, " + ctrlName + "+" + altName + "+]")
-      code #{ctrl}+#{alt}+[
+      kbd #{ctrl}+#{alt}+[
       | , 
-      code #{ctrl}+#{alt}+]
+      kbd #{ctrl}+#{alt}+]
     dd(data-i18n="keyboard_shortcuts.scrub_execution") Scrub through current spell execution.
   dl.dl-horizontal
     dt(title=ctrlName + "+\\")
-      code #{ctrl}+\
+      kbd #{ctrl}+\
     dd(data-i18n="keyboard_shortcuts.toggle_debug") Toggle debug display.
   dl.dl-horizontal
     dt(title=ctrlName + "+G")
-      code #{ctrl}+G
+      kbd #{ctrl}+G
     dd(data-i18n="keyboard_shortcuts.toggle_grid") Toggle grid overlay.
   dl.dl-horizontal
     dt(title=ctrlName + "+O")
-      code #{ctrl}+O
+      kbd #{ctrl}+O
     dd(data-i18n="keyboard_shortcuts.toggle_pathfinding") Toggle pathfinding overlay.
   dl.dl-horizontal
     dt(title=ctrlName + "+" + shift + "+B")
-      code #{ctrl}+⇧+B
+      kbd #{ctrl}+⇧+B
     dd(data-i18n="keyboard_shortcuts.beautify") Beautify your code by standardizing its formatting.
   dl.dl-horizontal
     dt(title=ctrlName + "+" + shift + "+M")
-      code #{ctrl}+⇧+M
+      kbd #{ctrl}+⇧+M
     dd(data-i18n="keyboard_shortcuts.maximize_editor") Maximize/minimize code editor.
   dl.dl-horizontal
     dt(title="Arrow keys")
-      code ←
+      kbd ←
       | , 
-      code →
+      kbd →
       | , 
-      code ↑
+      kbd ↑
       | , 
-      code ↓
+      kbd ↓
     dd(data-i18n="keyboard_shortcuts.move_wizard") Move your Wizard around the level.
 
 block modal-footer-content

app/treema-ext.coffee

@@ -363,7 +363,6 @@ class LatestVersionReferenceNode extends TreemaNode
     m = @settings.supermodel.getModelByOriginalAndMajorVersion(m.constructor, data.original, data.majorVersion)
     if @instance and not m
       m = @instance
-      m.url = -> urlGoingFor
       @settings.supermodel.registerModel(m)
     return 'Unknown' unless m
     return @modelToString(m)

app/views/editor/level/LevelFeedbackView.coffee

@@ -35,7 +35,7 @@ module.exports = class LevelFeedbackView extends CocoView
     context = super(context)
     if @allFeedback
       context.allFeedback = (m.attributes for m in @allFeedback.models when @allFeedback.models.length < 20 or m.get('review'))
-      context.averageRating = _.reduce((m.get('rating') for m in @allFeedback.models), (acc, x) -> acc + x) / @allFeedback.models.length
+      context.averageRating = _.reduce((m.get('rating') for m in @allFeedback.models), (acc, x) -> acc + (x ? 5)) / (@allFeedback.models.length or 1)
       context.totalRatings = @allFeedback.models.length
     else
       context.allFeedback = []

app/views/editor/thang/ThangTypeEditView.coffee

@@ -88,6 +88,7 @@ module.exports = class ThangTypeEditView extends RootView
     @insertSubView(new ThangTypeColorsTabView(@thangType))
     @patchesView = @insertSubView(new PatchesView(@thangType), @$el.find('.patches-view'))
     @showReadOnly() if me.get('anonymous')
+    @updatePortrait()
 
   initComponents: =>
     options =

app/views/game-menu/InventoryView.coffee

@@ -25,7 +25,7 @@ module.exports = class InventoryView extends CocoView
     super(arguments...)
     @items = new CocoCollection([], {model: ThangType})
     @equipment = options.equipment or @options.session?.get('heroConfig')?.inventory or {}
-    @items.url = '/db/thang.type?view=items&project=name,description,components,original'
+    @items.url = '/db/thang.type?view=items&project=name,description,components,original,rasterIcon'
     @supermodel.loadCollection(@items, 'items')
 
   onLoaded: ->
@@ -201,7 +201,7 @@ module.exports = class InventoryView extends CocoView
   showSelectedSlotItem: (item) ->
     if not @selectedEquippedItemView
       @selectedEquippedItemView = new ItemView({
-        item: item, includes: {name: true, stats: true}})
+        item: item, includes: {name: true, stats: true, props: true}})
       @insertSubView(@selectedEquippedItemView, @$el.find('#selected-equipped-item .item-view-stub'))
 
     else
@@ -215,7 +215,7 @@ module.exports = class InventoryView extends CocoView
   showSelectedAvailableItem: (item) ->
     if not @selectedAvailableItemView
       @selectedAvailableItemView = new ItemView({
-        item: item, includes: {name: true, stats: true}})
+        item: item, includes: {name: true, stats: true, props: true}})
       @insertSubView(@selectedAvailableItemView, @$el.find('#selected-available-item .item-view-stub'))
 
     else

app/views/game-menu/ItemView.coffee

@@ -3,9 +3,9 @@ template = require 'templates/game-menu/item-view'
 
 module.exports = class ItemView extends CocoView
   className: 'item-view'
-  
+
   template: template
-  
+
   initialize: (options) ->
     super(arguments...)
     @item = options.item
@@ -15,7 +15,11 @@ module.exports = class ItemView extends CocoView
     c = super()
     c.item = @item
     c.includes = @includes
+    if @includes.props or @includes.stats
+      {props, stats} = @item.getFrontFacingStats()
+      c.props = props
+      c.stats = stats
     c
-    
+
   afterRender: ->
     @$el.data('item-id', @item.id)

bower.json

@@ -41,7 +41,7 @@
     "nanoscroller": "~0.8.0",
     "treema": "https://github.com/codecombat/treema.git#master",
     "jquery.tablesorter": "~2",
-    "bootstrap": "~3.1.1",
+    "bootstrap": "~3.2.0",
     "validated-backbone-mediator": "~0.1.3",
     "jquery.browser": "~0.0.6",
     "zatanna": "~0.0.6",