Merge branch 'master' into production

2024-12-12 00:31:21 -05:00 · 2016-08-08 15:22:07 -07:00 · 2016-08-08 15:22:07 -07:00 · 1a53931f9c
commit 1a53931f9c
parent 3d024ce349 5b8d66cd1c
20 changed files with 2238 additions and 130 deletions
--- a/app/locale/en.coffee
+++ b/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"
--- a/app/locale/fr.coffee
+++ b/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"
-    continue: "continue"
-    pass: "passe"
-    return: "retourne"
+    break: "sortir"
+    continue: "continuer"
+    pass: "passer"
+    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"
-    "!": "n'est pas"
+    not: "non"
+    "!": "non"
    "=": "assigner"
    "==": "équivalent à"
    "===": "strictement équivalent à"
-    "!=": "n'est pas équivalent à"
-    "!==": "n'est pas strictement équivalent à"
+    "!=": "non équivalent à"
+    "!==": "non strictement équivalent à"
    ">": "est plus grand que"
    ">=": "est plus grand que ou équivalent à"
-    "<": "is less than"
-    "<=": "est plus petit ou  équivalent à"
+    "<": "est plus petit que"
+    "<=": "est plus petit que ou équivalent à"
    "*": "multiplié par"
    "/": "divisé par"
-    "+": "plus"
-    "-": "moins"
-    "+=": "ajoute et assigne"
-    "-=": "soustrait et assigne"
+    "+": "ajouté à"
+    "-": "soustrait à"
+    "+=": "ajouté et assigné"
+    "-=": "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
-#    method: "method"
+    function: "fonction" # skill types
+    method: "méthode"
 #    snippet: "snippet"
-#    number: "number"
-#    array: "array"
-#    object: "object"
-#    string: "string"
+    number: "nombre"
+    array: "tableau"
+    object: "objet"
+    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)"
--- a/app/locale/haw.coffee
+++ b/app/locale/haw.coffee
--- a/app/locale/he.coffee
+++ b/app/locale/he.coffee
@ -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 &mdash; 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}
-#    pending_credits: "Pending Licenses" # {change}
+#    available_credits: "Available Licenses"
+#    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!"
--- a/app/locale/locale.coffee
+++ b/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' }
-  'it': { nativeDescription: 'Italiano', englishDescription: 'Italian' }
+  'haw': { nativeDescription: 'ʻŌlelo Hawaiʻi', englishDescription: 'Hawaiian' }
  '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' }
--- a/app/locale/uk.coffee
+++ b/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: "Грати Зараз"
-    im_a_teacher: "Я Вчитель"
-    im_a_student: "Я Учень"
+    play_now: "Грати зараз"
+    im_a_teacher: "Я вчитель"
+    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_teacher_header: "Create Teacher Account"
-#    create_individual_header: "Create Individual Account"
-#    create_header: "Create Account"
+    create_student_header: "Створити акаунт учня"
+    create_teacher_header: "Створити акаунт вчителя"
+    create_individual_header: "Створити індивідуальний акаунт"
+    create_header: "Створити акаунт"
    email_announcements: "Отримувати анонси на email" # {change}
-    creating: "Створення екаунту..."
+    creating: "Створення акаунту..."
 #    create_account: "Create Account"
    sign_up: "Реєстрація"
    log_in: "вхід з паролем"
    required: "Ця дія потребує входу."
-    login_switch: "Уже маєте екаунт?"
-#    school_name: "School Name and City"
-#    optional: "optional"
+    login_switch: "Уже маєте акаунт?"
+    school_name: "Назва школи і місто"
+    optional: "необов’язково"
 #    school_name_placeholder: "Example High School, Springfield, IL"
 #    connect_with: "Connect with:"
 #    connected_gplus_header: "You've successfully connected with Google+!"
--- a/app/styles/core/hero-select-view.sass
+++ b/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
--- a/app/styles/courses/hero-select-modal.sass
+++ b/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
--- a/app/styles/modal/create-account-modal/create-account-modal.sass
+++ b/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
--- a/app/styles/modal/create-account-modal/extras-view.sass
+++ b/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
--- a/app/templates/core/create-account-modal/create-account-modal.jade
+++ b/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
  //-
--- a/app/templates/core/create-account-modal/extras-view.jade
+++ b/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")
--- a/app/templates/core/hero-select-view.jade
+++ b/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)
--- a/app/templates/courses/hero-select-modal.jade
+++ b/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
-    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()
+  #hero-select-view

 block modal-footer-content
  .select-hero-btn.btn.btn-lg.btn-forest
--- a/app/views/contribute/DiplomatView.coffee
+++ b/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
--- a/app/views/core/CreateAccountModal/CreateAccountModal.coffee
+++ b/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()
  
--- a/app/views/core/CreateAccountModal/ExtrasView.coffee
+++ b/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 }))
--- a/app/views/core/HeroSelectView.coffee
+++ b/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
--- a/app/views/courses/HeroSelectModal.coffee
+++ b/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 }) ->
-    @debouncedRender = _.debounce @render, 0
-
-    @state = new State({
-      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
+  initialize: ->
+    @listenTo @insertSubView(new HeroSelectView({ showCurrentHero: true })),
+      'hero-select:success', (hero) ->
+        @trigger('hero-select:success', hero)

  onClickSelectHeroButton: () ->
    @hide()
--- a/test/app/views/courses/HeroSelectModal.spec.coffee
+++ b/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.heroes.fakeRequests[0].respondWith({ status: 200, responseText: heroesResponse })
+    modal = new HeroSelectModal()
+    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]