Merge branch 'master' into production

app/locale/en.coffee

@@ -318,6 +318,8 @@
     write_this_down: "Write this down:"
     start_playing: "Start Playing!"
     sso_connected: "Successfully connected with:"
+    select_your_starting_hero: "Select Your Starting Hero:"
+    you_can_always_change_your_hero_later: "You can always change your hero later."
 
   recover:
     recover_account_title: "Recover Account"

app/locale/fr.coffee

@@ -184,16 +184,16 @@ module.exports = nativeDescription: "français", englishDescription: "French", t
     campaign_old_multiplayer_description: "Reliques d'un âge plus civilisé. Il n'y a aucune simulation pour ces vielles arènes multijoueur vides de tout héros."
 
   code:
-#    if: "if" # Keywords--these translations show up on hover, so please translate them all, even if it's kind of long. (In the code editor, they will still be in English.)
+    if: "Si" # Keywords--these translations show up on hover, so please translate them all, even if it's kind of long. (In the code editor, they will still be in English.)
     else: "Sinon"
-    elif: "et sinon"
+    elif: "Sinon si"
     while: "tant que"
     loop: "boucle"
     for: "pour"
-    break: "break"
+    break: "sortir"
-    continue: "continue"
+    continue: "continuer"
-    pass: "passe"
+    pass: "passer"
-    return: "retourne"
+    return: "retour"
     then: "alors"
     do: "fait"
     end: "fin"
@@ -203,27 +203,27 @@ module.exports = nativeDescription: "français", englishDescription: "French", t
     self: "soi-même"
     hero: "héros"
     this: "ceci"
-    or: "or"
+    or: "ou"
     "||": "ou"
     and: "et"
     "&&": "et"
-    not: "n'est pas"
+    not: "non"
-    "!": "n'est pas"
+    "!": "non"
     "=": "assigner"
     "==": "équivalent à"
     "===": "strictement équivalent à"
-    "!=": "n'est pas équivalent à"
+    "!=": "non équivalent à"
-    "!==": "n'est pas strictement équivalent à"
+    "!==": "non strictement équivalent à"
     ">": "est plus grand que"
     ">=": "est plus grand que ou équivalent à"
-    "<": "is less than"
+    "<": "est plus petit que"
-    "<=": "est plus petit ou  équivalent à"
+    "<=": "est plus petit que ou équivalent à"
     "*": "multiplié par"
     "/": "divisé par"
-    "+": "plus"
+    "+": "ajouté à"
-    "-": "moins"
+    "-": "soustrait à"
-    "+=": "ajoute et assigne"
+    "+=": "ajouté et assigné"
-    "-=": "soustrait et assigne"
+    "-=": "soustrait et assigné"
     True: "Vrai"
     true: "vrai"
     False: "Faux"
@@ -346,9 +346,9 @@ module.exports = nativeDescription: "français", englishDescription: "French", t
     save: "Sauvegarder"
     publish: "Publier"
     create: "Creer"
-    fork: "Fork"
+    fork: "Répliquer"
     play: "Jouer" # When used as an action verb, like "Play next level"
-    retry: "Reessayer"
+    retry: "Réessayer"
     actions: "Actions"
     info: "Info"
     help: "Aide"
@@ -431,7 +431,7 @@ module.exports = nativeDescription: "français", englishDescription: "French", t
     years: "années"
 
   play_level:
-    level_complete: "Niveau complété"
+    level_complete: "Niveau terminé"
     completed_level: "Niveau terminé:"
     course: "Cours:"
     done: "Fait"
@@ -450,7 +450,7 @@ module.exports = nativeDescription: "français", englishDescription: "French", t
     running: "en cours..."
     success: "Succès"
     incomplete: "Incomplet"
-    timed_out: "Plus de temps"
+    timed_out: "temps écoulé"
     failing: "Échec"
     reload: "Recommencer"
     reload_title: "Recommencer tout le code ?"
@@ -722,13 +722,13 @@ module.exports = nativeDescription: "français", englishDescription: "French", t
     restricted_to_certain_heroes: "Seulement certains héros peuvent jouer ce niveau."
 
   skill_docs:
-#    function: "function" # skill types
+    function: "fonction" # skill types
-#    method: "method"
+    method: "méthode"
 #    snippet: "snippet"
-#    number: "number"
+    number: "nombre"
-#    array: "array"
+    array: "tableau"
-#    object: "object"
+    object: "objet"
-#    string: "string"
+    string: "chaîne de charactères"
     writable: "éditable" # Hover over "attack" in Your Skills while playing a level to see most of this
     read_only: "lecture seulement"
     action: "Action"
@@ -1300,7 +1300,7 @@ module.exports = nativeDescription: "français", englishDescription: "French", t
 #    changelog: "View latest changes to course levels."
     select_language: "Selectionner langue"
     select_level: "Selectionner niveau"
-#    play_level: "Play Level"
+    play_level: "Jouer le niveau"
     concepts_covered: "Conceptes Couverts"
     print_guide: "Imprimer Guide (PDF)"
     view_guide_online: "Voir Guide En Ligne (PDF)"

app/locale/he.coffee

@@ -1,4 +1,4 @@
-module.exports = nativeDescription: "עברית", englishDescription: "Hebrew", translation:
+ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew", translation:
   home:
     slogan: "גם לשחק וגם ללמוד לתכנת"
     no_ie: "המשחק לא עובד באקפלורר 8 וישן יותר. סליחה!" # Warning that only shows up in IE8 and older
@@ -89,7 +89,6 @@ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew",
 #    goto_classes: "Go to My Classes"
 #    view_profile: "View My Profile"
 #    view_progress: "View Progress"
-#    check_out_wiki: "Check out our new Educator Wiki"
 #    want_coco: "Want CodeCombat at your school?"
 #    form_select_role: "Select primary role"
 #    form_select_range: "Select class size"
@@ -282,7 +281,7 @@ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew",
 #    parent_email_blurb: "We know you can't wait to learn programming — we're excited too! Your parents will receive an email with further instructions on how to create an account for you. Email {{email_link}} if you have any questions."
 #    classroom_not_found: "No classes exist with this Class Code. Check your spelling or ask your teacher for help."
 #    checking: "Checking..."
-#    account_exists: "This email is already in use:" # {change}
+#    account_exists: "This email is already in use:"
 #    sign_in: "Sign in"
 #    email_good: "Email looks good!"
 #    name_taken: "Username already taken! Try {{suggestedName}}?"
@@ -357,7 +356,7 @@ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew",
     submit_patch: ".שלח תיקון"
     submit_changes: "שלח שינויים"
     save_changes: "שמור שינויים"
-#    required_field: "Required field"
+#    required_field: "required"
 
   general:
     and: "וגם"
@@ -437,6 +436,8 @@ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew",
     done: "סיים"
     next_level: "השלב הבא"
     next_game: "המשחק הבא"
+#    language: "Language"
+#    languages: "Languages"
 #    programming_language: "Programming language"
     show_menu: "הצג תפריט משחק"
     home: "בית" # Not used any more, will be removed soon.
@@ -884,7 +885,9 @@ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew",
 #    evaluate_recommend: "Evaluate/Recommend"
 #    approve_funds: "Approve Funds"
 #    no_purchaser_role: "No role in purchase decisions"
-#    organization_label: "Name of School/District"
+#    district_label: "District"
+#    district_na: "Enter N/A if not applicable"
+#    organization_label: "School"
 #    city: "City"
 #    state: "State"
 #    country: "Country"
@@ -1332,7 +1335,7 @@ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew",
 #    update_account_title: "Your account needs attention!"
 #    update_account_blurb: "Before you can access your classes, choose how you want to use this account."
 #    update_account_current_type: "Current Account Type:"
-#    update_account_account_email: "Account Email/Username:" # {change}
+#    update_account_account_email: "Account Email/Username:"
 #    update_account_am_teacher: "I am a teacher"
 #    update_account_keep_access: "Keep access to classes I've created"
 #    update_account_teachers_can: "Teacher accounts can:"
@@ -1353,6 +1356,7 @@ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew",
 #    update_account_students_warning: "Warning: You will not be able to manage any classes that you have previously created or create new classes."
 #    update_account_remain_student: "Remain a Student"
 #    update_account_update_student: "Update to Student"
+#    need_a_class_code: "You'll need a Class Code for the class you're joining:"
 #    update_account_not_sure: "Not sure which one to choose? Email"
 #    update_account_confirm_update_student: "Are you sure you want to update your account to a Student experience?"
 #    update_account_confirm_update_student2: "You will not be able to manage any classes that you have previously created or create new classes. Your previously created classes will be removed from CodeCombat and cannot be restored."
@@ -1461,12 +1465,12 @@ module.exports = nativeDescription: "עברית", englishDescription: "Hebrew",
 #    enter_new_password_below: "Enter new password below:"
 #    change_password: "Change Password"
 #    changed: "Changed"
-#    available_credits: "Available Licenses" # {change}
+#    available_credits: "Available Licenses"
-#    pending_credits: "Pending Licenses" # {change}
+#    pending_credits: "Pending Licenses"
 #    credits: "licenses"
 #    start_date: "start date:"
 #    end_date: "end date:"
-#    num_enrollments_needed: "Number of licenses needed:" # {change}
+#    num_enrollments_needed: "Number of licenses needed:"
 #    get_enrollments_blurb: " We'll help you build a solution that meets the needs of your class, school or district."
 #    enroll_request_sent_blurb1: "Thanks! Your request has been sent."
 #    enroll_request_sent_blurb2: "Our classroom success team will be in touch shortly to help you find the best solution for your students' needs!"

app/locale/locale.coffee

@@ -36,11 +36,12 @@ module.exports =
   'fa': { nativeDescription: 'فارسی', englishDescription: 'Persian' }
   'gl': { nativeDescription: 'Galego', englishDescription: 'Galician' }
   'ko': { nativeDescription: '한국어', englishDescription: 'Korean' }
-  'id': { nativeDescription: 'Bahasa Indonesia', englishDescription: 'Indonesian' }
+  'haw': { nativeDescription: 'ʻŌlelo Hawaiʻi', englishDescription: 'Hawaiian' }
-  'it': { nativeDescription: 'Italiano', englishDescription: 'Italian' }
   'he': { nativeDescription: 'עברית', englishDescription: 'Hebrew' }
   'hr': { nativeDescription: 'hrvatski jezik', englishDescription: 'Croatian' }
   'hu': { nativeDescription: 'magyar', englishDescription: 'Hungarian' }
+  'id': { nativeDescription: 'Bahasa Indonesia', englishDescription: 'Indonesian' }
+  'it': { nativeDescription: 'Italiano', englishDescription: 'Italian' }
   'lt': { nativeDescription: 'lietuvių kalba', englishDescription: 'Lithuanian' }
   'mi': { nativeDescription: 'te reo Māori', englishDescription: 'Māori' }
   'mk-MK': { nativeDescription: 'Македонски', englishDescription: 'Macedonian' }

app/locale/uk.coffee

@@ -15,14 +15,14 @@ module.exports = nativeDescription: "Українська", englishDescription:
     or_ipad: "Або завантажте на iPad"
 
   new_home:
-    slogan: "Найбільш захоплююча гра для вивчення програмування."
+    slogan: "Найзахопливіша гра для вивчення програмування."
     classroom_edition: "Класна версія:"
     learn_to_code: "Вчитися кодувати:"
     teacher: "Вчитель"
     student: "Учень"
-    play_now: "Грати Зараз"
+    play_now: "Грати зараз"
-    im_a_teacher: "Я Вчитель"
+    im_a_teacher: "Я вчитель"
-    im_a_student: "Я Учень"
+    im_a_student: "Я учень"
     learn_more: "Дізнатися більше"
 #    classroom_in_a_box: "A classroom in-a-box for teaching computer science."
     codecombat_is: "CodeCombat - це платформа <strong>для учнів</strong>, створена, щоб опановувати комп'ютерні науки під час захоплюючої гри."
@@ -37,7 +37,7 @@ module.exports = nativeDescription: "Українська", englishDescription:
     teaching_computer_science: "Щоб викладати комп'ютерні науки не обов'язково мати науковий ступінь, адже ми підтримуємо вчителів з будь-яким досвідом."
     accessible_to: "Доступно"
     everyone: "кожному"
-    democratizing: "Навчання, доступне кожному, — наша головна мета. Кожен повинен мати можливість навчитись програмувати."
+    democratizing: "Навчання, доступне кожному — наша головна мета. Кожен повинен мати можливість навчитись програмувати."
     forgot_learning: "Таке враження, що, граючи, вони забули, що це навчання."
     wanted_to_do: " Програмування — те, чим я завжди хотів займатись, ніколи не думав, що буду вчити це в школі."
     why_games: "Чому навчання через гру важливе?"
@@ -111,9 +111,9 @@ module.exports = nativeDescription: "Українська", englishDescription:
     legal: "Юридична інформація"
     about: "Про нас"
     contact: "Контакти"
-    twitter_follow: "Фоловити"
+    twitter_follow: "Стежити"
     students: "Учням"
-    teachers: "Учителям"
+    teachers: "Вчителям"
     careers: "Робота"
     facebook: "Facebook"
     twitter: "Twitter"
@@ -253,22 +253,22 @@ module.exports = nativeDescription: "Українська", englishDescription:
     finishing: "Завершення"
     sign_in_with_facebook: "Увійти через Facebook"
     sign_in_with_gplus: "Увійти через G+"
-    signup_switch: "Хочете створити екаунт?"
+    signup_switch: "Хочете створити акаунт?"
 
   signup:
-#    create_student_header: "Create Student Account"
+    create_student_header: "Створити акаунт учня"
-#    create_teacher_header: "Create Teacher Account"
+    create_teacher_header: "Створити акаунт вчителя"
-#    create_individual_header: "Create Individual Account"
+    create_individual_header: "Створити індивідуальний акаунт"
-#    create_header: "Create Account"
+    create_header: "Створити акаунт"
     email_announcements: "Отримувати анонси на email" # {change}
-    creating: "Створення екаунту..."
+    creating: "Створення акаунту..."
 #    create_account: "Create Account"
     sign_up: "Реєстрація"
     log_in: "вхід з паролем"
     required: "Ця дія потребує входу."
-    login_switch: "Уже маєте екаунт?"
+    login_switch: "Уже маєте акаунт?"
-#    school_name: "School Name and City"
+    school_name: "Назва школи і місто"
-#    optional: "optional"
+    optional: "необов’язково"
 #    school_name_placeholder: "Example High School, Springfield, IL"
 #    connect_with: "Connect with:"
 #    connected_gplus_header: "You've successfully connected with Google+!"

app/styles/core/hero-select-view.sass

@@ -0,0 +1,25 @@
+@import "app/styles/style-flat-variables"
+
+#hero-select-view
+  .hero-list
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+    margin-bottom: -50px
+    
+  .hero-option
+    display: flex
+    flex-direction: column
+    align-items: center
+    margin: 0 48px 50px
+    
+  .hero-avatar
+    margin: 6px
+    background-color: #f8f8f8
+    box-shadow: 0 0 0 1px gray
+    
+  .current .hero-avatar
+    box-shadow: 0 0 0 6px gray
+
+  .selected .hero-avatar
+    box-shadow: 0 0 0 6px $gold

app/styles/courses/hero-select-modal.sass

@@ -1,5 +1,3 @@
-@import "app/styles/style-flat-variables"
-
 #hero-select-modal
   .modal-dialog
     width: auto
@@ -15,26 +13,3 @@
     
   h4
     max-width: 500px
-
-  .hero-list
-    display: flex
-    flex-wrap: wrap
-    justify-content: center
-    margin-bottom: -50px
-    
-  .hero-option
-    display: flex
-    flex-direction: column
-    align-items: center
-    margin: 0 48px 50px
-    
-  .hero-avatar
-    margin: 6px
-    background-color: #f8f8f8
-    box-shadow: 0 0 0 1px gray
-    
-  .current .hero-avatar
-    box-shadow: 0 0 0 6px gray
-
-  .selected .hero-avatar
-    box-shadow: 0 0 0 6px $gold

app/styles/modal/create-account-modal/create-account-modal.sass

@@ -69,7 +69,7 @@
     a span
       text-decoration: underline
   
-  #choose-account-type-view, #segment-check-view, #basic-info-view, #coppa-deny-view, #single-sign-on-already-exists-view, #single-sign-on-confirm-view, #confirmation-view
+  #choose-account-type-view, #segment-check-view, #basic-info-view, #coppa-deny-view, #single-sign-on-already-exists-view, #single-sign-on-confirm-view, #extras-view, #confirmation-view
     display: flex
     flex-direction: column
     flex-grow: 1

app/styles/modal/create-account-modal/extras-view.sass

@@ -0,0 +1,8 @@
+#extras-view
+  justify-content: center
+  
+  #hero-select-view
+    margin-top: 20px
+
+    .hero-option
+      margin: 0 30px 50px

app/templates/core/create-account-modal/create-account-modal.jade

@@ -37,12 +37,10 @@ block modal-body
       #single-sign-on-already-exists-view
     when 'sso-confirm'
       #single-sign-on-confirm-view
+    when 'extras'
+      #extras-view
     when 'confirmation'
       #confirmation-view
-    //- This is not yet implemented
-    //- when 'extras'
-    //-   #extras-view
-    
 
 block modal-footer
   //-

app/templates/core/create-account-modal/extras-view.jade

@@ -0,0 +1,11 @@
+.modal-body
+  .modal-body-content
+    .text-center
+      h4(data-i18n="signup.select_your_starting_hero")
+      .small(data-i18n="signup.you_can_always_change_your_hero_later")
+    #hero-select-view
+
+  // In reverse order for tabbing purposes
+  .history-nav-buttons
+    button.next-button.btn.btn-lg.btn-navy(type='button')
+      span(data-i18n="about.next")

app/templates/core/hero-select-view.jade

@@ -0,0 +1,20 @@
+mixin heroOption(hero)
+  - var heroOriginal = hero.get('original')
+  - var selectedState
+  if state.get('selectedHeroOriginal') === heroOriginal
+    - selectedState = 'selected'
+  else if view.options.showCurrentHero && state.get('currentHeroOriginal') === heroOriginal
+    - selectedState = 'current'
+  else
+    - selectedState = ''
+  .hero-option(data-hero-original=heroOriginal, class=selectedState)
+    .hero-avatar
+      img(src=hero.getPortraitURL())
+    .text-h5.hero-name
+      span= hero.getHeroShortName()
+
+.hero-list
+  if view.heroes.loaded
+    each hero in view.heroes.models
+      if hero.get('heroClass') === 'Warrior'
+        +heroOption(hero)

app/templates/courses/hero-select-modal.jade

@@ -6,20 +6,7 @@ block modal-header-content
     h4(data-i18n="courses.select_your_hero_description")
 
 block modal-body-content
-  .hero-list
+  #hero-select-view
-    if view.heroes.loaded
-      each hero in view.heroes.models
-        if hero.get('heroClass') === 'Warrior'
-          +heroOption(hero)
-  
-mixin heroOption(hero)
-  - var heroID = hero.id
-  - var selectedState = (state.get('selectedHeroID') === heroID ? 'selected' : (state.get('currentHeroID') === heroID ? 'current' : ''))
-  .hero-option(data-hero-id=heroID class=selectedState)
-    .hero-avatar
-      img(src=hero.getPortraitURL())
-    .text-h5.hero-name
-      span= hero.getHeroShortName()
 
 block modal-footer-content
   .select-hero-btn.btn.btn-lg.btn-forest

app/views/contribute/DiplomatView.coffee

@@ -58,6 +58,7 @@ require("locale/my")
 require("locale/et")
 require("locale/hr")
 require("locale/mi")
+require("locale/haw")
 
 module.exports = class DiplomatView extends ContributeClassView
   id: 'diplomat-view'
@@ -144,3 +145,4 @@ module.exports = class DiplomatView extends ContributeClassView
     et: []             # Eesti, Estonian
     hr: []             # hrvatski jezik, Croatian
     mi: []             # te reo Māori, Māori
+    haw: []            # ʻŌlelo Hawaiʻi, Hawaiian

app/views/core/CreateAccountModal/CreateAccountModal.coffee

@@ -6,6 +6,7 @@ CoppaDenyView = require './CoppaDenyView'
 BasicInfoView = require './BasicInfoView'
 SingleSignOnAlreadyExistsView = require './SingleSignOnAlreadyExistsView'
 SingleSignOnConfirmView = require './SingleSignOnConfirmView'
+ExtrasView = require './ExtrasView'
 ConfirmationView = require './ConfirmationView'
 State = require 'models/State'
 template = require 'templates/core/create-account-modal/create-account-modal'
@@ -63,6 +64,7 @@ module.exports = class CreateAccountModal extends ModalView
       classCode
       birthday: new Date('') # so that birthday.getTime() is NaN
       authModalInitialValues: {}
+      accountCreated: false
     }
     
     { startOnPath } = options
@@ -92,14 +94,25 @@ module.exports = class CreateAccountModal extends ModalView
       'sso-connect:already-in-use': -> @signupState.set { screen: 'sso-already-exists' }
       'sso-connect:new-user': -> @signupState.set {screen: 'sso-confirm'}
       'nav-back': -> @signupState.set { screen: 'segment-check' }
-      'signup': -> @signupState.set { screen: 'confirmation' }
+      'signup': ->
+        if @signupState.get('path') is 'student'
+          @signupState.set { screen: 'extras', accountCreated: true }
+        else
+          @signupState.set { screen: 'confirmation', accountCreated: true }
 
     @listenTo @insertSubView(new SingleSignOnAlreadyExistsView({ @signupState })),
       'nav-back': -> @signupState.set { screen: 'basic-info' }
 
     @listenTo @insertSubView(new SingleSignOnConfirmView({ @signupState })),
       'nav-back': -> @signupState.set { screen: 'basic-info' }
-      'signup': -> @signupState.set { screen: 'confirmation' }
+      'signup': ->
+        if @signupState.get('path') is 'student'
+          @signupState.set { screen: 'extras', accountCreated: true }
+        else
+          @signupState.set { screen: 'confirmation', accountCreated: true }
+        
+    @listenTo @insertSubView(new ExtrasView({ @signupState })),
+      'nav-forward': -> @signupState.set { screen: 'confirmation' }
 
     @insertSubView(new ConfirmationView({ @signupState }))
 
@@ -108,7 +121,7 @@ module.exports = class CreateAccountModal extends ModalView
     application.gplusHandler.loadAPI({ success: => @signupState.set { gplusEnabled: true } unless @destroyed })
     
     @once 'hidden', ->
-      if @signupState.get('screen') is 'confirmation' and not application.testing
+      if @signupState.get('accountCreated') and not application.testing
         # ensure logged in state propagates through the entire app
         document.location.reload()
   

app/views/core/CreateAccountModal/ExtrasView.coffee

@@ -0,0 +1,15 @@
+CocoView = require 'views/core/CocoView'
+HeroSelectView = require 'views/core/HeroSelectView'
+template = require 'templates/core/create-account-modal/extras-view'
+State = require 'models/State'
+
+module.exports = class ExtrasView extends CocoView
+  id: 'extras-view'
+  template: template
+  retainSubviews: true
+
+  events:
+    'click .next-button': -> @trigger 'nav-forward'
+
+  initialize: ({ @signupState } = {}) ->
+    @insertSubView(new HeroSelectView({ showCurrentHero: false }))

app/views/core/HeroSelectView.coffee

@@ -0,0 +1,45 @@
+CocoView = require 'views/core/CocoView'
+template = require 'templates/core/hero-select-view'
+Classroom = require 'models/Classroom'
+ThangTypes = require 'collections/ThangTypes'
+State = require 'models/State'
+ThangType = require 'models/ThangType'
+User = require 'models/User'
+
+module.exports = class HeroSelectView extends CocoView
+  id: 'hero-select-view'
+  template: template
+
+  events:
+    'click .hero-option': 'onClickHeroOption'
+
+  initialize: (@options = {}) ->
+    defaultHeroOriginal = ThangType.heroes.captain
+    currentHeroOriginal = me.get('heroConfig')?.thangType or defaultHeroOriginal
+
+    @debouncedRender = _.debounce @render, 0
+
+    @state = new State({
+      currentHeroOriginal
+      selectedHeroOriginal: currentHeroOriginal
+    })
+
+    @heroes = new ThangTypes({}, { project: ['original', 'name', 'heroClass'] })
+    @supermodel.trackRequest @heroes.fetchHeroes()
+
+    @listenTo @state, 'all', -> @debouncedRender()
+    @listenTo @heroes, 'all', -> @debouncedRender()
+
+  onClickHeroOption: (e) ->
+    heroOriginal = $(e.currentTarget).data('hero-original')
+    @state.set selectedHeroOriginal: heroOriginal
+    @saveHeroSelection(heroOriginal)
+
+  saveHeroSelection: (heroOriginal) ->
+    me.set(heroConfig: {}) unless me.get('heroConfig')
+    heroConfig = _.assign me.get('heroConfig'), { thangType: heroOriginal }
+    me.set({ heroConfig })
+
+    hero = @heroes.findWhere({ original: heroOriginal })
+    me.save().then =>
+      @trigger 'hero-select:success', hero

app/views/courses/HeroSelectModal.coffee

@@ -1,4 +1,5 @@
 ModalView = require 'views/core/ModalView'
+HeroSelectView = require 'views/core/HeroSelectView'
 template = require 'templates/courses/hero-select-modal'
 Classroom = require 'models/Classroom'
 ThangTypes = require 'collections/ThangTypes'
@@ -9,34 +10,15 @@ User = require 'models/User'
 module.exports = class HeroSelectModal extends ModalView
   id: 'hero-select-modal'
   template: template
+  retainSubviews: true
 
   events:
     'click .select-hero-btn': 'onClickSelectHeroButton'
-    'click .hero-option': 'onClickHeroOption'
 
-  initialize: ({ currentHeroID }) ->
+  initialize: ->
-    @debouncedRender = _.debounce @render, 0
+    @listenTo @insertSubView(new HeroSelectView({ showCurrentHero: true })),
-
+      'hero-select:success', (hero) ->
-    @state = new State({
+        @trigger('hero-select:success', hero)
-      currentHeroID
-      selectedHeroID: currentHeroID
-    })
-
-    @heroes = new ThangTypes({}, { project: ['original', 'name', 'heroClass'] })
-    @supermodel.trackRequest @heroes.fetchHeroes()
-
-    @listenTo @state, 'all', -> @debouncedRender()
-    @listenTo @heroes, 'all', -> @debouncedRender()
-
-  onClickHeroOption: (e) ->
-    heroID = $(e.currentTarget).data('hero-id')
-    @state.set selectedHeroID: heroID
-    hero = @heroes.get(heroID)
-    me.set(heroConfig: {}) unless me.get('heroConfig')
-    heroConfig = _.assign me.get('heroConfig'), { thangType: hero.get('original') }
-    me.set({ heroConfig })
-    me.save().then =>
-      @trigger 'hero-select:success', hero
 
   onClickSelectHeroButton: () ->
     @hide()

test/app/views/courses/HeroSelectModal.spec.coffee

@@ -13,8 +13,9 @@ describe 'HeroSelectModal', ->
 
   beforeEach (done) ->
     window.me = user = factories.makeUser({ heroConfig: { thangType: hero1.get('original') } })
-    modal = new HeroSelectModal({ currentHeroID: hero1.id })
+    modal = new HeroSelectModal()
-    modal.heroes.fakeRequests[0].respondWith({ status: 200, responseText: heroesResponse })
+    subview = modal.subviews.hero_select_view
+    subview.heroes.fakeRequests[0].respondWith({ status: 200, responseText: heroesResponse })
     jasmine.demoModal(modal)
     _.defer ->
       modal.render()
@@ -24,10 +25,10 @@ describe 'HeroSelectModal', ->
     modal.stopListening()
 
   it 'highlights the current hero', ->
-    expect(modal.$(".hero-option[data-hero-id='#{hero1.id}']")[0].className.split(" ")).toContain('selected')
+    expect(modal.$(".hero-option[data-hero-original='#{hero1.get('original')}']")[0].className.split(" ")).toContain('selected')
 
   it 'saves when you change heroes', (done) ->
-    modal.$(".hero-option[data-hero-id='#{hero2.id}']").click()
+    modal.$(".hero-option[data-hero-original='#{hero2.get('original')}']").click()
     _.defer ->
       expect(user.fakeRequests.length).toBe(1)
       request = user.fakeRequests[0]