2014-11-05 22:03:05 -05:00
|
|
|
.modal-dialog
|
|
|
|
|
.modal-content
|
2014-09-17 21:56:08 -04:00
|
|
|
|
2014-11-19 19:36:06 -05:00
|
|
|
img(src="/images/pages/play/modal/heroes-background.png", draggable="false")#play-heroes-background
|
2014-11-05 22:03:05 -05:00
|
|
|
|
|
|
|
|
h1(data-i18n="choose_hero.choose_hero")
|
2014-09-17 21:56:08 -04:00
|
|
|
|
2014-11-30 17:00:29 -05:00
|
|
|
div#gems-count-container
|
|
|
|
|
span#gems-count
|
|
|
|
|
.gem.gem-20
|
|
|
|
|
span.spl= gems
|
|
|
|
|
|
2014-11-05 22:03:05 -05:00
|
|
|
div#close-modal
|
|
|
|
|
span.glyphicon.glyphicon-remove
|
|
|
|
|
|
|
|
|
|
#hero-carousel.carousel.slide(data-interval=0)
|
|
|
|
|
.carousel-indicator-container
|
|
|
|
|
ol.carousel-indicators
|
|
|
|
|
for hero, index in heroes
|
2014-11-26 11:53:06 -05:00
|
|
|
li(data-hero-id=hero.get('original'), title=hero.name, data-slide-to=index, data-target="#hero-carousel", class="hero-indicator hero-index-" + index + (hero.locked ? " locked" : "") + (hero.purchasable ? " purchasable" : "") + (hero.restricted ? " restricted" : ""))
|
2014-11-05 22:03:05 -05:00
|
|
|
.hero-avatar
|
2014-11-25 12:28:42 -05:00
|
|
|
if hero.locked && !hero.purchasable
|
2014-12-10 13:37:57 -05:00
|
|
|
if isIE
|
|
|
|
|
img.lock-indicator(src="/images/pages/game-menu/lock-processed.png", draggable="false")
|
|
|
|
|
else
|
|
|
|
|
img.lock-indicator(src="/images/pages/game-menu/lock.png", draggable="false")
|
2014-11-05 22:03:05 -05:00
|
|
|
.carousel-inner
|
|
|
|
|
for hero in heroes
|
2014-11-26 11:53:06 -05:00
|
|
|
div(class="item hero-item" + (hero.locked ? " locked" : "") + (hero.purchasable ? " purchasable" : "") + (hero.restricted ? " restricted" : ""), data-hero-id=hero.get('original'))
|
2014-11-05 22:03:05 -05:00
|
|
|
canvas.hero-canvas
|
|
|
|
|
.hero-feature-image
|
2014-11-19 19:36:06 -05:00
|
|
|
img(draggable="false")
|
2014-11-05 22:03:05 -05:00
|
|
|
.hero-stats
|
|
|
|
|
h2= hero.name
|
|
|
|
|
.hero-description= hero.description
|
|
|
|
|
|
|
|
|
|
.hero-stat-row
|
|
|
|
|
.stat-label(data-i18n='choose_hero.status')
|
2014-11-26 11:53:06 -05:00
|
|
|
.stat-value.hero-status-value(data-i18n=hero.restricted ? 'inventory.restricted_title' : (hero.purchasable ? 'play.purchasable' : (hero.locked ? 'play.locked' : 'play.available')))
|
2015-02-16 10:50:01 -05:00
|
|
|
|
|
|
|
|
.hero-stat-row
|
|
|
|
|
.stat-label(data-i18n='choose_hero.hero_type')
|
|
|
|
|
.stat-value(data-i18n='general.' +hero.class)
|
|
|
|
|
|
2014-11-05 22:03:05 -05:00
|
|
|
.hero-stat-row
|
|
|
|
|
.stat-label(data-i18n='choose_hero.weapons')
|
|
|
|
|
.stat-value(data-i18n='choose_hero.weapons_'+hero.class)
|
|
|
|
|
|
|
|
|
|
if hero.stats
|
|
|
|
|
if hero.stats.skills.length
|
|
|
|
|
.hero-stat-row
|
|
|
|
|
.stat-label(data-i18n='choose_hero.skills')
|
|
|
|
|
.stat-value= hero.stats.skills.join(', ')
|
|
|
|
|
for stat in ['attack', 'health', 'speed']
|
2015-02-26 11:02:22 -05:00
|
|
|
.hero-stat-row(class=stat, title=hero.stats[stat].description)
|
2014-11-05 22:03:05 -05:00
|
|
|
.stat-label(data-i18n='choose_hero.'+stat)
|
|
|
|
|
.stat-value
|
|
|
|
|
.stat-progress
|
2015-02-26 11:02:22 -05:00
|
|
|
.stat-progress-bar(style="width: " + (parseInt(hero.stats[stat].relative * 100)) + "%")
|
2014-11-05 22:03:05 -05:00
|
|
|
|
|
|
|
|
a.left(role="button", data-slide="prev", href="#hero-carousel")
|
|
|
|
|
span.glyphicon.glyphicon-play
|
|
|
|
|
a.right(role="button", data-slide="next", href="#hero-carousel")
|
|
|
|
|
span.glyphicon.glyphicon-play
|
2014-11-25 12:28:42 -05:00
|
|
|
|
|
|
|
|
#hero-footer
|
|
|
|
|
if visibleHero
|
2014-11-30 17:00:29 -05:00
|
|
|
if !visibleHero.get('original')
|
|
|
|
|
#loading-hero-explanation
|
|
|
|
|
h2(data-i18n="common.loading") Loading...
|
|
|
|
|
|
|
|
|
|
else if visibleHero.restricted
|
2014-11-26 11:53:06 -05:00
|
|
|
#restricted-hero-explanation
|
|
|
|
|
h2
|
|
|
|
|
span= visibleHero.name
|
|
|
|
|
span.spl(data-i18n="inventory.restricted_title") Restricted
|
|
|
|
|
span.spr(data-i18n="choose_hero.restricted_to_certain_heroes") Only certain heroes can play this level.
|
2014-12-04 16:43:19 -05:00
|
|
|
button.btn.disabled.btn-illustrated#restricted-hero-button(data-i18n="inventory.restricted_title") Restricted
|
2014-11-26 11:53:06 -05:00
|
|
|
|
|
|
|
|
else if visibleHero.purchasable
|
2014-11-25 12:28:42 -05:00
|
|
|
#purchasable-hero-explanation
|
|
|
|
|
h2(data-i18n="choose_hero.available_for_purchase") Available for Purchase
|
|
|
|
|
button.btn.unlock-button#purchase-hero-button
|
|
|
|
|
span.spr(data-i18n="play.unlock") Unlock
|
2014-12-04 16:57:21 -05:00
|
|
|
- if(!visibleHero.get('gems')) {
|
|
|
|
|
- console.error('Huh, we loaded the hero with no gem cost.');
|
2015-04-06 13:52:55 -04:00
|
|
|
- visibleHero.set('gems', {ninja: 400, librarian: 630, samurai: 1000, trapper: 1400, "potion-master": 1800, "forest-archer": 2500, sorcerer: 3400, raiser: 4600, necromancer: 6300, pixie: 8500, goliath: 12000, guardian: 16000, "dark-wizard": 21000, assassin: 29000}[visibleHero.get('slug')] || 99999);
|
2014-12-04 16:57:21 -05:00
|
|
|
- }
|
2014-11-25 12:28:42 -05:00
|
|
|
span= visibleHero.get('gems')
|
|
|
|
|
span.gem.gem-20
|
|
|
|
|
|
|
|
|
|
else if visibleHero.locked
|
|
|
|
|
#locked-hero-explanation
|
|
|
|
|
h2
|
|
|
|
|
span= visibleHero.name
|
|
|
|
|
span.spl(data-i18n="play.locked") Locked
|
|
|
|
|
span.spr(data-i18n="choose_hero.level_to_unlock") Level to unlock:
|
|
|
|
|
strong= visibleHero.unlockLevelName || '???'
|
|
|
|
|
|
|
|
|
|
else if visibleHero.loaded
|
|
|
|
|
.form
|
|
|
|
|
.form-group.select-group
|
|
|
|
|
span.help-block(data-i18n="choose_hero.programming_language_description") Which programming language do you want to use?
|
|
|
|
|
select#option-code-language(name="code-language")
|
|
|
|
|
for option in codeLanguages
|
|
|
|
|
option(value=option.id, selected=codeLanguage === option.id)= option.name
|
|
|
|
|
|
|
|
|
|
a#confirm-button(data-i18n=confirmButtonI18N)
|
