codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-01 15:50:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finished migrating the guide into game menu.

Browse source
This commit is contained in:
Scott Erickson 2014-10-28 16:30:40 -07:00
parent dcb7aaf9a4
commit a4729d9d6b
11 changed files with 91 additions and 185 deletions

30
app/styles/game-menu/guide-view.sass
View file

@ -1,3 +1,27 @@
#guide-view
h3
text-decoration: underline
#guide-view, #settings-treema .treema-markdown
.nav-tabs
height: 41px
.tab-content
padding-top: 20px
margin-bottom: 50px
li:not(.active) a[data-toggle="tab"]
cursor: pointer
img
display: block
margin: 0 auto
img + em
display: block
margin: 0 auto
text-align: center
hr
border-color: #5c5c5c
width: 80%
table
width: 80%
margin: 20px 10%

25
app/styles/play/level/modal/docs.sass
View file

@ -1,25 +0,0 @@
#docs-modal .modal-dialog, #settings-treema .treema-markdown
width: 800px
.tab-content
padding-top: 20px
li:not(.active) a[data-toggle="tab"]
cursor: pointer
img
display: block
margin: 0 auto
img + em
display: block
margin: 0 auto
text-align: center
hr
border-color: #5c5c5c
width: 80%
table
width: 80%
margin: 20px 10%

6
app/templates/game-menu/game-menu-modal.jade
View file

@ -6,13 +6,15 @@ block modal-body-content
.button.close(type="button", data-dismiss="modal", aria-hidden="true") ×
.tabbable.tabs-left
- var submenus = ["inventory", "choose-hero", "save-load", "options", "guide", "multiplayer"]
- if (!showDevBits) { // Not done yet.
- if (!showsGuide) {
- submenus.splice(4, 1);
- }
- if (!showDevBits) { // Not done yet.
- submenus.splice(2, 1);
- }
- if (!showInventory)
- submenus.splice(0, 1);
ul.nav.nav-tabs
ul.nav.nav-tabs#game-menu-nav
for submenu, index in submenus
li(class=index ? "" : "active")
a(href='#' + submenu + '-view', data-toggle='tab')

14
app/templates/game-menu/guide-view.jade
View file

@ -1,7 +1,7 @@
h3 Guide, and stuff
div(data-i18n="guide.temp") Temp
p ... and more stuff
p Just put the existing guide in there pretty much as it is. Also add tab for keyboard shortcuts.
ul.nav.nav-tabs
for doc in docs
li
a(data-target="#docs_tab_#{doc.slug}", data-toggle="tab") #{doc.name}
div.tab-content
for doc in docs
div.tab-pane(id="docs_tab_#{doc.slug}")!= doc.html

3
app/templates/play/level/control_bar.jade
View file

@ -21,9 +21,6 @@ h4.title
button.btn.btn-xs.btn-inverse.banner#game-menu-button(title="Show game menu", data-i18n="play_level.game_menu") Game Menu
if showsGuide
button.btn.btn-xs.btn-success.banner#docs-button(title="Show level instructions", data-i18n="play_level.guide") Guide
if spectateGame
button.btn.btn-xs.btn-inverse.banner#next-game-button(title="Next Game", data-i18n="play_level.next-game") Next game!

16
app/templates/play/level/modal/docs.jade
View file

@ -1,16 +0,0 @@
extends /templates/modal/modal_base
block modal-header-content
h3(data-i18n="play_level.guide_title") Guide
block modal-body-content
ul.nav.nav-tabs
for doc in docs
li
a(data-target="#docs_tab_#{doc.slug}", data-toggle="tab") #{doc.name}
div.tab-content
for doc in docs
div.tab-pane(id="docs_tab_#{doc.slug}")!= doc.html
block modal-footer-content
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="modal.close").btn.btn-primary Close

4
app/views/game-menu/GameMenuModal.coffee
View file

@ -16,7 +16,7 @@ module.exports = class GameMenuModal extends ModalView
events:
'change input.select': 'onSelectionChanged'
'shown.bs.tab .nav-tabs a': 'onTabShown'
'shown.bs.tab #game-menu-nav a': 'onTabShown'
constructor: (options) ->
super options
@ -30,6 +30,8 @@ module.exports = class GameMenuModal extends ModalView
context = super(context)
context.showDevBits = @options.showDevBits
context.showInventory = @options.showInventory
docs = @options.level.get('documentation') ? {}
context.showsGuide = docs.specificArticles?.length or docs.generalArticles?.length
context
afterRender: ->

57
app/views/game-menu/GuideView.coffee
View file

@ -1,17 +1,58 @@
CocoView = require 'views/kinds/CocoView'
template = require 'templates/game-menu/guide-view'
{me} = require 'lib/auth'
ThangType = require 'models/ThangType'
Article = require 'models/Article'
utils = require 'lib/utils'
module.exports = class GuideView extends CocoView
# let's implement this once we have the docs database schema set up
module.exports = class LevelGuideView extends CocoView
template: template
id: 'guide-view'
className: 'tab-pane'
template: template
getRenderData: (context={}) ->
context = super(context)
context
constructor: (options) ->
@firstOnly = options.firstOnly
@docs = options?.docs ? options.level.get('documentation') ? {}
general = @docs.generalArticles or []
specific = @docs.specificArticles or []
articles = options.supermodel.getModels(Article)
articleMap = {}
articleMap[article.get('original')] = article for article in articles
general = (articleMap[ref.original] for ref in general)
general = (article.attributes for article in general when article)
@docs = specific.concat(general)
@docs = $.extend(true, [], @docs)
@docs = [@docs[0]] if @firstOnly and @docs[0]
doc.html = marked(utils.i18n doc, 'body') for doc in @docs
doc.name = (utils.i18n doc, 'name') for doc in @docs
doc.slug = _.string.slugify(doc.name) for doc in @docs
super()
getRenderData: ->
c = super()
c.docs = @docs
c
afterRender: ->
super()
#Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'guide-open', volume: 1 # no, only when the tab is activated
if @docs.length is 1
@$el.html(@docs[0].html)
else
# incredible hackiness. Getting bootstrap tabs to work shouldn't be this complex
@$el.find('.nav-tabs li:first').addClass('active')
@$el.find('.tab-content .tab-pane:first').addClass('active')
@$el.find('.nav-tabs a').click(@clickTab)
Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'guide-open', volume: 1
clickTab: (e) =>
@$el.find('li.active').removeClass('active')
Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'guide-tab-switch', volume: 1
afterInsert: ->
super()
Backbone.Mediator.publish 'level:docs-shown', {}
onHidden: ->
Backbone.Mediator.publish 'level:docs-hidden', {}

30
app/views/play/level/ControlBarView.coffee
View file

@ -2,7 +2,6 @@ CocoView = require 'views/kinds/CocoView'
template = require 'templates/play/level/control_bar'
{me} = require 'lib/auth'
LevelGuideModal = require './modal/LevelGuideModal'
GameMenuModal = require 'views/game-menu/GameMenuModal'
RealTimeCollection = require 'collections/RealTimeCollection'
@ -16,16 +15,9 @@ module.exports = class ControlBarView extends CocoView
'real-time-multiplayer:left-game': 'onLeftRealTimeMultiplayerGame'
events:
'click #docs-button': ->
window.tracker?.trackEvent 'Clicked Docs', level: @level.get('name'), label: @level.get('name')
@showGuideModal()
'click #next-game-button': -> Backbone.Mediator.publish 'level:next-game-pressed', {}
'click #game-menu-button': 'showGameMenuModal'
'click': -> Backbone.Mediator.publish 'tome:focus-editor', {}
'click .home a': 'onClickHome'
constructor: (options) ->
@ -69,30 +61,10 @@ module.exports = class ControlBarView extends CocoView
c.multiplayerSession = @multiplayerSession if @multiplayerSession
c.multiplayerPlayers = @multiplayerPlayers if @multiplayerPlayers
c.meID = me.id
docs = @level.get('documentation') ? {}
c.showsGuide = docs.specificArticles?.length or docs.generalArticles?.length
c
afterRender: ->
super()
@guideHighlightInterval ?= setInterval @onGuideHighlight, 5 * 60 * 1000
destroy: ->
clearInterval @guideHighlightInterval if @guideHighlightInterval
super()
onGuideHighlight: =>
return if @destroyed or @guideShownOnce
@$el.find('#docs-button').hide().show('highlight', 4000)
showGuideModal: ->
options = {docs: @level.get('documentation'), supermodel: @supermodel}
@openModalView(new LevelGuideModal(options))
clearInterval @guideHighlightInterval
@guideHighlightInterval = null
showGameMenuModal: ->
@openModalView new GameMenuModal level: @level, session: @session
@openModalView new GameMenuModal level: @level, session: @session, supermodel: @supermodel
onClickHome: (e) ->
e.preventDefault()

31
app/views/play/level/PlayLevelView.coffee
View file

@ -142,37 +142,6 @@ module.exports = class PlayLevelView extends RootView
# CocoView overridden methods ###############################################
updateProgress: (progress) ->
super(progress)
return if @seenDocs
return if @isIPadApp()
return unless @levelLoader.session.loaded and @levelLoader.level.loaded
return unless showFrequency = @levelLoader.level.get('showsGuide')
session = @levelLoader.session
diff = new Date().getTime() - new Date(session.get('created')).getTime()
return if showFrequency is 'first-time' and diff > (5 * 60 * 1000)
articles = @levelLoader.supermodel.getModels Article
for article in articles
return unless article.loaded
@showGuide()
showGuide: ->
@seenDocs = true
LevelGuideModal = require './modal/LevelGuideModal'
options =
docs: @levelLoader.level.get('documentation')
supermodel: @supermodel
firstOnly: true
@openModalView(new LevelGuideModal(options), true)
onGuideOpened = (e) ->
@guideOpenTime = new Date()
onGuideClosed = (e) ->
application.tracker?.trackTiming new Date() - @guideOpenTime, 'Intro Guide Time', @levelID, @levelID, 100
@onLevelStarted()
Backbone.Mediator.subscribeOnce 'modal:opened', onGuideOpened, @
Backbone.Mediator.subscribeOnce 'modal:closed', onGuideClosed, @
return true
getRenderData: ->
c = super()
c.world = @world

60
app/views/play/level/modal/LevelGuideModal.coffee
View file

@ -1,60 +0,0 @@
ModalView = require 'views/kinds/ModalView'
template = require 'templates/play/level/modal/docs'
Article = require 'models/Article'
utils = require 'lib/utils'
# let's implement this once we have the docs database schema set up
module.exports = class LevelGuideModal extends ModalView
template: template
id: 'docs-modal'
shortcuts:
'enter': 'hide'
constructor: (options) ->
@firstOnly = options.firstOnly
@docs = options?.docs ? {}
general = @docs.generalArticles or []
specific = @docs.specificArticles or []
articles = options.supermodel.getModels(Article)
articleMap = {}
articleMap[article.get('original')] = article for article in articles
general = (articleMap[ref.original] for ref in general)
general = (article.attributes for article in general when article)
@docs = specific.concat(general)
@docs = $.extend(true, [], @docs)
@docs = [@docs[0]] if @firstOnly and @docs[0]
doc.html = marked(utils.i18n doc, 'body') for doc in @docs
doc.name = (utils.i18n doc, 'name') for doc in @docs
doc.slug = _.string.slugify(doc.name) for doc in @docs
super()
getRenderData: ->
c = super()
c.docs = @docs
c
afterRender: ->
super()
if @docs.length is 1
@$el.find('.modal-body').html(@docs[0].html)
else
# incredible hackiness. Getting bootstrap tabs to work shouldn't be this complex
@$el.find('.nav-tabs li:first').addClass('active')
@$el.find('.tab-content .tab-pane:first').addClass('active')
@$el.find('.nav-tabs a').click(@clickTab)
Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'guide-open', volume: 1
clickTab: (e) =>
@$el.find('li.active').removeClass('active')
Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'guide-tab-switch', volume: 1
afterInsert: ->
super()
Backbone.Mediator.publish 'level:docs-shown', {}
onHidden: ->
Backbone.Mediator.publish 'level:docs-hidden', {}