Initial implementation of item page (disabled)

src/css/main.scss

@@ -37,7 +37,7 @@ $font-family-input:  monospace;
 $font-size-small:    1.0em;
 $font-size-normal:   1.5em;
 $font-size-large:    2.0em;
-$font-size-x-large:  2.5em;
+$font-size-x-large:  3.0em;
 $font-size-xx-large: 4.0em;
 
 // Gray Palette ////////////////////////////////////////////////////////////////////////////////////

src/css/mixins.scss

@@ -24,3 +24,11 @@ All rights reserved.
     -webkit-transform: $transforms;
     transform: $transforms;
 }
+
+@mixin pixel-image {
+    image-rendering:        -moz-crisp-edges; /* Firefox */
+    image-rendering:        -o-crisp-edges; /* Opera */
+    image-rendering:        -webkit-optimize-contrast; /* Webkit (non-standard naming) */
+    image-rendering:        crisp-edges;
+    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
+}

src/css/templates/index.scss

@@ -10,6 +10,7 @@ All rights reserved.
 @import 'feedback';
 @import 'inventory';
 @import 'item';
+@import 'item_page';
 @import 'crafting_page';
 @import 'mod';
 @import 'mod_pack';

src/css/templates/item_page.scss

@@ -0,0 +1,68 @@
+/*
+Crafting Guide - item_page.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+.view__item_page {
+    & > div {
+        vertical-align: top;
+        display: inline-block;
+    }
+
+    .sidebar {
+        position: relative; width: 18.75%;
+        padding: 1em;
+
+        .titleImage {
+            position: relative; height: 16em; width: 16em;
+            margin-bottom: 2em;
+
+            img {
+                position: relative; width: 100%;
+                @include pixel-image;
+            }
+        }
+    }
+
+    .mainBody {
+        position: relative; width: 81.25%;
+        padding: 1em;
+        padding-top: 2em;
+
+        .name {
+            font-family: $font-family-header;
+            font-size: $font-size-x-large;
+            margin: 0;
+        }
+
+        .byline {
+            display: none;
+            margin: 0.25em 0 2em 0;
+
+            p {
+                font-family: $font-family-normal;
+                font-size: $font-size-normal;
+                font-style: italic;
+            }
+        }
+
+        .description {
+            margin-bottom: 4em;
+
+            p {
+                font-family: $font-family-normal;
+                font-size: $font-size-large;
+            }
+        }
+
+        .usedInMaking {
+            display: none;
+        }
+
+        .similar {
+            display: none;
+        }
+    }
+}

src/css/templates/mod.scss

@@ -15,7 +15,11 @@ All rights reserved.
     }
 
     .version {
-        width: 10em;
+        width: 12em;
+
+        select {
+            position: relative; width: 100%;
+        }
     }
 
     .name {

src/css/templates/mod_page.scss

@@ -21,6 +21,7 @@ All rights reserved.
 
             img {
                 position: relative; width: 100%;
+                @include pixel-image;
             }
         }
 
@@ -59,7 +60,7 @@ All rights reserved.
 
             p {
                 font-family: $font-family-normal;
-                font-size: $font-size-small;
+                font-size: $font-size-normal;
                 font-style: italic;
             }
         }
@@ -72,23 +73,5 @@ All rights reserved.
                 font-size: $font-size-large;
             }
         }
-
-        .section {
-            h2 {
-                font-family: $font-family-header;
-                font-size: $font-size-large;
-            }
-
-            .panel {
-                background: white;
-                padding: 1em;
-
-                & > div {
-                    position: relative; width: 33%;
-                    display: inline-block;
-                    padding: 0.5em;
-                }
-            }
-        }
     }
 }

src/scripts/controllers/base_controller.coffee

@@ -12,6 +12,7 @@ views = require '../views'
 module.exports = class BaseController extends Backbone.View
 
     constructor: (options={})->
+        @tryRefresh = _.debounce @_tryRefresh, 100
         Object.defineProperty this, 'model', get:@getModel, set:@setModel
 
         @_model    = null
@@ -23,8 +24,6 @@ module.exports = class BaseController extends Backbone.View
         @_loadTemplate options.templateName
         super options
 
-        @_tryRefresh = _.debounce @_tryRefresh, 100
-
     # Public Methods ###############################################################################
 
     addChild: (Controller, atSelector, options={})->
@@ -47,15 +46,15 @@ module.exports = class BaseController extends Backbone.View
     # Event Methods ################################################################################
 
     onDidModelChange: ->
-        @_tryRefresh()
+        @tryRefresh()
 
     onDidModelSync: ->
-        @_tryRefresh()
+        @tryRefresh()
 
     onWillRender: -> # do nothing
 
     onDidRender: ->
-        @_tryRefresh()
+        @tryRefresh()
 
     onWillShow: -> # do nothing
 
@@ -79,7 +78,7 @@ module.exports = class BaseController extends Backbone.View
         return unless @onWillChangeModel @_model, newModel
 
         @_model = newModel
-        @_tryRefresh()
+        @tryRefresh()
 
     # Backbone.View Overrides ######################################################################
 

src/scripts/controllers/item_controller.coffee

@@ -6,7 +6,6 @@ All rights reserved.
 ###
 
 BaseController = require './base_controller'
-{Url}          = require '../constants'
 
 ########################################################################################################################
 
@@ -31,9 +30,9 @@ module.exports = class ItemController extends BaseController
     refresh: ->
         display = @_modPack.findItemDisplay @model.slug
 
-        @$icon.attr 'src', Url.itemIcon display
+        @$icon.attr 'src', display.iconUrl
         @$name.html display.itemName
-        @$nameLink.attr 'href', Url.item display
+        @$nameLink.attr 'href', display.itemUrl
 
     # Backbone.View Overrides ######################################################################
 

src/scripts/controllers/item_group_controller.coffee

@@ -16,17 +16,26 @@ ItemController = require './item_controller'
 module.exports = class ItemGroupController 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.modPack?    then throw new Error 'options.modPack is required'
+        options.title        ?= ''
-        if not options.modVersion? then throw new Error 'options.modVersion is required'
+        options.templateName  = 'item_group'
-        options.templateName = 'item_group'
         super options
 
-        @modVersion       = options.modVersion
-        @_modPack         = options.modPack
         @_itemControllers = []
+        @_modPack         = options.modPack
+        @_title           = options.title
 
-        @modVersion.on Event.change, => @refresh()
+        Object.defineProperties this,
+            title: {get:@getTitle, set:@setTitle}
+
+    # Property Methods #############################################################################
+
+    getTitle: ->
+        return @_title
+
+    setTitle: (title)->
+        @_title = title
+        @tryRefresh()
 
     # BaseController Overrides #####################################################################
 
@@ -36,7 +45,7 @@ module.exports = class ItemGroupController extends BaseController
         super
 
     refresh: ->
-        @$title.html if @model is Item.Group.Other then 'Items' else @model
+        @$title.html @_title
         @_refreshItems()
         super
 
@@ -55,15 +64,16 @@ module.exports = class ItemGroupController extends BaseController
         controllerIndex = 0
         delay = 0
 
-        @modVersion.eachItemInGroup @model, (item)=>
+        if @model?
-            controller = @_itemControllers[controllerIndex]
+            for item in @model
-            if not controller?
+                controller = @_itemControllers[controllerIndex]
-                _.delay (=> @_createItemController item), delay
+                if not controller?
-                delay += @_delayStep
+                    _.delay ((i)=> return => @_createItemController i)(item), delay
-            else
+                    delay += @_delayStep
-                controller.model = item
+                else
-                controller.refresh()
+                    controller.model = item
-            controllerIndex += 1
+                    controller.refresh()
+                controllerIndex += 1
 
         while @_itemControllers.length > controllerIndex
             controller = @_itemControllers.pop()

src/scripts/controllers/item_page_controller.coffee

@@ -0,0 +1,99 @@
+###
+Crafting Guide - item_page_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseController      = require './base_controller'
+{Duration}          = require '../constants'
+{Event}             = require '../constants'
+ImageLoader         = require './image_loader'
+ItemGroupController = require './item_group_controller'
+ItemPage            = require '../models/item_page'
+{Url}               = require '../constants'
+
+########################################################################################################################
+
+module.exports = class ItemPageController extends BaseController
+
+    constructor: (options={})->
+        if not options.modPack? then throw new Error 'options.modPack is required'
+        if not options.itemSlug? then throw new Error 'options.itemSlug is required'
+
+        options.imageLoader  ?= new ImageLoader defaultUrl:'/images/unknown.png'
+        options.model        ?= new ItemPage modPack:options.modPack
+        options.templateName ?= 'item_page'
+
+        super options
+
+        @_imageLoader = options.imageLoader
+        @_itemSlug    = options.itemSlug
+        @_modPack     = options.modPack
+
+        @_modPack.on Event.change, => @_resolveItemSlug()
+        @_resolveItemSlug()
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @_similarItemsController = @addChild ItemGroupController, '.similar .view__item_group', modPack:@_modPack
+        @_usedInMakingController  = @addChild ItemGroupController, '.usedInMaking .view__item_group', modPack:@_modPack
+
+        @$byline               = @$('.byline')
+        @$bylineLink           = @$('.byline a')
+        @$usedInMakingContainer = @$('.usedInMaking')
+        @$name                 = @$('h1.name')
+        @$recipeContainer      = @$('.recipe')
+        @$similarContainer     = @$('.similar')
+        @$titleImage           = @$('.titleImage img')
+        super
+
+    refresh: ->
+        display = @_modPack.findItemDisplay @model.item?.slug
+        if display?
+            @_imageLoader.load display.iconUrl, @$titleImage
+            @$name.html display.itemName
+        else
+            @$titleImage.removeAttr 'src'
+            @$name.html ''
+
+        @_refreshByline()
+        @_refreshSimilarItems()
+        @_refreshComponentIn()
+
+        super
+
+    # Private Methods ##############################################################################
+
+    _refreshByline: ->
+        mod = @model.item?.modVersion?.mod
+        if mod?.name?.length > 0
+            @$bylineLink.attr 'href', Url.mod modSlug:mod.slug
+            @$bylineLink.html mod.name
+            @$byline.fadeIn duration:Duration.fast
+        else
+            @$byline.fadeOut duration:Duration.fast
+
+    _refreshComponentIn: ->
+        @_usedInMakingController.title = 'Used in Making'
+
+        @_usedInMakingController.model = @model.findComponentInItems()
+        if @_usedInMakingController.model?
+            @$usedInMakingContainer.fadeIn duration:Duration.fast
+        else
+            @$usedInMakingContainer.fadeOut duration:Duration.fast
+
+    _refreshSimilarItems: ->
+        group = @model.item?.group
+        @_similarItemsController.title = if group? then "Other #{group}" else 'Similar Items'
+
+        @_similarItemsController.model = @model.findSimilarItems()
+        if @_similarItemsController.model?
+            @$similarContainer.fadeIn duration:Duration.fast
+        else
+            @$similarContainer.fadeOut duration:Duration.fast
+
+    _resolveItemSlug: ->
+        @model.item = @_modPack.findItem @_itemSlug, includeDisabled:true
+

src/scripts/controllers/mod_controller.coffee

@@ -33,7 +33,7 @@ module.exports = class ModController extends BaseController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @$version     = @$('.version')
+        @$version     = @$('select')
         @$nameLink    = @$('.name a')
         @$nameText    = @$('.name p')
         @$description = @$('.description p')
@@ -69,5 +69,5 @@ module.exports = class ModController extends BaseController
 
     events: ->
         return _.extend super,
-            'change .version': 'onVersionChanged'
+            'change select': 'onVersionChanged'
             'click a':         'routeLinkClick'

src/scripts/controllers/mod_page_controller.coffee

@@ -9,6 +9,7 @@ BaseController      = require './base_controller'
 {Duration}          = require '../constants'
 Mod                 = require '../models/mod'
 ModPack             = require '../models/mod_pack'
+Item                = require '../models/item'
 ItemGroupController = require './item_group_controller'
 {Text}              = require '../constants'
 {Url}               = require '../constants'
@@ -84,25 +85,28 @@ module.exports = class ModPageController extends BaseController
 
         modVersion = @model.activeModVersion
         modVersion ?= @model.getModVersion Mod.Version.Latest
-        modVersion.fetch()
+        modVersion.fetch() if modVersion?
 
         return modVersion
 
     _refreshItemGroups: ->
         groupIndex = 0
         modVersion = @effectiveModVersion
-        modVersion.eachGroup (group)=>
+        if modVersion?
-            controller = @_groupControllers[groupIndex]
+            modVersion.eachGroup (group)=>
-            if not controller?
+                controller = @_groupControllers[groupIndex]
-                controller = new ItemGroupController model:group, modVersion:modVersion, modPack:@_modPack
+                items = modVersion.allItemsInGroup group
-                controller.render()
+                if not controller?
-                @$groupContainer.append controller.$el
+                    title = if group is Item.Group.Other then 'Items' else group
-                @_groupControllers[groupIndex] = controller
+                    controller = new ItemGroupController model:items, modPack:@_modPack, title:title
-            else
+                    controller.render()
-                controller.modVersion = modVersion
+                    @$groupContainer.append controller.$el
-                controller.model      = group
+                    @_groupControllers[groupIndex] = controller
-                controller.refresh()
+                else
-            groupIndex++
+                    controller.modVersion = modVersion
+                    controller.model      = items
+                    controller.refresh()
+                groupIndex++
 
         while @_groupControllers.length > groupIndex + 1
             controller = @_groupControllers.pop()

src/scripts/crafting_guide_router.coffee

@@ -5,18 +5,20 @@ Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 ###
 
+
+CraftingPageController = require './controllers/crafting_page_controller'
 {DefaultMods}          = require './constants'
 {Duration}             = require './constants'
 {Event}                = require './constants'
 HeaderController       = require './controllers/header_controller'
-CraftingPageController = require './controllers/crafting_page_controller'
+ItemPageController     = require './controllers/item_page_controller'
 Mod                    = require './models/mod'
 ModPack                = require './models/mod_pack'
 ModPageController      = require './controllers/mod_page_controller'
 {Opacity}              = require './constants'
 Storage                = require './models/storage'
-UrlParams              = require './url_params'
 {Url}                  = require './constants'
+UrlParams              = require './url_params'
 
 ########################################################################################################################
 
@@ -55,13 +57,31 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
         @_recordPageView()
 
     routes:
-        '':                          'root'
+        '':                 'root'
-        'item/(:inventoryText)':     'crafting'
+        'item/:itemSlug':   'item'
-        'crafting/(:inventoryText)': 'crafting'
+        'crafting/(:text)': 'crafting'
-        'mod/:slug':                 'mod'
+        'mod/:modSlug':     'mod'
 
     # Route Methods ################################################################################
 
+    crafting: (text)->
+        controller = new CraftingPageController _.extend {}, @_defaultOptions
+        controller.model.params = inventoryText:text
+        @_setPage 'crafting', controller
+
+    item: (slug)->
+        # Temporarily re-route these to crafting until item page is complete. -- aminer 2015-02-08
+        #
+        # controller = new ItemPageController _.extend {itemSlug:slug}, @_defaultOptions
+        # @_setPage 'item', controller
+
+        @navigate "/crafting/#{slug}", trigger:true
+
+    mod: (slug)->
+        controller = new ModPageController  _.extend {}, @_defaultOptions
+        controller.model = @modPack.getMod slug
+        @_setPage 'mod', controller
+
     root: ->
         params = new UrlParams recipeName:{type:'string'}, count:{type:'integer'}
 
@@ -74,16 +94,6 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
 
         @navigate Url.crafting(inventoryText:text), trigger:true
 
-    crafting: (inventoryText)->
-        controller = new CraftingPageController @_defaultOptions
-        controller.model.params = inventoryText:inventoryText
-        @_setPage 'crafting', controller
-
-    mod: (slug)->
-        controller = new ModPageController @_defaultOptions
-        controller.model = @modPack.getMod slug
-        @_setPage 'mod', controller
-
     # Private Methods ##############################################################################
 
     _recordPageView: ->
@@ -96,9 +106,9 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
             logger.info "Suppressing GA page view: #{pathname}"
 
     _setPage: (page, controller)->
-        return if @_page is page
+        return if @_controller is controller
 
-        logger.info "changing to #{page} page"
+        logger.info "changing to page controller: #{controller.constructor.name}"
         showDuration = Duration.normal
         show = =>
             @_page       = page
@@ -115,7 +125,7 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
                 controller.onDidShow()
 
         if @_controller?
-            showDuration = Duration.fast
+            showDuration = Duration.long
             @_controller.$el.fadeOut showDuration, show
         else
             show()

src/scripts/models/item_page.coffee

@@ -0,0 +1,66 @@
+###
+Crafting Guide - item_page.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseModel    = require './base_model'
+CraftingPlan = require './crafting_plan'
+Event        = require '../constants'
+
+########################################################################################################################
+
+module.exports = class ItemPage extends BaseModel
+
+    constructor: (attributes={}, options={})->
+        if not attributes.modPack? then throw new Error 'attributes.modPack is required'
+        attributes.item ?= null
+        super attributes, options
+
+        @_plan = new CraftingPlan modPack:@modPack
+        @on Event.change + ':item', => @_updateCraftingPlan()
+        @_updateCraftingPlan()
+
+        Object.defineProperties this,
+            craftingRawMaterials: {get:-> @_plan.need}
+            craftingSteps:        {get:-> @_plan.steps}
+            similarItems:         {get:=> @getSimilarItems()}
+
+    # Property Methods #############################################################################
+
+    findSimilarItems: ->
+        return null unless @item?.modVersion?
+
+        result = []
+        @item.modVersion.eachItemInGroup @item.group, (item)=>
+            return if item is @item
+            result.push item
+
+        return null unless result.length > 0
+        return result
+
+    findComponentInItems: ->
+        return null unless @item?
+
+        itemSlug = @item.slug
+        result = {}
+        @modPack.eachMod (mod)->
+            mod.eachItem (item)->
+                item.eachRecipe (recipe)->
+                    for stack in recipe.input
+                        if stack.slug is itemSlug
+                            result[item.slug] = item
+
+        result = _.values(result).sort (a, b)-> a.compareTo b
+        return null unless result.length > 0
+        return result
+
+    # Private Methods ##############################################################################
+
+    _updateCraftingPlan: ->
+        @_plan.clear()
+
+        if @item?
+            @_plan.want.add @item.slug
+            @_plan.craft()

src/scripts/models/mod_pack.coffee

@@ -45,6 +45,8 @@ module.exports = class ModPack extends BaseModel
         return null
 
     findItemDisplay: (slug)->
+        if not slug? then return null
+
         result = {}
         item = @findItem slug, includeDisabled:true
         if item?

src/scripts/models/mod_version.coffee

@@ -39,6 +39,12 @@ module.exports = class ModVersion extends BaseModel
         @registerSlug item.slug, item.name
         return this
 
+    allItemsInGroup: (group)->
+        result = []
+        @eachItemInGroup group, (item)-> result.push item
+        return null if result.length is 0
+        return result
+
     compareTo: (that)->
         if this.mod? and that.mod?
             return this.mod.compareTo that.mod

src/templates/item_page.jade

@@ -0,0 +1,20 @@
+//-
+//- Crafting Guide - item_page.jade
+//-
+//- Copyright (c) 2015 by Redwood Labs
+//- All rights reserved.
+//-
+
+.view__item_page
+    .sidebar
+        .titleImage: img
+
+    .mainBody
+        h1.name
+        .byline: p from <a></a>
+        .description: p
+
+        .recipe
+        .usedInMaking: .view__item_group
+        .similar: .view__item_group
+        .plan

src/templates/mod.jade

@@ -6,8 +6,9 @@
 //-
 
 .view__mod
-    select.version
+    .version
-        option(value="none") None
+        select
+            option(value="none") None
     .name
         a: p
     .description: p