codecombat/app/templates/game-menu/choose-hero-view.jade
2014-11-09 20:19:12 -08:00

65 lines
3 KiB
Text

#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.get('name'), data-slide-to=index, data-target="#hero-carousel", class="hero-indicator" + (hero.locked ? " locked" : ""))
.hero-avatar
if hero.locked
img.lock-indicator(src="/images/pages/game-menu/lock.png")
.carousel-inner
for hero in heroes
- var info = heroInfo[hero.get('slug')]
div(class="item hero-item" + (hero.locked ? " locked" : ""), data-hero-id=hero.get('original'))
canvas.hero-canvas
.hero-feature-image
img
.hero-stats
h2= info.fullName
//.hero-description= info.description // Not until we have written the descriptions.
.hero-status
span(data-i18n="choose_hero.status") Status
span.spr :
if hero.locked
| #{info.status}
else
| Available
.hero-class
span(data-i18n="choose_hero.weapons") Weapons
span.spr :
| #{info.weapons}
for statInfo in [{name: 'attack', color: 'danger'}, {name: 'health', color: 'info'}, {name: 'speed', color: 'success'}]
- var tooltip = "";
- if (statInfo.name == 'attack')
- tooltip = Math.round(100 * info[statInfo.name + 'Factor']) + '% ' + info.class.toLowerCase() + ' weapon damage';
- else if (statInfo.name == 'health')
- tooltip = Math.round(100 * info[statInfo.name + 'Factor']) + '% ' + info.class.toLowerCase() + ' armor health';
- else if (statInfo.name == 'speed')
- tooltip = info.speedAbsolute + ' meters per second';
.hero-stat(title=tooltip)
.progress
div(class="progress-bar progress-bar-" + statInfo.color, style="width: " + (10 * info[statInfo.name]) + "%")
.hero-stat-label
span(data-i18n="choose_hero." + statInfo.name)
span.spr :
| #{info[statInfo.name]}
if info.skills
.hero-skills
span(data-i18n="choose_hero.skills") Skills
span.spr :
for skill in info.skills
code.spl.spr= skill
a.carousel-control.left(role="button", data-slide="prev", href="#hero-carousel")
span.glyphicon.glyphicon-chevron-left
a.carousel-control.right(role="button", data-slide="next", href="#hero-carousel")
span.glyphicon.glyphicon-chevron-right
.form
.form-group.select-group
//span.help-block(data-i18n="choose_hero.programming_language_description") Which programming language do you want to use?
label.control-label(for="option-code-language", data-i18n="choose_hero.programming_language") Programming Language
select#option-code-language(name="code-language")
for option in codeLanguages
option(value=option.id, selected=codeLanguage === option.id)= option.name