codecombat/app/templates/play/modal/play-heroes-modal.jade

88 lines
4 KiB
Text
Raw Normal View History

.modal-dialog
.modal-content
img(src="/images/pages/play/modal/heroes-background.png", draggable="false")#play-heroes-background
h1(data-i18n="choose_hero.choose_hero")
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
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" : ""))
.hero-avatar
if hero.locked && !hero.purchasable
img.lock-indicator(src="/images/pages/game-menu/lock.png", draggable="false")
.carousel-inner
for hero in heroes
div(class="item hero-item" + (hero.locked ? " locked" : "") + (hero.purchasable ? " purchasable" : "") + (hero.restricted ? " restricted" : ""), data-hero-id=hero.get('original'))
canvas.hero-canvas
.hero-feature-image
img(draggable="false")
.hero-stats
h2= hero.name
.hero-description= hero.description
.hero-stat-row
.stat-label(data-i18n='choose_hero.status')
.stat-value.hero-status-value(data-i18n=hero.restricted ? 'inventory.restricted_title' : (hero.purchasable ? 'play.purchasable' : (hero.locked ? 'play.locked' : 'play.available')))
.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']
.hero-stat-row(class=stat)
.stat-label(data-i18n='choose_hero.'+stat)
.stat-value
.stat-progress
.stat-progress-bar(style="width: " + (parseInt(hero.stats[stat]*100)) + "%")
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
#hero-footer
if visibleHero
if visibleHero.restricted
#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.
else if visibleHero.purchasable
#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
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)