Merge branch 'master' of https://github.com/codecombat/codecombat

app/lib/sprites/SpriteBuilder.coffee

@@ -141,8 +141,8 @@ module.exports = class SpriteBuilder
     return unless shapes.length
     colors = @initColorMap(shapes)
     @adjustHuesForColorMap(colors, config.hue)
-    @adjustValueForColorMap(colors, 1, config.lightness)
-    @adjustValueForColorMap(colors, 2, config.saturation)
+    @adjustValueForColorMap(colors, 1, config.saturation)
+    @adjustValueForColorMap(colors, 2, config.lightness)
     @applyColorMap(shapes, colors)
     
   initColorMap: (shapes) ->

app/styles/account/settings.sass

@@ -37,44 +37,4 @@
     font-size: 12px
     
   .form
-    max-width: 600px
-    
-#wizard-settings-tab-view
-  #color-settings
-    float: left
-    width: 600px
-    margin-left: 30px
-    
-  canvas
-    float: left
-    border: 2px solid black
-    margin: 20px
-    
-  .color-group
-    clear: both
-    padding-bottom: 10px
-    margin-bottom: 10px
-    border-bottom: 1px solid gray
-
-  .name-cell
-    float: left
-    width: 100px
-    padding-top: 2px
-    
-    input
-      margin-right: 10px
-      position: relative
-      top: -3px
-    
-  .checkbox-cell
-    float: left
-    width: 40px
-    
-  .slider-cell
-    margin-bottom: 10px
-    float: left
-    width: 120px
-
-  .selector
-    width: 100px
-    
+    max-width: 600px

app/styles/account/wizard-settings.sass

@@ -0,0 +1,42 @@
+#wizard-settings-view
+  h3#loading
+    text-align: center
+  
+  #color-settings
+    float: left
+      width: 600px
+      margin-left: 30px
+
+    canvas
+      float: left
+      border: 2px solid black
+      margin: 20px
+
+    .color-group
+      clear: both
+      padding-bottom: 10px
+      margin-bottom: 10px
+      border-bottom: 1px solid gray
+
+    .name-cell
+      float: left
+      width: 100px
+      padding-top: 2px
+
+      input
+        margin-right: 10px
+        position: relative
+        top: -3px
+
+    .checkbox-cell
+      float: left
+      width: 40px
+
+    .slider-cell
+      margin-bottom: 10px
+      float: left
+      width: 120px
+
+    .selector
+      width: 100px
+    

app/styles/modal/wizard_settings.sass

@@ -1,20 +1,17 @@
 #wizard-settings-modal
   color: black
-  background: white
-  width: 400px
   
+  #wizard-settings-view #color-settings
+    width: 480px
+    
   canvas
-    border: 1px solid black
-    float: left
-
-  .settings
-    width: 225px
-    margin: 10px
-    display: inline-block
+    margin: 0px auto 20px
+    display: block
+    float: none
+    background: white
     
-  .selector
-    margin: 10px 5px
-    
-  button
-    margin-left: 10px
-    float: right
+  .wizard-name-line
+    text-align: center
+    margin-bottom: 10px
+    label
+      margin-right: 10px

app/templates/account/settings.jade

@@ -57,7 +57,7 @@ block content
               a(href="http://en.gravatar.com/profiles/edit/?noclose#your-images", target="_blank", data-i18n="account_settings.gravatar_add_more_photos") Add more photos to your Gravatar account to access them here.
       
       #wizard-pane.tab-pane
-        #wizard-settings-tab-view
+        #wizard-settings-view
 
       #password-pane.tab-pane
         p

app/templates/modal/wizard_settings.jade

@@ -4,19 +4,17 @@ block modal-header-content
   h3(data-i18n="wizard_settings.title") Wizard Settings
 
 block modal-body-content
-  h4(data-i18n="wizard_settings.customize_avatar") Customize Your Avatar
-  
-  canvas(width="120px", height="150px")
-  .settings
-    .form-vertical.form
-      .form-group
-        label.control-label(for="name")
-          | Name
-          button.btn.btn-mini.btn-primary#random-name Random
-        input#wizard-settings-name(name="name", type="text", value="#{me.get('name')||''}")
-      .form-group
-        label.control-label(for="wizardColor1") Hat Color
-        .selector#wizard-settings-color-1
+  div.wizard-name-line.form-group
+    label.control-label(for="name")
+      | Name
+    input#wizard-settings-name(name="name", type="text", value="#{me.get('name')||''}")
+
+  #wizard-settings-view
+
+block modal-body-wait-content
+  h3 Saving...
+.progress.progress-striped.active
+  .progress-bar
 
 block modal-footer-content
-  button.btn.btn-primary.btn-large#wizard-settings-done(type="button", data-dismiss="modal", aria-hidden="true") Done
+  button.btn.btn-primary.btn-large#wizard-settings-done(type="button") Done

app/views/account/settings_view.coffee

@@ -4,7 +4,7 @@ template = require 'templates/account/settings'
 forms = require('lib/forms')
 User = require('models/User')
 
-WizardSettingsTabView = require './wizard_settings_tab_view'
+WizardSettingsView = require './wizard_settings_view'
 
 module.exports = class SettingsView extends View
   id: 'account-settings-view'
@@ -47,9 +47,9 @@ module.exports = class SettingsView extends View
 
     @chooseTab(location.hash.replace('#',''))
     @updateWizardColor()
-    wizardSettingsTabView = new WizardSettingsTabView()
-    wizardSettingsTabView.on 'change', @save, @
-    @insertSubView wizardSettingsTabView
+    WizardSettingsView = new WizardSettingsView()
+    WizardSettingsView.on 'change', @save, @
+    @insertSubView WizardSettingsView
 
   chooseTab: (category) ->
     id = "##{category}-pane"

app/views/account/wizard_settings_view.coffee

@@ -1,12 +1,13 @@
-RootView = require 'views/kinds/RootView'
-template = require 'templates/account/wizard_settings_tab'
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/account/wizard_settings'
 {me} = require('lib/auth')
 ThangType = require 'models/ThangType'
 SpriteBuilder = require 'lib/sprites/SpriteBuilder'
 
-module.exports = class WizardSettingsTabView extends RootView
-  id: 'wizard-settings-tab-view'
+module.exports = class WizardSettingsView extends CocoView
+  id: 'wizard-settings-view'
   template: template
+  startsLoading: true
 
   events:
     'change .color-group-checkbox': (e) ->
@@ -25,6 +26,7 @@ module.exports = class WizardSettingsTabView extends RootView
     @wizardThangType.once 'sync', @initCanvas, @
 
   initCanvas: ->
+    @startsLoading = false
     @render()
     @spriteBuilder = new SpriteBuilder(@wizardThangType)
     @initStage()
@@ -44,6 +46,7 @@ module.exports = class WizardSettingsTabView extends RootView
     c
 
   afterRender: ->
+    return if @startsLoading
     wizardSettings = me.get('wizard') or {}
     wizardSettings.colorConfig ?= {}
 
@@ -107,3 +110,4 @@ module.exports = class WizardSettingsTabView extends RootView
 
   destroy: ->
     @stage?.removeAllEventListeners()
+    super()

app/views/kinds/CocoView.coffee

@@ -129,7 +129,7 @@ module.exports = class CocoView extends Backbone.View
   # Loading RootViews
 
   showLoading: ($el=@$el) ->
-    $el.find('>').hide()
+    $el.find('>').addClass('hidden')
     $el.append($('<div class="loading-screen"></div>')
     .append('<h2>Loading</h2>')
     .append('<div class="progress progress-striped active loading"><div class="progress-bar"></div></div>'))
@@ -138,7 +138,7 @@ module.exports = class CocoView extends Backbone.View
   hideLoading: ->
     return unless @_lastLoading?
     @_lastLoading.find('.loading-screen').remove()
-    @_lastLoading.find('>').show()
+    @_lastLoading.find('>').removeClass('hidden')
     @_lastLoading = null
 
   # Loading ModalViews

app/views/kinds/RootView.coffee

@@ -22,8 +22,8 @@ module.exports = class RootView extends CocoView
     logoutUser($('#login-email').val())
 
   showWizardSettingsModal: ->
-    WizardSettingsView = require('views/modal/wizard_settings_modal')
-    subview = new WizardSettingsView {}
+    WizardSettingsModal = require('views/modal/wizard_settings_modal')
+    subview = new WizardSettingsModal {}
     @openModalView subview
 
   showLoading: ($el) ->

app/views/modal/wizard_settings_modal.coffee

@@ -2,79 +2,44 @@ View = require 'views/kinds/ModalView'
 template = require 'templates/modal/wizard_settings'
 WizardSprite = require 'lib/surface/WizardSprite'
 ThangType = require 'models/ThangType'
+{me} = require 'lib/auth'
+forms = require('lib/forms')
 
-module.exports = class WizardSettingsView extends View
+module.exports = class WizardSettingsModal extends View
   id: "wizard-settings-modal"
   template: template
   closesOnClickOutside: false
 
   events:
     'change #wizard-settings-name': 'onNameChange'
-    'click #random-name': 'onRandomNameClick'
-    'click #wizard-settings-done': 'saveSettings'
-
-  render: ->
-    me.set('name', @randomName())  if not me.get('name')
-    super()
-
-  onRandomNameClick: =>
-    $('#wizard-settings-name').val(@randomName())
-    @saveSettings()
-
-  randomName: ->
-    return NameGenerator.getName(7, 9)
+    'click #wizard-settings-done': 'onWizardSettingsDone'
 
   afterRender: ->
-    super()
-    @colorSlider = $( "#wizard-settings-color-1", @$el).slider({ animate: "fast" })
-    @colorSlider.slider('value', me.get('wizardColor1')*100)
-    @colorSlider.on('slide',@onSliderChange)
-    @colorSlider.on('slidechange',@onSliderChange)
-    @stage = new createjs.Stage($('canvas', @$el)[0])
-    @saveChanges = _.debounce(@saveChanges, 1000)
+    WizardSettingsView = require 'views/account/wizard_settings_view'
+    view = new WizardSettingsView()
+    @insertSubView view
 
-    wizOriginal = "52a00d55cf1818f2be00000b"
-    url = "/db/thang_type/#{wizOriginal}/version"
-    @wizardType = new ThangType()
-    @wizardType.url = -> url
-    @wizardType.fetch()
-    @wizardType.once 'sync', @initCanvas
-
-  initCanvas: =>
-    spriteOptions = thangID: "Config Wizard", resolutionFactor: 3
-    @wizardSprite = new WizardSprite @wizardType, spriteOptions
-    @wizardSprite.setColorHue(me.get('wizardColor1'))
-    @wizardDisplayObject = @wizardSprite.displayObject
-    @wizardDisplayObject.x = 10
-    @wizardDisplayObject.y = 15
-    @wizardDisplayObject.scaleX = @wizardDisplayObject.scaleY = 3.0
-    @stage.addChild(@wizardDisplayObject)
-    @updateSpriteColor()
-    @stage.update()
-
-  onSliderChange: =>
-    @updateSpriteColor()
-    @saveSettings()
-
-  getColorHue: ->
-    @colorSlider.slider('value') / 100
-
-  updateSpriteColor: ->
-    colorHue = @getColorHue()
-    @wizardSprite.setColorHue(colorHue)
-    @stage.update()
-
-  onNameChange: =>
-    @saveSettings()
-
-  saveSettings: ->
+  onNameChange: ->
     me.set('name', $('#wizard-settings-name').val())
-    me.set('wizardColor1', @getColorHue())
-    @saveChanges()
 
-  saveChanges: ->
-    me.save()
+  onWizardSettingsDone: ->
+    forms.clearFormAlerts(@$el)
+    res = me.validate()
+    if res?
+      forms.applyErrorsToForm(@$el, res)
+      return
 
-  destroy: ->
-    @wizardSprite?.destroy()
-    super()
+    res = me.save()
+    return unless res
+    save = $('#save-button', @$el).text($.i18n.t('common.saving', defaultValue: 'Saving...'))
+    .addClass('btn-info').show().removeClass('btn-danger')
+
+    res.error =>
+      errors = JSON.parse(res.responseText)
+      forms.applyErrorsToForm(@$el, errors)
+      @disableModalInProgress(@$el)
+    res.success (model, response, options) =>
+      @hide()
+
+    @enableModalInProgress(@$el)
+    me.save()