Display achievements

css/style.css

@@ -61,6 +61,22 @@ h1 br {
   overflow: auto;
 }
 
+#achievements-container {
+  position: fixed; bottom: 0px; left: 0px;
+}
+
+#achievements-container .alert {
+  margin-bottom: 10px; position: relative;
+}
+
+#achievements-container .alert-glyph {
+  float:left; font-size: 32px; margin-right: 10px;
+}
+
+#achievements-container .alert-text {
+  font-size: 14px; font-weight: bold;
+}
+
 #HR .media-object,
 #Upgrades .media-object {
   display: none;

index.html

@@ -138,21 +138,8 @@
       </div>
     </div>
 
-    <div class="modal fade" id="Achievements" role="dialog" tabindex="-1" ng-controller="AchievementsController as ac">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <p>Yo! You Have A New Achievement!</p>
-          </div>
-          <div class="modal-body">
-            <ul>
-              <li ng-repeat="acc in ac.achievements">
-                  <p ng-show="!(!acc.completed || acc.displayed)">{{acc.description}}</p>
-              </li>
-          </ul>
-          </div>
-        </div>
-      </div>
+    <div id="achievements-container" class="col-xs-3">
+
     </div>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

js/achievements.js

@@ -1,12 +1,18 @@
 var achievements =
 {
     list: [],
+    listSpecial: [],
 
     count:
     {
         clicks: 0,
         data: 0,
-        money: 0
+        money: 0,
+        reputation: 0,
+        workers: 0,
+        dataSpent: 0,
+        moneyWorkers: 0,
+        moneyUpgrades: 0
     },
 
     workers: {},
@@ -14,9 +20,27 @@ var achievements =
 
     setList: function(list)
     {
-        achievements.list = list;
-        achievements.list.map(function (item) {  // define additional stuff on the objects
+        for (var i = 0; i < list.length; i++) {
+            if (list[i].type == list[i].target) {
+                achievements.listSpecial.push(list[i]);
+                for (var item in achievements[list[i].type]) {
+                    var a = $.extend(true, {}, list[i]);
+                    a.target = item;
+                    if (list[i].type == 'workers') {
+                        a.description = a.description.replace('${name}', item.substring(0, item.length - 1));
+                    } else {
+                        a.description = a.description.replace('${name}', item);
+                    }
+                    achievements.list.push(a);
+                }
+            } else {
+                achievements.list.push(list[i]);
+            }
+        }
+
+        achievements.list.map(function(item) {
             item.completed = false;
+            item.alerted = false;
             item.is_visible = function() {
                 return this.completed;
             };
@@ -48,17 +72,34 @@ var achievements =
                )
             {
                 achievements.list[i].completed = true;
+                achievements.displayAchievement(i);
             }
         }
-
-        $('#Achievements').scope().displayAchievements();
     },
 
-    // i'm a bit sleepy now, so not thinking about relation between add** functions and update
-    // so this function might not be necessary
-    pureUpdate: function()
+    displayAchievement: function(i)
     {
-        $('#Achievements').scope().displayAchievements();
+        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="glyphicon glyphicon-thumbs-up alert-glyph"></span> <span class="alert-text">' + achievements.list[i].description + '</span>';
+        alert += '</div>';
+
+        alert = $(alert);
+
+        if (achievements.list[i].completed && !achievements.list[i].alerted) {
+            $('#achievements-container').append(alert);
+
+            var remove = function(a)
+            {
+                return function()
+                {
+                    a.slideUp(300);
+                };
+            };
+
+            window.setTimeout(remove(alert), 2000);
+            achievements.list[i].alerted = true;
+        }
     }
 };
 

js/game.js

@@ -33,16 +33,17 @@
     getGrant: function () {
       var addition = this.reputation * this.factor.rate;  // TODO: adjust factor
       this.money += addition;
-      achievements.count.money += addition;
+      achievements.update('count', 'money', addition);
     },
     acquire: function(amount) {
       this.data += amount;
-      achievements.count.data += amount;
+      achievements.update('count', 'data', amount);
     },
     research: function(cost, reputation) {
       if (this.data >= cost) {
         this.data -= cost;
         this.reputation += reputation;
+        achievements.update('count', 'reputation', reputation);
         return true;
       }
       return false;
@@ -58,8 +59,6 @@
       this.money += cost;
     }
   };
- 
-  achievements.setList(loadFile('json/achievements.json'));
 
   var research = loadFile('json/research.json');
   achievements.addResearch(research);
@@ -73,9 +72,10 @@
     };
     item.research = function() {
       if (lab.research(this.cost, this.reputation)) {
+        achievements.update('count', 'dataSpent', this.cost);
         this.level++;
         this.cost = Math.round(this.cost * this.cost_increase);
-        achievements.research[this.name]++;
+        achievements.update('research', this.name, 1);
       }
     };
     item.getInfo = function() {
@@ -101,9 +101,11 @@
     };
     worker.hire = function() {
       if (lab.buy(this.cost)) {
+        achievements.update('count', 'moneyWorkers', this.cost);
         this.hired++;
         this.cost = Math.round(this.cost * this.cost_increase);
         achievements.update('workers', this.name, 1);
+        achievements.update('count', 'workers', 1);
       }
     };
   });
@@ -152,6 +154,7 @@
     };
     upgrade.buy = function() {
       if (!this.used && lab.buy(this.cost)) {
+        achievements.update('count', 'moneyUpgrades', this.cost);
         this.used = true;
         var rec = this.getReceiver();
         if (rec) {
@@ -161,7 +164,6 @@
     };
   });
 
-
   var app = angular.module('particleClicker', []);
 
   app.filter('currency', ['$filter', function($filter) {
@@ -192,7 +194,7 @@
     this.click = function() {
       lab.acquire(lab.detector.rate);
       detector.addEvent();
-      achievements.count.clicks += 1;
+      achievements.update('count', 'clicks', 1);
       return false;
     };
   });
@@ -228,17 +230,8 @@
   });
 
   app.controller('AchievementsController', function ($scope) {
-    $scope.achievements = achievements.list;
-
-    $scope.displayAchievements = function(){
-      // newachievements = [ac for (ac in this.achievements) if (ac.completed == true && ac.displayed == false)];
-      for (var i=0;i<$scope.achievements.length;i++){
-        if ($scope.achievements[i].completed == true && $scope.achievements[i].displayed == false){
-          alert("Yo!");
-          alert($scope.achievements[i].description);
-          $scope.achievements[i].displayed = true;
-        }
-      }
-    }
+    scope.achievements = achievements.list;
   });
+
+  achievements.setList(loadFile('json/achievements.json'));
 })();

json/achievements.json

@@ -1,42 +1,20 @@
 [
   {
-    "name": "Discovered Z-Boson",
-    "description": "Achievement: You just discoverd Z-Boson!",
-    "difficulty": "1",
+    "description": "You have just discovered ${name}!",
     "type": "research",
-    "target": "Z-Boson",
-    "threshold": 1,
-    "displayed": false,
-    "image": "assets/Z.png"
+    "target": "research",
+    "threshold": 1
   },
   {
-    "name": "Discovered top-Quark",
-    "description": "Achievement: You just discovered top-Quark",
-    "difficulty": "2",
-    "type": "research",
-    "target": "top-Quark",
-    "threshold": 1,
-    "displayed": false,
-    "image": "assets/t.png"
-  },
-  {
-    "name": "Hired First PhD",
-    "description": "Achievement: Yo! You have hired your first PhD!",
-    "difficulty": "5",
+    "description": "You have hired your first ${name}!",
     "type": "workers",
-    "target": "PhD Students",
-    "threshold": 1,
-    "displayed": false,
-    "image": "assets/W.png"
+    "target": "workers",
+    "threshold": 1
   },
   {
-    "name": "Hired First Posdoc",
-    "description": "Achievement: Yo! You have hired your first POST DOC!",
-    "difficulty": "5",
-    "type": "workers",
-    "target": "Postdocs",
-    "threshold": 1,
-    "displayed": false,
-    "image": "assets/W.png"
+    "description": "You have just made your first click!",
+    "type": "count",
+    "target": "clicks",
+    "threshold": 1
   }
 ]