Refactor website with new design & structure
This commit is contained in:
Andrew Miner
@@ -0,0 +1,63 @@
|
||||
//-
|
||||
//- Crafting Guide - craft_page.jade
|
||||
//-
|
||||
//- Copyright © 2014-2016 by Redwood Labs
|
||||
//- All rights reserved.
|
||||
//-
|
||||
|
||||
- var quarryHref = '/craft/quarry'
|
||||
- var quarry
|
||||
- var quantumSuitHref = '/craft/quantumsuit_bodyarmor:quantumsuit_boots:quantumsuit_helmet:quantumsuit_leggings'
|
||||
- var ic2Href = '/browse/industrial_craft_2'
|
||||
- var solarPanelHref = '/craft/solar_panel_vi'
|
||||
- var solarFluxHref = '/browse/solar_flux'
|
||||
|
||||
.content.view__craft_page
|
||||
.left
|
||||
.view__adsense
|
||||
|
||||
.right
|
||||
section.instructions
|
||||
h2 Instructions
|
||||
.panel
|
||||
p.
|
||||
Crafting Guide provides step-by-step instructions for thousands of items from Minecraft and many
|
||||
popular mods. Just click "Add an item..." down below.
|
||||
p.
|
||||
Not sure what you'd like to make? Try one of these:
|
||||
.items
|
||||
a(href="/craft/potion_of_strength_ii_1_30")
|
||||
img(src="/data/minecraft/items/potion_of_strength_ii_1_30/icon.png")
|
||||
a(href="/craft/quarry")
|
||||
img(src="/data/buildcraft/items/quarry/icon.png")
|
||||
a(href="/craft/quantumsuit_bodyarmor:quantumsuit_boots:quantumsuit_helmet:quantumsuit_leggings")
|
||||
img(src="/data/ic2_classic/items/quantumsuit_helmet/icon.png")
|
||||
a(href="/craft/solar_panel_vi")
|
||||
img(src="/data/solar_flux/items/solar_panel_vi/icon.png")
|
||||
a(href="/craft/crystal_chest")
|
||||
img(src="/data/iron_chests/items/crystal_chest/icon.png")
|
||||
a(href="/craft/digital_miner")
|
||||
img(src="/data/mekanism/items/digital_miner/icon.png")
|
||||
a(href="/craft/2.tesseract")
|
||||
img(src="/data/thermal_expansion/items/tesseract/icon.png")
|
||||
|
||||
section.want
|
||||
h2 Items to Make
|
||||
.panel
|
||||
.view__inventory.large.editable
|
||||
|
||||
section.have
|
||||
h2 Already in Inventory
|
||||
.panel
|
||||
.view__inventory.large.editable
|
||||
|
||||
section.view__craftsman_working
|
||||
|
||||
section.need
|
||||
h2 Need to Gather
|
||||
.panel
|
||||
.view__inventory.large
|
||||
|
||||
section.steps
|
||||
h2 Steps
|
||||
.panel
|
||||
@@ -0,0 +1,52 @@
|
||||
//
|
||||
// Crafting Guide - craft_page.scss
|
||||
//
|
||||
// Copyright © 2014-2016 by Redwood Labs
|
||||
// All rights reserved.
|
||||
//
|
||||
|
||||
.view__craft_page {
|
||||
@include layout-body-with-sidebar;
|
||||
|
||||
.instructions {
|
||||
.panel {
|
||||
padding : $size-margin-large $size-margin-xlarge;
|
||||
|
||||
p {
|
||||
margin-bottom : $size-margin-large;
|
||||
|
||||
font-family : $font-family-text;
|
||||
font-size : $font-size-large;
|
||||
line-height : $font-size-large * 1.5;
|
||||
}
|
||||
|
||||
.items {
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
justify-content : space-around;
|
||||
margin-top : $size-margin-medium;
|
||||
margin-right : -$size-margin-medium;
|
||||
|
||||
a {
|
||||
flex : 0 0 auto;
|
||||
margin-top : $size-margin-medium;
|
||||
margin-right : $size-margin-medium;
|
||||
|
||||
background : $color-gray-faint;
|
||||
border : 1px solid $color-gray-light;
|
||||
padding : $size-margin-medium;
|
||||
|
||||
img {
|
||||
height : $size-minecraft-block * 1.5;
|
||||
width : $size-minecraft-block * 1.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-gray-light;
|
||||
border-color: $color-gray-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
#
|
||||
# Crafting Guide - craft_page_controller.coffee
|
||||
#
|
||||
# Copyright © 2014-2016 by Redwood Labs
|
||||
# All rights reserved.
|
||||
#
|
||||
|
||||
AdsenseController = require '../common/adsense/adsense_controller'
|
||||
BaseController = require '../base_controller'
|
||||
CraftPage = require '../../models/site/craft_page'
|
||||
Craftsman = require '../../models/crafting/craftsman'
|
||||
CraftsmanWorkingController = require './craftsman_working/craftsman_working_controller'
|
||||
InventoryController = require '../common/inventory/inventory_controller'
|
||||
PageController = require '../page_controller'
|
||||
StepController = require './step/step_controller'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
module.exports = class CraftPageController extends PageController
|
||||
|
||||
constructor: (options={})->
|
||||
if not options.imageLoader? then throw new Error 'options.imageLoader is required'
|
||||
if not options.modPack? then throw new Error 'options.modPack is required'
|
||||
if not options.router? then throw new Error 'options.router is required'
|
||||
if not options.storage? then throw new Error 'options.storage is required'
|
||||
|
||||
options.model ?= new CraftPage modPack:options.modPack
|
||||
options.templateName = 'craft_page'
|
||||
super options
|
||||
|
||||
@_imageLoader = options.imageLoader
|
||||
@_modPack = options.modPack
|
||||
@_router = options.router
|
||||
@_storage = options.storage
|
||||
|
||||
# c.event Methods ################################################################################
|
||||
|
||||
onHaveInventoryChanged: ->
|
||||
logger.warning => "storing have: #{@model.craftsman.have.unparse()}"
|
||||
@_storage.store 'crafting-plan:have', @model.craftsman.have.unparse()
|
||||
|
||||
onMoveNeedToHave: (itemSlug)->
|
||||
quantity = @_needInventoryController.model.quantityOf itemSlug
|
||||
@model.craftsman.have.add itemSlug, quantity
|
||||
|
||||
onRemoveFromHaveInventory: (itemSlug)->
|
||||
@model.craftsman.have.remove itemSlug
|
||||
|
||||
onRemoveFromWant: (itemSlug)->
|
||||
@model.craftsman.want.remove itemSlug
|
||||
@onWantInventoryChanged()
|
||||
|
||||
onWantInventoryChanged: ->
|
||||
text = @model.craftsman.want.unparse()
|
||||
url = c.url.crafting inventoryText:text
|
||||
@router.navigate url
|
||||
|
||||
if @model.craftsman.want.isEmpty
|
||||
@model.craftsman.have.clear()
|
||||
|
||||
# PageController Overrides #####################################################################
|
||||
|
||||
getMetaDescription: ->
|
||||
return c.text.craftDescription()
|
||||
|
||||
getTitle: ->
|
||||
return 'Craft'
|
||||
|
||||
# BaseController Overrides #####################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@_adsenseController = @addChild AdsenseController, '.view__adsense', model:'skyscraper'
|
||||
|
||||
@_wantInventoryController = @addChild InventoryController, '.want .view__inventory',
|
||||
firstButtonType: 'remove'
|
||||
imageLoader: @_imageLoader
|
||||
isAcceptable: (item)=> item.isCraftable
|
||||
modPack: @_modPack
|
||||
model: @model.craftsman.want
|
||||
router: @_router
|
||||
@_wantInventoryController.on c.event.button.first, (c, s)=> @onRemoveFromWant(s)
|
||||
@_wantInventoryController.on c.event.change, (c)=> @onWantInventoryChanged()
|
||||
|
||||
@_haveInventoryController = @addChild InventoryController, '.have .view__inventory',
|
||||
firstButtonType: 'down'
|
||||
imageLoader: @_imageLoader
|
||||
modPack: @_modPack
|
||||
model: @model.craftsman.have
|
||||
router: @_router
|
||||
@_haveInventoryController.on c.event.button.first, (controller, itemSlug)=>
|
||||
@onRemoveFromHaveInventory itemSlug
|
||||
@_haveInventoryController.on c.event.change, (c)=> @onHaveInventoryChanged()
|
||||
|
||||
@_needInventoryController = @addChild InventoryController, '.need .view__inventory',
|
||||
editable: false
|
||||
firstButtonType: 'up'
|
||||
imageLoader: @_imageLoader
|
||||
modPack: @_modPack
|
||||
model: null
|
||||
router: @_router
|
||||
@_needInventoryController.on c.event.button.first, (c, s)=> @onMoveNeedToHave(s)
|
||||
|
||||
@_workingSectionController = @addChild CraftsmanWorkingController, '.view__craftsman_working',
|
||||
model: @model.craftsman
|
||||
|
||||
@$haveSection = @$('section.have')
|
||||
@$instructionsSection = @$('section.instructions')
|
||||
@$makeSection = @$('section.make')
|
||||
@$needSection = @$('section.need')
|
||||
@$stepsContainer = @$('section.steps .panel')
|
||||
@$stepsSection = @$('section.steps')
|
||||
@$toolsSection = @$('section.tools')
|
||||
@$workingSection = @$('.view__craftsman_working')
|
||||
|
||||
super
|
||||
|
||||
onWillRender: ->
|
||||
@model.craftsman.have.clear()
|
||||
@model.craftsman.have.parse @_storage.load('crafting-plan:have')
|
||||
super
|
||||
|
||||
refresh: ->
|
||||
@_needInventoryController.model = @model.craftsman.plan?.need
|
||||
@_refreshSectionVisibility()
|
||||
@_refreshSteps()
|
||||
@_adsenseController.fillAdPositions()
|
||||
super
|
||||
|
||||
# Backbone.View Overrides ########################################################################
|
||||
|
||||
events: ->
|
||||
return _.extend super,
|
||||
'click .instructions a': 'routeLinkClick'
|
||||
|
||||
# Private Methods ################################################################################
|
||||
|
||||
_addTools: (controller)->
|
||||
controller.model.addToolsTo @model.craftsman.want
|
||||
|
||||
_completeStep: (controller)->
|
||||
controller.model.completeInto @model.craftsman.have
|
||||
|
||||
_isAddingToolsPossible: (controller)->
|
||||
tools = controller.model.recipe.tools
|
||||
return false unless tools.length > 0
|
||||
|
||||
have = @model.craftsman.have
|
||||
want = @model.craftsman.want
|
||||
|
||||
for stack in tools
|
||||
return false if have.hasAtLeast stack.itemSlug
|
||||
return false if want.hasAtLeast stack.itemSlug
|
||||
|
||||
return true
|
||||
|
||||
_isStepCompletable: (controller)->
|
||||
recipe = controller.model.recipe
|
||||
for stack in recipe.output
|
||||
return false if @model.craftsman.want.hasAtLeast stack.itemSlug
|
||||
|
||||
return true
|
||||
|
||||
_refreshSectionVisibility: ->
|
||||
return unless @_rendered
|
||||
|
||||
allSections = [
|
||||
@$instructionsSection, @$haveSection, @$needSection, @$stepsSection, @$toolsSection, @$workingSection
|
||||
]
|
||||
|
||||
visibleSections = []
|
||||
|
||||
if @model.craftsman.want.isEmpty
|
||||
visibleSections.push el for el in [@$instructionsSection, @$wantSection]
|
||||
else if @model.craftsman.stage is Craftsman::STAGE.INVALID
|
||||
visibleSections.push el for el in [@$wantSection, @$workingSection]
|
||||
else if not @model.craftsman.complete
|
||||
visibleSections.push el for el in [@$wantSection, @$workingSection]
|
||||
else
|
||||
visibleSections.push el for el in [@$haveSection, @$needSection, @$stepsSection, @$wantSection]
|
||||
|
||||
@hide $el for $el in allSections
|
||||
@show $el for $el in visibleSections
|
||||
|
||||
_refreshSteps: ->
|
||||
steps = @model.craftsman.plan?.steps or []
|
||||
@_stepControllers ?= []
|
||||
index = 0
|
||||
|
||||
for step in steps
|
||||
controller = @_stepControllers[index]
|
||||
if not controller?
|
||||
controller = new StepController
|
||||
canAddTools: (controller)=> @_isAddingToolsPossible controller
|
||||
canComplete: (controller)=> @_isStepCompletable controller
|
||||
onComplete: (controller)=> @_completeStep controller
|
||||
onAddTools: (controller)=> @_addTools controller
|
||||
imageLoader: @_imageLoader
|
||||
model: step
|
||||
modPack: @_modPack
|
||||
router: @_router
|
||||
controller.render()
|
||||
|
||||
@$stepsContainer.append controller.$el
|
||||
@_stepControllers.push controller
|
||||
else
|
||||
controller.model = step
|
||||
|
||||
index += 1
|
||||
|
||||
while @_stepControllers.length > index
|
||||
@_stepControllers.pop().remove()
|
||||
@@ -0,0 +1,15 @@
|
||||
//-
|
||||
//- Crafting Guide - craftsman_working.jade
|
||||
//-
|
||||
//- Copyright © 2014-2016 by Redwood Labs
|
||||
//- All rights reserved.
|
||||
//-
|
||||
|
||||
.view__item_group.section
|
||||
.content
|
||||
.waiting
|
||||
img(src='/images/wait.gif')
|
||||
.message
|
||||
p
|
||||
.count
|
||||
p
|
||||
@@ -0,0 +1,38 @@
|
||||
/*
|
||||
Crafting Table - crafting_table.scss
|
||||
|
||||
Copyright (c) 2014-2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
*/
|
||||
|
||||
.view__craftsman_working {
|
||||
.content {
|
||||
background: $color-white;
|
||||
box-shadow: none;
|
||||
|
||||
align-items : center;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
padding : $size-margin-xlarge;
|
||||
|
||||
.waiting {
|
||||
margin-bottom: $size-margin-xlarge;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: $size-margin-medium;
|
||||
|
||||
p {
|
||||
font-family: $font-family-header;
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
p {
|
||||
font-family: $font-family-header;
|
||||
font-size: $font-size-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
#
|
||||
# Crafting Guide - craftsman_working_controller.coffee
|
||||
#
|
||||
# Copyright © 2014-2016 by Redwood Labs
|
||||
# All rights reserved.
|
||||
#
|
||||
|
||||
BaseController = require '../../base_controller'
|
||||
Craftsman = require '../../../models/crafting/craftsman'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
module.exports = class CraftsmanWorkingController extends BaseController
|
||||
|
||||
constructor: (options={})->
|
||||
if not options.model then throw new Error 'options.model is required'
|
||||
options.templateName = 'craft_page/craftsman_working'
|
||||
super options
|
||||
|
||||
@model.on c.event.change, => @_refreshStatusText()
|
||||
|
||||
# BaseController Methods #######################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@$message = @$('.message p')
|
||||
@$count = @$('.count p')
|
||||
@$waiting = @$('.waiting')
|
||||
super
|
||||
|
||||
refresh: ->
|
||||
@_refreshStatusText()
|
||||
super
|
||||
|
||||
# Private Methods ##############################################################################
|
||||
|
||||
_refreshStatusText: ->
|
||||
return unless @$message? and @$count?
|
||||
|
||||
@show @$waiting
|
||||
switch @model.stage
|
||||
when Craftsman::STAGE.WAITING
|
||||
@$message.html 'Preparing crafting calculation...'
|
||||
@$count.html ''
|
||||
when Craftsman::STAGE.GRAPHING
|
||||
@$message.html 'Researching recipes...'
|
||||
@$count.html "Found #{@model.stageCount} recipes so far..."
|
||||
when Craftsman::STAGE.PLANNING
|
||||
@$message.html 'Figuring out possible crafting plans...'
|
||||
@$count.html "Found #{@model.stageCount} possibilities so far..."
|
||||
when Craftsman::STAGE.ANALYZING
|
||||
@$message.html 'Looking for the best plan...'
|
||||
@$count.html "Finished checking #{@model.stageCount} so far..."
|
||||
when Craftsman::STAGE.COMPLETE
|
||||
@$message.html 'All done!'
|
||||
@$count.html ''
|
||||
when Craftsman::STAGE.INVALID
|
||||
@$message.html 'Couldn\'t make a crafting plan'
|
||||
@$count.html ''
|
||||
@hide @waiting
|
||||
@@ -0,0 +1,15 @@
|
||||
//-
|
||||
//- Crafting Guide - step.jade
|
||||
//-
|
||||
//- Copyright © 2014-2016 by Redwood Labs
|
||||
//- All rights reserved.
|
||||
//-
|
||||
|
||||
.view__step
|
||||
h3
|
||||
.main_content
|
||||
.view__inventory
|
||||
.view__recipe
|
||||
.buttons
|
||||
.button.complete: .bezel: p complete step
|
||||
.button.tool: .bezel: p make this tool
|
||||
@@ -0,0 +1,56 @@
|
||||
//
|
||||
// Crafting Guide - step.scss
|
||||
//
|
||||
// Copyright © 2014-2016 by Redwood Labs
|
||||
// All rights reserved.
|
||||
//
|
||||
|
||||
.view__step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $color-gray-light;
|
||||
margin-top: $size-margin-large;
|
||||
padding-top: $size-margin-small;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > .buttons {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.main_content {
|
||||
display: flex;
|
||||
|
||||
.view__inventory {
|
||||
flex: 50%;
|
||||
margin-left: $size-margin-large;
|
||||
}
|
||||
|
||||
.view__recipe {
|
||||
flex: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: $size-margin-large;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
.button {
|
||||
flex: 1 1 50%;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: $size-margin-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
#
|
||||
# Crafting Guide - step_controller.coffee
|
||||
#
|
||||
# Copyright © 2014-2016 by Redwood Labs
|
||||
# All rights reserved.
|
||||
#
|
||||
|
||||
BaseController = require '../../base_controller'
|
||||
InventoryController = require '../../common/inventory/inventory_controller'
|
||||
RecipeController = require '../../common/recipe/recipe_controller'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
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 = 'craft_page/step'
|
||||
super options
|
||||
|
||||
@_imageLoader = options.imageLoader
|
||||
@_modPack = options.modPack
|
||||
@_router = options.router
|
||||
|
||||
@canAddTools = options.canAddTools or (controller)-> true
|
||||
@canComplete = options.canComplete or (controller)-> true
|
||||
@onComplete = options.onComplete or (controller)-> # do nothing
|
||||
@onAddTools = options.onAddTools or (controller)-> # do nothing
|
||||
|
||||
# Event Methods ################################################################################
|
||||
|
||||
onCompleteButtonClicked: (event)->
|
||||
return if @$completeButton.hasClass 'disabled'
|
||||
@onComplete this
|
||||
|
||||
onToolButtonClicked: (event)->
|
||||
return if @$toolButton.hasClass 'disabled'
|
||||
@onAddTools this
|
||||
|
||||
# BaseController Overrides #####################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@inventoryController = @addChild InventoryController, '.view__inventory',
|
||||
editable: false
|
||||
imageLoader: @_imageLoader
|
||||
model: @model.inventory
|
||||
modPack: @_modPack
|
||||
router: @_router
|
||||
|
||||
@recipeController = @addChild RecipeController, '.view__recipe',
|
||||
imageLoader: @_imageLoader
|
||||
model: @model.recipe
|
||||
modPack: @_modPack
|
||||
router: @_router
|
||||
|
||||
@$completeButton = @$('.button.complete')
|
||||
@$header = @$('h3')
|
||||
@$toolButton = @$('.button.tool')
|
||||
@$toolButtonLabel = @$('.button.tool p')
|
||||
super
|
||||
|
||||
onWillChangeModel: (oldModel, newModel)->
|
||||
if not newModel? then throw new Error 'model cannot be null'
|
||||
return super
|
||||
|
||||
refresh: ->
|
||||
itemDisplay = @_modPack.findItemDisplay @model.recipe.output[0].itemSlug
|
||||
@$header.html "#{@model.number}. #{itemDisplay.itemName}"
|
||||
|
||||
@inventoryController.model = @model.inventory
|
||||
@recipeController.model = @model.recipe
|
||||
@recipeController.multiplier = @model.multiplier
|
||||
|
||||
@_refreshCompleteButton()
|
||||
@_refreshToolButton()
|
||||
|
||||
super
|
||||
|
||||
# Backbone.View Overrides ######################################################################
|
||||
|
||||
events: ->
|
||||
return _.extend super,
|
||||
'click .button.complete': 'onCompleteButtonClicked'
|
||||
'click .button.tool': 'onToolButtonClicked'
|
||||
|
||||
# Private Methods ##############################################################################
|
||||
|
||||
_refreshToolButton: ->
|
||||
if @canAddTools this
|
||||
@$toolButton.removeClass 'disabled'
|
||||
else
|
||||
@$toolButton.addClass 'disabled'
|
||||
|
||||
_refreshCompleteButton: ->
|
||||
if @canComplete this
|
||||
@$completeButton.removeClass 'disabled'
|
||||
else
|
||||
@$completeButton.addClass 'disabled'
|
||||
Reference in New Issue
Block a user