Add CourseVictoryModal

This commit is contained in:
Scott Erickson 2016-01-19 15:42:20 -08:00
parent 57cf264880
commit 277c526dc3
16 changed files with 1991 additions and 0 deletions

View file

@ -4,3 +4,8 @@ Achievement = require 'models/Achievement'
module.exports = class AchievementCollection extends CocoCollection
url: '/db/achievement'
model: Achievement
fetchRelatedToLevel: (levelOriginal, options) ->
options = _.extend({data: {}}, options)
options.data.related = levelOriginal
@fetch(options)

View file

@ -0,0 +1,12 @@
CocoCollection = require 'collections/CocoCollection'
LevelSession = require 'models/LevelSession'
module.exports = class LevelSessionCollection extends CocoCollection
url: '/db/level.session'
model: LevelSession
fetchForCourseInstance: (courseInstanceID, options) ->
options = _.extend({
url: "/db/course_instance/#{courseInstanceID}/my-course-level-sessions"
}, options)
@fetch(options)

View file

@ -0,0 +1,6 @@
CocoCollection = require 'collections/CocoCollection'
ThangType = require 'models/ThangType'
module.exports = class ThangTypeCollection extends CocoCollection
url: '/db/thang.type'
model: ThangType

View file

@ -0,0 +1,72 @@
@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
#course-victory-modal
//- Top-level modal container
.modal-dialog
margin-top: 0
padding-top: 0
width: 750px
.modal-content
position: relative
margin-top: -251px
//- Header
.background-wrapper
width: 750px
background: transparent
border: 0px solid transparent
border-style: solid
border-image: url("/images/pages/play/level/modal/victory_modal_border_background.png") 250 0 100 0 fill round
border-width: 250px 0 100px 0
border-radius: 12px
.modal-header
border: none
position: absolute
left: 0px
width: 100%
height: 134px
margin: 0
padding: 0
top: 74px
text-align: center
.well-parchment
display: inline-block
h1
color: inherit
margin: 0
#close-modal
position: absolute
right: 174px
color: white
top: -15px
background: #ba1d00
padding: 6px 6px 3px
.modal-body
padding: 30px 20px 0
position: relative
top: 80px
margin-top: 80px
.well-parchment
margin-top: 20px
html.no-borderimage
#course-victory-modal
.modal-dialog
margin-top: 251px
.background-wrapper
border: 0
background: url("/images/pages/play/level/modal/victory_modal_background.png")
height: 713px

View file

@ -0,0 +1,5 @@
#new-item-view
#item-header
margin: -5px

View file

@ -0,0 +1,8 @@
#progress-view
h1, h2, h3
margin-top: 0
color: black
margin-bottom: 5px
p
margin-top: 30px

View file

@ -0,0 +1,4 @@
.modal-dialog
.background-wrapper
.modal-content
.modal-body

View file

@ -0,0 +1,19 @@
.modal-header
#close-modal.well.well-sm.well-parchment(data-dismiss="modal")
span.glyphicon.glyphicon-remove
.well.well-sm.well-parchment
h1(data-i18n="play_level.victory_new_item")
.modal-body
.container-fluid
.row
.col-sm-5.text-center
img.img-rounded.img-prize(src=view.item.getPortraitURL())
h3#item-header
#item-label.label.label-banner= i18n(view.item.attributes, 'name')
.col-sm-7
.well.well-parchment= i18n(view.item.attributes, 'description')
.row
.col-sm-3.col-sm-offset-9
button#continue-btn.btn.btn-illustrated.btn-primary.btn-block.btn-lg.text-uppercase Continue

View file

@ -0,0 +1,42 @@
.modal-header
#close-modal.well.well-sm.well-parchment(data-dismiss="modal")
span.glyphicon.glyphicon-remove
.well.well-sm.well-parchment
h1 Level Complete
.modal-body
.container-fluid
.row
- var colClass = view.nextLevel ? 'col-sm-7' : 'col-sm-12'
div(class=colClass)
.well.well-sm.well-parchment
h3.text-uppercase Completed Level:
h2.text-uppercase.text-center= i18n(view.level.attributes, 'name')
.well.well-sm.well-parchment
h3.text-uppercase Course:
.row
.col-sm-8
h3.text-uppercase.text-center= i18n(view.course.attributes, 'name')
.col-sm-4
- var stats = view.campaign.statsForSessions(view.levelSessions)
h1
span #{stats.levels.numDone}/#{stats.levels.size}
if view.nextLevel
.col-sm-5
.well.well-sm.well-parchment
h3.text-uppercase Next Level:
h2.text-uppercase= i18n(view.nextLevel.attributes, 'name')
p= i18n(view.nextLevel.attributes, 'description')
.row
.col-sm-5.col-sm-offset-2
// TODO: Add this and rest of campaign functionality
// button#continue-btn.btn.btn-illustrated.btn-default.btn-block.btn-lg.text-uppercase View Leaderboards
.col-sm-5
if view.nextLevel
button#next-level-btn.btn.btn-illustrated.btn-primary.btn-block.btn-lg.text-uppercase Next Level
else
button#done-btn.btn.btn-illustrated.btn-primary.btn-block.btn-lg.text-uppercase Done

View file

@ -133,6 +133,7 @@ module.exports = class CocoView extends Backbone.View
context.view = @
context._ = _
context.document = document
context.i18n = utils.i18n
context
afterRender: ->

View file

@ -36,6 +36,7 @@ GoldView = require './LevelGoldView'
DuelStatsView = require './DuelStatsView'
VictoryModal = require './modal/VictoryModal'
HeroVictoryModal = require './modal/HeroVictoryModal'
CourseVictoryModal = require './modal/CourseVictoryModal'
InfiniteLoopModal = require './modal/InfiniteLoopModal'
LevelSetupManager = require 'lib/LevelSetupManager'
ContactModal = require 'views/core/ContactModal'
@ -533,6 +534,7 @@ module.exports = class PlayLevelView extends RootView
@endHighlight()
options = {level: @level, supermodel: @supermodel, session: @session, hasReceivedMemoryWarning: @hasReceivedMemoryWarning, courseID: @courseID, courseInstanceID: @courseInstanceID}
ModalClass = if @level.get('type', true) in ['hero', 'hero-ladder', 'hero-coop', 'course', 'course-ladder'] then HeroVictoryModal else VictoryModal
ModalClass = CourseVictoryModal if @courseID and @courseInstanceID
victoryModal = new ModalClass(options)
@openModalView(victoryModal)
if me.get('anonymous')

View file

@ -0,0 +1,170 @@
ModalView = require 'views/core/ModalView'
template = require 'templates/play/level/modal/course-victory-modal'
Achievements = require 'collections/Achievements'
Level = require 'models/Level'
Campaign = require 'models/Campaign'
Course = require 'models/Course'
ThangType = require 'models/ThangType'
ThangTypes = require 'collections/ThangTypes'
LevelSessions = require 'collections/LevelSessions'
EarnedAchievement = require 'models/EarnedAchievement'
LocalMongo = require 'lib/LocalMongo'
ProgressView = require './ProgressView'
NewItemView = require './NewItemView'
module.exports = class CourseVictoryModal extends ModalView
id: 'course-victory-modal'
template: template
closesOnClickOutside: false
initialize: (options) ->
@courseID = options.courseID
@courseInstanceID = options.courseInstanceID
@views = []
@session = options.session
@level = options.level
@newItems = new ThangTypes()
@newHeroes = new ThangTypes()
@achievements = options.achievements
if not @achievements
@achievements = new Achievements()
@achievements.fetchRelatedToLevel(@session.get('level').original)
@achievements = @supermodel.loadCollection(@achievements, 'achievements').model
@listenToOnce @achievements, 'sync', @onAchievementsLoaded
else
@onAchievementsLoaded()
@playSound 'victory'
@nextLevel = options.nextLevel
if (nextLevel = @level.get('nextLevel')) and not @nextLevel
@nextLevel = new Level().setURL "/db/level/#{nextLevel.original}/version/#{nextLevel.majorVersion}"
@nextLevel = @supermodel.loadModel(@nextLevel, 'level').model
@campaign = new Campaign()
@course = options.course
if @courseID and not @course
@course = new Course().setURL "/db/course/#{@courseID}"
@course = @supermodel.loadModel(@course, 'course').model
if @course.loading
@listenToOnce @course, 'sync', @onCourseLoaded
else
@onCourseLoaded()
else if @course
@onCourseLoaded()
if @courseInstanceID
@levelSessions = new LevelSessions()
@levelSessions.fetchForCourseInstance(@courseInstanceID)
@levelSessions = @supermodel.loadCollection(@levelSessions, 'sessions', {
data: { project: 'state.complete level.original playtime changed' }
}).model
onCourseLoaded: ->
@campaign.set('_id', @course.get('campaignID'))
@campaign = @supermodel.loadModel(@campaign, 'campaign').model
onAchievementsLoaded: ->
@achievements.models = _.filter @achievements.models, (m) -> not m.get('query')?.ladderAchievementDifficulty # Don't show higher AI difficulty achievements
itemOriginals = []
heroOriginals = []
achievementIDs = []
for achievement in @achievements.models
rewards = achievement.get('rewards') or {}
heroOriginals.push rewards.heroes or []
itemOriginals.push rewards.items or []
achievement.completed = LocalMongo.matchesQuery(@session.attributes, achievement.get('query'))
achievementIDs.push(achievement.id) if achievement.completed
itemOriginals = _.uniq _.flatten itemOriginals
heroOriginals = _.uniq _.flatten heroOriginals
#project = ['original', 'rasterIcon', 'name', 'soundTriggers', 'i18n'] # This is what we need, but the PlayHeroesModal needs more, and so we load more to fill up the supermodel.
project = ['original', 'rasterIcon', 'name', 'slug', 'soundTriggers', 'featureImages', 'gems', 'heroClass', 'description', 'components', 'extendedName', 'unlockLevelName', 'i18n']
for [newThangTypeCollection, originals] in [[@newItems, itemOriginals], [@newHeroes, heroOriginals]]
for original in originals
thang= new ThangType()
thang.url = "/db/thang.type/#{original}/version"
thang.project = project
@supermodel.loadModel(thang, 'thang')
newThangTypeCollection.add(thang)
@newEarnedAchievements = []
for achievement in @achievements.models
continue unless achievement.completed
ea = new EarnedAchievement({
collection: achievement.get('collection')
triggeredBy: @session.id
achievement: achievement.id
})
ea.save()
# Can't just add models to supermodel because each ea has the same url
ea.sr = @supermodel.addSomethingResource(ea.cid)
@newEarnedAchievements.push ea
@listenToOnce ea, 'sync', (model) ->
model.sr.markLoaded()
if _.all((ea.id for ea in @newEarnedAchievements))
unless me.loading
@supermodel.loadModel(me, 'user', {cache: false})
@newEarnedAchievementsResource.markLoaded()
# have to use a something resource because addModelResource doesn't handle models being upserted/fetched via POST like we're doing here
@newEarnedAchievementsResource = @supermodel.addSomethingResource('earned achievements') if @newEarnedAchievements.length
onLoaded: ->
super()
@views = []
# TODO: Add main victory view
# TODO: Add level up view
# TODO: Add new hero view?
for newItem in @newItems.models
@views.push(new NewItemView({item: newItem}))
progressView = new ProgressView({
level: @level
nextLevel: @nextLevel
course: @course
campaign: @campaign
levelSessions: @levelSessions
})
progressView.once 'done', @onDone, @
progressView.once 'next-level', @onNextLevel, @
for view in @views
view.on 'continue', @onViewContinue, @
@views.push(progressView)
@showView(_.first(@views))
afterRender: ->
super()
@showView(@currentView)
showView: (view) ->
return unless view
view.setElement(@$('.modal-content'))
view.$el.attr('id', view.id)
view.$el.addClass(view.className)
view.render()
@currentView = view
onViewContinue: ->
index = _.indexOf(@views, @currentView)
@showView(@views[index+1])
onNextLevel: ->
link = "/play/level/#{@nextLevel.get('slug')}?course=#{@courseID}&course-instance=#{@courseInstanceID}"
application.router.navigate(link, {trigger: true})
onDone: ->
link = "/courses/#{@courseID}/#{@courseInstanceID}"
application.router.navigate(link, {trigger: true})

View file

@ -0,0 +1,20 @@
CocoView = require 'views/core/CocoView'
module.exports = class NewItemView extends CocoView
id: 'new-item-view'
className: 'modal-content'
template: require('templates/play/level/modal/new-item-view')
events:
'click #continue-btn': 'onClickContinueButton'
afterRender: ->
super()
# TODO: Animate icon
initialize: (options) ->
@item = options.item
super()
onClickContinueButton: ->
@trigger 'continue'

View file

@ -0,0 +1,24 @@
CocoView = require 'views/core/CocoView'
module.exports = class ProgressView extends CocoView
id: 'progress-view'
className: 'modal-content'
template: require 'templates/play/level/modal/progress-view'
events:
'click #done-btn': 'onClickDoneButton'
'click #next-level-btn': 'onClickNextLevelButton'
initialize: (options) ->
@level = options.level
@course = options.course
@nextLevel = options.nextLevel
@campaign = options.campaign
@levelSessions = options.levelSessions
onClickDoneButton: ->
@trigger 'done'
onClickNextLevelButton: ->
@trigger 'next-level'

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,124 @@
Course = require 'models/Course'
Level = require 'models/Level'
LevelSession = require 'models/LevelSession'
Achievements = require 'collections/Achievements'
CourseVictoryModal = require 'views/play/level/modal/CourseVictoryModal'
fixtures = require './CourseVictoryModal.fixtures'
NewItemView = require 'views/play/level/modal/NewItemView'
ProgressView = require 'views/play/level/modal/ProgressView'
describe 'CourseVictoryModal', ->
it 'will eventually be the only victory modal'
makeViewOptions = ->
{
course: new Course(fixtures.course)
level: new Level(fixtures.level)
session: new LevelSession(fixtures.session)
achievements: new Achievements(fixtures.achievements)
nextLevel: new Level(fixtures.nextLevel)
courseInstanceID: '56414c3868785b5f152424f1'
courseID: '560f1a9f22961295f9427742'
}
handleRequests = ->
requests = jasmine.Ajax.requests.all()
thangRequest = _.find(requests, (r) -> _.string.startsWith(r.url, '/db/thang.type'))
thangRequest?.respondWith({status: 200, responseText: JSON.stringify(fixtures.thangType)})
earnedAchievementRequests = _.where(requests, {url: '/db/earned_achievement'})
for [request, response] in _.zip(earnedAchievementRequests, fixtures.earnedAchievements)
request.respondWith({status: 200, responseText: JSON.stringify(response)})
sessionsRequest = _.find(requests, (r) -> _.string.startsWith(r.url, '/db/course_instance'))
sessionsRequest.respondWith({status: 200, responseText: JSON.stringify(fixtures.courseInstanceSessions)})
campaignRequest = _.findWhere(requests, {url: '/db/campaign/55b29efd1cd6abe8ce07db0d'})
campaignRequest.respondWith({status: 200, responseText: JSON.stringify(fixtures.campaign)})
describe 'given a course level with a next level and no item or hero rewards', ->
modal = null
beforeEach (done) ->
options = makeViewOptions()
modal = new CourseVictoryModal(options)
handleRequests()
_.defer done
it 'only shows the ProgressView', ->
expect(_.size(modal.views)).toBe(1)
expect(modal.views[0] instanceof ProgressView).toBe(true)
xit '(demo)', -> currentView.openModalView(modal)
describe 'its ProgressView', ->
it 'has a next level button which navigates to the next level on click', ->
spyOn(application.router, 'navigate')
button = modal.$el.find('#next-level-btn')
expect(button.length).toBe(1)
button.click()
expect(application.router.navigate).toHaveBeenCalled()
it 'has two columns', ->
expect(modal.$('.row:first .col-sm-12').length).toBe(0)
expect(modal.$('.row:first .col-sm-5').length).toBe(1)
expect(modal.$('.row:first .col-sm-7').length).toBe(1)
describe 'given a course level without a next level', ->
modal = null
beforeEach (done) ->
options = makeViewOptions()
# make the level not have a next level
level = options.level
level.unset('nextLevel')
delete options.nextLevel
modal = new CourseVictoryModal(options)
handleRequests()
_.defer done
describe 'its ProgressView', ->
it 'has a single large column, since there is no next level to display', ->
expect(modal.$('.row:first .col-sm-12').length).toBe(1)
expect(modal.$('.row:first .col-sm-5').length).toBe(0)
expect(modal.$('.row:first .col-sm-7').length).toBe(0)
it 'has a done button which navigates to the CourseDetailsView for the given course instance', ->
spyOn(application.router, 'navigate')
button = modal.$el.find('#done-btn')
expect(button.length).toBe(1)
button.click()
expect(application.router.navigate).toHaveBeenCalled()
xit '(demo)', -> currentView.openModalView(modal)
describe 'given a course level with a new item', ->
modal = null
beforeEach (done) ->
options = makeViewOptions()
# insert new item into achievement properties
achievement = options.achievements.first()
rewards = _.cloneDeep(achievement.get('rewards'))
rewards.items = ["53e4108204c00d4607a89f78"]
achievement.set('rewards', rewards)
modal = new CourseVictoryModal(options)
handleRequests()
_.defer done
it 'includes a NewItemView when the level rewards a new item', ->
expect(_.size(modal.views)).toBe(2)
expect(modal.views[0] instanceof NewItemView).toBe(true)
it 'continues to the ProgressView when you click the continue button', ->
expect(modal.currentView instanceof NewItemView).toBe(true)
modal.$el.find('#continue-btn').click()
expect(modal.currentView instanceof ProgressView).toBe(true)
xit '(demo)', -> currentView.openModalView(modal)