Implemented Heald's design of the GameMenuModal.

app/Router.coffee

@@ -193,6 +193,8 @@ module.exports = class CocoRouter extends Backbone.Router
 
   onNavigate: (e) ->
     manualView = e.view or e.viewClass
+    if (e.route is document.location.pathname) and not manualView
+      return document.location.reload()
     @navigate e.route, {trigger: not manualView}
     return unless manualView
     if e.viewClass

app/lib/LevelSetupManager.coffee

@@ -1,8 +1,6 @@
 CocoClass = require 'lib/CocoClass'
 PlayHeroesModal = require 'views/play/modal/PlayHeroesModal'
 InventoryModal = require 'views/game-menu/InventoryModal'
-PlayLevelView = require 'views/play/level/PlayLevelView'
-LadderView = require 'views/play/ladder/LadderView'
 LevelSession = require 'models/LevelSession'
 SuperModel = require 'models/SuperModel'
 
@@ -10,7 +8,6 @@ module.exports = class LevelSetupManager extends CocoClass
 
   constructor: (@options) ->
     super()
-    @options.showDevBits = true #?
     @supermodel = new SuperModel()
     @session = @options.session
     if @session
@@ -71,6 +68,8 @@ module.exports = class LevelSetupManager extends CocoClass
     
   onInventoryModalPlayClicked: ->
     @navigatingToPlay = true
+    PlayLevelView = require 'views/play/level/PlayLevelView'
+    LadderView = require 'views/play/ladder/LadderView'
     viewClass = if @options.levelPath is 'ladder' then LadderView else PlayLevelView
     Backbone.Mediator.publish 'router:navigate', {
       route: "/play/#{@options.levelPath || 'level'}/#{@options.levelID}"

app/styles/game-menu/game-menu-modal.sass

@@ -1,88 +1,66 @@
 @import "app/styles/mixins"
 
 #game-menu-modal
+
+  //- Clear modal defaults
   
-  .close
-    // We have to style this indendently because it's not in the header (we don't have a header).
-    position: absolute
-    top: -5px
-    right: 0
-    padding: 15px
-    font-size: 28px
-    background-color: transparent
-    z-index: 1
-
-    @include opacity(0.60)
-
-    &:hover
-      @include opacity(1)
-
-  // Make room for an overlaid close button in the lower right (we don't have a footer).
-  .overlaid-close-button
-    position: absolute
-    right: 35px
-    bottom: 20px
-  
-  #inventory-modal #available-equipment
-    bottom: 60px
-
   .modal-dialog
-    margin-top: 0
+    width: 820px
-    width: 963px
+    height: 570px
+    padding: 0
+    background: none
+    position: relative
+    top: 40px
 
-  .nav-tabs
+    
-    h2
+  //- Background
-      margin: 0
+  
+  #game-menu-background
+    position: absolute
+    top: -146px
+    left: -3px
+
+
+  //- Nav bar
+
+  #game-menu-nav
+    position: absolute
+    top: 53px
+    left: 42px
+    width: 178px
+
+    li
+      background: url(/images/pages/play/modal/menu-tab.png)
+      padding: 5px
+      margin: -5px 0
+      height: 80px
+      padding: 0
+      
+      &.active
+        background: url(/images/pages/play/modal/menu-tab-selected.png)
+        width: 197px
 
-    .auth-tab
       a
-        h2, em
+        font-size: 18px
-          pointer-events: none
+        line-height: 50px
-  
+        background: none
-  .tab-pane
+        color: rgb(195,153,124)
-    h3:first-child
+        font-weight: bold
-      margin-top: 0
+        padding: 14px 20px
-  
+        font-family: Open Sans Condensed
-  // http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
+        text-transform: uppercase
-  .tabs-left
+    
-    > .nav-tabs
+        .glyphicon
-      float: left
+          margin-right: 6px
-      width: 185px
-      border-bottom: 0
 
-    > .tab-content
-      padding: 0px 15px
-      margin-left: 185px
-   
-  .tab-content > .tab-pane, .pill-content > .pill-pane
-    display: none
-   
-  .tab-content > .active, .pill-content > .active
-    display: block
-   
-  .tabs-left
-    > .nav-tabs > li
-      float: none
-   
-      > a
-        min-width: 74px
-        margin-right: 0
-        margin-bottom: 0
-   
-  .tabs-left > .nav-tabs
-    border-right: 1px solid #ddd
-   
-    > li > a
-      margin-right: -1px
-      -webkit-border-radius: 4px 0 0 4px
-      -moz-border-radius: 4px 0 0 4px
-      border-radius: 4px 0 0 4px
-   
-      &:hover, &:focus
-        border-color: #eee #ddd #eee #eee
-   
-    > .active a
-      &, &:hover, &:focus
-        border-color: #ddd transparent #ddd #ddd
-        *border-right-color: #fff
 
+  //- Tab panels
+  
+  .game-menu-tab-content
+    position: absolute
+    left: 219px
+    top: 21px
+    width: 571px
+    height: 518px
+    padding: 50px
+    overflow: scroll

app/styles/game-menu/options-view.sass

@@ -1,45 +1,137 @@
 @import "app/styles/bootstrap/variables"
 
 #options-view
-  .select-group, .slider-group
+  
-    display: block
+  //- Volume slider
-    min-height: 20px
+  
-    margin-top: 10px
+  #volume-group
-    margin-bottom: 10px
+    position: relative
-    padding-left: 20px
+    width: 100%
-    vertical-align: middle
+    height: 25px
+    margin: 15px 0
+    
+    & > *
+      position: absolute
+      
+    .ui-slider
+      left: 40px
+      right: 40px
+      top: 4px
+      background-color: rgb(248,169,67)
+      border: 4px solid rgb(26,21,18)
+      height: 18px
+      border-radius: 18px
+      
+      .ui-slider-handle
+        background-color: rgb(26,21,18)
+        width: 28px
+        height: 28px
+        border-radius: 28px
+        top: -9px
+        outline: 0
+      
+    .glyphicon
+      font-size: 30px
+      top: -2px
+      color: rgb(26,21,18)
+      
+    .glyphicon-volume-down
+      position: absolute
+      left: 0
+      
+    .glyphicon-volume-up
+      position: absolute
+      right: 0
+    
+    
+  //- header, horizontal rule
+  
+  .hr
+    width: 100%
+    height: 10px
+    
+  h3
+    margin-top: 5px
+    color: rgb(26,21,18)
+    
 
+  //- All form groups
+  
+  .form-group
+    font-size: 16px
+    color: rgb(51,51,51)
+    padding-top: 4px
+    padding-left: 40px
+   
+  label
+    font-weight: normal
+
+  //- Check boxes
+  
+  .form-group.checkbox
+    
     label
-      font-weight: normal
+      position: relative
-      margin-right: 20px
+    
-      margin-bottom: 0
-
-    .slider
-      width: 200px
-
-  .form-group.radio-inline
     input
-      margin-left: 0px
+      display: none
-      margin-right: 5px
+      
-
+      & + .custom-checkbox
-    .radio-inline-parent-label
+        .glyphicon
-      padding-left: 0
+          display: none
+        
+      &:checked + .custom-checkbox .glyphicon
+        display: inline
+        color: rgb(248,169,67)
+        text-align: center
+        text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black
+        font-size: 14px
+        position: relative
+        top: -1px
+  
+    .custom-checkbox
+      border-radius: 2px
+      height: 27px
+      width: 27px
+      border: 4px solid rgb(26,21,18)
+      position: absolute
+      background: rgb(228,217,196)
+      text-align: center
 
+      // this undoes the padding of the form groups
+      left: -40px 
+      top: -4px
+    
 
+  //- Select boxes
+  
+  select
+    border: 3px solid black
+    text-transform: uppercase
+      
+  //.form-group.radio-inline
+  //  input
+  //    margin-left: 0px
+  //    margin-right: 5px
+  //
+  //  .radio-inline-parent-label
+  //    padding-left: 0
+  //
+  //
   #player-avatar-container
     position: relative
-    margin: 0px 0px 15px 15px
+    margin: 0 auto 40px
     width: 230px
     max-height: 230px
     border-radius: 6px
-
+  
     img.profile-photo
       width: 100%
       border-radius: 6px
-
+  
       &.saving
         opacity: 0.5
-
+  
     .profile-caption
       background-color: rgba(0, 0, 0, 0.5)
       color: white
@@ -52,7 +144,7 @@
       text-align: center
       border: 0
       font-size: 18px
-
+  
     .editable-icon
       display: block
       position: absolute
@@ -61,11 +153,11 @@
       font-size: 20px
       color: $blue
       opacity: 0.5
-
+  
     &:hover
       cursor: pointer
       box-shadow: 0px 0px 2px 1px $blue
-
+  
       .editable-icon
         opacity: 1.0
         cursor: pointer

app/styles/play/modal/play-items-modal.sass

@@ -12,6 +12,7 @@
     overflow: hidden
     text-overflow: ellipsis
 
+
   //- Clear modal defaults
   .modal-dialog
     padding: 0
@@ -100,8 +101,6 @@
         font-weight: bold
         padding: 10px 7px
         
-      //img
-        
       
     li.active
       background: url(/images/pages/play/modal/menu-tab-selected.png)

app/templates/game-menu/game-menu-modal.jade

@@ -1,32 +1,28 @@
-extends /templates/modal/modal_base
+.modal-dialog
+  .modal-content
+    img(src="/images/pages/play/modal/game-menu-background.png")#game-menu-background
 
-block modal-header
+    ul#game-menu-nav.nav.nav-pills.nav-stacked
+      li
+        a#change-hero-tab
+          span.glyphicon.glyphicon-user
+          span(data-i18n='play.change_hero')
 
-block modal-body-content
-  .button.close(type="button", data-dismiss="modal", aria-hidden="true") ×
-  .tabbable.tabs-left
-    - var submenus = ["save-load", "options", "guide", "multiplayer"]
-    - if (!showsGuide) {
-    -   submenus.splice(2, 1);
-    - }
-    - if (!showDevBits) {  // Not done yet.
-    -   submenus.splice(0, 1);
-    - }
-    ul.nav.nav-tabs#game-menu-nav
       for submenu, index in submenus
-        li(class=submenu === showTab || index === 0 && !showTab ? "active" : "")
+        li(class=submenu === showTab ? "active" : "")
           a(href='#' + submenu + '-view', data-toggle='tab')
-            h2(data-i18n='game_menu.' + submenu.replace('-', '_') + '_tab')
+            span.glyphicon(class="glyphicon-"+iconMap[submenu])
-            em(data-i18n='game_menu.' + submenu.replace('-', '_') + '_caption')
+            span(data-i18n='game_menu.' + submenu.replace('-', '_') + '_tab')
       if me.get('anonymous')
         li.auth-tab(data-toggle='coco-modal', data-target="modal/AuthModal")
           a(data-toggle='coco-modal', data-target="modal/AuthModal")
-            h2(data-i18n='game_menu.auth_tab')
+            span.glyphicon.glyphicon-pencil
-            em(data-i18n='game_menu.auth_caption')
+            span(data-i18n='game_menu.auth_tab')
-    .tab-content
+
+    .tab-content.game-menu-tab-content
       for submenu, index in submenus
         .tab-pane(id=submenu + '-view')
-  .clearfix
+//  .clearfix
-
+//
-block modal-footer
+//block modal-footer
-  button.btn.btn-primary.btn-lg.overlaid-close-button(type="button", data-dismiss="modal", aria-hidden="true", data-i18n="modal.close") Close
+//  button.btn.btn-primary.btn-lg.overlaid-close-button(type="button", data-dismiss="modal", aria-hidden="true", data-i18n="modal.close") Close

app/templates/game-menu/options-view.jade

@@ -1,4 +1,4 @@
-#player-avatar-container(title="Click to change your avatar").pull-right
+#player-avatar-container(title="Click to change your avatar")
   if !me.get('photoURL')
     .editable-icon.glyphicon.glyphicon-pencil
   img.profile-photo(src=me.getPhotoURL(230))
@@ -6,60 +6,72 @@
     input#player-name.profile-caption(name="playerName", type="text", value=me.get('name', true))
 
 .form
-  h3(data-i18n="options.general_options") General Options
 
-  .form-group.slider-group
+  h3(data-i18n="options.general_options") General Options
-    label(for="option-volume")
+  
-      span(data-i18n="options.volume_label") Volume
+  .form-group.slider-group#volume-group
-      span.spr :
+    span.glyphicon.glyphicon-volume-down
-      span#option-volume-value= (me.get('volume') * 100).toFixed(0) + '%'
+    #option-volume.slider.spr.spl
-    #option-volume.slider
+    span.glyphicon.glyphicon-volume-up
 
   .form-group.checkbox
-    label(for="option-music")
+    label(for="option-music").control-label
       input#option-music(name="option-music", type="checkbox", checked=music)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.music_label") Music
     span.help-block(data-i18n="options.music_description") Turn background music on/off.
 
   .form-group.select-group
     label.control-label(for="option-autorun-delay", data-i18n="options.autorun_label") Autorun
-    select#option-autorun-delay(name="autorunDelay")
+    select#option-autorun-delay.form-control(name="autorunDelay")
       option(value=1000, selected=(autorunDelay === 1000), data-i18n="common.delay_1_sec") 1 second
       option(value=3000, selected=(autorunDelay === 3000), data-i18n="common.delay_3_sec") 3 seconds
       option(value=5000, selected=(autorunDelay === 5000), data-i18n="common.delay_5_sec") 5 seconds
       option(value=90019001, selected=(autorunDelay === 90019001), data-i18n="common.manual") Manual
     span.help-block(data-i18n="options.autorun_description") Control automatic code execution.
+  
+
+  img.hr(src="/images/pages/play/modal/hr.png")
 
   h3(data-i18n="options.editor_config_title") Editor Configuration
-
+  
   .form-group.select-group
     label.control-label(for="option-key-bindings", data-i18n="options.editor_config_keybindings_label") Key Bindings
-    select#option-key-bindings(name="keyBindings")
+    select#option-key-bindings.form-control(name="keyBindings")
       option(value="default", selected=(aceConfig.keyBindings === "default"), data-i18n="options.editor_config_keybindings_default") Default (Ace)
       option(value="vim", selected=(aceConfig.keyBindings === "vim")) Vim
       option(value="emacs", selected=(aceConfig.keyBindings === "emacs")) Emacs
     span.help-block(data-i18n="options.editor_config_keybindings_description") Adds additional shortcuts known from the common editors.
-
+  
   .form-group.checkbox
     label(for="option-live-completion")
       input#option-live-completion(name="liveCompletion", type="checkbox", checked=aceConfig.liveCompletion)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.editor_config_livecompletion_label") Live Autocompletion
     span.help-block(data-i18n="options.editor_config_livecompletion_description") Displays autocomplete suggestions while typing.
-
+  
   .form-group.checkbox
     label(for="option-invisibles")
       input#option-invisibles(name="invisibles", type="checkbox", checked=aceConfig.invisibles)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.editor_config_invisibles_label") Show Invisibles
     span.help-block(data-i18n="options.editor_config_invisibles_description") Displays invisibles such as spaces or tabs.
-
+  
   .form-group.checkbox
     label(for="option-indent-guides")
       input#option-indent-guides(name="indentGuides", type="checkbox", checked=aceConfig.indentGuides)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.editor_config_indentguides_label") Show Indent Guides
     span.help-block(data-i18n="options.editor_config_indentguides_description") Displays vertical lines to see indentation better.
-
+  
   .form-group.checkbox
     label(for="option-behaviors")
       input#option-behaviors(name="behaviors", type="checkbox", checked=aceConfig.behaviors)
+      span.custom-checkbox
+        .glyphicon.glyphicon-ok
       span(data-i18n="options.editor_config_behaviors_label") Smart Behaviors
     span.help-block(data-i18n="options.editor_config_behaviors_description") Autocompletes brackets, braces, and quotes.

app/templates/play/modal/item-details-view.jade

@@ -8,13 +8,13 @@
       img.item-img(src=item.getPortraitURL())
       img.item-shadow(src=item.getPortraitURL())
     
-    img.hr(src="/images/pages/play/modal/play-items-modal-hr.png")
+    img.hr(src="/images/pages/play/modal/hr.png")
   
     for stat in stats
       div.stat-row.big-font
         div.stat-label= stat.name
         div.stat= stat.display
-      img.hr(src="/images/pages/play/modal/play-items-modal-hr.png" class=stat.isLast ? "" : "faded")
+      img.hr(src="/images/pages/play/modal/hr.png" class=stat.isLast ? "" : "faded")
 
     if props.length
       #skills

app/views/HomeView.coffee

@@ -3,6 +3,10 @@ template = require 'templates/home'
 WizardLank = require 'lib/surface/WizardLank'
 ThangType = require 'models/ThangType'
 Simulator = require 'lib/simulator/Simulator'
+Level = require 'models/Level'
+LevelSession = require 'models/LevelSession'
+
+GameMenuModal = require 'views/game-menu/GameMenuModal'
 
 {me} = require '/lib/auth'
 
@@ -35,3 +39,11 @@ module.exports = class HomeView extends RootView
     e.stopImmediatePropagation()
     window.tracker?.trackEvent 'Homepage', Action: 'Play'
     window.open '/play', '_blank'
+
+  afterInsert: ->
+    super(arguments...)
+    level = new Level({_id: 'kounter-kithwise'})
+    level.fetch()
+    @listenToOnce level, 'sync', ->
+      console.log 'opened level...'
+      @openModalView(new GameMenuModal({level: level, session: new LevelSession(), supermodel: @supermodel}))

app/views/game-menu/GameMenuModal.coffee

@@ -8,6 +8,7 @@ submenuViews = [
 ]
 
 module.exports = class GameMenuModal extends ModalView
+  className: 'modal fade play-modal'
   template: template
   id: 'game-menu-modal'
   instant: true
@@ -15,10 +16,10 @@ module.exports = class GameMenuModal extends ModalView
   events:
     'change input.select': 'onSelectionChanged'
     'shown.bs.tab #game-menu-nav a': 'onTabShown'
+    'click #change-hero-tab': -> @trigger 'change-hero'
 
   constructor: (options) ->
     super options
-    @options.showDevBits = me.isAdmin() or /https?:\/\/localhost/.test(window.location.href)
     @options.showTab = options.showTab
     @options.levelID = @options.level.get('slug')
     @options.startingSessionHeroConfig = $.extend {}, true, (@options.session.get('heroConfig') ? {})
@@ -26,10 +27,17 @@ module.exports = class GameMenuModal extends ModalView
 
   getRenderData: (context={}) ->
     context = super(context)
-    context.showDevBits = @options.showDevBits
-    context.showTab = @options.showTab
     docs = @options.level.get('documentation') ? {}
-    context.showsGuide = docs.specificArticles?.length or docs.generalArticles?.length
+    submenus = ["options", "save-load", "guide", "multiplayer"]
+    submenus = _.without submenus, 'guide' unless docs.specificArticles?.length or docs.generalArticles?.length
+    submenus = _.without submenus, 'save-load' unless me.isAdmin() or /https?:\/\/localhost/.test(window.location.href)
+    context.showTab = @options.showTab ? submenus[0]
+    context.submenus = submenus
+    context.iconMap =
+      'options': 'cog'
+      'guide': 'list'
+      'save-load': 'floppy-disk'
+      'multiplayer': 'globe'
     context
 
   afterRender: ->

app/views/game-menu/OptionsView.coffee

@@ -72,6 +72,7 @@ module.exports = class OptionsView extends CocoView
     @aceConfig.behaviors = @$el.find('#option-behaviors').prop('checked')
     @aceConfig.liveCompletion = @$el.find('#option-live-completion').prop('checked')
     me.set 'aceConfig', @aceConfig
+    me.patch()
     Backbone.Mediator.publish 'tome:change-config', {}
 
   updateMusic: ->

app/views/play/level/ControlBarView.coffee

@@ -4,6 +4,7 @@ template = require 'templates/play/level/control_bar'
 
 GameMenuModal = require 'views/game-menu/GameMenuModal'
 RealTimeCollection = require 'collections/RealTimeCollection'
+LevelSetupManager = require 'lib/LevelSetupManager'
 
 module.exports = class ControlBarView extends CocoView
   id: 'control-bar-view'
@@ -63,7 +64,11 @@ module.exports = class ControlBarView extends CocoView
     c
 
   showGameMenuModal: ->
-    @openModalView new GameMenuModal level: @level, session: @session, supermodel: @supermodel
+    gameMenuModal = new GameMenuModal level: @level, session: @session, supermodel: @supermodel
+    @openModalView gameMenuModal
+    @listenToOnce gameMenuModal, 'change-hero', ->
+      setupManager = new LevelSetupManager({supermodel: @supermodel, levelID: @level.get('slug'), parent: @})
+      setupManager.open()
 
   onClickHome: (e) ->
     e.preventDefault()

app/views/play/level/PlayLevelView.coffee

@@ -35,7 +35,6 @@ GoldView = require './LevelGoldView'
 VictoryModal = require './modal/VictoryModal'
 HeroVictoryModal = require './modal/HeroVictoryModal'
 InfiniteLoopModal = require './modal/InfiniteLoopModal'
-GameMenuModal = require 'views/game-menu/GameMenuModal'
 MultiplayerStatusView = require './MultiplayerStatusView'
 LevelSetupManager = require 'lib/LevelSetupManager'