Initial version of header nav bar

scripts/server

@@ -22,6 +22,9 @@ serveIndex = (request, response)->
     response.set 'Content-Type', 'text/html'
     response.sendFile 'index.html', root:ROOT
 
+app.get '/browse(/*)?', serveIndex
+app.get '/configure(/*)?', serveIndex
+app.get '/craft(/*)?', serveIndex
 app.get '/crafting(/*)?', serveIndex
 app.get '/item(/*)?', serveIndex
 app.get '/mod(/*)?', serveIndex

src/css/main.scss

@@ -26,6 +26,12 @@ All rights reserved.
 
 // Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
+// Animation Speeds ////////////////////////////////////////////////////////////////////////////////
+
+$animate-fast: 0.1s;
+$animate-normal: 0.25s;
+$animate-slow: 0.6s;
+
 // Font Faces //////////////////////////////////////////////////////////////////////////////////////
 
 $font-family-header: 'Silkscreen';
@@ -73,9 +79,9 @@ $color-text:               #000000;
 
 // Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
 
-$layer-normal: 0;
+$layer-normal: 100;
-$layer-screen: 5;
+$layer-screen: 500;
-$layer-dialog: 10;
+$layer-dialog: 1000;
 
 // Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
 

src/css/templates/craft_page.scss

@@ -1,11 +1,11 @@
 /*
-Crafting Guide - crafting_page.scss
+Crafting Guide - craft_page.scss
 
 Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 */
 
-.view__crafting_page {
+.view__craft_page {
 
     & > div {
         display: inline-block;

src/css/templates/index.scss

@@ -6,7 +6,7 @@ All rights reserved.
 */
 
 @import 'crafting_grid';
-@import 'crafting_page';
+@import 'craft_page';
 @import 'crafting_table';
 @import 'feedback';
 @import 'full_recipe';

src/css/views.scss

@@ -41,7 +41,7 @@ All rights reserved.
 
 .view__header {
     background: $color-gray-light;
-    position: relative; height: 8em;
+    position: relative; height: 13em;
     margin-top: 3.2em;
 
     h1 {
@@ -54,7 +54,54 @@ All rights reserved.
 
     .divider {
         background: $color-brick-dark url('/images/stone_brick.png');
-        position: absolute; bottom: 0; height: 3.2em; width: 100%;
+        position: absolute; bottom: 5em; height: 3.2em; width: 100%;
+    }
+
+    .navBar {
+        position: absolute; right: 2em; bottom: 1em; left: 2em; height: 3em;
+
+        a {
+            position: relative; height: 3em; width: 15em;
+            background: $color-gray-faint;
+            border: 0.1em solid $color-gray-medium;
+            border-radius: 0 1.5em 1.5em 0;
+            cursor: pointer;
+            display: inline-block;
+            margin-left: -1.5em;
+
+            transition: background $animate-normal;
+
+            &:first-child {
+                border-radius: 1.5em;
+                margin-left: 0;
+            }
+
+            &:hover {
+                background: $color-background-panel;
+            }
+
+            &.selected {
+                background: $color-active;
+
+                p {
+                    color: $color-background-panel;
+                }
+            }
+
+            p {
+                position: absolute; top: 50%; left: 50%; width: 100%;
+                @include transform(translateX(-50%) translateY(-50%));
+
+                color: $color-active;
+                font-family: $font-family-normal;
+                font-size: $font-size-normal;
+                font-weight: bold;
+                text-align: center;
+                vertical-align: middle;
+
+                transition: color $animate-normal;
+            }
+        }
     }
 }
 

src/pages/includes/_header.jade

@@ -10,3 +10,17 @@
         a.logo(href="/"): img(src="/images/workbench_front.png")
         p Crafting Guide for Minecraft
     .divider.bottom
+
+    .navBar
+        a(data-page="whats_new", href="/")
+            p What's New?
+            .dot
+        a(data-page="configure", href="/configure")
+            p Configure
+            .dot
+        a(data-page="browse", href="/browse")
+            p Browse
+            .dot
+        a(data-page="craft", href="/craft")
+            p Craft
+            .dot

src/scripts/constants.coffee

@@ -55,10 +55,10 @@ exports.Text = Text = {}
 Text.title = 'Crafting Guide for Minecraft | The Ultimate Step-by-Step Tutorial for Making Anything in Minecraft'
 
 exports.Url      = Url = {}
-Url.crafting     = _.template "/crafting/<%= inventoryText %>"
+Url.crafting     = _.template "/craft/<%= inventoryText %>"
 Url.itemIcon     = _.template "/data/<%= modSlug %>/<%= modVersion %>/images/<%= itemSlug %>.png"
-Url.item         = _.template "/mod/<%= modSlug %>/<%= itemSlug %>"
+Url.item         = _.template "/browse/<%= modSlug %>/<%= itemSlug %>"
-Url.mod          = _.template "/mod/<%= modSlug %>"
+Url.mod          = _.template "/browse/<%= modSlug %>"
 Url.modData      = _.template "/data/<%= modSlug %>/mod.cg"
 Url.modVersion   = _.template "/data/<%= modSlug %>/<%= modVersion %>/mod-version.cg"
 Url.modLogoImage = _.template "/data/<%= modSlug %>/logo.png"

src/scripts/controllers/browse_page_controller.coffee

@@ -0,0 +1,16 @@
+###
+Crafting Guide - browse_page_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseController = require './base_controller'
+
+########################################################################################################################
+
+module.exports = class BrowsePageController extends BaseController
+
+    constructor: (options={})->
+        options.templateName = 'browse_page'
+        super options

src/scripts/controllers/configure_page_controller.coffee

@@ -0,0 +1,16 @@
+###
+Crafting Guide - configure_page_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseController = require './base_controller'
+
+########################################################################################################################
+
+module.exports = class ConfigurePageController extends BaseController
+
+    constructor: (options={})->
+        options.templateName = 'configure_page'
+        super options

src/scripts/controllers/craft_page_controller.coffee

@@ -1,5 +1,5 @@
 ###
-Crafting Guide - crafting_page_controller.coffee
+Crafting Guide - craft_page_controller.coffee
 
 Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
@@ -10,7 +10,7 @@ CraftingTableController = require './crafting_table_controller'
 {Event}                 = require '../constants'
 ImageLoader             = require './image_loader'
 InventoryController     = require './inventory_controller'
-CraftingPage            = require '../models/crafting_page'
+CraftingPage            = require '../models/craft_page'
 ModPackController       = require './mod_pack_controller'
 NameFinder              = require '../models/name_finder'
 Storage                 = require '../models/storage'
@@ -27,7 +27,7 @@ module.exports = class CraftingPageController extends BaseController
 
         options.model        ?= new CraftingPage modPack:options.modPack
         options.storage      ?= new Storage storage:window.localStorage
-        options.templateName  = 'crafting_page'
+        options.templateName  = 'craft_page'
         super options
 
         @_imageLoader = options.imageLoader

src/scripts/controllers/header_controller.coffee

@@ -20,14 +20,36 @@ module.exports = class HeaderController extends BaseController
         router.navigate '/', trigger:true
         return false
 
+    onNavItemClicked: (event)->
+        return true unless $(event.currentTarget).attr('href')?
+
+        router.navigate $(event.currentTarget).attr('href'), trigger:true
+        return false
+
     # BaseController Overrides #####################################################################
 
     render: ->
         # Overriding render because the header is already part of the stock page layout, and we
         # don't need to replace it here.
+        @_rendered = true
+
+        @$navLinks = ($(el) for el in @$('.navBar a'))
+
+        zIndex = @$navLinks.length + 100
+        for $navLink in @$navLinks
+            $navLink.css 'z-index', zIndex--
+
+    refresh: ->
+        for $navLink in @$navLinks
+            logger.debug "@model: #{@model}, page: #{$navLink.data('page')}"
+            if $navLink.data('page') is @model
+                $navLink.addClass 'selected'
+            else
+                $navLink.removeClass 'selected'
 
     # Backbone.View Overrides ######################################################################
 
     events: ->
         return _.extend super,
-            'click a.logo': 'onLogoClicked'
+            'click a.logo':    'onLogoClicked'
+            'click .navBar a': 'onNavItemClicked'

src/scripts/controllers/whats_new_page_controller.coffee

@@ -0,0 +1,16 @@
+###
+Crafting Guide - whats_new_page_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseController = require './base_controller'
+
+########################################################################################################################
+
+module.exports = class WhatsNewController extends BaseController
+
+    constructor: (options={})->
+        options.templateName = 'whats_new_page'
+        super options

src/scripts/crafting_guide_router.coffee

@@ -6,21 +6,24 @@ All rights reserved.
 ###
 
 
-CraftingPageController = require './controllers/crafting_page_controller'
+BrowsePageController    = require './controllers/browse_page_controller'
-{DefaultMods}          = require './constants'
+CraftPageController  = require './controllers/craft_page_controller'
-{Duration}             = require './constants'
+ConfigurePageController = require './controllers/configure_page_controller'
-{Event}                = require './constants'
+{DefaultMods}           = require './constants'
-HeaderController       = require './controllers/header_controller'
+{Duration}              = require './constants'
-ItemPageController     = require './controllers/item_page_controller'
+{Event}                 = require './constants'
-ItemSlug               = require './models/item_slug'
+HeaderController        = require './controllers/header_controller'
-ImageLoader            = require './controllers/image_loader'
+ItemPageController      = require './controllers/item_page_controller'
-Mod                    = require './models/mod'
+ItemSlug                = require './models/item_slug'
-ModPack                = require './models/mod_pack'
+ImageLoader             = require './controllers/image_loader'
-ModPageController      = require './controllers/mod_page_controller'
+Mod                     = require './models/mod'
-{Opacity}              = require './constants'
+ModPack                 = require './models/mod_pack'
-Storage                = require './models/storage'
+ModPageController       = require './controllers/mod_page_controller'
-{Url}                  = require './constants'
+{Opacity}               = require './constants'
-UrlParams              = require './url_params'
+Storage                 = require './models/storage'
+{Url}                   = require './constants'
+UrlParams               = require './url_params'
+WhatsNewPageController  = require './controllers/whats_new_page_controller'
 
 ########################################################################################################################
 
@@ -38,6 +41,7 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
         @_defaultOptions = imageLoader:@imageLoader, modPack:@modPack, storage:@storage
 
         @headerController = new HeaderController el:'.view__header'
+        @headerController.render()
 
     # Public Methods ###############################################################################
 
@@ -60,36 +64,71 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
         @_recordPageView()
 
     routes:
-        '':                       'root'
+        '':                          'route__whats_new'
-        'item/:itemSlug':         'item'
+        'browse':                    'route__browse'
-        'crafting/(:text)':       'crafting'
+        'browse/:modSlug':           'route__browseMod'
-        'mod/:modSlug':           'mod'
+        'browse/:modSlug/:itemSlug': 'route__browseModItem'
-        'mod/:modSlug/:itemSlug': 'modItem'
+        'configure':                 'route__configure'
+        'craft(/:text)':             'route__craft'
+
+        'item/:itemSlug':         'deprecated__item'
+        'crafting/(:text)':       'deprecated__crafting'
+        'mod/:modSlug':           'deprecated__mod'
+        'mod/:modSlug/:itemSlug': 'deprecated__modItem'
 
     # Route Methods ################################################################################
 
-    crafting: (text)->
+    route__whats_new: ->
-        controller = new CraftingPageController _.extend {}, @_defaultOptions
+        params = new UrlParams recipeName:{type:'string'}, count:{type:'integer'}
+        if params.recipeName?
+            @deprecated__v1_root params
+            return
+
+        @_setPage 'whats_new', new WhatsNewPageController _.extend {}, @_defaultOptions
+
+    route__browse: ->
+        @_setPage 'browse', new BrowsePageController _.extend {}, @_defaultOptions
+
+    route__browseMod: (modSlug)->
+        controller = new ModPageController  _.extend {}, @_defaultOptions
+        controller.model = @modPack.getMod modSlug
+        @_setPage 'browseMod', controller
+
+    route__browseModItem: (modSlug, itemSlug)->
+        slug = new ItemSlug modSlug, itemSlug
+        controller = new ItemPageController _.extend {itemSlug:slug}, @_defaultOptions
+        @_setPage 'browseModItem', controller
+
+    route__configure: ->
+        @_setPage 'configure', new ConfigurePageController _.extend {}, @_defaultOptions
+
+    route__craft: (text)->
+        controller = new CraftPageController _.extend {}, @_defaultOptions
+        controller.model.params = inventoryText:text
+        @_setPage 'craft', controller
+
+    # Deprecated Route Methods #####################################################################
+
+    deprecated__crafting: (text)->
+        controller = new CraftPageController _.extend {}, @_defaultOptions
         controller.model.params = inventoryText:text
         @_setPage 'crafting', controller
 
-    item: (itemSlug)->
+    deprecated__item: (itemSlug)->
         controller = new ItemPageController _.extend {itemSlug:itemSlug}, @_defaultOptions
         @_setPage 'item', controller
 
-    modItem: (modSlug, itemSlug)->
+    deprecated__modItem: (modSlug, itemSlug)->
         slug = new ItemSlug modSlug, itemSlug
         controller = new ItemPageController _.extend {itemSlug:slug}, @_defaultOptions
         @_setPage 'item', controller
 
-    mod: (modSlug)->
+    deprecated__mod: (modSlug)->
         controller = new ModPageController  _.extend {}, @_defaultOptions
         controller.model = @modPack.getMod modSlug
         @_setPage 'mod', controller
 
-    root: ->
+    deprecated__v1_root: (params)->
-        params = new UrlParams recipeName:{type:'string'}, count:{type:'integer'}
-
         text = ''
         if params.recipeName?
             if params.count? and params.count > 1
@@ -114,6 +153,8 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
         return if @_controller is controller
 
         logger.info -> "changing to page controller: #{controller.constructor.name}"
+        @headerController.model = page
+
         showDuration = Duration.normal
         show = =>
             @_page       = page

src/scripts/models/craft_page.coffee

@@ -1,5 +1,5 @@
 ###
-Crafting Guide - crafting_page.coffee
+Crafting Guide - craft_page.coffee
 
 Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.

src/templates/browse_page.jade

@@ -0,0 +1,8 @@
+//-
+//- Crafting Guide - browse_page.jade
+//-
+//- Copyright (c) 2015 by Redwood Labs
+//- All rights reserved.
+//-
+
+h1 Browse

src/templates/configure_page.jade

@@ -0,0 +1,8 @@
+//-
+//- Crafting Guide - configure_page.jade
+//-
+//- Copyright (c) 2015 by Redwood Labs
+//- All rights reserved.
+//-
+
+h1 Configure

src/templates/craft_page.jade

@@ -5,7 +5,7 @@
 //- All rights reserved.
 //-
 
-.view__crafting_page
+.view__craft_page
     .view__inventory.want
     .view__inventory.have
     .view__inventory.need

src/templates/whats_new_page.jade

@@ -0,0 +1,8 @@
+//-
+//- Crafting Guide - whats_new_page.jade
+//-
+//- Copyright (c) 2015 by Redwood Labs
+//- All rights reserved.
+//-
+
+h1 What's new?