Display images for each item referenced

src/scripts/controllers/crafting_table_controller.coffee

@@ -10,6 +10,7 @@ BaseController  = require './base_controller'
 {Event}         = require '../constants'
 InventoryParser = require '../models/inventory_parser'
 {Key}           = require '../constants'
+StackController = require './stack_controller'
 url             = require 'url'
 {UrlParam}      = require '../constants'
 
@@ -23,6 +24,7 @@ module.exports = class CraftingTableController extends BaseController
         super options
 
         @_parser = new InventoryParser
+        @_resetStackControllers()
 
         @model.modPack.on Event.change, => @onModPackChanged()
 
@@ -99,16 +101,17 @@ module.exports = class CraftingTableController extends BaseController
         @$makeList.empty()
         @$resultList.empty()
 
+        makeController = (name, stack)=>
+            controller = new StackController model:stack, modPack:@model.modPack
+            controller.render()
+            this["$#{name}List"].append controller.$el
+            this["_#{name}Controllers"].push controller
+
         if @model.plan?
-            @model.plan.need.each (stack)=>
-                name = @model.modPack.findName stack.itemSlug
-                @$needList.append "<li><span class='quantity'>#{stack.quantity}</span> #{name}</li>"
-            @model.plan.make.each (stack)=>
-                name = @model.modPack.findName stack.itemSlug
-                @$makeList.append "<li><span class='quantity'>#{stack.quantity}</span> #{name}</li>"
-            @model.plan.result.each (stack)=>
-                name = @model.modPack.findName stack.itemSlug
-                @$resultList.append "<li><span class='quantity'>#{stack.quantity}</span> #{name}</li>"
+            @_resetStackControllers()
+            @model.plan.need.each (stack)=> makeController 'need', stack
+            @model.plan.make.each (stack)=> makeController 'make', stack
+            @model.plan.result.each (stack)=> makeController 'result', stack
 
         super
 
@@ -133,6 +136,11 @@ module.exports = class CraftingTableController extends BaseController
         @model.craft()
         @refresh()
 
+    _resetStackControllers: ->
+        @_needControllers = []
+        @_makeControllers = []
+        @_resultControllers = []
+
     _updateNameAutocomplete: ->
         onChanged = => @onNameFieldChanged()
 

src/scripts/controllers/mod_version_controller.coffee

@@ -1,8 +1,8 @@
 ###
-# Crafting Guide - mod_version_controller.coffee
-#
-# Copyright (c) 2014 by Redwood Labs
-# All rights reserved.
+Crafting Guide - mod_version_controller.coffee
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
 ###
 
 BaseController = require './base_controller'

src/scripts/controllers/stack_controller.coffee

@@ -0,0 +1,71 @@
+###
+Crafting Guide - stack_controller.coffee
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+###
+
+BaseController = require './base_controller'
+{ImageUrl} = require '../constants'
+
+########################################################################################################################
+
+module.exports = class StackController extends BaseController
+
+    constructor: (options={})->
+        if not options.model? then throw new Error 'options.model is required'
+        if not options.modPack? then throw new Error 'options.modPack is required'
+        options.templateName = 'stack'
+        super options
+
+        @modPack = options.modPack
+        @_loadImage()
+
+    # Event Methods ################################################################################
+
+    onImageLoaded: ->
+        return if @_image.loaded
+
+        logger.trace "#{@constructor.name}.onImageLoaded(#{@_image.src})"
+        @_image.loaded = true
+        @$image.attr 'src', @_image.src
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @$image         = @$('img')
+        @$nameField     = @$('.name')
+        @$quantityField = @$('.quantity')
+        super
+
+    refresh: ->
+        {itemName} = @_gatherData()
+        @$nameField.html itemName
+        @$quantityField.html @model.quantity
+        @$image.attr 'src', (if @_image?.loaded then @_image.src else '/images/unknown.png')
+        super
+
+    # Private Methods ##############################################################################
+
+    _gatherData: ->
+        itemSlug = @model.itemSlug
+        item = @modPack.findItem @model.itemSlug
+        if item?
+            itemName = item.name
+            modSlug = item.modVersion.slug
+        else
+            itemName = @modPack.findName @model.itemSlug
+            modSlug = 'minecraft'
+
+        return itemName:itemName, itemSlug:itemSlug, modSlug:modSlug
+
+    _loadImage: ->
+        {itemSlug, modSlug} = @_gatherData()
+        url = ImageUrl(modSlug:modSlug, itemSlug:itemSlug)
+        return if @$image?.attr('src').indexOf(url) is -1
+
+        @_image = new Image()
+        @_image.loaded = false
+        @_image.onload = => @onImageLoaded()
+        @_image.src = url
+        logger.verbose "loading image: #{url}"