Redesign the crafting page

This introduces the new crafting page design featuring a new vertical layout and list display of all crafting steps. It also makes it easy to move items between the have/need sections and even from each step into your inventory (causing a new crafting plan to be created which doesn't plan on making that item). * Convert the `BaseController.hide` and `show` methods to be much more robust in the use of CSS transitions (using a timer in case a transition doesn't actually fire). * Change `hide`/`show` to use events for communicating animation state instead of callbacks * Convert several controllers to fire events for communication with parent controllers instead of accepting functions. * Rewrite the `CraftPageController`, `CraftPage` model and related Jade/SCSS files to implement the new design. * Alter the `InventoryController` and `StackController` to allow a variety of action buttons, and for the events from those action buttons to bubble up to parent controllers * Add the `StepController` and its related model, template, and style sheet as part of the new craft page. * Tweak the `ItemSelectorController` and related files to allow for a variety of styles for the launcher button
2015-04-20 09:17:58 -07:00
parent daaeb523d9
commit 5b014c9921
61 changed files with 855 additions and 401 deletions
@@ -0,0 +1,75 @@
+###
+Crafting Guide - step_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseController          = require './base_controller'
+InventoryController     = require './inventory_controller'
+MinimalRecipeController = require './minimal_recipe_controller'
+{Event}                 = require '../constants'
+
+########################################################################################################################
+
+module.exports = class StepController 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'
+        if not options.imageLoader? then throw new Error 'options.imageLoader is required'
+        options.templateName = 'step'
+        super options
+
+        @canComplete = options.canComplete or (controller)-> true
+        @imageLoader = options.imageLoader
+        @modPack     = options.modPack
+
+    # Event Methods ################################################################################
+
+    onCompleteButtonClicked: (event)->
+        event.preventDefault()
+        @trigger Event.button.complete, this
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @inventoryController = @addChild InventoryController, '.view__inventory',
+            editable:    false
+            imageLoader: @imageLoader
+            model:       @model.inventory
+            modPack:     @modPack
+
+        @recipeController = @addChild MinimalRecipeController, '.view__minimal_recipe',
+            imageLoader: @imageLoader
+            model:       @model.recipe
+            modPack:     @modPack
+
+        @$header         = @$('h3')
+        @$completeButton = @$('button.complete')
+        super
+
+    onWillChangeModel: (oldModel, newModel)->
+        if not newModel? then throw new Error 'model cannot be null'
+        return super
+
+    refresh: ->
+        itemDisplay = @modPack.findItemDisplay @model.outputItemSlug
+        @$header.html "#{@model.number}. #{itemDisplay.itemName}"
+
+        @inventoryController.model   = @model.inventory
+        @recipeController.model      = @model.recipe
+        @recipeController.multiplier = @model.multiplier
+
+        if @canComplete(this)
+            @$completeButton.removeProp 'disabled'
+        else
+            @$completeButton.prop 'disabled', true
+
+        super
+
+    # Backbone.View Overrides ######################################################################
+
+    events: ->
+        return _.extend super,
+            'click button.complete': 'onCompleteButtonClicked'