Display images for each item referenced

Gruntfile.coffee

@@ -44,6 +44,8 @@ module.exports = (grunt)->
         copy:
             data:
                 files: [expand:true, cwd:'./src/data', src:'**/*.json', dest:'./dist/data']
+            data_images:
+                files: [expand:true, cwd:'./src/data', src:'**/*.png', dest:'./dist/data']
             fonts:
                 files: [expand:true, cwd:'./src/fonts', src:'**/*.ttf', dest:'./dist/fonts']
             images:

src/css/templates/crafting_table.scss

@@ -7,17 +7,6 @@ All rights reserved.
 
 .view__crafting_table {
 
-    .quantity {
-        border-radius: 0.75em;
-        background: $color-ice;
-        color: $color-table-background;
-        display: inline-block;
-        text-align: center;
-        min-width: 3em;
-        margin-right: 0.5em;
-        padding: 0 0.5em;
-    }
-
     .recipe_selector {
         background: $color-table-background;
         padding: 1em;
@@ -39,10 +28,6 @@ All rights reserved.
         margin-bottom: 0.5em;
     }
 
-    li {
-        margin: 0.25em 0;
-    }
-
     table { background: $color-table-background; width: 100%; }
 
     td {

src/css/templates/index.scss

@@ -7,3 +7,4 @@ All rights reserved.
 
 @import 'crafting_table';
 @import 'mod_pack';
+@import 'stack';

src/css/templates/stack.scss

@@ -0,0 +1,30 @@
+/*
+Crafting Guide - stack.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+.view__stack {
+    position: relative; width: 100%; height: 1.8em;
+
+    .quantity {
+        border-radius: 0.75em;
+        background: $color-ice;
+        color: $color-table-background;
+        display: inline-block;
+        font-size: $font-size-small;
+        text-align: center;
+        min-width: 3em;
+        margin-right: 0.5em;
+        padding: 0 0.5em;
+    }
+
+    .name {
+        padding-right: 2.4em;
+    }
+
+    img {
+        position: absolute; top: 0; right: 0; height: 1.6em; width: 1.6em;
+    }
+}

src/data/minecraft/recipes.json

@@ -244,7 +244,7 @@
             "tools": "Crafting Table"
         }, {
             "output": "Charcoal",
-            "input": ["{furnace fuel}", "Oak Log"],
+            "input": ["{furnace fuel}", "Oak Wood"],
             "tools": "Furnace"
         }, {
             "output": "Charcoal",
@@ -816,7 +816,7 @@
             "tools": "Crafting Table"
         }, {
             "output": [[8, "Magenta Stained Glass"]],
-            "input": [[8, "Glass"], "Magenta"],
+            "input": [[8, "Glass"], "Magenta Dye"],
             "tools": "Crafting Table"
         }, {
             "output": [[16, "Magenta Stained Glass Pane"]],
@@ -844,7 +844,7 @@
             "tools": "Cow"
         }, {
             "output": "Minecart",
-            "input": [[5, "Iron"]],
+            "input": [[5, "Iron Ingot"]],
             "tools": "Crafting Table"
         }, {
             "output": "Minecart with Chest",
@@ -901,7 +901,7 @@
             "tools": "Crafting Table"
         }, {
             "output": [[4, "Oak Wood Planks"]],
-            "input": "Oak Log"
+            "input": "Oak Wood"
         }, {
             "output": [[6, "Oak Wood Slab"]],
             "input": [[3, "Oak Wood Planks"]],

src/scripts/constants.coffee

@@ -31,6 +31,8 @@ Event.load.failed    = 'load:failed'    # controller, error message
 Event.load.finished  = 'load:finished'  # controller
 Event.remove         = 'remove'         # collection, item...
 
+exports.ImageUrl = _.template "/data/<%= modSlug %>/images/<%= itemSlug %>.png"
+
 exports.Key = Key = {}
 Key.Return = 13
 

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)=>
+            @_resetStackControllers()
-                name = @model.modPack.findName stack.itemSlug
+            @model.plan.need.each (stack)=> makeController 'need', stack
-                @$needList.append "<li><span class='quantity'>#{stack.quantity}</span> #{name}</li>"
+            @model.plan.make.each (stack)=> makeController 'make', stack
-            @model.plan.make.each (stack)=>
+            @model.plan.result.each (stack)=> makeController 'result', 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>"
 
         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
+Crafting Guide - mod_version_controller.coffee
-#
+
-# Copyright (c) 2014 by Redwood Labs
+Copyright (c) 2014 by Redwood Labs
-# All rights reserved.
+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}"

src/scripts/models/item.coffee

@@ -17,6 +17,7 @@ module.exports = class Item extends BaseModel
         if not attributes.name? then throw new Error 'attributes.name is required'
 
         attributes.isGatherable ?= false
+        attributes.modVersion   ?= null
         attributes.recipes      ?= []
         attributes.slug         ?= _.slugify attributes.name
         attributes.stackSize    ?= Item.DEFAULT_STACK_SIZE

src/scripts/models/mod_version.coffee

@@ -17,9 +17,10 @@ module.exports = class ModVersion extends BaseModel
         if _.isEmpty(attributes.version) then throw new Error 'version cannot be empty'
 
         attributes.description  ?= ''
-        attributes.items        ?= {}
         attributes.enabled      ?= attributes.name in RequiredMods
+        attributes.items        ?= {}
         attributes.names        ?= {}
+        attributes.slug         ?= _.slugify attributes.name
         super attributes, options
 
     # Public Methods ###############################################################################
@@ -27,6 +28,7 @@ module.exports = class ModVersion extends BaseModel
     addItem: (item)->
         if @items[item.slug]? then throw new Error "duplicate item for #{item.slug}"
         @items[item.slug] = item
+        item.modVersion = this
         return this
 
     compareTo: (that)->

src/scripts/underscore_mixins.coffee

@@ -12,7 +12,7 @@ _.mixin
 
         result = text.toLowerCase()
         result = result.replace /[^a-zA-Z0-9_]/g, '_'
-        result = result.replace /_+/, '_'
+        result = result.replace /__+/, '_'
         result = result.replace /_$/, ''
         result = result.replace /^_/, ''
         return result

src/templates/stack.jade

@@ -0,0 +1,11 @@
+//-
+//- Crafting Guide - stack.jade
+//-
+//- Copyright (c) 2014 by Redwood Labs
+//- All rights reserved.
+//-
+
+li.view__stack
+    p.quantity
+    a.name: p
+    img(src='')