Add "Make this tool" button

src/coffee/controllers/craft_page_controller.coffee

@@ -34,6 +34,9 @@ module.exports = class CraftPageController extends PageController
         @modPack     = options.modPack
         @storage     = options.storage
 
+        @model.craftsman.want.on Event.change, => @onWantInventoryChanged()
+        @model.craftsman.have.on Event.change, => @onHaveInventoryChanged()
+
     # Event Methods ################################################################################
 
     onHaveInventoryChanged: ->
@@ -42,30 +45,20 @@ module.exports = class CraftPageController extends PageController
     onMoveNeedToHave: (itemSlug)->
         quantity = @needInventoryController.model.quantityOf itemSlug
         @model.craftsman.have.add itemSlug, quantity
-        @onHaveInventoryChanged()
 
     onRemoveFromHaveInventory: (itemSlug)->
         @model.craftsman.have.remove itemSlug
-        @onHaveInventoryChanged()
 
     onRemoveFromWant: (itemSlug)->
         @model.craftsman.want.remove itemSlug
-        @onWantInventoryChange()
 
-    onStepComplete: (stepController)->
+    onWantInventoryChanged: ->
-        step = stepController.model
-        for stack in step.recipe.output
-            @model.craftsman.have.add stack.itemSlug, stack.quantity * step.multiplier
-        @onHaveInventoryChanged()
-
-    onWantInventoryChange: ->
         text = @model.craftsman.want.unparse()
         url = Url.crafting inventoryText:text
         router.navigate url
 
         if @model.craftsman.want.isEmpty
             @model.craftsman.have.clear()
-            @onHaveInventoryChanged()
 
     # PageController Overrides #####################################################################
 
@@ -87,7 +80,7 @@ module.exports = class CraftPageController extends PageController
             modPack:         @modPack
             firstButtonType: 'remove'
         @wantInventoryController.on Event.button.first, (c, s)=> @onRemoveFromWant(s)
-        @wantInventoryController.on Event.change, (c)=> @onWantInventoryChange()
+        @wantInventoryController.on Event.change, (c)=> @onWantInventoryChanged()
 
         @haveInventoryController = @addChild InventoryController, '.have .view__inventory',
             imageLoader:     @imageLoader
@@ -140,8 +133,31 @@ module.exports = class CraftPageController extends PageController
 
     # Private Methods ################################################################################
 
+    _addTools: (controller)->
+        controller.model.addToolsTo @model.craftsman.want
+
+    _completeStep: (controller)->
+        controller.model.completeInto @model.craftsman.have
+
+    _isAddingToolsPossible: (controller)->
+        tools = controller.model.recipe.tools
+        return false unless tools.length > 0
+
+        have = @model.craftsman.have
+        want = @model.craftsman.want
+
+        for stack in tools
+            return false if have.hasAtLeast stack.itemSlug
+            return false if want.hasAtLeast stack.itemSlug
+
+        return true
+
     _isStepCompletable: (controller)->
-        return not @model.craftsman.want.hasAtLeast controller.model.outputItemSlug
+        recipe = controller.model.recipe
+        for stack in recipe.output
+            return false if @model.craftsman.want.hasAtLeast stack.itemSlug
+
+        return true
 
     _refreshSectionVisibility: ->
         return unless @_rendered
@@ -174,11 +190,13 @@ module.exports = class CraftPageController extends PageController
             controller = @_stepControllers[index]
             if not controller?
                 controller = new StepController
-                    canComplete: (controller)=> @_isStepCompletable(controller)
+                    canAddTools: (controller)=> @_isAddingToolsPossible controller
+                    canComplete: (controller)=> @_isStepCompletable controller
+                    onComplete:  (controller)=> @_completeStep controller
+                    onAddTools:  (controller)=> @_addTools controller
                     imageLoader: @imageLoader
                     model:       step
                     modPack:     @modPack
-                controller.on Event.button.complete, (c)=> @onStepComplete(c)
                 controller.render()
 
                 @$stepsContainer.append controller.$el

src/coffee/controllers/item_selector_controller.coffee

@@ -6,12 +6,12 @@ All rights reserved.
 ###
 
 $                             = require 'jquery'
-BaseController                = require './base_controller'
-ItemSelector                  = require '../models/item_selector'
-ItemSelectorElementController = require './item_selector_element_controller'
 _                             = require 'underscore'
+BaseController                = require './base_controller'
 {Duration}                    = require '../constants'
 {Event}                       = require '../constants'
+ItemSelector                  = require '../models/item_selector'
+ItemSelectorElementController = require './item_selector_element_controller'
 {Key}                         = require '../constants'
 
 ########################################################################################################################

src/coffee/controllers/minimal_recipe_controller.coffee

@@ -55,22 +55,21 @@ module.exports = class MinimalRecipeController extends BaseController
 
     # Property Methods #############################################################################
 
-    getMultiplier: ->
-        @_multiplier ?= 1
-        return @_multiplier
-
-    setMultiplier: (newMultiplier)->
-        oldMultiplier = @_multiplier
-        return if newMultiplier is oldMultiplier
-
-        @_multiplier = newMultiplier
-        @_refreshMultiplier()
-
-        @trigger Event.change + ':multiplier', this, oldMultiplier, newMultiplier
-        @trigger Event.change, this
-
     Object.defineProperties @prototype,
-        multiplier: {get:@prototype.getMultiplier, set:@prototype.setMultiplier}
+        multiplier:
+            get: ->
+                @_multiplier ?= 1
+                return @_multiplier
+
+            set: (newMultiplier)->
+                oldMultiplier = @_multiplier
+                return if newMultiplier is oldMultiplier
+
+                @_multiplier = newMultiplier
+                @_refreshMultiplier()
+
+                @trigger Event.change + ':multiplier', this, oldMultiplier, newMultiplier
+                @trigger Event.change, this
 
     # Backbone.View Methods ########################################################################
 

src/coffee/controllers/step_controller.coffee

@@ -22,15 +22,22 @@ module.exports = class StepController extends BaseController
         options.templateName = 'step'
         super options
 
+        @canAddTools = options.canAddTools or (controller)-> true
         @canComplete = options.canComplete or (controller)-> true
+        @onComplete  = options.onComplete or (controller)-> # do nothing
+        @onAddTools  = options.onAddTools or (controller)-> # do nothing
         @imageLoader = options.imageLoader
         @modPack     = options.modPack
 
     # Event Methods ################################################################################
 
-    onCompleteClicked: (event)->
+    onCompleteButtonClicked: (event)->
-        event.preventDefault()
+        return if @$completeButton.hasClass 'disabled'
-        @trigger Event.button.complete, this
+        @onComplete this
+
+    onToolButtonClicked: (event)->
+        return if @$toolButton.hasClass 'disabled'
+        @onAddTools this
 
     # BaseController Overrides #####################################################################
 
@@ -46,9 +53,10 @@ module.exports = class StepController extends BaseController
             model:       @model.recipe
             modPack:     @modPack
 
-        @$header        = @$('h3')
+        @$completeButton  = @$('.button.complete')
-        @$completePanel = @$('.complete')
+        @$header          = @$('h3')
-        @$completeImage = @$('.complete img')
+        @$toolButton      = @$('.button.tool')
+        @$toolButtonLabel = @$('.button.tool p')
         super
 
     onWillChangeModel: (oldModel, newModel)->
@@ -63,10 +71,8 @@ module.exports = class StepController extends BaseController
         @recipeController.model      = @model.recipe
         @recipeController.multiplier = @model.multiplier
 
-        if @canComplete(this)
+        @_refreshCompleteButton()
-            @$completePanel.addClass 'disabled'
+        @_refreshToolButton()
-        else
-            @$completePanel.removeClass 'disabled'
 
         super
 
@@ -74,4 +80,19 @@ module.exports = class StepController extends BaseController
 
     events: ->
         return _.extend super,
-            'click .complete a': 'onCompleteClicked'
+            'click .button.complete': 'onCompleteButtonClicked'
+            'click .button.tool':     'onToolButtonClicked'
+
+    # Private Methods ##############################################################################
+
+    _refreshToolButton: ->
+        if @canAddTools this
+            @$toolButton.removeClass 'disabled'
+        else
+            @$toolButton.addClass 'disabled'
+
+    _refreshCompleteButton: ->
+        if @canComplete this
+            @$completeButton.removeClass 'disabled'
+        else
+            @$completeButton.addClass 'disabled'

src/coffee/models/crafting/crafting_step.coffee

@@ -23,6 +23,17 @@ module.exports = class CraftingStep
         @_multiplier = multiplier
         @_recipe     = recipe
 
+    # Public Methods ###############################################################################
+
+    addToolsTo: (targetInventory)->
+        for stack in @_recipe.tools
+            targetInventory.add stack.itemSlug, stack.quantity
+
+    completeInto: (targetInventory)->
+        for stack in @_recipe.output
+            quantity = @_recipe.getQuantityProduced stack.itemSlug
+            targetInventory.add stack.itemSlug, quantity * @_multiplier
+
     # Property Methods #############################################################################
 
     Object.defineProperties @prototype,

src/coffee/models/crafting/craftsman.coffee

@@ -43,9 +43,10 @@ module.exports = class Craftsman extends BaseModel
         @_modPack = modPack
 
         reset = _.debounce (=> @reset()), 100
+        reevaluatePlans = _.debounce (=> @reevaluatePlans()), 100
 
         @_have = new Inventory modPack:@_modPack
-        @_have.on Event.change, reset
+        @_have.on Event.change, reevaluatePlans
 
         @_want = new Inventory modPack:@_modPack
         @_want.on Event.change, reset
@@ -57,6 +58,25 @@ module.exports = class Craftsman extends BaseModel
 
     # Public Methods ###############################################################################
 
+    reevaluatePlans: ->
+        @_plans         = null
+        @_planEvaluator = null
+        @stage          = @STAGE.WAITING
+        @stageCount     = 0
+
+        @_scheduleNextWork()
+
+    reset: ->
+        @_graphBuilder  = null
+        @_planBuilder   = null
+        @_planEvaluator = null
+        @_plans         = null
+
+        @stage      = @STAGE.WAITING
+        @stageCount = 0
+
+        @_scheduleNextWork()
+
     work: ->
         return if @_want.isEmpty
 
@@ -108,17 +128,6 @@ module.exports = class Craftsman extends BaseModel
         @trigger 'scheduleNextWork'
         return @complete
 
-    reset: ->
-        @_graphBuilder  = null
-        @_planBuilder   = null
-        @_planEvaluator = null
-        @_plans         = null
-
-        @stage      = @STAGE.WAITING
-        @stageCount = 0
-
-        @_scheduleNextWork()
-
     # Property Methods #############################################################################
 
     Object.defineProperties @prototype,

src/coffee/models/inventory.coffee

@@ -59,7 +59,9 @@ module.exports = class Inventory extends BaseModel
 
     each: (callback)->
         for itemSlug in @_itemSlugs
-            callback @_stacks[itemSlug]
+            stack = @_stacks[itemSlug]
+            continue unless stack?
+            callback stack
 
     getSlugs: ->
         return @_itemSlugs[..]

src/jade/templates/step.jade

@@ -7,7 +7,9 @@
 
 .view__step
     h3
-    .view__inventory
+    .main_content
-    .view__minimal_recipe
+        .view__inventory
-    .complete
+        .view__minimal_recipe
-        a: div: p I already have this
+    .buttons
+        .button.complete: p complete step
+        .button.tool: p also make this tool

src/scss/templates/step.scss

@@ -6,78 +6,74 @@ All rights reserved.
 */
 
 .view__step {
-    position: relative; min-height: 24em;
+    display: flex;
-
+    flex-direction: column;
     border-top: 0.1em solid $color-gray-medium;
     padding: 1em 0;
 
     &:first-child {
         border-top: 0;
         padding-top: 0;
-
-        .complete {
-            top: 0;
-        }
     }
 
     &:hover {
-        .complete {
+        .buttons {
-            opacity: $opacity-shown;
+            opacity: 1.0;
         }
     }
 
-    .view__inventory {
+    h3 {
-        margin: 1em 0 0 3em;
+        margin-bottom: 1em;
     }
 
-    .view__minimal_recipe {
+    .main_content {
-        position: absolute; top: 2em; right: 4.8em;
+        display: flex;
+        margin: 0 3em 2em 3em;
+
+        .view__inventory {
+            flex: 60%;
+        }
+
+        .view__minimal_recipe {
+            flex: 40%;
+        }
     }
 
-    .complete {
+    .buttons {
-        position: absolute; top: 1em; right: 0;
+        display: flex;
-        cursor: pointer;
+        opacity: 0;
-        opacity: $opacity-hidden;
+        transition: opacity $animate-normal;
 
-        transition: opacity $animate-fast;
+        .button {
+            flex: 50%;
 
-        a {
+            background: $color-gray-faint;
-            div {
+            border: 0.1em solid $color-gray-medium;
-                height: 3em;
+            border-radius: 1.5em;
+            cursor: pointer;
+            padding: 0.25em 0.75em;
+            margin: 0 1em;
 
-                background: url('/images/check.png') no-repeat right;
+            &:hover {
-                background-size: 3em 3em;
+                background: $color-background-panel;
-                padding-right: 4em;
+            }
-                text-align: right;
 
-                &:hover {
+            &.disabled {
-                    background-image: url('/images/check_hover.png');
+                background: $color-background-panel;
-
+                border: 0.1em solid $color-gray-light;
-                    p {
+                cursor: inherit;
-                        font-weight: bold;
-                    }
-                }
 
                 p {
-                    position: relative; top: 50%;
+                    color: $color-gray-light;
-                    @include transform(translateY(-50%));
-                    color: $color-checkmark;
-                    font-size: $font-size-small;
                 }
             }
-        }
 
-        &.active {
+            p {
-            a {
+                color: $color-active;
-                background-image: url('/images/check_active.png');
+                font-family: $font-family-normal;
-            }
+                font-weight: bold;
-        }
+                text-align: center;
-
-        &.disabled {
-            a {
-                background-image: url('/images/check_disabled.png') !important;
-                cursor: inherit;
             }
         }
     }
-}
+}