Creating achievement demo

intermediate

app/lib/utils.coffee

@@ -98,3 +98,11 @@ module.exports.functionCreators =
   linear: positify(createLinearFunc)
   quadratic: positify(createQuadraticFunc)
   logarithmic: positify(createLogFunc)
+
+# Call done with true to satisfy the 'until' goal and stop repeating func
+module.exports.keepDoingUntil = (func, wait=100, totalWait=5000) ->
+  waitSoFar = 0
+  (done = (success) ->
+    if (waitSoFar += wait) <= totalWait && not success
+      _.delay (-> func done), wait) false
+

app/models/Achievement.coffee

@@ -7,7 +7,7 @@ module.exports = class Achievement extends CocoModel
   urlRoot: '/db/achievement'
 
   isRepeatable: ->
-    @get('proportionalTo')?
+    @get('proportionalTo')?a
 
   # TODO logic is duplicated in Mongoose Achievement schema
   getExpFunction: ->

app/models/CocoModel.coffee

@@ -298,7 +298,6 @@ class CocoModel extends Backbone.Model
         me.fetch (success: -> Backbone.Mediator.publish('achievements:new', collection)) unless _.isEmpty(collection.models)
       error: (collection, res, options) ->
         console.error 'Miserably failed to fetch unnotified achievements'
-        console.log res
     )
 
 

app/styles/notify.sass

@@ -1,50 +1,91 @@
 .notifyjs-achievement-base
   //background: url("/images/pages/base/notify_mockup.png")
-  background-image: url("/images/pages/base/modal_background.png")
-  background-size: 100% 100%
-  width: 500px
-  height: 200px
-  padding: 35px 35px 15px 15px
-  text-align: center
   cursor: auto
+  white-space: nowrap
+  text-overflow: ellipsis
+  padding: 20px 0px
 
   .achievement-body
-    .achievement-image
-      img
-        float: left
-        width: 100px
-        height: 100px
-        border-radius: 50%
-        margin: 20px 30px 20px 30px
-        -webkit-box-shadow: 0px 0px 36px 0px white
-        -moz-box-shadow: 0px 0px 36px 0px white
-        box-shadow: 0px 0px 36px 0px white
+    .achievement-icon
+      position: absolute
+      width: 200px
+      height: 200px
+      left: -150px
+      top: 0px
 
-    .achievement-title
-      font-family: Bangers
-      font-size: 28px
+      .achievement-image
+        width: 100%
+        height: 100%
+        img
+          position: absolute
+          margin: auto
+          top: 0
+          left: 0
+          right: 0
+          bottom: 0
+          width: 72%
 
-    .achievement-description
-      margin-top: 10px
-      font-size: 16px
+    .achievement-border-wood
+      background: url("/images/achievements/border_wood-01.png") no-repeat
+      //background-color: transparent
+      background-size: 100% 100%
 
-    .achievement-progress
-      padding: 15px 0px 0px 0px
+    .achievement-border-silver
+      background: url("/images/achievements/border_silver-01.png") no-repeat
+      //background-color: transparent
+      background-size: 100% 100%
 
-      .achievement-message
+    .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: 18px
-        &:empty
-          display: none
+        font-size: 28px
+        padding-left: -50px
+        overflow: hidden
 
-      .progress-wrapper
-        .progress-bar-wrapper
-          width: 100%
-        .earned-exp
-          padding-left: 5px
+      .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: 16px
-          float: right
+          font-size: 18px
+          &:empty
+            display: none
 
+        .progress-wrapper
+          position: absolute
+          padding-right: 30px
+          bottom: 0px
+
+          .progress-bar-wrapper
+            width: 100%
+            .progress
+              border-radius: 20px
+          .progress-bar-border
+            position: relative
+            top: -44px
+          /*.earned-exp
+            padding-left: 5px
+            font-family: Bangers
+            font-size: 16px
+            float: right
+            */
 .progress-bar-white
   background-color: white

app/templates/achievement_notify.jade

@@ -1,12 +1,15 @@
 div
   .clearfix.achievement-body
-    .achievement-image(data-notify-html="image")
+    .achievement-icon.achievement-border-silver
+      .achievement-image(data-notify-html="image")
     .achievement-content
       .achievement-title(data-notify-html="title")
-      .achievement-description(data-notify-html="description")
+      p.achievement-description(data-notify-html="description")
 
       .achievement-progress
         .achievement-message(data-notify-html="message")
         .progress-wrapper
-          .earned-exp(data-notify-html="earnedExp")
+          //.earned-exp(data-notify-html="earnedExp")
           .progress-bar-wrapper(data-notify-html="progressBar")
+          .progress-bar-border
+            img(src='/images/achievements/bar_border-01.png' width='100%')

app/views/DemoView.coffee

@@ -1,4 +1,4 @@
-CocoView = require 'views/kinds/CocoView'
+RootView = require 'views/kinds/RootView'
 template = require 'templates/demo'
 requireUtils = require 'lib/requireUtils'
 
@@ -23,7 +23,7 @@ DEMO_URL_PREFIX = '/demo/'
   
 ###
 
-module.exports = DemoView = class DemoView extends CocoView
+module.exports = DemoView = class DemoView extends RootView
   id: "demo-view"
   template: template
 

app/views/kinds/RootView.coffee

@@ -29,8 +29,7 @@ module.exports = class RootView extends CocoView
   subscriptions:
     'achievements:new': 'handleNewAchievements'
 
-
-  @showNewAchievement: (achievement, earnedAchievement) ->
+  createNotifyData: (achievement, earnedAchievement) ->
     currentLevel = me.level()
     nextLevel = currentLevel + 1
     currentLevelExp = User.expForLevel(currentLevel)
@@ -67,7 +66,10 @@ module.exports = class RootView extends CocoView
       progressBar: progressBar
       earnedExp: "+ #{achievedExp} XP"
       message: message
+    data
 
+  showNewAchievement: (achievement, earnedAchievement) ->
+    data = createNotifyData achievement, earnedAchievement
     options =
       autoHideDelay: 10000
       globalPosition: 'bottom right'
@@ -83,7 +85,7 @@ module.exports = class RootView extends CocoView
       achievement = new Achievement(_id: earnedAchievement.get('achievement'))
       console.log achievement
       achievement.fetch(
-        success: (achievement) => RootView.showNewAchievement(achievement, earnedAchievement)
+        success: (achievement) => @showNewAchievement(achievement, earnedAchievement)
       )
     )
 

test/app/models/CocoModel.spec.coffee

@@ -1,4 +1,5 @@
 CocoModel = require 'models/CocoModel'
+utils = require 'lib/utils'
 
 class BlandClass extends CocoModel
   @className: 'Bland'
@@ -97,24 +98,29 @@ describe 'CocoModel', ->
       b = new BlandClass({})
       res = b.save()
       request = jasmine.Ajax.requests.mostRecent()
-      request.response({status: 200, responseText: {}})
+      request.response(status: 200, responseText: '{}')
 
-      _.delay (->
-        collection = []
-        model =
-          _id: "5390f7637b4d6f2a074a7bb4"
-          achievement: "537ce4855c91b8d1dda7fda8"
-        collection.push model
+      collection = []
+      model =
+        _id: "5390f7637b4d6f2a074a7bb4"
+        achievement: "537ce4855c91b8d1dda7fda8"
+      collection.push model
 
+      utils.keepDoingUntil (ready) ->
         request = jasmine.Ajax.requests.mostRecent()
         achievementURLMatch = (/.*achievements\?notified=false$/).exec request.url
-        expect(achievementURLMatch).not.toBeNull()
+        if achievementURLMatch
+          ready true
+        else return ready false
+
         request.response {status: 200, responseText: JSON.stringify collection}
 
-        _.delay (->
+        utils.keepDoingUntil (ready) ->
           request = jasmine.Ajax.requests.mostRecent()
           userURLMatch = (/^\/db\/user\/[a-zA-Z0-9]*$/).exec request.url
-          expect(userURLMatch).not.toBeNull()
+          if userURLMatch
+            ready true
+          else return ready false
+
           request.response {status:200, responseText: JSON.stringify me}
-        ), 1000
-      ), 1000
+

test/demo/views/achievement/achievement_get.demo.coffee

@@ -1,6 +1,38 @@
 CocoModel = require 'models/CocoModel'
 RootView = require 'views/kinds/RootView'
+utils = require 'lib/utils'
+Achievement = require 'models/Achievement'
+EarnedAchievement = require 'models/EarnedAchievement'
+
+class MockServer
+
 
 module.exports = ->
-  console.log jasmine.Ajax.requests.mostRecent()
-  -> console.log 'herp'
+  unlockableObj =
+    name: 'Dungeon Arena Started'
+    description: 'Started playing Dungeon Arena. '
+    worth: 3
+    collection: 'level.session'
+    query: "{\"level.original\":\"dungeon-arena\"}"
+    userField: 'creator'
+
+  earnedUnlockableObj =
+    earnedPoints: 3
+    notified: false
+
+  unlockable = new Achievement unlockableObj
+  earnedUnlockable = new EarnedAchievement earnedUnlockableObj
+
+  console.log currentView
+  data = currentView.createNotifyData unlockable, earnedUnlockable
+  imageURL = '/images/achievements/swords.png'
+  data.image = $("<img src='#{imageURL}' />")
+  options =
+    autoHideDelay: 10000
+    globalPosition: 'bottom right'
+    showDuration: 400
+    style: 'achievement'
+    autoHide: false
+    clickToHide: false
+
+  $.notify data, options