diff --git a/app/assets/images/pages/game-menu/choose-hero-stub.png b/app/assets/images/pages/game-menu/choose-hero-stub.png
new file mode 100644
index 000000000..5711462a7
Binary files /dev/null and b/app/assets/images/pages/game-menu/choose-hero-stub.png differ
diff --git a/app/assets/images/pages/game-menu/inventory-stub.png b/app/assets/images/pages/game-menu/inventory-stub.png
new file mode 100644
index 000000000..87963ebc4
Binary files /dev/null and b/app/assets/images/pages/game-menu/inventory-stub.png differ
diff --git a/app/assets/images/pages/game-menu/save-load-history-stub.png b/app/assets/images/pages/game-menu/save-load-history-stub.png
new file mode 100644
index 000000000..885db7010
Binary files /dev/null and b/app/assets/images/pages/game-menu/save-load-history-stub.png differ
diff --git a/app/assets/images/pages/game-menu/save-load-stub.png b/app/assets/images/pages/game-menu/save-load-stub.png
new file mode 100644
index 000000000..ee201430e
Binary files /dev/null and b/app/assets/images/pages/game-menu/save-load-stub.png differ
diff --git a/app/locale/en.coffee b/app/locale/en.coffee
index e6691ac51..557b15cd8 100644
--- a/app/locale/en.coffee
+++ b/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"
diff --git a/app/styles/game-menu/game-menu-modal.sass b/app/styles/game-menu/game-menu-modal.sass
index e4bae5cea..dcd4f7abf 100644
--- a/app/styles/game-menu/game-menu-modal.sass
+++ b/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
diff --git a/app/styles/game-menu/save-load-view.sass b/app/styles/game-menu/save-load-view.sass
index 48ec197db..23b0e03c1 100644
--- a/app/styles/game-menu/save-load-view.sass
+++ b/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
diff --git a/app/templates/game-menu/choose-hero-view.jade b/app/templates/game-menu/choose-hero-view.jade
index c0edb4dd2..88a84c24f 100644
--- a/app/templates/game-menu/choose-hero-view.jade
+++ b/app/templates/game-menu/choose-hero-view.jade
@@ -1,3 +1,12 @@
h3 Choose Hero, and stuff
-p ... and more stuff
\ No newline at end of file
+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.
diff --git a/app/templates/game-menu/game-menu-modal.jade b/app/templates/game-menu/game-menu-modal.jade
index 433aa3343..2a36dabca 100644
--- a/app/templates/game-menu/game-menu-modal.jade
+++ b/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')
diff --git a/app/templates/game-menu/guide-view.jade b/app/templates/game-menu/guide-view.jade
index 90a0e1034..e82156ac6 100644
--- a/app/templates/game-menu/guide-view.jade
+++ b/app/templates/game-menu/guide-view.jade
@@ -1,3 +1,5 @@
h3 Guide, and stuff
-p ... and more stuff
\ No newline at end of file
+p ... and more stuff
+
+p Just put the existing guide in there pretty much as it is. Also add tab for keyboard shortcuts.
diff --git a/app/templates/game-menu/inventory-view.jade b/app/templates/game-menu/inventory-view.jade
index 975006640..9c9743625 100644
--- a/app/templates/game-menu/inventory-view.jade
+++ b/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
\ No newline at end of file
+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.
diff --git a/app/templates/game-menu/multiplayer-view.jade b/app/templates/game-menu/multiplayer-view.jade
index 79026a399..7c8b20cce 100644
--- a/app/templates/game-menu/multiplayer-view.jade
+++ b/app/templates/game-menu/multiplayer-view.jade
@@ -1,3 +1,5 @@
h3 Multiplayer, and stuff
-p ... and more stuff
\ No newline at end of file
+p ... and more stuff
+
+p Just move the existing multiplayer stuff in there for now. Later it'll get redesigned.
\ No newline at end of file
diff --git a/app/templates/game-menu/options-view.jade b/app/templates/game-menu/options-view.jade
index 3747f742b..b44e9bf35 100644
--- a/app/templates/game-menu/options-view.jade
+++ b/app/templates/game-menu/options-view.jade
@@ -1,3 +1,15 @@
-h3 Options, and stuff
-
-p ... and more stuff
\ No newline at end of file
+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
diff --git a/app/templates/game-menu/save-load-view.jade b/app/templates/game-menu/save-load-view.jade
index d48cd11b3..fee6b41c2 100644
--- a/app/templates/game-menu/save-load-view.jade
+++ b/app/templates/game-menu/save-load-view.jade
@@ -1,3 +1,45 @@
-h3 Save/Load, and stuff
-
-p ... and more stuff
\ No newline at end of file
+.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.
diff --git a/app/views/game-menu/SaveLoadView.coffee b/app/views/game-menu/SaveLoadView.coffee
index 42199e2fe..9614bc204 100644
--- a/app/views/game-menu/SaveLoadView.coffee
+++ b/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()