codeninjasllc/codecombat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request from rhc2104/press-esc

Browse source 
Create notification that esc can skip dialogs
This commit is contained in:
Nick Winter 2014-01-08 14:35:58 -08:00
commit 2fdb8c2dc2
2 changed files with 38 additions and 31 deletions
app
styles/play/level
hud.sass
views/play/level
hud_view.coffee

66
app/styles/play/level/hud.sass
View file

@ -26,7 +26,7 @@
width: 55% width: 55%
height: 120px height: 120px
position: relative position: relative
.left-wing .left-wing
position: absolute position: absolute
width: 50% width: 50%
@ -46,7 +46,7 @@
z-index: -1 z-index: -1
background-image: url(/images/level/hud_right_wing.png) background-image: url(/images/level/hud_right_wing.png)
background-position: left background-position: left
.center .center
width: 520px width: 520px
height: 116px height: 116px
@ -74,7 +74,7 @@
&.team-ogres &.team-ogres
border-color: darkblue border-color: darkblue
.thang-props .thang-props
width: 144px width: 144px
height: 100px height: 100px
@ -85,10 +85,10 @@
.prop .prop
img img
margin-right: 5px margin-right: 5px
.text-prop .text-prop
width: 50% width: 50%
.prop-value.bar-prop .prop-value.bar-prop
width: 100px width: 100px
display: inline-block display: inline-block
@ -97,26 +97,26 @@
border: 1px solid black border: 1px solid black
border-radius: 6px border-radius: 6px
overflow: hidden overflow: hidden
.bar .bar
background: black background: black
width: 100% width: 100%
height: 100% height: 100%
.prop[name="health"] .bar .prop[name="health"] .bar
background: #C5362B background: #C5362B
.message .message
text-align: center text-align: center
display: table display: table
height: 100% height: 100%
width: 100% width: 100%
p p
display: table-cell display: table-cell
vertical-align: middle vertical-align: middle
font-size: 20px font-size: 20px
.thang-actions .thang-actions
width: 212px width: 212px
height: 100px height: 100px
@ -127,7 +127,7 @@
.table-container .table-container
position: relative position: relative
.progress-indicator .progress-indicator
position: absolute position: absolute
right: 45px right: 45px
@ -147,30 +147,30 @@
height: 100% height: 100%
top: 0 top: 0
background-color: #A4A198 background-color: #A4A198
table table
border: 1px solid #5B5855 border: 1px solid #5B5855
border-radius: 2px border-radius: 2px
line-height: 17px line-height: 17px
width: 100% width: 100%
tr tr
border: 1px solid #5b5855 border: 1px solid #5b5855
.action-indicator .action-indicator
width: 10px width: 10px
.action-label .action-label
width: 75px width: 75px
.action-timeline .action-timeline
padding: 0 padding: 0
.timeline-wrapper .timeline-wrapper
position: relative position: relative
width: 100% width: 100%
height: 19px height: 19px
div div
@include box-sizing(border-box) @include box-sizing(border-box)
background-color: #6BA1C8 background-color: #6BA1C8
@ -179,22 +179,22 @@
border-right: 1px solid #201B15 border-right: 1px solid #201B15
position: absolute position: absolute
top: 0 top: 0
.current-action .current-action
font-weight: bold font-weight: bold
.action-indicator .action-indicator
background: #4B4133 url(/images/level/current_action_indicator.png) no-repeat center background: #4B4133 url(/images/level/current_action_indicator.png) no-repeat center
td td
background-color: #4B4133 background-color: #4B4133
.dialogue-area .dialogue-area
opacity: 0.0 opacity: 0.0
position: relative position: relative
height: 100% height: 100%
width: 100% width: 100%
.bubble .bubble
position: absolute position: absolute
left: 140px left: 140px
@ -209,10 +209,14 @@
border-radius: 10px border-radius: 10px
font-size: 14px font-size: 14px
line-height: 18px line-height: 18px
strong strong
color: #09B057 color: #09B057
.hud-hint
font-weight: normal
color: #888888
.enter .enter
position: absolute position: absolute
right: 7px right: 7px
@ -225,22 +229,22 @@
right: 8px right: 8px
top: 9px top: 9px
border-radius: 5px border-radius: 5px
button, .alert button, .alert
padding: 2px 5px padding: 2px 5px
.enter button.with-dot .enter button.with-dot
padding-right: 20px padding-right: 20px
h3 h3
margin: 0 0 5px margin: 0 0 5px
font-size: 16px font-size: 16px
line-height: 16px line-height: 16px
color: #338 color: #338
button button
margin-left: 10px margin-left: 10px
.bubble:after .bubble:after
content: "" content: ""
position: absolute position: absolute
@ -252,7 +256,7 @@
display: block display: block
width: 0 width: 0
z-index: 1 z-index: 1
.bubble:before .bubble:before
content: "" content: ""
position: absolute position: absolute

3
app/views/play/level/hud_view.coffee
View file

@ -174,6 +174,8 @@ module.exports = class HUDView extends View
response.button = $('button:last', group) response.button = $('button:last', group)
else else
s = $.i18n.t('play_level.hud_continue', defaultValue: "Continue (press shift-space)") s = $.i18n.t('play_level.hud_continue', defaultValue: "Continue (press shift-space)")
if @shiftSpacePressed > 4
group.append('<span class="hud-hint">Press esc to skip dialog</span>')
group.append($('<button class="btn btn-small banner with-dot">' + s + ' <div class="dot"></div></button>')) group.append($('<button class="btn btn-small banner with-dot">' + s + ' <div class="dot"></div></button>'))
@lastResponses = null @lastResponses = null
@bubble.append($("<h3>#{@speaker ? 'Captain Anya'}</h3>")) @bubble.append($("<h3>#{@speaker ? 'Captain Anya'}</h3>"))
@ -196,6 +198,7 @@ module.exports = class HUDView extends View
@animator.tick() @animator.tick()
onShiftSpacePressed: (e) -> onShiftSpacePressed: (e) ->
@shiftSpacePressed = (@shiftSpacePressed || 0) + 1
# We don't need to handle end-current-script--that's done--but if we do have # We don't need to handle end-current-script--that's done--but if we do have
# custom buttons, then we need to trigger the one that should fire (the last one). # custom buttons, then we need to trigger the one that should fire (the last one).
# If we decide that always having the last one fire is bad, we should make it smarter. # If we decide that always having the last one fire is bad, we should make it smarter.