diff --git a/app/assets/images/level/control_bar_background.png b/app/assets/images/level/control_bar_background.png
index 1ae6f3035..06a150c20 100644
Binary files a/app/assets/images/level/control_bar_background.png and b/app/assets/images/level/control_bar_background.png differ
diff --git a/app/assets/images/level/control_bar_cap_left.png b/app/assets/images/level/control_bar_cap_left.png
new file mode 100644
index 000000000..be927198b
Binary files /dev/null and b/app/assets/images/level/control_bar_cap_left.png differ
diff --git a/app/assets/images/level/control_bar_cap_right.png b/app/assets/images/level/control_bar_cap_right.png
new file mode 100644
index 000000000..a1362e0d9
Binary files /dev/null and b/app/assets/images/level/control_bar_cap_right.png differ
diff --git a/app/assets/images/level/control_bar_chain_center.png b/app/assets/images/level/control_bar_chain_center.png
new file mode 100644
index 000000000..420d631a0
Binary files /dev/null and b/app/assets/images/level/control_bar_chain_center.png differ
diff --git a/app/assets/images/level/control_bar_chain_right.png b/app/assets/images/level/control_bar_chain_right.png
new file mode 100644
index 000000000..b618cb6b8
Binary files /dev/null and b/app/assets/images/level/control_bar_chain_right.png differ
diff --git a/app/assets/images/level/control_bar_level_name_background.png b/app/assets/images/level/control_bar_level_name_background.png
new file mode 100644
index 000000000..0babffd28
Binary files /dev/null and b/app/assets/images/level/control_bar_level_name_background.png differ
diff --git a/app/assets/images/level/goals_background.png b/app/assets/images/level/goals_background.png
new file mode 100644
index 000000000..fe066853a
Binary files /dev/null and b/app/assets/images/level/goals_background.png differ
diff --git a/app/assets/images/level/popover_background.png b/app/assets/images/level/popover_background.png
index 6ae968fca..214edeaae 100644
Binary files a/app/assets/images/level/popover_background.png and b/app/assets/images/level/popover_background.png differ
diff --git a/app/assets/images/level/scrubber_background.png b/app/assets/images/level/scrubber_background.png
new file mode 100644
index 000000000..a70abeb97
Binary files /dev/null and b/app/assets/images/level/scrubber_background.png differ
diff --git a/app/assets/images/level/scrubber_groove.png b/app/assets/images/level/scrubber_groove.png
new file mode 100644
index 000000000..ab5affbcd
Binary files /dev/null and b/app/assets/images/level/scrubber_groove.png differ
diff --git a/app/assets/images/level/scrubber_knob.png b/app/assets/images/level/scrubber_knob.png
new file mode 100644
index 000000000..191b75638
Binary files /dev/null and b/app/assets/images/level/scrubber_knob.png differ
diff --git a/app/locale/en.coffee b/app/locale/en.coffee
index a325dd93c..6b779508a 100644
--- a/app/locale/en.coffee
+++ b/app/locale/en.coffee
@@ -176,7 +176,8 @@
play_level:
done: "Done"
- home: "Home"
+ home: "Home" # Not used any more, will be removed soon.
+ level: "Level" # Like "Level: Dungeons of Kithgard"
skip: "Skip"
game_menu: "Game Menu"
guide: "Guide"
diff --git a/app/schemas/subscriptions/tome.coffee b/app/schemas/subscriptions/tome.coffee
index daf49e5d0..d5e061eb5 100644
--- a/app/schemas/subscriptions/tome.coffee
+++ b/app/schemas/subscriptions/tome.coffee
@@ -123,3 +123,6 @@ module.exports =
'tome:required-code-fragment-deleted': c.object {title: 'Required Code Fragment Deleted', description: 'Published when a required code fragment is deleted from the sample code.', required: ['codeFragment']},
codeFragment: {type: 'string'}
+
+ 'tome:winnability-updated': c.object {title: 'Winnability Updated', description: 'When we think we can now win (or can no longer win), we may want to emphasize the submit button versus the run button (or vice versa), so this fires when we get new goal states (even preloaded goal states) suggesting success or failure change.', required: ['winnable']},
+ winnable: {type: 'boolean'}
diff --git a/app/styles/game-menu/choose-hero-view.sass b/app/styles/game-menu/choose-hero-view.sass
index 92b6b286c..84ec3e356 100644
--- a/app/styles/game-menu/choose-hero-view.sass
+++ b/app/styles/game-menu/choose-hero-view.sass
@@ -167,3 +167,7 @@ $heroCanvasHeight: 265px
background-image: url(/images/common/code_languages/lua_small.png)
&[data-value="io"]
background-image: url(/images/common/code_languages/io_small.png)
+
+body.ipad #choose-hero-view
+ .form
+ display: none
diff --git a/app/styles/mixins.sass b/app/styles/mixins.sass
index c3ca386c1..a010728da 100644
--- a/app/styles/mixins.sass
+++ b/app/styles/mixins.sass
@@ -115,3 +115,13 @@
-webkit-flex-direction: column
-ms-flex-direction: column
-flex-direction: column
+
+@mixin scaleX($ratio)
+ -webkit-transform: scaleX($ratio)
+ -ms-transform: scaleX($ratio)
+ transform: scaleX($ratio)
+
+@mixin scaleXY($xRatio, $yRatio)
+ -webkit-transform: scaleX($xRatio) scaleY($yRatio)
+ -ms-transform: scaleX($xRatio) scaleY($yRatio)
+ transform: scaleX($xRatio) scaleY($yRatio)
diff --git a/app/styles/play/level.sass b/app/styles/play/level.sass
index b4d5e0548..d3acde0a0 100644
--- a/app/styles/play/level.sass
+++ b/app/styles/play/level.sass
@@ -58,6 +58,7 @@ $level-resize-transition-time: 0.5s
position: relative
#canvas-wrapper
+ top: 50px
width: 55%
position: relative
overflow: hidden
@@ -231,44 +232,23 @@ html.fullscreen-editor
right: 0
body.ipad #level-view
- // Full-width Surface, preserving aspect ratio.
- height: 1024px * (589 / 924)
+ // Full-width Surface, preserving aspect ratio, with space for control bar.
+ height: 1024px * (589 / 924) + 50px
overflow: hidden
#code-area, .footer, #thang-hud
display: none
- #control-bar-view
- position: absolute
- background: transparent
- z-index: 1
-
- .home
- i
- @include opacity(1)
- .home-text
- display: none
-
- .title
- left: 20%
- width: 60%
- text-align: center
- color: white
-
- a, .editor-dash
- display: none
-
#goals-view
left: 40px
#level-chat-view
- bottom: 40px
+ bottom: -10px
#playback-view
background-color: transparent
z-index: 3
- bottom: 30px
- margin-bottom: -30px
+ bottom: -20px
button
background-color: #333
diff --git a/app/styles/play/level/control_bar.sass b/app/styles/play/level/control_bar.sass
index 69d04bacd..8af3a1a9c 100644
--- a/app/styles/play/level/control_bar.sass
+++ b/app/styles/play/level/control_bar.sass
@@ -2,44 +2,171 @@
@import "app/styles/bootstrap/variables"
#control-bar-view
+ $control-yellow: rgb(227, 173, 53)
+ $control-yellow-highlight: rgb(243, 211, 59)
+
width: 55%
- padding: 8px 10px
- height: 30px
+ height: 50px
@include box-sizing(border-box)
- background: transparent url(/images/level/control_bar_background.png)
+ overflow: visible
+ position: absolute
+ z-index: 6
+ text-transform: uppercase
+ font-family: Open Sans Condensed
+ font-weight: bold
- //text-shadow: 0 1px 0 $navbarBackgroundHighlight
-
- .title
+ .levels-link-area
position: absolute
- left: 20%
- margin: 0
- color: #BEBEBE
- line-height: 15px
+ left: 40px
+ width: 160px
+ text-align: center
+
+ a.levels-link
+ margin: 0
+ height: 50px
+ line-height: 50px
+ color: white
+ font-size: 16px
+
+ .glyphicon
+ margin-left: -20px
+ margin-right: 10px
+ @include scaleXY(-1.25, 1.25)
+ color: $control-yellow
+ text-shadow: 1px 1px 0px rgb(143, 123, 62)
- .home
- float: left
- margin: 0
- line-height: 15px
+ &:hover .glyphicon
+ color: $control-yellow-highlight
- i
- float: left
- @include opacity(0.75)
- margin-right: 5px
- margin-left: -5px
+ .left-cap, .right-cap, .center-chain, .right-chain, .wood-background
+ position: absolute
+ top: 0
+ pointer-events: none
+
+ .left-cap
+ background: transparent url(/images/level/control_bar_cap_left.png)
+ background-size: cover
+ width: 217px
+ height: 63px
+ left: 0
- a
- color: #BEBEBE
- text-decoration: underline
+ .right-cap
+ background: transparent url(/images/level/control_bar_cap_right.png)
+ background-size: cover
+ right: 0
+ width: 78px
+ height: 60px
- button
- float: right
- margin-left: 10px
- position: relative
- top: -7px
- font-size: 13px
+ .center-chain
+ background: transparent url(/images/level/control_bar_chain_center.png)
+ background-size: cover
+ left: 30%
+ width: 111px
height: 24px
+ z-index: 1
+
+ .right-chain
+ background: transparent url(/images/level/control_bar_chain_right.png)
+ background-size: cover
+ top: 30px
+ right: 0
+ width: 97px
+ height: 51px
+ z-index: -1
+
+ .wood-background
+ background: transparent url(/images/level/control_bar_background.png)
+ background-size: contain
+ width: 100%
+ height: 55px
+ z-index: -1
+
+ .level-name-area-container
+ position: relative
+ width: 100%
+ height: 50px
+ pointer-events: none
+
+ .level-name-area
+ min-width: 200px
+ max-width: 293px
+ height: 60px
+ margin: 0 auto
+ padding: 8px
+ border-image: url(/images/level/control_bar_level_name_background.png) 30 fill round
+ border-width: 0 15px 15px 15px
+ text-align: center
+ position: absolute
+ left: 50%
+ @include translate(-50%, 0)
+
+ .level-label
+ font-size: 12px
+ color: $control-yellow-highlight
+ margin-bottom: -5px
+
+ .level-name
+ color: white
+ font-size: 18px
+
+ .buttons-area
+ position: absolute
+ right: 35px
+ top: 8px
+
+ button
+ float: right
+ margin-left: 10px
+ position: relative
+
+ #game-menu-button
+ background: transparent
+ border: 0
+ outline: 0
+ @include box-shadow(none)
+ text-transform: uppercase
+ font-size: 18px
+
+ .hamburger
+ display: inline-block
+
+ span.icon-bar
+ display: block
+ border-radius: 4px
+ width: 18px
+ height: 4px
+ margin: 4px
+ background: $control-yellow
+
+ .game-menu-text
+ display: inline-block
+ vertical-align: middle
+ margin-top: -18px
+
+ &:hover
+ @include scale(1.05)
+
+ .hamburger span.icon-bar
+ background-color: $control-yellow-highlight
+
+ #level-done-button, #next-game-button
+ top: 7px
+ font-size: 13px
+ height: 24px
+
+ #level-done-button
+ display: none
- #level-done-button
- display: none
+html.no-borderimage
+ #control-bar-view .level-name-area
+ border: 0
+ background: transparent url(/images/level/control_bar_level_name_background.png)
+ background-size: contain
+ background-repeat: no-repeat
+
+body:not(.ipad)
+ @media only screen and (max-width: 1300px)
+ #control-bar-view .level-name-area-container
+ display: none
+
diff --git a/app/styles/play/level/playback.sass b/app/styles/play/level/playback.sass
index 52f2410b5..9c64c9ade 100644
--- a/app/styles/play/level/playback.sass
+++ b/app/styles/play/level/playback.sass
@@ -134,3 +134,7 @@
margin-right: -11px
// Don't load jQuery UI background image here
background: transparent none
+
+body.ipad #playback-view
+ #playback-settings
+ display: none
diff --git a/app/styles/play/level/tome/spell_palette_entry.sass b/app/styles/play/level/tome/spell_palette_entry.sass
index d4a5ea658..087f125c8 100644
--- a/app/styles/play/level/tome/spell_palette_entry.sass
+++ b/app/styles/play/level/tome/spell_palette_entry.sass
@@ -70,9 +70,9 @@
&:hover
@include opacity(1)
- padding: 10px 10px 30px 10px
- border-image: url(/images/level/popover_background.png) 18 fill round
- border-width: 15px
+ padding: 0
+ border-image: url(/images/level/popover_background.png) 29 39 fill stretch
+ border-width: 15px 20px
@include box-shadow(0 0 0 #000)
h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code)
diff --git a/app/styles/play/spectate.sass b/app/styles/play/spectate.sass
index a0f7343fa..227b86db0 100644
--- a/app/styles/play/spectate.sass
+++ b/app/styles/play/spectate.sass
@@ -38,6 +38,7 @@
margin: 0px auto
#canvas-wrapper
+ top: 50px
width: 100%
position: relative
margin: 0 auto
diff --git a/app/styles/play/world-map-view.sass b/app/styles/play/world-map-view.sass
index 88daaeac8..e9a007edc 100644
--- a/app/styles/play/world-map-view.sass
+++ b/app/styles/play/world-map-view.sass
@@ -304,3 +304,8 @@ body:not(.ipad) #world-map-view
.old-levels
display: none
+
+body.ipad #world-map-view
+ // iPad only supports up to Kithgard Gates for now.
+ .campaign-switch
+ display: none
diff --git a/app/templates/play/level/control_bar.jade b/app/templates/play/level/control_bar.jade
index e9d18347f..dfac0042d 100644
--- a/app/templates/play/level/control_bar.jade
+++ b/app/templates/play/level/control_bar.jade
@@ -1,17 +1,29 @@
-h4.home
+.left-cap
+.right-cap
+.center-chain
+.right-chain
+.wood-background
- a(href=homeLink || "/")
- i.icon-home.icon-white
- span(data-i18n="play_level.home").home-text Home
+.levels-link-area
+ a.levels-link(href=homeLink || "/")
+ .glyphicon.glyphicon-play
+ span(data-i18n="nav.play").home-text Levels
-h4.title
- | #{worldName}
- span.spl.spr.editor-dash -
- a(href=editorLink, data-i18n="nav.editor", title="Open " + worldName + " in the Level Editor") Editor
+.level-name-area-container
+ .level-name-area
+ .level-label(data-i18n="play_level.level")
+ .level-name= worldName
-button.btn.btn-xs.btn-inverse.banner#game-menu-button(title="Show game menu", data-i18n="play_level.game_menu") Game Menu
+.buttons-area
-if spectateGame
- button.btn.btn-xs.btn-inverse.banner#next-game-button(title="Next Game", data-i18n="play_level.next-game") Next game!
-
-button.btn.btn-xs.btn-primary.banner#level-done-button(data-i18n="play_level.done") Done
+ button.btn.btn-inverse#game-menu-button(title="Show game menu")
+ .hamburger
+ span.icon-bar
+ span.icon-bar
+ span.icon-bar
+ span.game-menu-text(data-i18n="play_level.game_menu") Game Menu
+
+ if spectateGame
+ button.btn.btn-xs.btn-inverse.banner#next-game-button(title="Next Game", data-i18n="play_level.next-game") Next game!
+
+ button.btn.btn-xs.btn-primary.banner#level-done-button(data-i18n="play_level.done") Done
diff --git a/app/templates/play/world-map-view.jade b/app/templates/play/world-map-view.jade
index c4af251c4..6e2ab8164 100644
--- a/app/templates/play/world-map-view.jade
+++ b/app/templates/play/world-map-view.jade
@@ -48,10 +48,10 @@
a.btn.settings(href='/account', data-i18n="[title]play.settings")
if mapType === 'forest'
- a.btn(href="/play/dungeon", data-i18n="[title]play.campaign_dungeon")
+ a.btn.campaign-switch(href="/play/dungeon", data-i18n="[title]play.campaign_dungeon")
img(src="/images/pages/play/map_dungeon_icon.jpg").img-thumbnail
if mapType === 'dungeon'
- a.btn(href="/play/forest", data-i18n="[title]play.campaign_forest")
+ a.btn.campaign-switch(href="/play/forest", data-i18n="[title]play.campaign_forest")
img(src="/images/pages/play/map_forest_icon.jpg").img-thumbnail
.old-levels
diff --git a/app/views/play/level/tome/CastButtonView.coffee b/app/views/play/level/tome/CastButtonView.coffee
index ff4937a47..da3898669 100644
--- a/app/views/play/level/tome/CastButtonView.coffee
+++ b/app/views/play/level/tome/CastButtonView.coffee
@@ -82,8 +82,11 @@ module.exports = class CastButtonView extends CocoView
@updateCastButton()
onNewGoalStates: (e) ->
- @winnable = e.overallStatus is 'success'
+ winnable = e.overallStatus is 'success'
+ return if @winnable is winnable
+ @winnable = winnable
@$el.toggleClass 'winnable', @winnable
+ Backbone.Mediator.publish 'tome:winnability-updated', winnable: @winnable
if @winnable or (@hasCastOnce and @options.levelID isnt 'dungeons-of-kithgard') # Show once 1) we think they will win or 2) they have hit “run” once. (Only #1 on the fist level.)
@$el.find('.submit-button').show() # In case we hid it, like on the first level.