Recipe compoent can show many types of recipes

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

@@ -0,0 +1,14 @@
+//-
+//- Crafting Guide - crafting_table.jade
+//-
+//- Copyright (c) 2015-2017 by Redwood Labs
+//- All rights reserved.
+//-
+
+.view__crafting_table
+    .input
+        .view__crafting_grid
+        .tool
+    .output
+        .view__slot
+        .multiplier

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

@@ -0,0 +1,49 @@
+//
+// Crafting Guide - crafting_table.scss
+//
+// Copyright © 2014-2017 by Redwood Labs
+// All rights reserved.
+//
+
+.view__crafting_table {
+    display: flex;
+
+    .input {
+        flex: 0 0 auto;
+
+        align-items    : center;
+        display        : flex;
+        flex-direction : column;
+
+        .view__crafting_grid {
+            flex: 0 0 auto;
+        }
+
+        .tool {
+            margin-top : $size-margin-small;
+
+            font-family : $font-family-text;
+            font-size   : $font-size-medium;
+        }
+    }
+
+    .output {
+        flex: 1 1 100%;
+        margin-left: $size-margin-medium;
+
+        display         : flex;
+        flex-direction  : column;
+        justify-content : center;
+        align-items     : center;
+
+        .view__slot {
+            border: $size-border-medium solid $color-gray-medium;
+        }
+
+        .multiplier {
+            font-family : $font-family-header;
+            font-size   : $font-size-large;
+            margin-top  : $size-margin-medium;
+        }
+    }
+}

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

@@ -0,0 +1,99 @@
+#
+# Crafting Guide - crafting_table_controller.coffee
+#
+# Copyright © 2014-2017 by Redwood Labs
+# All rights reserved.
+#
+
+BaseController         = require "../../../base_controller"
+CraftingGridController = require "../../crafting_grid/crafting_grid_controller"
+ItemDisplay            = require "../../../../models/site/item_display"
+SlotController         = require "../../slot/slot_controller"
+{StringBuilder}        = require("crafting-guide-common").util
+
+########################################################################################################################
+
+module.exports = class CraftingTableController extends BaseController
+
+    constructor: (options={})->
+        if not options.imageLoader? then throw new Error "options.imageLoader is required"
+        if not options.modPack? then throw new Error "options.modPack is required"
+        if not options.router? then throw new Error "options.router is required"
+        options.templateName = "common/recipe/crafting_table"
+        super options
+
+        @_imageLoader = options.imageLoader
+        @_modPack     = options.modPack
+        @_multiplier  = options.multiplier
+        @_router      = options.router
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @_gridController = @addChild CraftingGridController, ".view__crafting_grid",
+            modPack:     @_modPack
+            imageLoader: @_imageLoader
+            router:      @_router
+
+        @_outputSlotController = @addChild SlotController, ".output .view__slot",
+            imageLoader: @_imageLoader
+            modPack:     @_modPack
+            router:      @_router
+
+        @$multiplier     = @$(".multiplier")
+        @$outputImg      = @$(".output img")
+        @$outputLink     = @$(".output a")
+        @$outputQuantity = @$(".quantity")
+        @$toolContainer  = @$(".tool")
+        super
+
+    refresh: ->
+        @_gridController.model = @model
+        @_outputSlotController.model = @model?.output
+
+        @_refreshMultiplier()
+        @_refreshTools()
+        super
+
+    # Property Methods #############################################################################
+
+    Object.defineProperties @prototype,
+        multiplier:
+            get: ->
+                @_multiplier ?= 1
+                return @_multiplier
+
+            set: (newMultiplier)->
+                oldMultiplier = @_multiplier
+                return if newMultiplier is oldMultiplier
+
+                @_multiplier = newMultiplier
+                @_refreshMultiplier()
+
+                @trigger "change:multiplier", this, oldMultiplier, newMultiplier
+                @trigger "change", this
+
+    # Backbone.View Methods ########################################################################
+
+    events: ->
+        return _.extend super,
+            "click a": "routeLinkClick"
+
+    # Private Methods ##############################################################################
+
+    _refreshMultiplier: ->
+        if @multiplier > 1
+            @$multiplier.html "x#{@multiplier}"
+        else
+            @$multiplier.html ""
+
+    _refreshTools: ->
+        @$toolContainer.empty()
+        return unless @model?
+
+        toolLinks = []
+        for itemId, item of @model.tools
+            display = new ItemDisplay item
+            toolLinks.push "<a href=\"#{display.url}\">#{display.name}</a>"
+
+        @$toolContainer.html toolLinks.join ", "

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

@@ -1,14 +1,8 @@
 //-
 //- Crafting Guide - recipe.jade
 //-
-//- Copyright (c) 2015 by Redwood Labs
+//- Copyright (c) 2014-2017 by Redwood Labs
 //- All rights reserved.
 //-
 
 .view__recipe
-    .input
-        .view__crafting_grid
-        .tool
-    .output
-        .view__slot
-        .multiplier

src/client/site/common/recipe/recipe_controller.coffee

@@ -6,10 +6,7 @@
 #
 
 BaseController          = require "../../base_controller"
-CraftingGridController = require "../crafting_grid/crafting_grid_controller"
+CraftingTableController = require "./crafting_table/crafting_table_controller"
-ItemDisplay            = require "../../../models/site/item_display"
-SlotController         = require "../slot/slot_controller"
-{StringBuilder}        = require("crafting-guide-common").util
 
 ########################################################################################################################
 
@@ -27,35 +24,16 @@ module.exports = class RecipeController extends BaseController
         @_multiplier  = options.multiplier
         @_router      = options.router
 
-    # BaseController Overrides #####################################################################
+    # Class Members ################################################################################
     
-    onDidRender: ->
+    @::RECIPE_TYPE =
-        @_gridController = @addChild CraftingGridController, ".view__crafting_grid",
+        CRAFTING_TABLE:
-            modPack:     @_modPack
+            css: "crafting_table"
-            imageLoader: @_imageLoader
+            Controller: CraftingTableController
-            router:      @_router
 
-        @_outputSlotController = @addChild SlotController, ".output .view__slot",
+    @::ALL_RECIPE_TYPES = (value for key, value of @::RECIPE_TYPE)
-            imageLoader: @_imageLoader
-            modPack:     @_modPack
-            router:      @_router
 
-        @$multiplier     = @$(".multiplier")
+    # Properties ###################################################################################
-        @$outputImg      = @$(".output img")
-        @$outputLink     = @$(".output a")
-        @$outputQuantity = @$(".quantity")
-        @$toolContainer  = @$(".tool")
-        super
-
-    refresh: ->
-        @_gridController.model = @model
-        @_outputSlotController.model = @model?.output
-
-        @_refreshMultiplier()
-        @_refreshTools()
-        super
-
-    # Property Methods #############################################################################
 
     Object.defineProperties @prototype,
         multiplier:
@@ -68,32 +46,48 @@ module.exports = class RecipeController extends BaseController
                 return if newMultiplier is oldMultiplier
 
                 @_multiplier = newMultiplier
-                @_refreshMultiplier()
 
-                @trigger Event.change + ":multiplier", this, oldMultiplier, newMultiplier
+                @trigger "change:multiplier", this, oldMultiplier, newMultiplier
-                @trigger Event.change, this
+                @trigger "change", this
 
-    # Backbone.View Methods ########################################################################
+        recipeType:
+            get: -> return @_recipeType
+            set: -> throw new Error "recipeType cannot be assigned"
 
-    events: ->
+    # BaseController Overrides #####################################################################
-        return _.extend super,
+
-            "click a": "routeLinkClick"
+    onWillChangeModel: (oldModel, newModel)->
+        @_recomputeRecipeType(newModel)
+        return super oldModel, newModel
+
+    refresh: ->
+        @_refreshRecipeType()
 
     # Private Methods ##############################################################################
 
-    _refreshMultiplier: ->
+    _recomputeRecipeType: (recipe)->
-        if @multiplier > 1
+        oldRecipeType = @_recipeType
-            @$multiplier.html "x#{@multiplier}"
+
+        if not recipe?
+            newRecipeType = null
         else
-            @$multiplier.html ""
+            newRecipeType = @RECIPE_TYPE.CRAFTING_TABLE
 
-    _refreshTools: ->
+        return unless newRecipeType isnt oldRecipeType
-        @$toolContainer.empty()
-        return unless @model?
 
-        toolLinks = []
+        @_recipeType = newRecipeType
-        for itemId, item of @model.tools
+        @trigger "change:recipeType", this, oldRecipeType, newRecipeType
-            display = new ItemDisplay item
-            toolLinks.push "<a href=\"#{display.url}\">#{display.name}</a>"
 
-        @$toolContainer.html toolLinks.join ", "
+    _refreshRecipeType: ->
+        return if @_renderedRecipeType is @recipeType
+        @_renderedRecipeType = @recipeType
+
+        if @_typeController?
+            @_typeController.remove()
+            @_typeController = null
+
+        return unless @recipeType?
+
+        @$el.append "<div class=\"view__#{@recipeType.css}\"></div>"
+        options = imageLoader:@_imageLoader, model:@model, modPack:@_modPack, router:@_router
+        @_typeController = @addChild @recipeType.Controller, ".view__#{@recipeType.css}", options