diff --git a/app/Router.coffee b/app/Router.coffee
index c266a23ae..47dadc52b 100644
--- a/app/Router.coffee
+++ b/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
diff --git a/app/assets/images/pages/play/modal/game-menu-background.png b/app/assets/images/pages/play/modal/game-menu-background.png
new file mode 100644
index 000000000..5296ff060
Binary files /dev/null and b/app/assets/images/pages/play/modal/game-menu-background.png differ
diff --git a/app/assets/images/pages/play/modal/item-details-hr.png b/app/assets/images/pages/play/modal/hr.png
similarity index 100%
rename from app/assets/images/pages/play/modal/item-details-hr.png
rename to app/assets/images/pages/play/modal/hr.png
diff --git a/app/lib/LevelSetupManager.coffee b/app/lib/LevelSetupManager.coffee
index e4638eda3..d38ba6854 100644
--- a/app/lib/LevelSetupManager.coffee
+++ b/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}"
diff --git a/app/styles/game-menu/game-menu-modal.sass b/app/styles/game-menu/game-menu-modal.sass
index e0167d9f5..f6720f8e3 100644
--- a/app/styles/game-menu/game-menu-modal.sass
+++ b/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: 963px
+ width: 820px
+ height: 570px
+ padding: 0
+ background: none
+ position: relative
+ top: 40px
- .nav-tabs
- h2
- margin: 0
+
+ //- Background
+
+ #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
- pointer-events: none
-
- .tab-pane
- h3:first-child
- margin-top: 0
-
- // http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
- .tabs-left
- > .nav-tabs
- float: left
- width: 185px
- border-bottom: 0
+ font-size: 18px
+ line-height: 50px
+ background: none
+ color: rgb(195,153,124)
+ font-weight: bold
+ padding: 14px 20px
+ font-family: Open Sans Condensed
+ text-transform: uppercase
+
+ .glyphicon
+ margin-right: 6px
- > .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
\ No newline at end of file
diff --git a/app/styles/game-menu/options-view.sass b/app/styles/game-menu/options-view.sass
index b796029e6..9309d3673 100644
--- a/app/styles/game-menu/options-view.sass
+++ b/app/styles/game-menu/options-view.sass
@@ -1,45 +1,137 @@
@import "app/styles/bootstrap/variables"
#options-view
- .select-group, .slider-group
- display: block
- min-height: 20px
- margin-top: 10px
- margin-bottom: 10px
- padding-left: 20px
- vertical-align: middle
+
+ //- Volume slider
+
+ #volume-group
+ position: relative
+ width: 100%
+ 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
- margin-right: 20px
- margin-bottom: 0
-
- .slider
- width: 200px
-
- .form-group.radio-inline
+ position: relative
+
input
- margin-left: 0px
- margin-right: 5px
-
- .radio-inline-parent-label
- padding-left: 0
+ display: none
+
+ & + .custom-checkbox
+ .glyphicon
+ 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
diff --git a/app/styles/play/modal/play-items-modal.sass b/app/styles/play/modal/play-items-modal.sass
index d75098290..5a1d81d3b 100644
--- a/app/styles/play/modal/play-items-modal.sass
+++ b/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)
diff --git a/app/templates/game-menu/game-menu-modal.jade b/app/templates/game-menu/game-menu-modal.jade
index 5939a109c..57a2b6ead 100644
--- a/app/templates/game-menu/game-menu-modal.jade
+++ b/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')
- em(data-i18n='game_menu.' + submenu.replace('-', '_') + '_caption')
+ span.glyphicon(class="glyphicon-"+iconMap[submenu])
+ 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')
- em(data-i18n='game_menu.auth_caption')
- .tab-content
+ span.glyphicon.glyphicon-pencil
+ span(data-i18n='game_menu.auth_tab')
+
+ .tab-content.game-menu-tab-content
for submenu, index in submenus
.tab-pane(id=submenu + '-view')
- .clearfix
-
-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
+// .clearfix
+//
+//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
diff --git a/app/templates/game-menu/options-view.jade b/app/templates/game-menu/options-view.jade
index f21090004..1fb39cfe2 100644
--- a/app/templates/game-menu/options-view.jade
+++ b/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
- label(for="option-volume")
- span(data-i18n="options.volume_label") Volume
- span.spr :
- span#option-volume-value= (me.get('volume') * 100).toFixed(0) + '%'
- #option-volume.slider
+ h3(data-i18n="options.general_options") General Options
+
+ .form-group.slider-group#volume-group
+ span.glyphicon.glyphicon-volume-down
+ #option-volume.slider.spr.spl
+ 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.
diff --git a/app/templates/play/modal/item-details-view.jade b/app/templates/play/modal/item-details-view.jade
index c45b55134..df048ebca 100644
--- a/app/templates/play/modal/item-details-view.jade
+++ b/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
diff --git a/app/views/HomeView.coffee b/app/views/HomeView.coffee
index d3e636cc7..2c68cba89 100644
--- a/app/views/HomeView.coffee
+++ b/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}))
\ No newline at end of file
diff --git a/app/views/game-menu/GameMenuModal.coffee b/app/views/game-menu/GameMenuModal.coffee
index a7d517ce7..3ae24628a 100644
--- a/app/views/game-menu/GameMenuModal.coffee
+++ b/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: ->
diff --git a/app/views/game-menu/OptionsView.coffee b/app/views/game-menu/OptionsView.coffee
index 50cf43b76..8843645c4 100644
--- a/app/views/game-menu/OptionsView.coffee
+++ b/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: ->
diff --git a/app/views/play/level/ControlBarView.coffee b/app/views/play/level/ControlBarView.coffee
index b89c8b47a..6ce04ccde 100644
--- a/app/views/play/level/ControlBarView.coffee
+++ b/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()
diff --git a/app/views/play/level/PlayLevelView.coffee b/app/views/play/level/PlayLevelView.coffee
index 84385a055..24fa86d1d 100644
--- a/app/views/play/level/PlayLevelView.coffee
+++ b/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'