Startd to implement new code editor design. Fixed #1732.

app/lib/LevelSetupManager.coffee

@@ -16,7 +16,7 @@ module.exports = class LevelSetupManager extends CocoClass
     if @session
       @fillSessionWithDefaults()
     else
-      @loadSession(@supermodel) 
+      @loadSession(@supermodel)
 
     # build modals and prevent them from disappearing.
     @heroesModal = new PlayHeroesModal({supermodel: @supermodel, session: @session, confirmButtonI18N: 'play.next', levelID: options.levelID})
@@ -28,7 +28,7 @@ module.exports = class LevelSetupManager extends CocoClass
     @listenToOnce @heroesModal, 'hero-loaded', @onceHeroLoaded
     @listenTo @inventoryModal, 'choose-hero-click', @onChooseHeroClicked
     @listenTo @inventoryModal, 'play-click', @onInventoryModalPlayClicked
-    
+
   loadSession: (supermodel) ->
     url = "/db/level/#{@options.levelID}/session"
     #url += "?team=#{@team}" if @options.team  # TODO: figure out how to get the teams for multiplayer PVP hero style
@@ -41,19 +41,19 @@ module.exports = class LevelSetupManager extends CocoClass
   fillSessionWithDefaults: ->
     heroConfig = _.merge {}, me.get('heroConfig'), @session.get('heroConfig')
     @session.set('heroConfig', heroConfig)
-    
+
   open: ->
-    firstModal = if @options.hadEverChosenHero then @inventoryModal else @heroesModal 
+    firstModal = if @options.hadEverChosenHero then @inventoryModal else @heroesModal
     @options.parent.openModalView(firstModal)
     #    @inventoryModal.onShown() # replace?
     Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'game-menu-open', volume: 1
-    
-    
+
+
   #- Modal events
 
   onceHeroLoaded: (e) ->
     @inventoryModal.setHero(e.hero)
-  
+
   onHeroesModalConfirmClicked: (e) ->
     @options.parent.openModalView(@inventoryModal)
     @inventoryModal.render()
@@ -68,7 +68,7 @@ module.exports = class LevelSetupManager extends CocoClass
     @heroesModal.didReappear()
     @inventoryModal.endHighlight()
     window.tracker?.trackEvent 'Play Level Modal', Action: 'Choose Hero'
-    
+
   onInventoryModalPlayClicked: ->
     @navigatingToPlay = true
     viewClass = if @options.levelPath is 'ladder' then LadderView else PlayLevelView
@@ -76,4 +76,4 @@ module.exports = class LevelSetupManager extends CocoClass
       route: "/play/#{@options.levelPath || 'level'}/#{@options.levelID}"
       viewClass: viewClass
       viewArgs: [{supermodel: @supermodel}, @options.levelID]
-    } 
+    }

app/locale/en.coffee

@@ -233,6 +233,7 @@
     tome_select_a_thang: "Select Someone for "
     tome_available_spells: "Available Spells"
     tome_your_skills: "Your Skills"
+    tome_current_method: "Current Method"
     hud_continue: "Continue (shift+space)"
     hud_continue_short: "Continue"
     code_saved: "Code Saved"

app/styles/play/level.sass

@@ -88,7 +88,7 @@ $level-resize-transition-time: 0.5s
 
   #code-area
     @include box-sizing(border-box)
-    padding: 10px 1%
+    padding: 0px 0.9% 10px 1.4%
     width: 45%
     background: transparent url(/images/level/wood_texture.png)
     background-size: 100% 100%

app/styles/play/level/thang_avatar.sass

@@ -7,10 +7,8 @@
     @include box-shadow(0px 0px 10px rgba(79, 79, 213, 1.0))
 
   .thang-avatar-wrapper
+    width: 100%
     position: relative
-    margin: 5px 5px 1px
-    border: 1px solid #888
-    border-radius: 4px
     @include gradient-radial-custom-stops(hsla(205,0%,74%,1), 20%, hsla(205,0%,31%,1), 70%)
 
     &.team-humans
@@ -25,6 +23,15 @@
       border-color: darkgreen
       @include gradient-radial-custom-stops(hsla(116,80%,74%,1), 20%, hsla(116,80%,31%,1), 70%)
 
+    .avatar
+      width: 100%
+
+    .avatar-frame
+      position: absolute
+      left: -13%
+      top: -14%
+      width: 132%
+
     .badge
       $radius: 8px
       $diameter: 2 * $radius

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

@@ -11,7 +11,8 @@
 #spell-view
   position: absolute
   left: 10px
-  top: 48px
+  top: 140px
+  //top: 48px
   right: 10px
   padding-bottom: 10px
   z-index: 1

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

@@ -2,7 +2,7 @@
 @import "app/styles/bootstrap/variables"
 
 .spell-list-entry-view
-  code
+  .method-signature
     background-color: transparent
     border: 0
     font-size: 1.1em
@@ -10,30 +10,48 @@
     padding: 4px
 
 .spell-list-entry-view.spell-tab
-  $height: 38px
+  $height: 87px
+  $paddingTop: 10px
+  $paddingBottom: 25px
   $childMargin: 2px
-  $childSize: $height - 2 * $childMargin
+  $childSize: $height - $paddingTop - $paddingBottom
+  width: 100%
   height: $height
-  width: 90%
-  width: -webkit-calc(100% - 50px)
-  width: calc(100% - 50px)
-  padding: 0px 8px
-  border-width: 3px
-  border-image: url(/images/level/code_editor_tab_background.png) 4 fill repeat
+  padding: $paddingTop 25px $paddingBottom 25px
   white-space: nowrap
   position: relative
+  background: transparent url(/images/level/code_editor_top_bar_wood_background.png)
+  background-size: 100% 100%
+
+  .hinge
+    position: absolute
+    top: 0
+    background: transparent url(/images/level/code_editor_top_bar_hinge.png)
+    width: 24px
+    height: 20px
+    background-size: contain
+    z-index: 100
+
+  .hinge-0
+    left: 20%
+  .hinge-1
+    left: 40%
+  .hinge-2
+    left: 60%
+  .hinge-3
+    left: 80%
 
   &.read-only
-    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(/images/level/code_editor_tab_background.png)
+    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url(/images/level/code_editor_top_bar_wood_background.png)
     background-size: 100% 100%
   
-  .spell-list-button, .thang-avatar-wrapper, .reload-code, .beautify-code, .fullscreen-code
+  .spell-list-button, .thang-avatar-view, .reload-code, .beautify-code, .fullscreen-code
     width: $childSize
     height: $childSize
-    margin: $childMargin
-    box-sizing: border-box
+    margin: 0 $childMargin
+    display: inline-block
 
-  .spell-list-button, .thang-avatar-wrapper
+  .spell-list-button, .thang-avatar-view
     float: left
 
   .spell-tool-buttons
@@ -71,9 +89,23 @@
   .thang-avatar-wrapper
     border-width: 0
 
-  code
-    margin-top: 7px
+  .method-label
+    margin-left: 10px
+    line-height: $childSize
     font-size: 1vw
+    display: inline-block
+    font-weight: bold
+    color: white
+    text-transform: uppercase
+
+  .method-signature
+    margin-left: 10px
+    line-height: $childSize
+    font-size: 1vw
+    display: inline-block
+    font-weight: bold
+    color: white
+    text-transform: uppercase
 
 .spell-list-entry-view:not(.spell-tab)
   cursor: pointer
@@ -89,7 +121,7 @@
   &.shows-top-divider:not(:first-child)
     border-top: 1px dashed #ccc
 
-  code
+  .method-signature
     margin-top: 5px
 
   .thang-names
@@ -113,9 +145,9 @@
       //margin: 2px 10px 2px 5px
 
 
-html.no-borderimage 
-  .spell-list-entry-view.spell-tab  
-    border-width: 0
-    border-image: none
-    background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
-    background-size: 100% 100%
+//html.no-borderimage 
+//  .spell-list-entry-view.spell-tab  
+//    border-width: 0
+//    border-image: none
+//    background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
+//    background-size: 100% 100%

app/templates/play/level/thang_avatar.jade

@@ -1,7 +1,8 @@
 .thang-avatar-wrapper(class="team-" + (thang.team || "neutral"))
   //canvas(width=100, height=100, title=thang.id + " - " + thang.team)
   //- var title = thang.id + " - " + thang.team + (thang.type ? ' - type: "' + thang.type + '"' : '')
-  img.img-responsive(src=avatarURL)
+  img.avatar(src=avatarURL)
+  img.avatar-frame(src="/images/level/thang_avatar_frame.png")
   .badge.problems
   .badge.shared-thangs
 if includeName

app/templates/play/level/tome/spell_list_tab_entry.jade

@@ -1,11 +1,16 @@
-img(src="/images/level/code_editor_tab_background.png").spell-tab-image-hidden.hidden
+.hinge.hinge-0
+.hinge.hinge-1
+.hinge.hinge-2
+.hinge.hinge-3
 
 if includeSpellList
   .btn.btn-small.spell-list-button(data-i18n="[title]play_level.tome_see_all_methods", title="See all methods you can edit")
     i.icon-chevron-down
+
 .thang-avatar-placeholder
 
-code #{methodSignature}
+.method-label(data-i18n="play_level.tome_current_method") Current Method
+.method-signature #{methodSignature}
 
 .spell-tool-buttons
   if levelType !== 'hero'

app/views/contribute/DiplomatView.coffee

@@ -85,3 +85,4 @@ module.exports = class DiplomatView extends ContributeClassView
     ur: []             # اُردُو, Urdu
     ms: []             # Bahasa Melayu, Bahasa Malaysia
     ca: ['ArniMcFrag']             # Català, Catalan
+    gl: ['mcaeiror']             # Galego, Galician

app/views/play/level/tome/SpellListTabEntryView.coffee

@@ -75,7 +75,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
           break
     return unless found
     docFormatter = new DocFormatter doc: doc, thang: @thang, language: @options.codeLanguage, selectedMethod: true
-    @$el.find('code').popover(
+    @$el.find('.method-signature').popover(
       animation: true
       html: true
       placement: 'bottom'
@@ -126,7 +126,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
   onSpellChangedLanguage: (e) ->
     return unless e.spell is @spell
     @options.codeLanguage = e.language
-    @$el.find('code').popover 'destroy'
+    @$el.find('.method-signature').popover 'destroy'
     @render()
     @docsBuilt = false
     @buildDocs() if @thang
@@ -168,5 +168,5 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
 
   destroy: ->
     @avatar?.destroy()
-    @$el.find('code').popover 'destroy'
+    @$el.find('.method-signature').popover 'destroy'
     super()