Working on new Fully Illustrated designs for level play view and iPad interface.

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"

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'}

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

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)

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.
+  // Full-width Surface, preserving aspect ratio, with space for control bar.
-  height: 1024px * (589 / 924)
+  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
+    bottom: -20px
-    margin-bottom: -30px
 
     button
       background-color: #333

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: 50px
-  height: 30px
   @include box-sizing(border-box)
-  background: transparent url(/images/level/control_bar_background.png)
+  overflow: visible
-
-  //text-shadow: 0 1px 0 $navbarBackgroundHighlight
-
-  .title
   position: absolute
-    left: 20%
+  z-index: 6
+  text-transform: uppercase
+  font-family: Open Sans Condensed
+  font-weight: bold
+
+  .levels-link-area
+    position: absolute
+    left: 40px
+    width: 160px
+    text-align: center
+    
+    a.levels-link
       margin: 0
-    color: #BEBEBE
+      height: 50px
-    line-height: 15px
+      line-height: 50px
+      color: white
+      font-size: 16px
   
-  .home
+      .glyphicon
-    float: left
+        margin-left: -20px
-    margin: 0
+        margin-right: 10px
-    line-height: 15px
+        @include scaleXY(-1.25, 1.25)
+        color: $control-yellow
+        text-shadow: 1px 1px 0px rgb(143, 123, 62)
 
-    i
+      &:hover .glyphicon
-      float: left
+        color: $control-yellow-highlight
-      @include opacity(0.75)
-      margin-right: 5px
-      margin-left: -5px
 
-    a
+  .left-cap, .right-cap, .center-chain, .right-chain, .wood-background
-      color: #BEBEBE
+    position: absolute
-      text-decoration: underline
+    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
+
+  .right-cap
+    background: transparent url(/images/level/control_bar_cap_right.png)
+    background-size: cover
+    right: 0
+    width: 78px
+    height: 60px
+
+  .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
-    top: -7px
+
+    #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
+
+
+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
+

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

app/styles/play/level/tome/spell_palette_entry.sass

@@ -70,9 +70,9 @@
       &:hover
         @include opacity(1)
 
-  padding: 10px 10px 30px 10px
+  padding: 0
-  border-image: url(/images/level/popover_background.png) 18 fill round
+  border-image: url(/images/level/popover_background.png) 29 39 fill stretch
-  border-width: 15px
+  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)

app/styles/play/spectate.sass

@@ -38,6 +38,7 @@
     margin: 0px auto
 
   #canvas-wrapper
+    top: 50px
     width: 100%
     position: relative
     margin: 0 auto

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

app/templates/play/level/control_bar.jade

@@ -1,15 +1,27 @@
-h4.home
+.left-cap
+.right-cap
+.center-chain
+.right-chain
+.wood-background
 
-  a(href=homeLink || "/")
+.levels-link-area
-    i.icon-home.icon-white
+  a.levels-link(href=homeLink || "/")
-    span(data-i18n="play_level.home").home-text Home
+    .glyphicon.glyphicon-play
+    span(data-i18n="nav.play").home-text Levels
 
-h4.title
+.level-name-area-container
-  | #{worldName}
+  .level-name-area
-  span.spl.spr.editor-dash -
+    .level-label(data-i18n="play_level.level")
-  a(href=editorLink, data-i18n="nav.editor", title="Open " + worldName + " in the Level Editor") Editor
+    .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
+
+  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!

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

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.