More work on game menu skeleton.

app/locale/en.coffee

@@ -467,6 +467,10 @@
     guide_caption: "Docs and tips"
     multiplayer_caption: "Play with friends!"
 
+  save_load:
+    granularity_saved_games: "Saved"
+    granularity_change_history: "History"
+
   keyboard_shortcuts:
     keyboard_shortcuts: "Keyboard Shortcuts"
     space: "Space"

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

@@ -3,8 +3,14 @@
   
   // http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
   .tabs-left
-    .nav-tabs
+    > .nav-tabs
+      float: left
+      width: 185px
       border-bottom: 0
+
+    > .tab-content
+      padding: 0px 15px
+      margin-left: 185px
    
   .tab-content > .tab-pane, .pill-content > .pill-pane
     display: none
@@ -22,8 +28,6 @@
         margin-bottom: 3px
    
   .tabs-left > .nav-tabs
-    float: left
-    margin-right: 19px
     border-right: 1px solid #ddd
    
     > li > a

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

@@ -1,3 +1,15 @@
 #save-load-view
-  h3
-    text-decoration: underline
+  #save-granularity-toggle
+    width: 100%
+    label
+      width: 50%
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
+
+  .save-list
+    .list-group-item:first-child
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+
+  .save-pane
+    overflow: hidden

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

@@ -1,3 +1,12 @@
 h3 Choose Hero, and stuff
 
-p ... and more stuff
+p ... and more stuff
+
+img(src="/images/pages/game-menu/choose-hero-stub.png")
+
+h3 Interactions
+ul
+  li Click a language button. Click ‘save as default language’ if you want to carry it over to following levels.
+  li Click a hero. Right here it’s just a simple list on the left with a picture of the hero on the right. Might instead have a carousel on the left and stats on the right. Basically this needs more thought because it’s starting to look like the inventory screen, but this is more for later. Might also have the wizard coloring used here for heroes.
+  li Click equip and it puts in basically the inventory screen view to choose which items to start the level with.
+  li Click begin. A new LevelSession is created. LevelLoader is given the new/updated LevelSession, new data is loaded, world reruns.

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

@@ -6,8 +6,8 @@ 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
+      for submenu, index in submenus
+        li(class=index ? "" : "active")
           a(href='#' + submenu + '-view', data-toggle='tab')
             h2(data-i18n='game_menu.' + submenu.replace('-', '_') + '_tab')
             em(data-i18n='game_menu.' + submenu.replace('-', '_') + '_caption')

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

@@ -1,3 +1,5 @@
 h3 Guide, and stuff
 
-p ... and more stuff
+p ... and more stuff
+
+p Just put the existing guide in there pretty much as it is. Also add tab for keyboard shortcuts.

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

@@ -1,3 +1,9 @@
-h3 Inventory, and stuff
+img(src="/images/pages/game-menu/inventory-stub.png")
 
-p ... and more stuff
+h3 Interactions
+ul
+  li Click an item slot. It is highlighted and items that can go in that slot show up on the right with short descriptions. Full info about it shows up on the lower left.
+  li Click an item on the menu. It shows up on the lower right.
+  li To equip an item: drag (if ipad), double click (if web), click swap button (either)
+  li Click an item on the menu. It swaps the item into the slot.
+  li If the equipment changed and the player clicks done, a new LevelSession is created with this new equipment. If “use current code” is selected, the code for the current session is copied over to the new session. Modal closes, data is loaded, world runs, etc.

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

@@ -1,3 +1,5 @@
 h3 Multiplayer, and stuff
 
-p ... and more stuff
+p ... and more stuff
+
+p Just move the existing multiplayer stuff in there for now. Later it'll get redesigned.

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

@@ -1,3 +1,15 @@
-h3 Options, and stuff
-
-p ... and more stuff
+h3 Stuff to put in there maybe
+ul
+  li Show/Hide Grid (may destroy the grid)
+  li Show/Hide FPS (may keep admin-only)
+  li Player Name
+  li Player Avatar (currently just in settings, but it would be interesting to feature it in more places so that they’d actually start using it and increasing how much we can rely on it in social/multiplayer–and wherever it’s featured that’s not a tiny icon, we could let them change it)
+  li Default programming language
+  li Editor key bindings (default ACE, Emacs, Vim)
+  li Live autocompletion
+  li Show invisibles (visualize spaces/tabs)
+  li Show indent guides (displays vertical lines to see indentation better)
+  li Smart behaviors (autocompleting braces, brackets, and quotes)
+  li Music on/off
+  li Volume (assuming we’re also keeping volume next to play button in playback bar)
+  li Autocast Delay

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

@@ -1,3 +1,45 @@
-h3 Save/Load, and stuff
-
-p ... and more stuff
+.row
+  .col-sm-4
+    .btn-group(data-toggle="buttons")#save-granularity-toggle
+      label.btn.btn-primary.active
+        input(type="radio", checked=true, value="level-sessions")
+        span(data-i18n="save_load.granularity_saved_games", title="Manage your saved games")
+      label.btn.btn-primary
+        input(type="radio", value="change-history")
+        span(data-i18n="save_load.granularity_change_history", title="See your autosaved code edit history")
+    .save-list.level-sessions
+      ul.list-group
+        li.list-group-item Save 001
+        li.list-group-item Greedy Algorithm
+        li.list-group-item Defensive Strategy
+    .save-list.change-history.secret
+      ul.list-group
+        li.list-group-item --item switches yeah--
+        li.list-group-item Autosaved 17:05
+        li.list-group-item Autosaved 14:45
+        li.list-group-item Autosaved 16:40
+        li.list-group-item Autosaved 5:05
+        li.list-group-item Autosaved 5:00
+        li.list-group-item --item switches yeah--
+        li.list-group-item Autosaved 4:50
+        li.list-group-item Autosaved 7/7/14
+        li.list-group-item Autosaved 7/7/14
+  .col-sm-8
+    .save-pane.level-sessions
+      img(src="/images/pages/game-menu/save-load-stub.png")
+      h3 Interactions:
+      ul
+        li On the left is a flat list of saves for this level. Click one and the stuff on the right appears.
+        li There are name and description input boxes. Editing them auto updates the save on the left.
+        li There are also items showing what the current equipment is, and below the current code. Neither are editable.
+        li If you click the red box on any save, or click the delete button for the selected save, it asks for confirmation, then deletes.
+        li Click the new save button: current code, items and empty name/description appear on the right, and a new save slot appears at the top of the list on the left, which is selected. Works like editing otherwise.
+    
+    .save-pane.change-history.secret
+      img(src="/images/pages/game-menu/save-load-history-stub.png")
+      h3 Interactions
+      ul
+        li Similar to WebStorm. Click ‘history’ tab in the upper left of the save/load screen to switch to this view.
+        li Click the left row of VCS versions, and the hero, language, items and code for it shows on the right.
+        li Click revert to set the code back to the version of the code on the left. Modal closes with the new code.
+        li Might experiment with showing diffs with difflib. More of an interface issue than a showing-diff issue.

app/views/game-menu/SaveLoadView.coffee

@@ -8,9 +8,17 @@ module.exports = class SaveLoadView extends CocoView
   className: 'tab-pane'
   template: template
 
+  events:
+    'change #save-granularity-toggle input': 'onSaveGranularityChanged'
+
   getRenderData: (context={}) ->
     context = super(context)
     context
 
   afterRender: ->
     super()
+
+  onSaveGranularityChanged: (e) ->
+    toShow = $(e.target).val()
+    @$el.find('.save-list, .save-pane').hide()
+    @$el.find('.save-list.' + toShow + ', .save-pane.' + toShow).show()