Fix achievements

index.html

@@ -203,7 +203,7 @@
           <div class="modal-body">
             <p class="text-center"><strong>Progress</strong> <span class="label label-info">{{ progress() }} / {{ achievements.length }}</span></p>
             <ul class="list-group">
-              <li class="list-group-item" ng-repeat="a in achievements | reverse" ng-show="a.isAchieved()">
+              <li class="list-group-item" ng-repeat="a in achievements | orderBy:'state.dateAchieved' | reverse" ng-show="a.isAchieved()">
                 <i class="fa {{ a.icon }}"></i>
                 {{ a.description }}
                 <span class="badge">{{ a.state.dateAchieved | date }}</span>

js/app.js

@@ -124,7 +124,7 @@
   app.controller('AchievementsController', function($scope) {
     $scope.achievements = achievements;
     $scope.progress = function() {
-      return achievements.filter(function(a) { a.isAchieved(); }).length;
+      return achievements.filter(function(a) { return a.isAchieved(); }).length;
     };
   });
 

js/gameobjects.js

@@ -247,9 +247,10 @@ var GameObjects = (function() {
       return true;
     }
     if (this._allObjects.hasOwnProperty(this.targetKey) &&
-        this._allObjects[this.targetKey].state.hasOwnProperty(
-            this.targetProperty)) {
-      this.state.dateAchieved = new Date();
+        this._allObjects[this.targetKey].state.hasOwnProperty(this.targetProperty) &&
+        this._allObjects[this.targetKey].state[this.targetProperty] >= this.threshold) {
+      this.state.dateAchieved = new Date().getTime();
+      UI.showAchievement(this);
       return true;
     }
     return false;

js/ui.js

@@ -69,6 +69,26 @@ var UI = (function () {
     }});
   }
 
+  var showAchievement = function(obj) {
+    var alert = '<div class="alert alert-success alert-dismissible" role="alert">';
+    alert += '<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>';
+    alert += '<span class="fa ' + obj.icon + ' alert-glyph"></span> <span class="alert-text">' + obj.description + '</span>';
+    alert += '</div>';
+
+    alert = $(alert);
+
+    $('#achievements-container').prepend(alert);
+    var remove = function(a)
+    {
+      return function()
+      {
+        a.slideUp(300, function() { a.remove(); });
+      };
+    };
+
+    window.setTimeout(remove(alert), 2000);
+  }
+
   var validateVersion = function(version) {
     if (version != Helpers.version) {
       var alert = '<div id="outofdate" class="alert alert-info alert-dismissible" role="alert">';
@@ -104,6 +124,7 @@ var UI = (function () {
   }
 
   return {
+    showAchievement: showAchievement,
     showModal: showModal,
     showLevels: showLevels,
     showUpdateValue: showUpdateValue,

mobile.html

@@ -94,7 +94,7 @@
           <div class="tab-pane" id="achievements" ng-controller="AchievementsController as ac">
             <p class="text-center"><strong>Progress</strong> <span class="label label-info">{{ ac.achievements.length }} / {{ ac.achievementsAll.length }}</span></p>
             <ul class="list-group">
-              <li class="list-group-item" ng-repeat="a in ac.achievements | reverse">
+              <li class="list-group-item" ng-repeat="a in achievements | orderBy:'state.dateAchieved' | reverse">
                 <span class="badge">{{ a.time }}</span>
                 <span class="glyphicon {{ a.icon }}"></span>
                   {{ a.description }}