Allow recipe comp. to show I/O inventories

src/client/models/site/recipe_display.coffee

@@ -16,13 +16,15 @@ module.exports = class RecipeDisplay extends Observable
 
     constructor: (options={})->
         if not options.recipe? then throw new Error "options.recipe is required"
-        options.multiplier ?= 1
         super
 
         @_layerInventories = []
 
-        @recipe     = options.recipe
+        @multiplier          = options.multiplier or 1
-        @multiplier = options.multiplier
+        @recipe              = options.recipe
+        @showInputInventory  = if options.showInputInventory  then options.showInputInventory  or false
+        @showOutputInventory = if options.showOutputInventory then options.showOutputInventory or false
+        @showOutputSlot      = if options.showOutputSlot      then options.showOutputSlot      or false
 
     # Class Methods ################################################################################
 
@@ -59,6 +61,21 @@ module.exports = class RecipeDisplay extends Observable
                 @_recipe = recipe
                 @_computeType()
 
+        showInputInventory:
+            get: -> return @_showInputInventory
+            set: (showInputInventory)->
+                @triggerPropertyChange "showInputInventory", @_showInputInventory, !!showInputInventory
+
+        showOutputInventory:
+            get: -> return @_showOutputInventory
+            set: (showOutputInventory)->
+                @triggerPropertyChange "showOutputInventory", @_showOutputInventory, !!showOutputInventory
+
+        showOutputSlot:
+            get: -> return @_showOutputSlot
+            set: (showOutputSlot)->
+                @triggerPropertyChange "showOutputSlot", @_showOutputSlot, !!showOutputSlot
+
         tools:
             get: -> return @recipe.tools
             set: -> throw new Error "tools cannot be assigned"
@@ -82,6 +99,14 @@ module.exports = class RecipeDisplay extends Observable
         else
             return @_layerInventories[z] ?= @_addLayerInventory z
 
+    getOutputInventory: ->
+        if not @_outputInventory?
+            @_outputInventory = new Inventory
+            for stack in @recipe.allProducts
+                @_outputInventory.add stack.item, stack.quantity
+
+        return @_outputInventory
+
     # Private Methods ##############################################################################
 
     _addLayerInventory: (z, inventory=null)->
@@ -90,7 +115,7 @@ module.exports = class RecipeDisplay extends Observable
             for y in [0..@recipe.height]
                 stack = @recipe.getInputAt x, y, z
                 continue unless stack?
-                inventory.add stack.item, stack.quantity
+                inventory.add stack.item, stack.quantity * @multiplier
         return inventory
     
     _computeType: ->

src/client/site/base_controller.coffee

@@ -146,10 +146,13 @@ module.exports = class BaseController extends Backbone.View
 
         @$el.append $renderedEl.children()
         @$el.addClass $renderedEl.attr 'class'
-        @$el.data $renderedEl.data()
-        @delegateEvents()
 
-        @$el.controller = this
+        elementData = $renderedEl.data()
+        elementData.controller = this
+        elementData.model = data
+        @$el.data elementData
+
+        @delegateEvents()
         @_rendered = true
         @onDidRender()
 

src/client/site/common/recipe/crafting_table/crafting_table.jade

@@ -6,9 +6,13 @@
 //-
 
 .view__crafting_table
-    .input
+    .input_inventory
+        .view__inventory
+    .input_grid
         .view__crafting_grid
         .tool
-    .output
+    .output_slot
         .view__slot
         .multiplier
+    .output_inventory
+        .view__inventory

src/client/site/common/recipe/crafting_table/crafting_table.scss

@@ -8,8 +8,15 @@
 .view__crafting_table {
     display: flex;
 
-    .input {
+    .input_inventory {
-        flex: 0 0 auto;
+        flex: 1 1 100%;
+
+        display:      flex;
+        margin-right: $size-margin-large;
+    }
+
+    .input_grid {
+        flex: 1 1 100%;
 
         align-items    : center;
         display        : flex;
@@ -27,9 +34,9 @@
         }
     }
 
-    .output {
+    .output_slot {
-        flex: 1 1 100%;
+        flex: 0 0 auto;
-        margin-left: $size-margin-medium;
+        margin-left: $size-margin-large;
 
         display         : flex;
         flex-direction  : column;
@@ -46,4 +53,10 @@
             margin-top  : $size-margin-medium;
         }
     }
+
+    .output_inventory {
+        flex: 1 1 100%;
+        display: flex;
+        margin-left: $size-margin-large;
+    }
 }

src/client/site/common/recipe/crafting_table/crafting_table_controller.coffee

@@ -7,6 +7,7 @@
 
 BaseController         = require "../../../base_controller"
 CraftingGridController = require "../../crafting_grid/crafting_grid_controller"
+InventoryController    = require "../../inventory/inventory_controller"
 ItemDisplay            = require "../../../../models/site/item_display"
 RecipeDisplay          = require "../../../../models/site/recipe_display"
 SlotController         = require "../../slot/slot_controller"
@@ -30,15 +31,21 @@ module.exports = class CraftingTableController extends BaseController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        options = modPack:@_modPack, imageLoader:@_imageLoader, router:@_router
+        options = editable:false, modPack:@_modPack, imageLoader:@_imageLoader, router:@_router
-        @_gridController = @addChild CraftingGridController, ".view__crafting_grid", options
-        @_outputSlotController = @addChild SlotController, ".output .view__slot", options
 
-        @$multiplier     = @$(".multiplier")
+        @_inputController      = @addChild InventoryController,    ".input_inventory .view__inventory",  options
-        @$outputImg      = @$(".output img")
+        @_gridController       = @addChild CraftingGridController, ".input_grid .view__crafting_grid",   options
-        @$outputLink     = @$(".output a")
+        @_outputSlotController = @addChild SlotController,         ".output_slot .view__slot",           options
-        @$outputQuantity = @$(".quantity")
+        @_outputController     = @addChild InventoryController,    ".output_inventory .view__inventory", options
-        @$toolContainer  = @$(".tool")
+
+        @$inputInventorySection  = @$(".input_inventory")
+        @$multiplier             = @$(".multiplier")
+        @$outputImg              = @$(".output.slot img")
+        @$outputInventorySection = @$(".output_inventory")
+        @$outputLink             = @$(".output.slot a")
+        @$outputQuantity         = @$(".quantity")
+        @$outputSlotSection      = @$(".output_slot")
+        @$toolContainer          = @$(".tool")
         super
 
     onWillChangeModel: (oldModel, newModel)->
@@ -47,10 +54,13 @@ module.exports = class CraftingTableController extends BaseController
         return super oldModel, newModel
 
     refresh: ->
-        @_gridController.model = @model.recipe
+        @_inputController.model      = @model?.getInventory()
+        @_gridController.model       = @model?.recipe
         @_outputSlotController.model = @model?.recipe.output
+        @_outputController.model     = @model?.getOutputInventory()
 
         @_refreshMultiplier()
+        @_refreshSections()
         @_refreshTools()
         super
 
@@ -68,6 +78,11 @@ module.exports = class CraftingTableController extends BaseController
         else
             @$multiplier.html ""
 
+    _refreshSections: ->
+        @$inputInventorySection.css display:(if @model.showInputInventory then "" else "none")
+        @$outputInventorySection.css display:(if @model.showOutputInventory then "" else "none")
+        @$outputSlotSection.css display:(if @model.showOutputSlot then "" else "none")
+
     _refreshTools: ->
         @$toolContainer.empty()
         return unless @model?

src/client/site/craft_page/step/step_controller.coffee

@@ -12,7 +12,6 @@ InventoryController = require "../../common/inventory/inventory_controller"
 RecipeController    = require "../../common/recipe/recipe_controller"
 RecipeDisplay       = require "../../../models/site/recipe_display"
 
-
 ########################################################################################################################
 
 module.exports = class StepController extends BaseController
@@ -75,7 +74,11 @@ module.exports = class StepController extends BaseController
     refresh: ->
         @$header.html "#{@model.number}. #{@model.recipe.output.item.displayName}"
 
-        @recipeController.model = new RecipeDisplay recipe:@model.recipe, multiplier:@model.count
+        @recipeController.model = new RecipeDisplay
+            multiplier:         @model.count
+            recipe:             @model.recipe
+            showInputInventory: true
+            showOutputSlot:     true
 
         @_refreshCompleteButton()
         @_refreshToolButton()

src/client/site/item_page/item_page.scss

@@ -57,6 +57,10 @@
             flex: 0 0 auto;
         }
     }
+
+    .view__recipe + .view__recipe {
+        margin-top: $size-margin-large;
+    }
 }
 
 @include screen-size(mobile) {

src/client/site/item_page/item_page_controller.coffee

@@ -229,17 +229,21 @@ module.exports = class ItemPageController extends PageController
 
             for recipe in recipes
                 controller = @_recipeControllers[index]
+                model = new RecipeDisplay
+                    recipe:              recipe
+                    showInputInventory:  true
+                    showOutputInventory: true
                 if not controller?
                     controller = new RecipeController
                         imageLoader: @_imageLoader
                         modPack:     @_modPack
-                        model:       new RecipeDisplay recipe:recipe
+                        model:       model
                         router:      @_router
                     @_recipeControllers.push controller
                     @$recipeContainer.append controller.$el
                     controller.render()
                 else
-                    controller.model = new RecipeDisplay recipe:recipe
+                    controller.model = model
                 index++
 
             @show @$recipesSection