codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-14 05:55:00 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

First set of fixes to HeroVictoryModal.

Browse source
This commit is contained in:
Nick Winter 2014-10-17 17:57:18 -07:00
parent f75ff8a236
commit a71c591f54
2 changed files with 71 additions and 83 deletions
app
styles/play/level/modal
hero-victory-modal.sass
views/play/level/modal
HeroVictoryModal.coffee

117
app/styles/play/level/modal/hero-victory-modal.sass
View file

@ -1,18 +1,27 @@
@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
#hero-victory-modal
//- Top-level modal container
.modal-dialog
margin-top: 15px
padding-top: 0
//- Header
.background-wrapper
background: url("/images/pages/play/level/modal/victory_modal_background.png")
height: 650px
//background: url("/images/pages/play/level/modal/victory_modal_background.png")
width: 550px
border-width: 25px
border-image: url("/images/pages/play/level/modal/victory_modal_background.png") 25 fill round
border-radius: 10px
#victory-header
display: block
margin: 40px auto 0
margin: 15px auto 0
.modal-header
height: 110px
height: 85px
border: none
@ -28,10 +37,7 @@
margin: 5px auto
position: relative
-webkit-transition-duration: 1s
-moz-transition-duration: 1s
-o-transition-duration: 1s
transition-duration: 1s
@include transition-duration(1s)
-webkit-filter: grayscale(100%)
-moz-filter: grayscale(100%)
@ -66,7 +72,6 @@
//- Reward panels
.reward-panel
background: url("/images/pages/play/level/modal/reward_plate.png")
background: url("/images/pages/play/level/modal/reward_plate.png")
width: 77px
height: 85px
@ -81,21 +86,11 @@
width: 56px
position: relative
-webkit-transform: scale(0, 0)
-moz-transform: scale(0, 0)
-o-transform: scale(0, 0)
transform: scale(0, 0)
-webkit-transition-duration: 0.5s
-moz-transition-duration: 0.5s
-o-transition-duration: 0.5s
transition-duration: 0.5s
@include scale(0)
@include transition-duration(0.5s)
&.show
-webkit-transform: scale(1, 1)
-moz-transform: scale(1, 1)
-o-transform: scale(1, 1)
transform: scale(1, 1)
@include scale(1)
img
margin: 0
@ -103,17 +98,8 @@
top: 50%
left: 50%
margin-right: -50%
-webkit-transition-duration: 0.5s
-moz-transition-duration: 0.5s
-o-transition-duration: 0.5s
transition-duration: 0.5s
-webkit-transform: translate(-50%, -50%)
-moz-transform: translate(-50%, -50%)
-o-transform: translate(-50%, -50%)
transform: translate(-50%, -50%)
@include transition-duration(0.5s)
@include translate(-50%, -50%)
max-width: 56px
max-height: 55px
@ -134,55 +120,46 @@
//- Pulse effect
@-webkit-keyframes pulse
+keyframes(rewardPulse)
from
-webkit-transform: translate(-50%, -50%) scale(1.0)
max-width: 56px
max-height: 55px
50%
-webkit-transform: translate(-50%, -50%) scale(1.3)
width: 72px
max-width: 72px
max-height: 72px
to
-webkit-transform: translate(-50%, -50%) scale(1.0)
@-moz-keyframes pulse
from
-moz-transform: translate(-50%, -50%) scale(1.0)
50%
-moz-transform: translate(-50%, -50%) scale(1.3)
to
-moz-transform: translate(-50%, -50%) scale(1.0)
@-o-keyframes pulse
from
-o-transform: translate(-50%, -50%) scale(1.0)
50%
-o-transform: translate(-50%, -50%) scale(1.3)
to
-o-transform: translate(-50%, -50%) scale(1.0)
@keyframes pulse
from
transform: translate(-50%, -50%) scale(1.0)
50%
transform: translate(-50%, -50%) scale(1.3)
to
transform: translate(-50%, -50%) scale(1.0)
max-width: 56px
max-height: 55px
.pulse
-webkit-animation: pulse 0.5s infinite
-moz-animation: pulse 0.5s infinite
-o-animation: pulse 0.5s infinite
animation: pulse 0.5s infinite
@include animation(rewardPulse 0.15s infinite)
//- Footer
.modal-content
height: 650px // so the footer appears at the bottom
padding-bottom: 50px // so the footer appears at the bottom
.modal-footer
position: absolute
bottom: 20px
bottom: -20px
left: 20px
right: 20px
#totals
color: white
color: white
html.no-borderimage
#hero-victory-modal
.background-wrapper
background: url("/images/pages/play/level/modal/victory_modal_background.png")
height: 650px
#victory-header
margin-top: 40px
.modal-header
height: 110px
.modal-content
height: 650px
padding-bottom: 0
.modal-footer
bottom: 20px

37
app/views/play/level/modal/HeroVictoryModal.coffee
View file

@ -73,12 +73,12 @@ module.exports = class HeroVictoryModal extends ModalView
achievement.completedAWhileAgo = new Date() - Date.parse(earnedAchievement.get('created')) > 30 * 1000
c.achievements = @achievements.models
# for testing the three states
# if c.achievements.length
# c.achievements = [c.achievements[0].clone(), c.achievements[0].clone(), c.achievements[0].clone()]
# for achievement, index in c.achievements
# achievement.completed = index > 0
# achievement.completedAWhileAgo = index > 1
## for testing the three states
#if c.achievements.length
# c.achievements = [c.achievements[0].clone(), c.achievements[0].clone(), c.achievements[0].clone()]
#for achievement, index in c.achievements
# achievement.completed = index > 0
# achievement.completedAWhileAgo = index > 1
c.thangTypes = @thangTypes
return c
@ -116,8 +116,7 @@ module.exports = class HeroVictoryModal extends ModalView
unit: $(panel).data('number-unit')
})
# TODO: mess with this more later. Doesn't seem to work, often times will pulse background red rather than animate
# itemPanel.rootEl.find('.reward-image-container img').addClass('pulse') for itemPanel in @numericalItemPanels
itemPanel.rootEl.find('.reward-image-container img').addClass('pulse') for itemPanel in @numericalItemPanels
@numberAnimationStart = new Date()
@totalXP = 0
@totalXP += panel.number for panel in @numericalItemPanels when panel.unit is 'xp'
@ -128,11 +127,21 @@ module.exports = class HeroVictoryModal extends ModalView
@numberAnimationInterval = setInterval(@tickNumberAnimation, 15 / 1000)
tickNumberAnimation: =>
pct = Math.min(1, (new Date() - @numberAnimationStart) / 1500)
panel.textEl.text('+'+parseInt(panel.number*pct)) for panel in @numericalItemPanels
@XPEl.text('+'+parseInt(@totalXP * pct))
@gemEl.text('+'+parseInt(@totalGems * pct))
@endAnimateNumbers() if pct is 1
# TODO: make these tick serially
# TODO: make each panel huge while it's ticking
# TODO: only play a sound when an integer tick up happens
# TODO: make sure the animation pulses happen when the numbers go up and sounds play (up to a max speed)
# TODO: add easing so that the counts start slow and speed up, then end slow (easeInOut)
# TODO: make each animation slightly longer if it has lots of stuff to animate, faster if not much to animate
ratio = Math.min(1, (new Date() - @numberAnimationStart) / 1500)
panel.textEl.text('+'+parseInt(panel.number * ratio)) for panel in @numericalItemPanels
@XPEl.text('+'+parseInt(@totalXP * ratio))
@gemEl.text('+'+parseInt(@totalGems * ratio))
@endAnimateNumbers() if ratio is 1
xpTrigger = 'xp-' + (parseInt(panel.number * ratio) % 6) # 6 xp sounds
gemTrigger = 'gem-' + (parseInt(panel.number * ratio) % 4) # 4 gem sounds
Backbone.Mediator.publish 'audio-player:play-sound', trigger: xpTrigger, volume: 0.5 + ratio / 2
Backbone.Mediator.publish 'audio-player:play-sound', trigger: gemTrigger, volume: 0.5 + ratio / 2
endAnimateNumbers: ->
@$el.find('.pulse').removeClass('pulse')
@ -144,3 +153,5 @@ module.exports = class HeroVictoryModal extends ModalView
return unless @animationComplete
@$el.find('#saving-progress-label').toggleClass('hide', @readyToContinue)
@$el.find('#continue-button').toggleClass('hide', not @readyToContinue)
# TODO: award heroes/items and play an awesome sound when you get one