Starting on achievement overview style

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 {

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

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

app/styles/notify.sass

@@ -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

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")
+      .achievement-title(data-notify-html="title") #{title}
-      p.achievement-description(data-notify-html="description")
+      p.achievement-description(data-notify-html="description") #{description}
 
-      .achievement-progress
+      if popup
-        .achievement-message(data-notify-html="message")
+        .achievement-progress
-        .progress-wrapper
+          .achievement-message(data-notify-html="message")
-          //.earned-exp(data-notify-html="earnedExp")
+          .progress-wrapper
-          span.achievement-level.badge(data-notify-html="level")
+            //.earned-exp(data-notify-html="earnedExp")
-          .progress-bar-wrapper(data-notify-html="progressBar")
+            span.achievement-level.badge(data-notify-html="level")
-          .progress-bar-border(data-notify-html="barBorder")
+            .progress-bar-wrapper(data-notify-html="progressBar")
-            //img(src='/images/achievements/bar_border.png' width='100%')
+            .progress-bar-border(data-notify-html="barBorder")
+              //img(src='/images/achievements/bar_border.png' width='100%')

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

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

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.earnedAchievements[category] = [] unless category of AchievementSchema.statics.earnedAchievements
-      AchievementSchema.statics.achievements[category].push achievement
+      AchievementSchema.statics.earnedAchievements[category].push achievement
-    done(AchievementSchema.statics.achievements) if done?
+    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()

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

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}}"

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()
+  respond = (request) ->
-  request.response
+    return unless request
-    status: 200
+    if request.url.match /db\/achievement/
-    responseText: JSON.stringify fixtures.earnedAchievements
+      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()