diff --git a/scripts/server b/scripts/server index b44bf1bb7..09b303327 100755 --- a/scripts/server +++ b/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 diff --git a/src/css/main.scss b/src/css/main.scss index db1d33a52..12a2c0406 100644 --- a/src/css/main.scss +++ b/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-screen: 5; -$layer-dialog: 10; +$layer-normal: 100; +$layer-screen: 500; +$layer-dialog: 1000; // Child Stylesheets /////////////////////////////////////////////////////////////////////////////////////////////////// diff --git a/src/css/templates/crafting_page.scss b/src/css/templates/craft_page.scss similarity index 89% rename from src/css/templates/crafting_page.scss rename to src/css/templates/craft_page.scss index 4b86919e8..a1d7caf9d 100644 --- a/src/css/templates/crafting_page.scss +++ b/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; diff --git a/src/css/templates/index.scss b/src/css/templates/index.scss index e4a5b1143..dbdd29cb5 100644 --- a/src/css/templates/index.scss +++ b/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'; diff --git a/src/css/views.scss b/src/css/views.scss index 47dbd1a07..0181852f5 100644 --- a/src/css/views.scss +++ b/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; + } + } } } diff --git a/src/pages/includes/_header.jade b/src/pages/includes/_header.jade index 0aa1d53ca..6ebfa0435 100644 --- a/src/pages/includes/_header.jade +++ b/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 diff --git a/src/scripts/constants.coffee b/src/scripts/constants.coffee index c6a2ff854..005b2ad92 100644 --- a/src/scripts/constants.coffee +++ b/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.mod = _.template "/mod/<%= modSlug %>" +Url.item = _.template "/browse/<%= modSlug %>/<%= itemSlug %>" +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" diff --git a/src/scripts/controllers/browse_page_controller.coffee b/src/scripts/controllers/browse_page_controller.coffee new file mode 100644 index 000000000..a01e4971a --- /dev/null +++ b/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 diff --git a/src/scripts/controllers/configure_page_controller.coffee b/src/scripts/controllers/configure_page_controller.coffee new file mode 100644 index 000000000..984faa617 --- /dev/null +++ b/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 diff --git a/src/scripts/controllers/crafting_page_controller.coffee b/src/scripts/controllers/craft_page_controller.coffee similarity index 96% rename from src/scripts/controllers/crafting_page_controller.coffee rename to src/scripts/controllers/craft_page_controller.coffee index 471998e58..28e67cdf4 100644 --- a/src/scripts/controllers/crafting_page_controller.coffee +++ b/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 diff --git a/src/scripts/controllers/header_controller.coffee b/src/scripts/controllers/header_controller.coffee index 45c39d34f..591262bec 100644 --- a/src/scripts/controllers/header_controller.coffee +++ b/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' diff --git a/src/scripts/controllers/whats_new_page_controller.coffee b/src/scripts/controllers/whats_new_page_controller.coffee new file mode 100644 index 000000000..9adcea159 --- /dev/null +++ b/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 diff --git a/src/scripts/crafting_guide_router.coffee b/src/scripts/crafting_guide_router.coffee index d11069f70..b2fc38573 100644 --- a/src/scripts/crafting_guide_router.coffee +++ b/src/scripts/crafting_guide_router.coffee @@ -6,21 +6,24 @@ All rights reserved. ### -CraftingPageController = require './controllers/crafting_page_controller' -{DefaultMods} = require './constants' -{Duration} = require './constants' -{Event} = require './constants' -HeaderController = require './controllers/header_controller' -ItemPageController = require './controllers/item_page_controller' -ItemSlug = require './models/item_slug' -ImageLoader = require './controllers/image_loader' -Mod = require './models/mod' -ModPack = require './models/mod_pack' -ModPageController = require './controllers/mod_page_controller' -{Opacity} = require './constants' -Storage = require './models/storage' -{Url} = require './constants' -UrlParams = require './url_params' +BrowsePageController = require './controllers/browse_page_controller' +CraftPageController = require './controllers/craft_page_controller' +ConfigurePageController = require './controllers/configure_page_controller' +{DefaultMods} = require './constants' +{Duration} = require './constants' +{Event} = require './constants' +HeaderController = require './controllers/header_controller' +ItemPageController = require './controllers/item_page_controller' +ItemSlug = require './models/item_slug' +ImageLoader = require './controllers/image_loader' +Mod = require './models/mod' +ModPack = require './models/mod_pack' +ModPageController = require './controllers/mod_page_controller' +{Opacity} = require './constants' +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' - 'item/:itemSlug': 'item' - 'crafting/(:text)': 'crafting' - 'mod/:modSlug': 'mod' - 'mod/:modSlug/:itemSlug': 'modItem' + '': 'route__whats_new' + 'browse': 'route__browse' + 'browse/:modSlug': 'route__browseMod' + 'browse/:modSlug/:itemSlug': 'route__browseModItem' + '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)-> - controller = new CraftingPageController _.extend {}, @_defaultOptions + route__whats_new: -> + 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: -> - params = new UrlParams recipeName:{type:'string'}, count:{type:'integer'} - + deprecated__v1_root: (params)-> 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 diff --git a/src/scripts/models/crafting_page.coffee b/src/scripts/models/craft_page.coffee similarity index 97% rename from src/scripts/models/crafting_page.coffee rename to src/scripts/models/craft_page.coffee index 7065beb13..2fd8687e8 100644 --- a/src/scripts/models/crafting_page.coffee +++ b/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. diff --git a/src/templates/browse_page.jade b/src/templates/browse_page.jade new file mode 100644 index 000000000..59bf3aad0 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/templates/configure_page.jade b/src/templates/configure_page.jade new file mode 100644 index 000000000..94389c464 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/templates/crafting_page.jade b/src/templates/craft_page.jade similarity index 92% rename from src/templates/crafting_page.jade rename to src/templates/craft_page.jade index afa3f85d0..105fd9e85 100644 --- a/src/templates/crafting_page.jade +++ b/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 diff --git a/src/templates/whats_new_page.jade b/src/templates/whats_new_page.jade new file mode 100644 index 000000000..bfd9df8b6 --- /dev/null +++ b/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?