diff --git a/src/css/templates/crafting_table.scss b/src/css/templates/crafting_table.scss index dec314c43..177bc39a3 100644 --- a/src/css/templates/crafting_table.scss +++ b/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 { - position: absolute; top: 50%; left: 33%; - @include transform(translate(-50%, -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: 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; - } + .multiplier { + position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em; + font-family: PressStart; + font-size: $font-size-large; + text-align: center; } .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; diff --git a/src/css/templates/index.scss b/src/css/templates/index.scss index 02a78b7a8..00f92a360 100644 --- a/src/css/templates/index.scss +++ b/src/css/templates/index.scss @@ -11,4 +11,5 @@ All rights reserved. @import 'inventory'; @import 'item_page'; @import 'mod_pack'; +@import 'recipe'; @import 'stack'; diff --git a/src/css/templates/recipe.scss b/src/css/templates/recipe.scss new file mode 100644 index 000000000..146ed931a --- /dev/null +++ b/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; + } + } +} diff --git a/src/scripts/constants.coffee b/src/scripts/constants.coffee index 2028d9b27..a6d854c6e 100644 --- a/src/scripts/constants.coffee +++ b/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" diff --git a/src/scripts/controllers/base_controller.coffee b/src/scripts/controllers/base_controller.coffee index cd1865934..fcf96027d 100644 --- a/src/scripts/controllers/base_controller.coffee +++ b/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 ###################################################################### diff --git a/src/scripts/controllers/crafting_grid_controller.coffee b/src/scripts/controllers/crafting_grid_controller.coffee index 10997d2c1..1da151cc3 100644 --- a/src/scripts/controllers/crafting_grid_controller.coffee +++ b/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 diff --git a/src/scripts/controllers/crafting_table_controller.coffee b/src/scripts/controllers/crafting_table_controller.coffee index 0b8d2074f..a8f7656ba 100644 --- a/src/scripts/controllers/crafting_table_controller.coffee +++ b/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' -CraftingGridController = require './crafting_grid_controller' -{Duration} = require '../constants' -ImageLoader = require './image_loader' -InventoryParser = require '../models/inventory_parser' +BaseController = require './base_controller' +{Duration} = require '../constants' +ImageLoader = require './image_loader' +InventoryParser = require '../models/inventory_parser' +RecipeController = require './recipe_controller' ######################################################################################################################## @@ -22,19 +22,20 @@ module.exports = class CraftingTableController extends BaseController options.templateName = 'crafting_table' super options - @imageLoader = options.imageLoader - @modPack = options.modPack + @_imageLoader = options.imageLoader + @_modPack = options.modPack # Event Methods ################################################################################ onNextClicked: -> - @model.step += 1 + @model.stepIndex += 1 + logger.debug "stepping to #{@model.stepIndex}" 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 +43,17 @@ module.exports = class CraftingTableController extends BaseController # BaseController Overrides ##################################################################### onDidRender: -> - @gridController = @addChild CraftingGridController, '.view__crafting_grid', - model: @model.grid - imageLoader: @imageLoader + @recipeController = @addChild RecipeController, '.view__recipe', imageLoader:@_imageLoader, modPack:@_modPack - @$multiplier = @$('.multiplier') @$next = @$('.next') - @$outputImg = @$('.output img') - @$outputLink = @$('.output a') - @$outputQuantity = @$('.quantity') @$prev = @$('.prev') @$problemControl = @$('.problem') @$title = @$('h2 p') @$tool = @$('.tool p') + @$multiplier = $('

') + @$('.output').append @$multiplier + @defaultTitle = @$title.html() super @@ -66,34 +64,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' - @$outputImg.removeAttr 'alt' - @$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}" + if currentStep?.multiplier > 1 + @$multiplier.html "×#{currentStep.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 diff --git a/src/scripts/controllers/recipe_controller.coffee b/src/scripts/controllers/recipe_controller.coffee new file mode 100644 index 000000000..7a4799f00 --- /dev/null +++ b/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 diff --git a/src/scripts/models/crafting_grid.coffee b/src/scripts/models/crafting_grid.coffee deleted file mode 100644 index 0e0fbfccb..000000000 --- a/src/scripts/models/crafting_grid.coffee +++ /dev/null @@ -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 diff --git a/src/scripts/models/crafting_table.coffee b/src/scripts/models/crafting_table.coffee index 2caae89ee..46099bd27 100644 --- a/src/scripts/models/crafting_table.coffee +++ b/src/scripts/models/crafting_table.coffee @@ -5,8 +5,8 @@ Copyright (c) 2014-2015 by Redwood Labs All rights reserved. ### -BaseModel = require './base_model' -CraftingGrid = require './crafting_grid' +BaseModel = require './base_model' +{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 } - hasPrevStep: { get:@hasPrevStep } - hasSteps: { get:@hasSteps } - multiplier: { get:@getMultiplier } - output: { get:@getOutput } - step: { get:@getStep, set:@setStep } - stepCount: { get:@getStepCount } - toolNames: { get:@getToolNames } + currentStep: { get:@getCurrentStep } + hasNextStep: { get:@hasNextStep } + hasPrevStep: { get:@hasPrevStep } + hasSteps: { get:@hasSteps } + stepCount: { get:@getStepCount } + stepIndex: { get:@getStepIndex, set:@setStepIndex } } # 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: -> - step = @plan.steps[@_step] - return unless step? - return step.multiplier + getCurrentStep: -> + return @plan.steps[@_stepIndex] - getOutput: -> - step = @plan.steps[@_step] - return unless step? - return step.recipe.output[0] + getStepIndex: -> + return @_stepIndex - getStep: -> - return @_step + setStepIndex: (newStepIndex)-> + oldStepIndex = @_stepIndex + newStepIndex = Math.max 0, Math.min @plan.steps.length - 1, newStepIndex - setStep: (newStep)-> - oldStep = @_step - newStep = Math.max 0, Math.min @plan.steps.length - 1, newStep + @_stepIndex = newStepIndex - @_step = newStep - @grid.recipe = @plan.steps[@_step]?.recipe - - @trigger 'change:step', this, oldStep, newStep - @trigger 'change', this + @trigger Event.change + ':stepIndex', this, oldStepIndex, newStepIndex + @trigger Event.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} }" diff --git a/src/templates/crafting_table.jade b/src/templates/crafting_table.jade index 2d8908bd2..3a1a74102 100644 --- a/src/templates/crafting_table.jade +++ b/src/templates/crafting_table.jade @@ -12,13 +12,8 @@ .panel .prev - .input - table.view__crafting_grid - .tool: p - .output - a: img - p.quantity - p.multiplier + .view__recipe .next + .problem a report a problem diff --git a/src/templates/recipe.jade b/src/templates/recipe.jade new file mode 100644 index 000000000..ca006f13a --- /dev/null +++ b/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