From ea3d1fee744eca460cd94de8f7a30838a8236a51 Mon Sep 17 00:00:00 2001 From: Ruben Vereecken Date: Mon, 7 Jul 2014 15:03:28 +0200 Subject: [PATCH] Starting on achievement overview style --- app/application.coffee | 2 +- app/models/SuperModel.coffee | 1 + app/styles/achievements.sass | 100 ++++++++++++++++++ app/styles/notify.sass | 100 ------------------ app/templates/achievement_notify.jade | 23 ++-- app/templates/user/achievements.jade | 9 ++ app/views/user/achievements.coffee | 8 +- server/achievements/Achievement.coffee | 12 +-- .../earned_achievement_handler.coffee | 2 +- test/demo/fixtures/achievements.coffee | 2 + .../achievement/UserAchievements.demo.coffee | 19 +++- 11 files changed, 155 insertions(+), 123 deletions(-) create mode 100644 app/styles/achievements.sass delete mode 100644 app/styles/notify.sass diff --git a/app/application.coffee b/app/application.coffee index 8d71a3249..fcfac2a90 100644 --- a/app/application.coffee +++ b/app/application.coffee @@ -40,7 +40,7 @@ Application = initialize: -> @facebookHandler = new FacebookHandler() @gplusHandler = new GPlusHandler() $(document).bind 'keydown', preventBackspace - $.notify.addStyle 'achievement', html: $(AchievementNotify()) + $.notify.addStyle 'achievement', html: $(AchievementNotify popup:true) @linkedinHandler = new LinkedInHandler() preload(COMMON_FILES) $.i18n.init { diff --git a/app/models/SuperModel.coffee b/app/models/SuperModel.coffee index 3eb491b5c..8c1f68e4d 100644 --- a/app/models/SuperModel.coffee +++ b/app/models/SuperModel.coffee @@ -57,6 +57,7 @@ module.exports = class SuperModel extends Backbone.Model res.markLoading() return res else + console.debug 'adding collection', collection @addCollection collection @listenTo collection, 'sync', (c) -> console.debug 'Registering collection', url diff --git a/app/styles/achievements.sass b/app/styles/achievements.sass new file mode 100644 index 000000000..0d9123634 --- /dev/null +++ b/app/styles/achievements.sass @@ -0,0 +1,100 @@ +.notifyjs-achievement-base + cursor: auto + white-space: nowrap + text-overflow: ellipsis + padding: 20px 0px + +.achievement-body + .achievement-icon + position: absolute + width: 200px + height: 200px + left: -140px + top: 0px + + .achievement-image + width: 100% + height: 100% + img + position: absolute + margin: auto + top: 0 + left: 0 + right: 0 + bottom: 0 + + .achievement-border-wood + background: url("/images/achievements/border_wood.png") no-repeat + background-size: 100% 100% + + .achievement-border-silver + background: url("/images/achievements/border_silver.png") no-repeat + background-size: 100% 100% + + .achievement-content + background-image: url("/images/achievements/reward_background2.png") + background-size: 100% 100% + width: 450px + height: 160px + text-align: center + padding: 24px 30px 20px 60px + overflow: hidden + + + .achievement-title + font-family: Bangers + font-size: 28px + padding-left: -50px + overflow: hidden + + .achievement-description + white-space: initial + font-size: 15px + line-height: 1.3em + overflow: hidden + max-height: 2.6em + margin-top: auto + margin-bottom: 0px !important + + .achievement-progress + padding: 8px 0px 0px 0px + + .achievement-message + font-family: Bangers + font-size: 18px + &:empty + display: none + + + + .progress-wrapper + position: absolute + padding-right: 30px + bottom: 0px + + .achievement-level + float: left + font-size: 15px + + .progress-bar-wrapper + padding-left: 30px + width: 100% + .progress + border-radius: 20px + + .progress-bar-border + padding-left: 30px + position: relative + top: -44px + + .progress-bar-border img + width: 100% + /*.earned-exp + padding-left: 5px + font-family: Bangers + font-size: 16px + float: right + */ + +.progress-bar-white + background-color: white diff --git a/app/styles/notify.sass b/app/styles/notify.sass deleted file mode 100644 index 2d888b351..000000000 --- a/app/styles/notify.sass +++ /dev/null @@ -1,100 +0,0 @@ -.notifyjs-achievement-base - cursor: auto - white-space: nowrap - text-overflow: ellipsis - padding: 20px 0px - - .achievement-body - .achievement-icon - position: absolute - width: 200px - height: 200px - left: -140px - top: 0px - - .achievement-image - width: 100% - height: 100% - img - position: absolute - margin: auto - top: 0 - left: 0 - right: 0 - bottom: 0 - width: 72% - - .achievement-border-wood - background: url("/images/achievements/border_wood.png") no-repeat - background-size: 100% 100% - - .achievement-border-silver - background: url("/images/achievements/border_silver.png") no-repeat - background-size: 100% 100% - - .achievement-content - background-image: url("/images/achievements/reward_background2.png") - background-size: 100% 100% - width: 450px - height: 160px - text-align: center - padding: 24px 30px 20px 60px - overflow: hidden - - - .achievement-title - font-family: Bangers - font-size: 28px - padding-left: -50px - overflow: hidden - - .achievement-description - white-space: initial - font-size: 15px - line-height: 1.3em - overflow: hidden - max-height: 2.6em - margin-top: auto - margin-bottom: 0px !important - - .achievement-progress - padding: 8px 0px 0px 0px - - .achievement-message - font-family: Bangers - font-size: 18px - &:empty - display: none - - - - .progress-wrapper - position: absolute - padding-right: 30px - bottom: 0px - - .achievement-level - float: left - font-size: 15px - - .progress-bar-wrapper - padding-left: 30px - width: 100% - .progress - border-radius: 20px - - .progress-bar-border - padding-left: 30px - position: relative - top: -44px - - .progress-bar-border img - width: 100% - /*.earned-exp - padding-left: 5px - font-family: Bangers - font-size: 16px - float: right - */ -.progress-bar-white - background-color: white diff --git a/app/templates/achievement_notify.jade b/app/templates/achievement_notify.jade index a384e4eed..02c86ad78 100644 --- a/app/templates/achievement_notify.jade +++ b/app/templates/achievement_notify.jade @@ -2,15 +2,18 @@ div .clearfix.achievement-body .achievement-icon.achievement-border-silver .achievement-image(data-notify-html="image") + if imgURL + img(src=imgURL) .achievement-content - .achievement-title(data-notify-html="title") - p.achievement-description(data-notify-html="description") + .achievement-title(data-notify-html="title") #{title} + p.achievement-description(data-notify-html="description") #{description} - .achievement-progress - .achievement-message(data-notify-html="message") - .progress-wrapper - //.earned-exp(data-notify-html="earnedExp") - span.achievement-level.badge(data-notify-html="level") - .progress-bar-wrapper(data-notify-html="progressBar") - .progress-bar-border(data-notify-html="barBorder") - //img(src='/images/achievements/bar_border.png' width='100%') + if popup + .achievement-progress + .achievement-message(data-notify-html="message") + .progress-wrapper + //.earned-exp(data-notify-html="earnedExp") + span.achievement-level.badge(data-notify-html="level") + .progress-bar-wrapper(data-notify-html="progressBar") + .progress-bar-border(data-notify-html="barBorder") + //img(src='/images/achievements/bar_border.png' width='100%') diff --git a/app/templates/user/achievements.jade b/app/templates/user/achievements.jade index 93f106d1d..ac312a0e5 100644 --- a/app/templates/user/achievements.jade +++ b/app/templates/user/achievements.jade @@ -1 +1,10 @@ extends /templates/kinds/user + +block append content + .row + each achievement, index in achievements + - var title = achievement.get('name'); + - var description = achievement.get('description'); + - var imgURL = achievement.get('icon'); + .col-sm-6.col-xs-12 + include ../achievement_notify diff --git a/app/views/user/achievements.coffee b/app/views/user/achievements.coffee index f456f9651..6d05fccca 100644 --- a/app/views/user/achievements.coffee +++ b/app/views/user/achievements.coffee @@ -18,5 +18,11 @@ module.exports = class UserAchievementsView extends UserView onUserLoaded: (user) -> super user - @earnedAchievements = @supermodel.loadCollection(new EarnedAchievementCollection(@user), 'achievements').model + @achievements = @supermodel.loadCollection(new AchievementCollection, 'achievements').model + @earnedAchievements = @supermodel.loadCollection(new EarnedAchievementCollection(@user), 'earnedAchievements').model + getRenderData: -> + context = super() + context.achievements = @achievements.models + context.earnedAchievements = @earnedAchievements.models + context diff --git a/server/achievements/Achievement.coffee b/server/achievements/Achievement.coffee index 845587405..ab248d90b 100644 --- a/server/achievements/Achievement.coffee +++ b/server/achievements/Achievement.coffee @@ -30,7 +30,7 @@ AchievementSchema.methods.getExpFunction = -> return utils.functionCreators[kind](parameters) if kind of utils.functionCreators AchievementSchema.statics.jsonschema = jsonschema -AchievementSchema.statics.achievements = {} +AchievementSchema.statics.earnedAchievements = {} # Reloads all achievements into memory. # TODO might want to tweak this to only load new achievements @@ -41,15 +41,15 @@ AchievementSchema.statics.loadAchievements = (done) -> query.exec (err, docs) -> _.each docs, (achievement) -> category = achievement.get 'collection' - AchievementSchema.statics.achievements[category] = [] unless category of AchievementSchema.statics.achievements - AchievementSchema.statics.achievements[category].push achievement - done(AchievementSchema.statics.achievements) if done? + AchievementSchema.statics.earnedAchievements[category] = [] unless category of AchievementSchema.statics.earnedAchievements + AchievementSchema.statics.earnedAchievements[category].push achievement + done(AchievementSchema.statics.earnedAchievements) if done? AchievementSchema.statics.getLoadedAchievements = -> - AchievementSchema.statics.achievements + AchievementSchema.statics.earnedAchievements AchievementSchema.statics.resetAchievements = -> - delete AchievementSchema.statics.achievements[category] for category of AchievementSchema.statics.achievements + delete AchievementSchema.statics.earnedAchievements[category] for category of AchievementSchema.statics.earnedAchievements # Queries are stored as JSON strings, objectify them upon loading AchievementSchema.post 'init', (doc) -> doc.objectifyQuery() diff --git a/server/achievements/earned_achievement_handler.coffee b/server/achievements/earned_achievement_handler.coffee index ac862a11a..5c7a41aeb 100644 --- a/server/achievements/earned_achievement_handler.coffee +++ b/server/achievements/earned_achievement_handler.coffee @@ -17,7 +17,7 @@ class EarnedAchievementHandler extends Handler recalculate: (req, res) -> onSuccess = (data) => log.debug 'Finished recalculating achievements' if 'achievements' of req.body # Support both slugs and IDs separated by commas - achievementSlugsOrIDs = req.body.achievements + achievementSlugsOrIDs = req.body.earnedAchievements EarnedAchievementHandler.recalculate achievementSlugsOrIDs, onSuccess else EarnedAchievementHandler.recalculate onSuccess diff --git a/test/demo/fixtures/achievements.coffee b/test/demo/fixtures/achievements.coffee index 198792668..68660c63c 100644 --- a/test/demo/fixtures/achievements.coffee +++ b/test/demo/fixtures/achievements.coffee @@ -5,6 +5,7 @@ module.exports.DungeonArenaStarted = DungeonArenaStarted = _id: '53ba76249259823746b6b481' name: 'Dungeon Arena Started' description: 'Started playing Dungeon Arena. ' + icon: '/images/achievements/swords-01.png' worth: 3 collection: 'level.session' query: "{\"level.original\":\"dungeon-arena\"}" @@ -14,6 +15,7 @@ module.exports.Simulated = Simulated = _id: '53ba76249259823746b6b482' name: 'Simulated' description: 'Simulated Games.' + icon: '/images/achievements/cup-02.png' worth: 1 collection: 'users' query: "{\"simulatedBy\":{\"$gt\":0}}" diff --git a/test/demo/views/achievement/UserAchievements.demo.coffee b/test/demo/views/achievement/UserAchievements.demo.coffee index c42463965..959dc1a3d 100644 --- a/test/demo/views/achievement/UserAchievements.demo.coffee +++ b/test/demo/views/achievement/UserAchievements.demo.coffee @@ -10,9 +10,20 @@ fixtures = require '../../fixtures/achievements' module.exports = -> view = new UserAchievementsView {}, me.get '_id' - request = jasmine.Ajax.requests.mostRecent() - request.response - status: 200 - responseText: JSON.stringify fixtures.earnedAchievements + respond = (request) -> + return unless request + if request.url.match /db\/achievement/ + request.response + status: 200 + responseText: JSON.stringify fixtures.achievements + else if request.url.match /db\/user\/[a-z0-9]*\/achievements/ + request.response + status: 200 + responseText: JSON.stringify fixtures.earnedAchievements + else + request.response + status: 404 + + _.each jasmine.Ajax.requests.all(), (request) -> respond request view.render()