mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-11 08:11:21 -05:00
116 lines
3.8 KiB
CoffeeScript
116 lines
3.8 KiB
CoffeeScript
CocoView = require 'views/kinds/CocoView'
|
|
template = require 'templates/account/wizard_settings'
|
|
{me} = require 'lib/auth'
|
|
ThangType = require 'models/ThangType'
|
|
SpriteBuilder = require 'lib/sprites/SpriteBuilder'
|
|
{hslToHex, hexToHSL} = require 'lib/utils'
|
|
|
|
module.exports = class WizardSettingsView extends CocoView
|
|
id: 'wizard-settings-view'
|
|
template: template
|
|
startsLoading: true
|
|
|
|
events:
|
|
'click .color-group': (e) ->
|
|
return if $(e.target).closest('.minicolors')[0]
|
|
return if $(e.target).closest('.color-group-checkbox')[0]
|
|
return if $(e.target).closest('label')[0]
|
|
$(e.target).closest('.color-group').find('.color-group-checkbox').click()
|
|
'change .color-group-checkbox': (e) ->
|
|
colorGroup = $(e.target).closest('.color-group')
|
|
@updateColorSettings(colorGroup)
|
|
@updateSwatchVisibility(colorGroup)
|
|
|
|
constructor: ->
|
|
super(arguments...)
|
|
@loadWizard()
|
|
|
|
loadWizard: ->
|
|
@wizardThangType = new ThangType()
|
|
@wizardThangType.url = -> '/db/thang.type/wizard'
|
|
@wizardThangType.fetch()
|
|
@listenToOnce(@wizardThangType, 'sync', @initCanvas)
|
|
|
|
initCanvas: ->
|
|
@startsLoading = false
|
|
@render()
|
|
@spriteBuilder = new SpriteBuilder(@wizardThangType)
|
|
@initStage()
|
|
|
|
getRenderData: ->
|
|
c = super()
|
|
wizardSettings = me.get('wizard')?.colorConfig or {}
|
|
|
|
colorGroups = @wizardThangType.get('colorGroups') or {}
|
|
f = (name) ->
|
|
hslObj = wizardSettings[name]
|
|
hsl = if hslObj then [hslObj.hue, hslObj.saturation, hslObj.lightness] else [0, 0.5, 0.5]
|
|
return {
|
|
dasherized: _.string.dasherize(name)
|
|
humanized: _.string.humanize name
|
|
name: name
|
|
exists: wizardSettings[name]
|
|
rgb: hslToHex(hsl)
|
|
}
|
|
c.colorGroups = (f(colorName) for colorName in _.keys colorGroups)
|
|
c
|
|
|
|
afterRender: ->
|
|
return if @startsLoading
|
|
wizardSettings = me.get('wizard') or {}
|
|
wizardSettings.colorConfig ?= {}
|
|
|
|
@$el.find('.minicolors').each (e, minicolor) =>
|
|
$(minicolor).minicolors({
|
|
change: => @updateColorSettings($(minicolor).closest('.color-group'))
|
|
changeDelay: 200
|
|
})
|
|
|
|
@$el.find('.color-group').each (i, colorGroup) =>
|
|
@updateSwatchVisibility($(colorGroup))
|
|
|
|
updateSwatchVisibility: (colorGroup) ->
|
|
enabled = colorGroup.find('.color-group-checkbox').prop('checked')
|
|
colorGroup.find('.minicolors-swatch').toggle Boolean(enabled)
|
|
|
|
updateColorSettings: (colorGroup) =>
|
|
wizardSettings = $.extend(true, {}, me.get('wizard')) or {}
|
|
wizardSettings.colorConfig ?= {}
|
|
colorName = colorGroup.data('name')
|
|
wizardSettings.colorConfig[colorName] ?= {}
|
|
if colorGroup.find('.color-group-checkbox').prop('checked')
|
|
input = colorGroup.find('.minicolors-input')
|
|
hex = input.val()
|
|
hsl = hexToHSL(hex)
|
|
config = {hue: hsl[0], saturation: hsl[1], lightness: hsl[2]}
|
|
wizardSettings.colorConfig[colorName] = config
|
|
else
|
|
delete wizardSettings.colorConfig[colorName]
|
|
|
|
me.set('wizard', wizardSettings)
|
|
@updateMovieClip()
|
|
@trigger 'change'
|
|
|
|
initStage: ->
|
|
@stage = new createjs.Stage(@$el.find('canvas')[0])
|
|
@updateMovieClip()
|
|
|
|
updateMovieClip: ->
|
|
return unless @wizardThangType.loaded
|
|
wizardSettings = me.get('wizard') or {}
|
|
wizardSettings.colorConfig ?= {}
|
|
|
|
@stage.removeChild(@movieClip) if @movieClip
|
|
options = {colorConfig: wizardSettings.colorConfig}
|
|
@spriteBuilder.setOptions options
|
|
@spriteBuilder.buildColorMaps()
|
|
castAction = @wizardThangType.get('actions')?.cast
|
|
return unless castAction?.animation
|
|
@movieClip = @spriteBuilder.buildMovieClip castAction.animation
|
|
@movieClip.scaleY = @movieClip.scaleX = 1.7 * (castAction.scale or 1)
|
|
reg = castAction.positions?.registration
|
|
if reg
|
|
@movieClip.regX = reg.x
|
|
@movieClip.regY = reg.y
|
|
@stage.addChild @movieClip
|
|
@stage.update()
|