habitica/views/shared/modals/classes.jade

.modal(ng-if='!user.flags.classSelected && user.stats.lvl >= 5', data-backdrop=true, ng-controller='UserCtrl')
  .modal-header
    h3 Class System Unlocked!
  .modal-body.select-class
    p Select your class. Upon level-up, you will now be able to allocate points to various stats. Alternatively, you can choose which stat your tasks represent (physical, mental, social, or "other") and drive your class automatically.
    .row-fluid
      .span3(ng-click='selectedClass = "warrior"')
        h5 Warrior
        figure.herobox(ng-class='{"selected-class": selectedClass=="warrior"}')
          .character-sprites
            span(class='skin_{{user.preferences.skin}}')
            span(class='{{user.preferences.size}}_armor_warrior_5')
            span(class='head_base_0')
            span(class='hair_base_{{user.preferences.hair.base}}_{{user.preferences.hair.color}}')
            span(class='hair_bangs_{{user.preferences.hair.bangs}}_{{user.preferences.hair.color}}')
            span(class='hair_beard_{{user.preferences.hair.beard}}_{{user.preferences.hair.color}}')
            span(class='hair_mustache_{{user.preferences.hair.mustache}}_{{user.preferences.hair.color}}')
            span(class='head_warrior_5')
            span(class='shield_warrior_5')
            span(class='weapon_warrior_6')
      .span3(ng-click='selectedClass = "wizard"')
        h5 Wizard
        figure.herobox(ng-class='{"selected-class": selectedClass=="wizard"}')
          .character-sprites
            span(class='skin_{{user.preferences.skin}}')
            span(class='{{user.preferences.size}}_armor_wizard_5')
            span(class='head_base_0')
            span(class='hair_base_{{user.preferences.hair.base}}_{{user.preferences.hair.color}}')
            span(class='hair_bangs_{{user.preferences.hair.bangs}}_{{user.preferences.hair.color}}')
            span(class='hair_beard_{{user.preferences.hair.beard}}_{{user.preferences.hair.color}}')
            span(class='hair_mustache_{{user.preferences.hair.mustache}}_{{user.preferences.hair.color}}')
            span(class='head_wizard_5')
            span(class='shield_wizard_5')
            span(class='weapon_wizard_6')
      .span3(ng-click='selectedClass = "rogue"')
        h5 Rogue
        figure.herobox(ng-class='{"selected-class": selectedClass=="rogue"}')
          .character-sprites
            span(class='skin_{{user.preferences.skin}}')
            span(class='{{user.preferences.size}}_armor_rogue_5')
            span(class='head_base_0')
            span(class='hair_base_{{user.preferences.hair.base}}_{{user.preferences.hair.color}}')
            span(class='hair_bangs_{{user.preferences.hair.bangs}}_{{user.preferences.hair.color}}')
            span(class='hair_beard_{{user.preferences.hair.beard}}_{{user.preferences.hair.color}}')
            span(class='hair_mustache_{{user.preferences.hair.mustache}}_{{user.preferences.hair.color}}')
            span(class='head_rogue_5')
            span(class='shield_rogue_5')
            span(class='weapon_rogue_6')
      .span3(ng-click='selectedClass = "healer"')
        h5 Healer
        figure.herobox(ng-class='{"selected-class": selectedClass=="healer"}')
          .character-sprites
            span(class='skin_{{user.preferences.skin}}')
            span(class='{{user.preferences.size}}_armor_healer_5')
            span(class='head_base_0')
            span(class='hair_base_{{user.preferences.hair.base}}_{{user.preferences.hair.color}}')
            span(class='hair_bangs_{{user.preferences.hair.bangs}}_{{user.preferences.hair.color}}')
            span(class='hair_beard_{{user.preferences.hair.beard}}_{{user.preferences.hair.color}}')
            span(class='hair_mustache_{{user.preferences.hair.mustache}}_{{user.preferences.hair.color}}')
            span(class='head_healer_5')
            span(class='shield_healer_5')
            span(class='weapon_healer_6')
    br
    .well(ng-show='selectedClass=="warrior"') Warriors deal moderate damage to tasks and have moderate defense against tasks.
    .well(ng-show='selectedClass=="wizard"') Wizards deal high damage to task, and can cast debuff spells on multiple tasks.
    .well(ng-show='selectedClass=="rogue"') Rogues finds more drops, Gold, and have a high chance of dealing "critical hits," which grant large GP & Exp bonuses. Rogues can also "go stealth" to avoid and entire day of dailies.
    .well(ng-show='selectedClass=="healer"') Healers have high defense against damage, and can heal themselves and other players in the party, as well as buff players.

  .modal-footer
    button.btn.btn-default.cancel(ng-click='changeClass(selectedClass)') Select