mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-26 14:03:28 -04:00
Implemented new playback scrubber textures.
This commit is contained in:
Nick Winter
parent
49b8c745a0
commit
f461aeca95
11 changed files with 141 additions and 215 deletions
app
assets/images/level
styles
templates/play/level
views/play/level
Binary file not shown.
|
Before 
(image error) Size: 19 KiB After 
(image error) Size: 13 KiB
|
|
|
@ -153,40 +153,6 @@ a
|
|||
cursor: pointer
|
||||
|
||||
|
||||
// Bigger versions of some Bootstrap icons
|
||||
// TODO: make the non-white versions of these if we ever need them
|
||||
.icon.big
|
||||
background-image: url(/images/pages/base/glyphicons-simplified.png)
|
||||
|
||||
.icon-white.big
|
||||
background-image: url(/images/pages/base/glyphicons-simplified.png)
|
||||
|
||||
.icon.big, .icon-white.big
|
||||
width: 19px
|
||||
height: 19px
|
||||
line-height: 19px
|
||||
|
||||
.icon-pause.big
|
||||
background-position: -114px 0px
|
||||
|
||||
.icon-play.big
|
||||
background-position: -95px 0px
|
||||
|
||||
.icon-repeat.big
|
||||
background-position: -76px 0px
|
||||
|
||||
.icon-volume-off.big
|
||||
background-position: -57px 0px
|
||||
|
||||
.icon-volume-down.big
|
||||
background-position: -38px 0px
|
||||
|
||||
.icon-volume-up.big
|
||||
background-position: -19px 0px
|
||||
|
||||
.icon-cog.big
|
||||
background-position: 0px 0px
|
||||
|
||||
// loading screens for everything but the play view
|
||||
.loading-screen
|
||||
.progress
|
||||
|
|
@ -339,3 +305,7 @@ kbd
|
|||
&.gem-60
|
||||
width: 60px
|
||||
height: 60px
|
||||
|
||||
.popover
|
||||
border-image: url(/images/level/popover_background.png) 29 39 fill stretch
|
||||
border-width: 15px 20px
|
||||
|
|
|
|||
|
|
@ -144,14 +144,6 @@ $level-resize-transition-time: 0.5s
|
|||
left: -3px
|
||||
bottom: 0
|
||||
|
||||
#hud-top-gradient
|
||||
top: -32px
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
height: 3px
|
||||
|
||||
#canvas-left-gradient
|
||||
left: 0px
|
||||
width: 5px
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
background: transparent url(/images/level/goals_background.png)
|
||||
background-size: 100% 100%
|
||||
|
||||
padding: 19px 17px 6px 25px
|
||||
padding: 19px 17px 2px 25px
|
||||
z-index: 3
|
||||
font-size: 14px
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
// TODO: Replace this devart with nice shinies
|
||||
|
||||
#multiplayer-status-view
|
||||
position: absolute
|
||||
|
||||
.player-count
|
||||
color: white
|
||||
.players-available
|
||||
|
|
|
|||
|
|
@ -2,50 +2,52 @@
|
|||
@import "app/styles/bootstrap/variables"
|
||||
|
||||
#playback-view
|
||||
$playback-button-color: rgb(248, 197, 146)
|
||||
// When 75% alpha, it will look like the rgb(194, 154, 114) from Heald's design
|
||||
width: 55%
|
||||
height: 30px
|
||||
height: 60px
|
||||
padding-top: 17px
|
||||
position: relative
|
||||
background: #383434
|
||||
// Counteract 50px height of absolutely positioned control bar.
|
||||
margin-top: 50px
|
||||
background: transparent url(/images/level/scrubber_background.png)
|
||||
background-size: 100% 100%
|
||||
// Counteract 50px height of absolutely positioned control bar, but overlap by 10px of jagged transparent top.
|
||||
margin-top: 50px - 10px
|
||||
z-index: 2
|
||||
|
||||
button
|
||||
height: 26px
|
||||
font-size: 26px
|
||||
margin-left: 10px
|
||||
background: transparent
|
||||
@include opacity(0.50)
|
||||
i
|
||||
@include opacity(0.75)
|
||||
color: $playback-button-color
|
||||
text-shadow: 1px 1px 0px black
|
||||
|
||||
.glyphicon
|
||||
position: relative
|
||||
|
||||
button:hover
|
||||
@include opacity(0.75)
|
||||
|
||||
@include opacity(1)
|
||||
|
||||
#play-button, #volume-button, #music-button
|
||||
float: left
|
||||
margin-left: 2px
|
||||
margin-top: 2px
|
||||
width: 25px
|
||||
position: relative
|
||||
|
||||
#music-button
|
||||
@include opacity(0.25)
|
||||
font-size: 20px
|
||||
@include opacity(0.5)
|
||||
span
|
||||
position: relative
|
||||
left: -3px
|
||||
top: -2px
|
||||
&:hover
|
||||
@include opacity(0.50)
|
||||
@include opacity(0.75)
|
||||
&.music-on
|
||||
@include opacity(0.50)
|
||||
@include opacity(0.75)
|
||||
&:hover
|
||||
@include opacity(0.75)
|
||||
@include opacity(1)
|
||||
|
||||
#play-button, #volume-button
|
||||
i
|
||||
.glyphicon
|
||||
display: none
|
||||
position: absolute
|
||||
left: 2px
|
||||
top: 2px
|
||||
|
||||
#settings-button
|
||||
padding-left: 4px
|
||||
|
|
@ -54,51 +56,58 @@
|
|||
#playback-settings
|
||||
float: right
|
||||
position: relative
|
||||
top: 2px
|
||||
margin-right: 2px
|
||||
ul i
|
||||
margin-right: 10px
|
||||
ul button
|
||||
margin: 0 10px
|
||||
li:hover
|
||||
background: #add8e6
|
||||
|
||||
#play-button.disabled i
|
||||
@include opacity(0.5)
|
||||
#play-button.playing i.icon-pause
|
||||
#play-button.disabled .glyphicon
|
||||
@include opacity(0.75)
|
||||
#play-button.playing .glyphicon-pause
|
||||
display: inline-block
|
||||
#play-button.paused i.icon-play
|
||||
#play-button.paused .glyphicon-play
|
||||
display: inline-block
|
||||
#play-button.ended i.icon-repeat
|
||||
#play-button.ended .glyphicon-repeat
|
||||
display: inline-block
|
||||
|
||||
#volume-button.vol-up i.icon-volume-up
|
||||
#volume-button.vol-up .glyphicon.glyphicon-volume-up
|
||||
display: inline-block
|
||||
#volume-button.vol-off i.icon-volume-off
|
||||
#volume-button.vol-off .glyphicon.glyphicon-volume-off
|
||||
display: inline-block
|
||||
@include opacity(0.50)
|
||||
@include opacity(0.75)
|
||||
&:hover
|
||||
@include opacity(0.75)
|
||||
#volume-button.vol-down i.icon-volume-down
|
||||
@include opacity(1)
|
||||
#volume-button.vol-down .glyphicon.glyphicon-volume-down
|
||||
display: inline-block
|
||||
|
||||
.scrubber
|
||||
position: absolute
|
||||
left: 100px
|
||||
top: 0px
|
||||
left: 170px
|
||||
top: 21px
|
||||
bottom: 0px
|
||||
right: 125px
|
||||
right: 175px
|
||||
background: rgb(3, 3, 3)
|
||||
height: 28px
|
||||
border: 1px solid rgb(67, 67, 44)
|
||||
border-radius: 14px
|
||||
|
||||
.scrubber-inner
|
||||
border: 1px solid rgb(44, 38, 29)
|
||||
width: 100%
|
||||
height: 100%
|
||||
border-radius: 14px
|
||||
padding: 6px 8px
|
||||
|
||||
.progress
|
||||
float: left
|
||||
width: 100%
|
||||
height: 14px
|
||||
margin-top: 8px
|
||||
height: 12px
|
||||
cursor: pointer
|
||||
overflow: visible
|
||||
border: 1px solid #444
|
||||
// Remove gradient background in favor of solid fill
|
||||
background-color: #888
|
||||
background-image: none
|
||||
border-radius: 0
|
||||
background: rgb(80, 67, 53)
|
||||
border-radius: 6px
|
||||
border: 0
|
||||
// Can't do this transition because handle then jitters, but would be good for streaming.
|
||||
//@include transition(width .2s linear)
|
||||
|
|
@ -113,19 +122,19 @@
|
|||
@include transition(width .0s linear)
|
||||
position: relative
|
||||
// Remove gradient background in favor of solid fill
|
||||
background-color: #67A4C8
|
||||
//background-image: none // gradient looks kind of cool though; keep it in
|
||||
background: rgb(245, 170, 49)
|
||||
border: 1px solid rgb(62, 45, 16)
|
||||
border-radius: 6px
|
||||
|
||||
.scrubber-handle
|
||||
cursor: pointer
|
||||
position: absolute
|
||||
right: -16px
|
||||
top: -9px
|
||||
background: transparent url(/images/level/playback_thumb.png)
|
||||
width: 32px
|
||||
height: 32px
|
||||
// z: above the gradient line bordering the playback bar
|
||||
z-index: 6
|
||||
right: -18px
|
||||
top: -11px
|
||||
background: transparent url(/images/level/scrubber_knob.png)
|
||||
background-size: contain
|
||||
width: 36px
|
||||
height: 36px
|
||||
|
||||
.ui-slider-handle
|
||||
height: 100%
|
||||
|
|
@ -140,3 +149,5 @@
|
|||
body.ipad #playback-view
|
||||
#playback-settings
|
||||
display: none
|
||||
.scrubber
|
||||
right: 25px
|
||||
|
|
|
|||
|
|
@ -124,14 +124,6 @@
|
|||
left: -3px
|
||||
bottom: 0
|
||||
|
||||
#hud-top-gradient
|
||||
top: -32px
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
height: 3px
|
||||
|
||||
#canvas-left-gradient
|
||||
left: 0px
|
||||
width: 5px
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
ul#primary-goals-list
|
||||
div.goals-status
|
||||
strong(data-i18n="play_level.goals") Goals
|
||||
span(data-i18n="play_level.goals") Goals
|
||||
span.spr :
|
||||
span(data-i18n="play_level.success").secret.goal-status.success Success!
|
||||
span(data-i18n="play_level.incomplete").secret.goal-status.incomplete Incomplete
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
#hud-top-gradient.gradient
|
||||
|
||||
.center
|
||||
|
||||
.thang-canvas-wrapper.thang-elem
|
||||
|
|
|
|||
|
|
@ -1,45 +1,29 @@
|
|||
button.btn.btn-xs.btn-inverse#play-button.paused(title="Ctrl/Cmd + P: Toggle level play/pause")
|
||||
i.icon-play.icon-white.big
|
||||
i.icon-pause.icon-white.big
|
||||
i.icon-repeat.icon-white.big
|
||||
.glyphicon.glyphicon-play
|
||||
.glyphicon.glyphicon-pause
|
||||
.glyphicon.glyphicon-repeat
|
||||
|
||||
button.btn.btn-xs.btn-inverse#volume-button(title="Adjust volume")
|
||||
i.icon-volume-off.icon-white.big
|
||||
i.icon-volume-down.icon-white.big
|
||||
i.icon-volume-up.icon-white.big
|
||||
.glyphicon.glyphicon-volume-off
|
||||
.glyphicon.glyphicon-volume-down
|
||||
.glyphicon.glyphicon-volume-up
|
||||
button.btn.btn-xs.btn-inverse#music-button(title="Toggle Music")
|
||||
span ♫
|
||||
|
||||
.scrubber
|
||||
.progress.secret#timeProgress
|
||||
.progress-bar
|
||||
.scrubber-handle
|
||||
.popover.fade.top.in#timePopover
|
||||
.arrow
|
||||
h3.popover-title
|
||||
.popover-content
|
||||
.scrubber-inner
|
||||
.progress.secret#timeProgress
|
||||
.progress-bar
|
||||
.scrubber-handle
|
||||
.popover.fade.top.in#timePopover
|
||||
.arrow
|
||||
h3.popover-title
|
||||
.popover-content
|
||||
|
||||
.btn-group.dropup#playback-settings
|
||||
button.btn.btn-xs.btn-inverse.toggle-fullscreen(title="Toggle fullscreen")
|
||||
i.icon-fullscreen.icon-white
|
||||
.glyphicon.glyphicon-fullscreen
|
||||
button.btn.btn-xs.btn-inverse#zoom-in-button(title="Zoom In (or scroll down)")
|
||||
i.icon-zoom-in.icon-white
|
||||
.glyphicon.glyphicon-zoom-in
|
||||
button.btn.btn-xs.btn-inverse#zoom-out-button(title="Zoom Out (or scroll up)")
|
||||
i.icon-zoom-out.icon-white
|
||||
button.btn.btn-xs.btn-inverse.dropdown-toggle(data-toggle="dropdown")#settings-button
|
||||
i.icon-cog.icon-white.big
|
||||
ul.dropdown-menu
|
||||
if me.get('name') == "Nick"
|
||||
li(title="Ctrl/Cmd + \\: Toggle debug display").selectable#debug-toggle
|
||||
i.icon-globe
|
||||
| Debug Mode
|
||||
i.icon-ok.secret
|
||||
li.selectable#view-keyboard-shortcuts
|
||||
i.icon-info-sign
|
||||
span(data-i18n="play_level.keyboard_shortcuts") Key Shortcuts
|
||||
li.selectable#edit-wizard-settings
|
||||
i.icon-user
|
||||
span(data-i18n="play_level.customize_wizard") Customize Wizard
|
||||
li.selectable#edit-editor-config
|
||||
i.icon-edit
|
||||
span(data-i18n="play_level.editor_config") Editor Config
|
||||
.glyphicon.glyphicon-zoom-out
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ module.exports = class LevelPlaybackView extends CocoView
|
|||
'level:scrub-forward': 'onScrubForward'
|
||||
'level:scrub-back': 'onScrubBack'
|
||||
'level:set-volume': 'onSetVolume'
|
||||
'level:set-debug': 'onSetDebug'
|
||||
'surface:frame-changed': 'onFrameChanged'
|
||||
'god:new-world-created': 'onNewWorld'
|
||||
'god:streaming-world-updated': 'onNewWorld'
|
||||
|
|
@ -28,10 +27,6 @@ module.exports = class LevelPlaybackView extends CocoView
|
|||
'real-time-multiplayer:manual-cast': 'onRealTimeMultiplayerCast'
|
||||
|
||||
events:
|
||||
'click #debug-toggle': 'onToggleDebug'
|
||||
'click #edit-wizard-settings': 'onEditWizardSettings'
|
||||
'click #edit-editor-config': 'onEditEditorConfig'
|
||||
'click #view-keyboard-shortcuts': 'onViewKeyboardShortcuts'
|
||||
'click #music-button': 'onToggleMusic'
|
||||
'click #zoom-in-button': -> Backbone.Mediator.publish 'camera:zoom-in', {} unless @shouldIgnore()
|
||||
'click #zoom-out-button': -> Backbone.Mediator.publish 'camera:zoom-out', {} unless @shouldIgnore()
|
||||
|
|
@ -52,59 +47,6 @@ module.exports = class LevelPlaybackView extends CocoView
|
|||
'⌘+], ctrl+]': 'onScrubForward'
|
||||
'⌘+⇧+], ctrl+⇧+]': 'onSingleScrubForward'
|
||||
|
||||
# popover that shows at the current mouse position on the progressbar, using the bootstrap popover.
|
||||
# Could make this into a jQuery plugins itself theoretically.
|
||||
class HoverPopup extends $.fn.popover.Constructor
|
||||
constructor: () ->
|
||||
@enabled = true
|
||||
@shown = false
|
||||
@type = 'HoverPopup'
|
||||
@options =
|
||||
placement: 'top'
|
||||
container: 'body'
|
||||
animation: true
|
||||
html: true
|
||||
delay:
|
||||
show: 400
|
||||
@$element = $('#timeProgress')
|
||||
@$tip = $('#timePopover')
|
||||
|
||||
@content = ''
|
||||
|
||||
getContent: -> @content
|
||||
|
||||
show: ->
|
||||
unless @shown
|
||||
super()
|
||||
@shown = true
|
||||
|
||||
updateContent: (@content) ->
|
||||
@setContent()
|
||||
@$tip.addClass('fade top in')
|
||||
|
||||
onHover: (@e) ->
|
||||
pos = @getPosition()
|
||||
actualWidth = @$tip[0].offsetWidth
|
||||
actualHeight = @$tip[0].offsetHeight
|
||||
calculatedOffset =
|
||||
top: pos.top - actualHeight
|
||||
left: pos.left + pos.width / 2 - actualWidth / 2
|
||||
this.applyPlacement(calculatedOffset, 'top')
|
||||
|
||||
getPosition: ->
|
||||
top: @$element.offset().top
|
||||
left: if @e? then @e.pageX else @$element.offset().left
|
||||
height: 0
|
||||
width: 0
|
||||
|
||||
hide: ->
|
||||
super()
|
||||
@shown = false
|
||||
|
||||
disable: ->
|
||||
super()
|
||||
@hide()
|
||||
|
||||
constructor: ->
|
||||
super(arguments...)
|
||||
me.on('change:music', @updateMusicButton, @)
|
||||
|
|
@ -192,20 +134,6 @@ module.exports = class LevelPlaybackView extends CocoView
|
|||
@currentTime = 0
|
||||
@lastLoadedFrameCount = loadedFrameCount
|
||||
|
||||
onToggleDebug: ->
|
||||
return if @shouldIgnore()
|
||||
flag = $('#debug-toggle i.icon-ok')
|
||||
Backbone.Mediator.publish('level:set-debug', {debug: flag.hasClass('invisible')})
|
||||
|
||||
onEditWizardSettings: ->
|
||||
Backbone.Mediator.publish 'level:edit-wizard-settings', {}
|
||||
|
||||
onEditEditorConfig: ->
|
||||
@openModalView new EditorConfigModal session: @options.session
|
||||
|
||||
onViewKeyboardShortcuts: ->
|
||||
@openModalView new KeyboardShortcutsModal()
|
||||
|
||||
onDisableControls: (e) ->
|
||||
if not e.controls or 'playback' in e.controls
|
||||
@disabled = true
|
||||
|
|
@ -340,10 +268,6 @@ module.exports = class LevelPlaybackView extends CocoView
|
|||
Backbone.Mediator.publish 'level:set-letterbox', on: false
|
||||
Backbone.Mediator.publish 'playback:real-time-playback-ended', {}
|
||||
|
||||
onSetDebug: (e) ->
|
||||
flag = $('#debug-toggle i.icon-ok')
|
||||
flag.toggleClass 'invisible', not e.debug
|
||||
|
||||
# to refactor
|
||||
|
||||
hookUpScrubber: ->
|
||||
|
|
@ -423,3 +347,56 @@ module.exports = class LevelPlaybackView extends CocoView
|
|||
$(window).off('resize', @onWindowResize)
|
||||
@onWindowResize = null
|
||||
super()
|
||||
|
||||
# popover that shows at the current mouse position on the progressbar, using the bootstrap popover.
|
||||
# Could make this into a jQuery plugins itself theoretically.
|
||||
class HoverPopup extends $.fn.popover.Constructor
|
||||
constructor: () ->
|
||||
@enabled = true
|
||||
@shown = false
|
||||
@type = 'HoverPopup'
|
||||
@options =
|
||||
placement: 'top'
|
||||
container: 'body'
|
||||
animation: true
|
||||
html: true
|
||||
delay:
|
||||
show: 400
|
||||
@$element = $('#timeProgress')
|
||||
@$tip = $('#timePopover')
|
||||
|
||||
@content = ''
|
||||
|
||||
getContent: -> @content
|
||||
|
||||
show: ->
|
||||
unless @shown
|
||||
super()
|
||||
@shown = true
|
||||
|
||||
updateContent: (@content) ->
|
||||
@setContent()
|
||||
@$tip.addClass('fade top in')
|
||||
|
||||
onHover: (@e) ->
|
||||
pos = @getPosition()
|
||||
actualWidth = @$tip[0].offsetWidth
|
||||
actualHeight = @$tip[0].offsetHeight
|
||||
calculatedOffset =
|
||||
top: pos.top - actualHeight
|
||||
left: pos.left + pos.width / 2 - actualWidth / 2
|
||||
this.applyPlacement(calculatedOffset, 'top')
|
||||
|
||||
getPosition: ->
|
||||
top: @$element.offset().top
|
||||
left: if @e? then @e.pageX else @$element.offset().left
|
||||
height: 0
|
||||
width: 0
|
||||
|
||||
hide: ->
|
||||
super()
|
||||
@shown = false
|
||||
|
||||
disable: ->
|
||||
super()
|
||||
@hide()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue