Factor out the ReceipeController

src/css/templates/crafting_table.scss

@@ -14,45 +14,11 @@ All rights reserved.
         position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
         background: $color-background-panel;
 
-        .input {
+        .multiplier {
-            position: absolute; top: 50%; left: 33%;
+            position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em;
-            @include transform(translate(-50%, -50%));
+            font-family: PressStart;
-
+            font-size: $font-size-large;
-            .tool {
+            text-align: center;
-                position: absolute; right: 0; bottom: -2em; left: 0; height: 1.5em;
-                text-align: center;
-
-                p { font-weight: bold; }
-            }
-        }
-
-        .output {
-            position: absolute; top: 50%; right: 16.5%; height: 5.3em; width: 5.3em;
-            @include transform(translate(-50%, -50%));
-
-            background: $color-gray-faint;
-            border: 0.2em solid $color-gray-medium;
-            padding: 0.1em;
-
-            a {
-                position: absolute; top: 50%; left: 50%; height: 4.8em; width: 4.8em;
-                @include transform(translate(-50%, -50%));
-            }
-
-            .multiplier {
-                position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em;
-                font-family: PressStart;
-                font-size: $font-size-large;
-                text-align: center;
-            }
-
-            .quantity {
-                position: absolute; right: 0.1em; bottom: 0.1em;
-                color: white;
-                font-family: PressStart;
-                font-size: $font-size-large;
-                text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
-            }
         }
 
         .next {
@@ -68,6 +34,11 @@ All rights reserved.
             }
         }
 
+        .view__recipe {
+            position: absolute; top: 50%; left: 50%;
+            @include transform(translate(-50%, -50%));
+        }
+
         .prev {
             background: url('/images/arrow-left-disabled.png');
             position: absolute; top: 50%; left: 1em; height: 8em; width: 4em;

src/css/templates/index.scss

@@ -11,4 +11,5 @@ All rights reserved.
 @import 'inventory';
 @import 'item_page';
 @import 'mod_pack';
+@import 'recipe';
 @import 'stack';

src/css/templates/recipe.scss

@@ -0,0 +1,51 @@
+/*
+Crafting Table - recipe.scss
+
+Copyright (c) 2014-2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__recipe {
+    position: relative; height: 20em; width: 26em;
+
+    .input {
+        position: absolute; top: 50%; left: 0;
+        @include transform(translateY(-50%));
+
+        .tool {
+            position: absolute; right: 0; bottom: -2em; left: 0; height: 1.5em;
+            text-align: center;
+
+            p { font-weight: bold; }
+        }
+    }
+
+    .output {
+        position: absolute; top: 50%; right: 0; height: 5.3em; width: 5.3em;
+        @include transform(translateY(-50%));
+
+        background: $color-gray-faint;
+        border: 0.2em solid $color-gray-medium;
+        padding: 0.1em;
+
+        a {
+            position: absolute; top: 50%; left: 50%; height: 4.8em; width: 4.8em;
+            @include transform(translate(-50%, -50%));
+        }
+
+        .multiplier {
+            position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em;
+            font-family: PressStart;
+            font-size: $font-size-large;
+            text-align: center;
+        }
+
+        .quantity {
+            position: absolute; right: 0.1em; bottom: 0.1em;
+            color: white;
+            font-family: PressStart;
+            font-size: $font-size-large;
+            text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
+        }
+    }
+}

src/scripts/constants.coffee

@@ -45,7 +45,7 @@ ModelState.failed   = 'failed'
 
 exports.Url    = Url = {}
 Url.itemIcon   = _.template "/data/<%= modSlug %>/<%= modVersion %>/images/<%= slug %>.png"
-Url.item       = _.template "/item/<%= encodeURIComponent(itemName) %>"
+Url.item       = _.template "/item/<%= slug %>"
 Url.mod        = _.template "/data/<%= modSlug %>/mod.cg"
 Url.modVersion = _.template "/data/<%= modSlug %>/<%= modVersion %>/mod-version.cg"
 

src/scripts/controllers/base_controller.coffee

@@ -74,7 +74,6 @@ module.exports = class BaseController extends Backbone.View
         return unless @onWillChangeModel @_model, newModel
 
         @_model = newModel
-        @_model.silent = false
         @_tryRefresh()
 
     # Backbone.View Overrides ######################################################################

src/scripts/controllers/crafting_grid_controller.coffee

@@ -14,12 +14,14 @@ ImageLoader    = require './image_loader'
 module.exports = class CraftingGridController 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.imageLoader ?= new ImageLoader defaultUrl:'/images/unknown.png'
         options.templateName = 'crafting_grid'
         super options
 
         @_imageLoader = options.imageLoader
+        @_modPack     = options.modPack
+        @_slotCount   = 9
 
     # BaseController Methods #######################################################################
 
@@ -39,7 +41,7 @@ module.exports = class CraftingGridController extends BaseController
             slot.img.attr 'src', '/images/empty.png'
             slot.img.removeAttr 'alt'
 
-            display = @model.getItemDisplayAt index
+            display = @_getItemDisplayAt index
             if display?
                 slot.a.removeClass 'empty'
                 slot.a.attr 'href', display.itemUrl
@@ -49,3 +51,15 @@ module.exports = class CraftingGridController extends BaseController
 
         @$el.tooltip show:{delay:Duration.slow, duration:Duration.fast}
         super
+
+    # Private Methods ##############################################################################
+
+    _getItemDisplayAt: (slot)->
+        if slot >= @_slotCount then throw new Error "slot (#{slot}) must be less than #{@_slotCount}"
+        return null unless @model?
+
+        slug = @model.getItemSlugAt slot
+        return null unless slug?
+
+        itemDisplay = @_modPack.findItemDisplay slug
+        return itemDisplay

src/scripts/controllers/crafting_table_controller.coffee

@@ -5,11 +5,11 @@ Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 ###
 
-BaseController         = require './base_controller'
+BaseController   = require './base_controller'
-CraftingGridController = require './crafting_grid_controller'
+{Duration}       = require '../constants'
-{Duration}             = require '../constants'
+ImageLoader      = require './image_loader'
-ImageLoader            = require './image_loader'
+InventoryParser  = require '../models/inventory_parser'
-InventoryParser        = require '../models/inventory_parser'
+RecipeController = require './recipe_controller'
 
 ########################################################################################################################
 
@@ -22,19 +22,19 @@ module.exports = class CraftingTableController extends BaseController
         options.templateName = 'crafting_table'
         super options
 
-        @imageLoader = options.imageLoader
+        @_imageLoader = options.imageLoader
-        @modPack     = options.modPack
+        @_modPack    = options.modPack
 
     # Event Methods ################################################################################
 
     onNextClicked: ->
-        @model.step += 1
+        @model.stepIndex += 1
 
     onPrevClicked: ->
-        @model.step -= 1
+        @model.stepIndex -= 1
 
     onReportProblem: ->
-        parser   = new InventoryParser @modPack
+        parser   = new InventoryParser @_modPack
         itemList = parser.unparse @model.plan.want
         message  = "When I was on step #{@model.step + 1} of making:\n\n#{itemList}\nI noticed that...\n"
         global.feedbackController.enterFeedback message
@@ -42,20 +42,17 @@ module.exports = class CraftingTableController extends BaseController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @gridController = @addChild CraftingGridController, '.view__crafting_grid',
+        @recipeController = @addChild RecipeController, '.view__recipe', imageLoader:@_imageLoader, modPack:@_modPack
-            model: @model.grid
-            imageLoader: @imageLoader
 
-        @$multiplier     = @$('.multiplier')
         @$next           = @$('.next')
-        @$outputImg      = @$('.output img')
-        @$outputLink     = @$('.output a')
-        @$outputQuantity = @$('.quantity')
         @$prev           = @$('.prev')
         @$problemControl = @$('.problem')
         @$title          = @$('h2 p')
         @$tool           = @$('.tool p')
 
+        @$multiplier = $('<p class="multiplier"></p>')
+        @$('.output').append @$multiplier
+
         @defaultTitle = @$title.html()
         super
 
@@ -66,34 +63,18 @@ module.exports = class CraftingTableController extends BaseController
         if @model.hasSteps
             if @model.hasPrevStep then @$prev.addClass 'enabled'
             if @model.hasNextStep then @$next.addClass 'enabled'
-            @$title.html "Step #{@model.step + 1} of #{@model.stepCount}"
+            @$title.html "Step #{@model.stepIndex + 1} of #{@model.stepCount}"
         else
             @$title.html @defaultTitle
 
-        @$tool.html @model.toolNames
+        currentStep = @model.currentStep
+        @recipeController.model = currentStep?.recipe
 
-        @$outputImg.attr 'src', '/images/empty.png'
+        if currentStep?.multiplier > 1
-        @$outputImg.removeAttr 'alt'
+            @$multiplier.html "×#{currentStep.multiplier}"
-        @$outputLink.removeAttr 'href'
-        @$outputQuantity.html ''
-
-        outputStack = @model.output
-        if outputStack?
-            display = @modPack.findItemDisplay outputStack.slug
-            @$outputLink.attr 'href', display.itemUrl
-            @$outputLink.attr 'title', display.itemName
-            @$outputImg.attr 'alt', display.itemName
-            @$outputQuantity.html outputStack.quantity if outputStack.quantity > 1
-
-            @imageLoader.load display.iconUrl, @$outputImg
-
-        if @model.multiplier > 1
-            @$multiplier.html "×#{@model.multiplier}"
         else
             @$multiplier.html ''
 
-        @$el.tooltip show:{delay:Duration.slow, duration:Duration.fast}
-
         if not (@model.hasSteps and global.feedbackController?)
             @$problemControl.hide duration:Duration.fast
         else

src/scripts/controllers/recipe_controller.coffee

@@ -0,0 +1,71 @@
+###
+Crafting Guide - recipe_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseController         = require './base_controller'
+CraftingGridController = require './crafting_grid_controller'
+{Duration}             = require '../constants'
+ImageLoader            = require './image_loader'
+
+########################################################################################################################
+
+module.exports = class RecipeController extends BaseController
+
+    constructor: (options={})->
+        if not options.modPack? then throw new Error 'options.modPack is required'
+        options.imageLoader ?= new ImageLoader defaultUrl:'/images/unknown.png'
+        options.templateName = 'recipe'
+        super options
+
+        @_imageLoader = options.imageLoader
+        @_modPack     = options.modPack
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @gridController = @addChild CraftingGridController, '.view__crafting_grid',
+            modPack:     @_modPack
+            imageLoader: @_imageLoader
+
+        @$outputImg      = @$('.output img')
+        @$outputLink     = @$('.output a')
+        @$outputQuantity = @$('.quantity')
+        @$tool           = @$('.tool p')
+        super
+
+    refresh: ->
+        @gridController.model = @model
+        @$tool.html @_findToolNames().join ', '
+
+        @$outputImg.attr 'src', '/images/empty.png'
+        @$outputImg.removeAttr 'alt'
+        @$outputLink.removeAttr 'href'
+        @$outputQuantity.html ''
+
+        if @model?
+            outputStack = @model.output[0]
+            if outputStack?
+                display = @_modPack.findItemDisplay outputStack.slug
+                @$outputLink.attr 'href', display.itemUrl
+                @$outputLink.attr 'title', display.itemName
+                @$outputImg.attr 'alt', display.itemName
+                @$outputQuantity.html outputStack.quantity if outputStack.quantity > 1
+
+                @_imageLoader.load display.iconUrl, @$outputImg
+
+        @$el.tooltip show:{delay:Duration.fast, duration:Duration.fast}
+
+        super
+
+    # Private Methods ##############################################################################
+
+    _findToolNames: ->
+        result = []
+        if @model?
+            for stack in @model.tools
+                name = @_modPack.findName stack.slug
+                result.push name if name?
+        return result

src/scripts/models/crafting_grid.coffee

@@ -1,34 +0,0 @@
-###
-Crafting Guide - crafting_grid.coffee
-
-Copyright (c) 2015 by Redwood Labs
-All rights reserved.
-###
-
-BaseModel = require './base_model'
-
-########################################################################################################################
-
-module.exports = class CraftingGrid extends BaseModel
-
-    @SLOT_COUNT = 9
-
-    constructor: (attributes={}, options={})->
-        if not attributes.modPack? then throw new Error 'attributes.modPack is required'
-        attributes.recipe ?= null
-        super attributes, options
-
-        Object.defineProperties this,
-            'slotCount': { get:-> CraftingGrid.SLOT_COUNT }
-
-    # Public Methods ###############################################################################
-
-    getItemDisplayAt: (slot)->
-        if slot >= @slotCount then throw new Error "slot (#{slot}) must be less than #{@slotCount}"
-        return null unless @recipe?
-
-        slug = @recipe.getItemSlugAt slot
-        return null unless slug?
-
-        itemDisplay = @modPack.findItemDisplay slug
-        return itemDisplay

src/scripts/models/crafting_table.coffee

@@ -5,8 +5,8 @@ Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 ###
 
-BaseModel    = require './base_model'
+BaseModel = require './base_model'
-CraftingGrid = require './crafting_grid'
+{Event}   = require '../constants'
 
 ########################################################################################################################
 
@@ -14,63 +14,51 @@ module.exports = class CraftingTable extends BaseModel
 
     constructor: (attributes={}, options={})->
         if not attributes.plan? then throw new Error "attributes.plan is required"
-        attributes.grid ?= new CraftingGrid modPack:attributes.plan.modPack
-        attributes.modPack ?= attributes.plan.modPack
         super attributes, options
 
         @plan.on 'change', => @reset()
-        @_step = 0
+        @_stepIndex = 0
 
         Object.defineProperties this, {
-            hasNextStep: { get:@hasNextStep           }
+            currentStep: { get:@getCurrentStep                  }
-            hasPrevStep: { get:@hasPrevStep           }
+            hasNextStep: { get:@hasNextStep                     }
-            hasSteps:    { get:@hasSteps              }
+            hasPrevStep: { get:@hasPrevStep                     }
-            multiplier:  { get:@getMultiplier         }
+            hasSteps:    { get:@hasSteps                        }
-            output:      { get:@getOutput             }
+            stepCount:   { get:@getStepCount                    }
-            step:        { get:@getStep, set:@setStep }
+            stepIndex:   { get:@getStepIndex, set:@setStepIndex }
-            stepCount:   { get:@getStepCount          }
-            toolNames:   { get:@getToolNames          }
         }
 
     # Public Methods ###############################################################################
 
     reset: ->
-        @step = 0
+        @stepIndex = 0
         return this
 
     # Property Methods #############################################################################
 
     hasNextStep: ->
-        return @_step + 1 < @plan.steps.length
+        return @_stepIndex + 1 < @plan.steps.length
 
     hasPrevStep: ->
-        return @_step > 0
+        return @_stepIndex > 0
 
     hasSteps: ->
         return @plan.steps.length > 0
 
-    getMultiplier: ->
+    getCurrentStep: ->
-        step = @plan.steps[@_step]
+        return @plan.steps[@_stepIndex]
-        return unless step?
-        return step.multiplier
 
-    getOutput: ->
+    getStepIndex: ->
-        step = @plan.steps[@_step]
+        return @_stepIndex
-        return unless step?
-        return step.recipe.output[0]
 
-    getStep: ->
+    setStepIndex: (newStepIndex)->
-        return @_step
+        oldStepIndex = @_stepIndex
+        newStepIndex = Math.max 0, Math.min @plan.steps.length - 1, newStepIndex
 
-    setStep: (newStep)->
+        @_stepIndex = newStepIndex
-        oldStep = @_step
-        newStep = Math.max 0, Math.min @plan.steps.length - 1, newStep
 
-        @_step = newStep
+        @trigger Event.change + ':stepIndex', this, oldStepIndex, newStepIndex
-        @grid.recipe = @plan.steps[@_step]?.recipe
+        @trigger Event.change, this
-
-        @trigger 'change:step', this, oldStep, newStep
-        @trigger 'change', this
 
         return this
 
@@ -78,14 +66,7 @@ module.exports = class CraftingTable extends BaseModel
         return 0 unless @plan.steps?
         return @plan.steps.length
 
-    getToolNames: ->
-        recipe = @plan.steps[@_step]?.recipe
-        return '' unless recipe?
-        toolSlugs = (stack.slug for stack in recipe.tools)
-        toolNames = (@modPack.findName(slug) for slug in toolSlugs).join ', '
-        return toolNames
-
     # Object Overrides #############################################################################
 
     toString: ->
-        return "#{@constructor.name} (#{@cid}) { plan:#{@plan}, step:#{@_step} }"
+        return "#{@constructor.name} (#{@cid}) { plan:#{@plan}, step:#{@_stepIndex} }"

src/templates/crafting_table.jade

@@ -12,13 +12,8 @@
 
     .panel
         .prev
-        .input
+        .view__recipe
-            table.view__crafting_grid
-            .tool: p
-        .output
-            a: img
-            p.quantity
-            p.multiplier
         .next
+
         .problem
             a report a problem

src/templates/recipe.jade

@@ -0,0 +1,14 @@
+//-
+//- Crafting Guide - recipe.jade
+//-
+//- Copyright (c) 2015 by Redwood Labs
+//- All rights reserved.
+//-
+
+.view__recipe
+    .input
+        table.view__crafting_grid
+        .tool: p
+    .output
+        a: img
+        p.quantity