Implemented stat comparison bars on ChooseHeroView.

This commit is contained in:
Nick Winter 2014-10-25 21:53:55 -07:00
parent 3f5f292f0d
commit 6473fff940
4 changed files with 138 additions and 40 deletions

View file

@ -297,8 +297,10 @@
programming_language_description: "Which programming language do you want to use?"
status: "Status"
weapons: "Weapons"
attack: "Damage" # Can also translate as "Attack"
health: "Health"
speed: "Speed"
skills: "Skills"
save_load:
granularity_saved_games: "Saved"

View file

@ -79,7 +79,27 @@ $heroCanvasHeight: 265px
.hero-stats
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6)
font-size: 24px
.hero-class, .hero-status, .hero-skills
font-size: 14px
.hero-stat
margin: 10px 0
.progress
width: 90%
text-align: center
height: 26px
position: relative
margin: 0
.hero-stat-label
position: absolute
width: 100%
font-size: 18px
text-transform: uppercase
color: white
text-shadow: 0px 1px 0px black, 0px -1px 0px black, -1px 0px 0px black, 1px 0px 0px black
.carousel-control.left
border-top-left-radius: 10px

View file

@ -16,25 +16,40 @@
img
.hero-stats
h2= info.fullName
p
//.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
p
.hero-class
span(data-i18n="choose_hero.weapons") Weapons
span.spr :
| #{info.weapons}
p
span(data-i18n="choose_hero.health") Health
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.health}
p
span(data-i18n="choose_hero.speed") Speed
| #{info[statInfo.name]}
if info.skills
.hero-skills
span(data-i18n="choose_hero.skills") Skills
span.spr :
| #{info.speed}
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")

View file

@ -65,6 +65,7 @@ module.exports = class ChooseHeroView extends CocoView
heroIndex = Math.max 0, _.findIndex(heroes, ((hero) -> hero.get('original') is heroConfig.thangType))
@$el.find(".hero-item:nth-child(#{heroIndex + 1}), .hero-indicator:nth-child(#{heroIndex + 1})").addClass('active')
@onHeroChanged direction: null, relatedTarget: @$el.find('.hero-item')[heroIndex]
@$el.find('.hero-stat').tooltip()
onHeroChanged: (e) ->
direction = e.direction # 'left' or 'right'
@ -161,65 +162,125 @@ module.exports = class ChooseHeroView extends CocoView
temporaryHeroInfo =
captain:
fullName: 'Captain Anya Weston'
weapons: 'Razor Discs'
status: 'Available'
health: '35'
speed: '4 m/s'
knight:
fullName: 'Tharin Thunderfist'
weapons: 'Swords'
weapons: 'Swords - Short Range, No Magic'
class: 'Warrior'
description: 'Beefcake! Beefcaaake!'
status: 'Available'
health: '35'
speed: '4 m/s'
attack: 8
attackFactor: 1.2
health: 8.5
healthFactor: 1.4
speed: 1.5
speedAbsolute: 6
captain:
fullName: 'Captain Anya Weston'
weapons: 'Swords - Short Range, No Magic'
class: 'Warrior'
description: 'Don\'t bother me, I\'m winning this fight for you.'
status: 'Available'
attack: 8
attackFactor: 1.2
health: 8.5
healthFactor: 1.4
speed: 1.5
speedAbsolute: 6
thoktar:
fullName: 'Thoktar the Devourer'
weapons: 'Magic'
weapons: 'Wands, Staffs - Long Range, Magic'
class: 'Wizard'
description: '???'
status: 'Locked'
health: '???'
speed: '???'
attack: 5
attackFactor: 2
health: 4.5
healthFactor: 1.4
speed: 2.5
speedAbsolute: 7
skills: ['summonElemental', 'devour']
equestrian:
fullName: 'Rider Reynaldo'
weapons: 'Axes'
weapons: 'Crossbows, Guns - Long Range, No Magic'
class: 'Ranger'
description: '???'
status: 'Locked'
health: '???'
speed: '???'
attack: 6
attackFactor: 1.4
health: 7
healthFactor: 1.8
speed: 1.5
speedAbsolute: 6
skills: ['hide']
'potion-master':
fullName: 'Master Snake'
weapons: 'Magic'
weapons: 'Wands, Staffs - Long Range, Magic'
class: 'Wizard'
description: '???'
status: 'Locked'
health: '???'
speed: '???'
attack: 2
attackFactor: 0.833
health: 4
healthFactor: 1.2
speed: 6
speedAbsolute: 11
skills: ['brewPotion']
librarian:
fullName: 'Hushbaum'
weapons: 'Magic'
weapons: 'Wands, Staffs - Long Range, Magic'
class: 'Wizard'
description: '???'
status: 'Locked'
health: '???'
speed: '???'
attack: 3
attackFactor: 1.2
health: 4.5
healthFactor: 1.4
speed: 2.5
speedAbsolute: 7
'robot-walker':
fullName: '???'
weapons: '???'
class: 'Ranger'
description: '???'
status: 'Locked'
health: '???'
speed: '???'
attack: 6.5
attackFactor: 1.6
health: 5.5
healthFactor: 1.2
speed: 6
speedAbsolute: 11
skills: ['???', '???', '???']
'michael-heasell':
fullName: '???'
weapons: '???'
class: 'Ranger'
description: '???'
status: 'Locked'
health: '???'
speed: '???'
attack: 4
attackFactor: 0.714
health: 5
healthFactor: 1
speed: 10
speedAbsolute: 16
skills: ['???', '???']
'ian-elliott':
fullName: '???'
weapons: '???'
weapons: 'Swords - Short Range, No Magic'
class: 'Warrior'
description: '???'
status: 'Locked'
health: '???'
speed: '???'
attack: 9.5
attackFactor: 1.8
health: 6.5
healthFactor: 0.714
speed: 3.5
speedAbsolute: 8
skills: ['trueStrike']