Starting skeleton for GameMenuModal and its subviews.

app/locale/en.coffee

@@ -353,6 +353,7 @@
     grid: "Grid"
     customize_wizard: "Customize Wizard"
     home: "Home"
+    game_menu: "Game Menu"
     guide: "Guide"
     multiplayer: "Multiplayer"
     restart: "Restart"
@@ -452,6 +453,20 @@
     infinite_loop_reset_level: "Reset Level"
     infinite_loop_comment_out: "Comment Out My Code"
 
+  game_menu:
+    inventory_tab: "Inventory"
+    choose_hero_tab: "Restart Level"
+    save_load_tab: "Save/Load"
+    options_tab: "Options"
+    guide_tab: "Guide"
+    multiplayer_tab: "Multiplayer"
+    inventory_caption: "Equip your hero"
+    choose_hero_caption: "Choose hero, language"
+    save_load_caption: "... and view history"
+    options_caption: "Music and other settings"
+    guide_caption: "Docs and tips"
+    multiplayer_caption: "Play with friends!"
+
   keyboard_shortcuts:
     keyboard_shortcuts: "Keyboard Shortcuts"
     space: "Space"

app/styles/game-menu/choose-hero-view.sass

@@ -0,0 +1,3 @@
+#choose-hero-view
+  h3
+    text-decoration: underline

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

@@ -0,0 +1,41 @@
+#game-menu-modal
+  
+  
+  // http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
+  .tabs-left
+    .nav-tabs
+      border-bottom: 0
+   
+  .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: 3px
+   
+  .tabs-left > .nav-tabs
+    float: left
+    margin-right: 19px
+    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

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

@@ -0,0 +1,3 @@
+#guide-view
+  h3
+    text-decoration: underline

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

@@ -0,0 +1,3 @@
+#inventory-view
+  h3
+    text-decoration: underline

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

@@ -0,0 +1,3 @@
+#multiplayer-view
+  h3
+    text-decoration: underline

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

@@ -0,0 +1,3 @@
+#options-view
+  h3
+    text-decoration: underline

app/styles/game-menu/save-load-view.sass

@@ -0,0 +1,3 @@
+#save-load-view
+  h3
+    text-decoration: underline

app/templates/game-menu/choose-hero-view.jade

@@ -0,0 +1,3 @@
+h3 Choose Hero, and stuff
+
+p ... and more stuff

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

@@ -0,0 +1,23 @@
+extends /templates/modal/modal_base
+
+block modal-header
+
+block modal-body-content
+  .tabbable.tabs-left
+    - var submenus = ["inventory", "choose-hero", "save-load", "options", "guide", "multiplayer"]
+    ul.nav.nav-tabs
+      for submenu in submenus
+        li
+          a(href='#' + submenu + '-view', data-toggle='tab')
+            h2(data-i18n='game_menu.' + submenu.replace('-', '_') + '_tab')
+            em(data-i18n='game_menu.' + submenu.replace('-', '_') + '_caption')
+    .tab-content
+      for submenu, index in submenus
+        .tab-pane(id=submenu + '-view')
+          h3= submenu + submenu + submenu
+          p
+            | Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
+            | Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
+  .clearfix
+
+block modal-footer

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

@@ -0,0 +1,3 @@
+h3 Guide, and stuff
+
+p ... and more stuff

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

@@ -0,0 +1,3 @@
+h3 Inventory, and stuff
+
+p ... and more stuff

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

@@ -0,0 +1,3 @@
+h3 Multiplayer, and stuff
+
+p ... and more stuff

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

@@ -0,0 +1,3 @@
+h3 Options, and stuff
+
+p ... and more stuff

app/templates/game-menu/save-load-view.jade

@@ -0,0 +1,3 @@
+h3 Save/Load, and stuff
+
+p ... and more stuff

app/templates/play/level/control_bar.jade

@@ -6,6 +6,8 @@ h4.home
 
 h4.title #{worldName}
 
+button.btn.btn-xs.btn-inverse.banner#game-menu-button(title="Show game menu", data-i18n="play_level.game_menu") Game Menu
+
 button.btn.btn-xs.btn-success.banner#docs-button(title="Show level instructions", data-i18n="play_level.guide") Guide
 
 if ladderGame

app/views/game-menu/ChooseHeroView.coffee

@@ -0,0 +1,16 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/game-menu/choose-hero-view'
+{me} = require 'lib/auth'
+ThangType = require 'models/ThangType'
+
+module.exports = class ChooseHeroView extends CocoView
+  id: 'choose-hero-view'
+  className: 'tab-pane'
+  template: template
+
+  getRenderData: (context={}) ->
+    context = super(context)
+    context
+
+  afterRender: ->
+    super()

app/views/game-menu/GameMenuModal.coffee

@@ -0,0 +1,27 @@
+ModalView = require 'views/kinds/ModalView'
+template = require 'templates/game-menu/game-menu-modal'
+submenuViews = [
+  require 'views/game-menu/InventoryView'
+  require 'views/game-menu/ChooseHeroView'
+  require 'views/game-menu/SaveLoadView'
+  require 'views/game-menu/OptionsView'
+  require 'views/game-menu/GuideView'
+  require 'views/game-menu/MultiplayerView'
+]
+
+module.exports = class GameMenuModal extends ModalView
+  template: template
+  modalWidthPercent: 80
+  id: 'game-menu-modal'
+
+  events:
+    'change input.select': 'onSelectionChanged'
+
+  getRenderData: (context={}) ->
+    context = super(context)
+    context
+
+  afterRender: ->
+    super()
+    @insertSubView new submenuView @options for submenuView in submenuViews
+    @subviews.inventory_view.$el.addClass 'active'

app/views/game-menu/GuideView.coffee

@@ -0,0 +1,16 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/game-menu/guide-view'
+{me} = require 'lib/auth'
+ThangType = require 'models/ThangType'
+
+module.exports = class GuideView extends CocoView
+  id: 'guide-view'
+  className: 'tab-pane'
+  template: template
+
+  getRenderData: (context={}) ->
+    context = super(context)
+    context
+
+  afterRender: ->
+    super()

app/views/game-menu/InventoryView.coffee

@@ -0,0 +1,16 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/game-menu/inventory-view'
+{me} = require 'lib/auth'
+ThangType = require 'models/ThangType'
+
+module.exports = class InventoryView extends CocoView
+  id: 'inventory-view'
+  className: 'tab-pane'
+  template: template
+
+  getRenderData: (context={}) ->
+    context = super(context)
+    context
+
+  afterRender: ->
+    super()

app/views/game-menu/MultiplayerView.coffee

@@ -0,0 +1,16 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/game-menu/multiplayer-view'
+{me} = require 'lib/auth'
+ThangType = require 'models/ThangType'
+
+module.exports = class MultiplayerView extends CocoView
+  id: 'multiplayer-view'
+  className: 'tab-pane'
+  template: template
+
+  getRenderData: (context={}) ->
+    context = super(context)
+    context
+
+  afterRender: ->
+    super()

app/views/game-menu/OptionsView.coffee

@@ -0,0 +1,16 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/game-menu/options-view'
+{me} = require 'lib/auth'
+ThangType = require 'models/ThangType'
+
+module.exports = class OptionsView extends CocoView
+  id: 'options-view'
+  className: 'tab-pane'
+  template: template
+
+  getRenderData: (context={}) ->
+    context = super(context)
+    context
+
+  afterRender: ->
+    super()

app/views/game-menu/SaveLoadView.coffee

@@ -0,0 +1,16 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/game-menu/save-load-view'
+{me} = require 'lib/auth'
+ThangType = require 'models/ThangType'
+
+module.exports = class SaveLoadView extends CocoView
+  id: 'save-load-view'
+  className: 'tab-pane'
+  template: template
+
+  getRenderData: (context={}) ->
+    context = super(context)
+    context
+
+  afterRender: ->
+    super()

app/views/kinds/CocoView.coffee

@@ -249,7 +249,7 @@ module.exports = class CocoView extends Backbone.View
 
   insertSubView: (view, elToReplace=null) ->
     key = view.id or (view.constructor.name+classCount++)
-    key = _.string.underscored(key)
+    key = _.string.underscored(key)  # handy for autocomplete in dev console
     @subviews[key].destroy() if key of @subviews
     elToReplace ?= @$el.find('#'+view.id)
     elToReplace.after(view.el).remove()

app/views/play/level/ControlBarView.coffee

@@ -4,6 +4,7 @@ template = require 'templates/play/level/control_bar'
 LevelGuideModal = require './modal/LevelGuideModal'
 MultiplayerModal = require './modal/MultiplayerModal'
 ReloadLevelModal = require './modal/ReloadLevelModal'
+GameMenuModal = require 'views/game-menu/GameMenuModal'
 
 module.exports = class ControlBarView extends CocoView
   id: 'control-bar-view'
@@ -28,6 +29,9 @@ module.exports = class ControlBarView extends CocoView
     'click #next-game-button': ->
       Backbone.Mediator.publish 'next-game-pressed'
 
+    'click #game-menu-button': ->
+      @showGameMenuModal()
+
     'click': -> Backbone.Mediator.publish 'tome:focus-editor'
 
   constructor: (options) ->
@@ -85,3 +89,6 @@ module.exports = class ControlBarView extends CocoView
 
   showRestartModal: ->
     @openModalView(new ReloadLevelModal())
+
+  showGameMenuModal: ->
+    @openModalView new GameMenuModal level: @level, session: @session