Add achievements display

css/style.css

@@ -77,6 +77,10 @@ h1 br {
   font-size: 14px; font-weight: bold;
 }
 
+.achievements-button {
+  margin-top: -48px;
+}
+
 #Status {
   font-size: x-large;
 }
@@ -104,4 +108,6 @@ h1 br {
   position: absolute;
 }
 
-
+#mylab {
+  margin-right: 48px;
+}

index.html

@@ -30,7 +30,7 @@
       </div>
 
       <div class="col-xs-5 scrollable" ng-controller="LabController as lc">
-        <h3 contenteditable>{{ lc.lab.name }} <small>Click here to change the name</small></h3>
+        <h3 id="mylab" contenteditable>{{ lc.lab.name }} <small>Click here to change the name</small></h3> <button class="pull-right btn btn-info achievements-button" data-toggle="modal" data-target="#achievements-modal"><span class="glyphicon glyphicon-thumbs-up"></span></button>
         <hr>
         <button class="pull-right btn btn-info" ng-click="lc.showDetectorInfo()"><span class="glyphicon glyphicon-info-sign"></span></button>
         <div id="detector" ng-controller="DetectorController as dc">
@@ -104,6 +104,26 @@
       </div>
     </div>
 
+    <div class="modal fade" id="achievements-modal" tabindex="-1" role="dialog" aria-labelledby="achievements-label" aria-hidden="true" ng-controller="AchievementsController as ac">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+            <h4 class="modal-title" id="achievements-label">Achievements <span class="badge">{{ ac.achievements.length }} / {{ ac.achievementsAll.length }}</span></h4>
+          </div>
+          <div class="modal-body">
+            <ul class="list-group">
+              <li class="list-group-item" ng-repeat="a in ac.achievements | reverse">
+                <span class="glyphicon {{ a.icon }}"></span>
+                {{ a.description }}
+                <span class="badge">{{ a.time }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div id="InfoBox">
       <a href="#" data-toggle="modal" data-target="#myModal">Particle Clicker</a> <a href="https://github.com/ibab/particle-clicker/"><img src="assets/github.png" alt="GitHub"></a>
     </div>

js/achievements.js

@@ -2,6 +2,9 @@ var achievements =
 {
     list: [],
     listSpecial: [],
+    listSummary: [],
+
+    startTime: new Date(),
 
     count:
     {
@@ -99,7 +102,37 @@ var achievements =
 
             window.setTimeout(remove(alert), 2000);
             achievements.list[i].alerted = true;
+
+            var a = $.extend(true, {}, achievements.list[i]);
+            a.time = achievements.timeFormatter(new Date().getTime() - achievements.startTime.getTime());
+            achievements.listSummary.push(a);
         }
+    },
+
+    timeFormatter: function(msec)
+    {
+        var totals = Math.floor(msec / 1000);
+        var days = Math.floor(totals / (24 * 60 * 60));
+        var hours = Math.floor((totals % (24 * 60 * 60)) / (60 * 60));
+        var totalmin = (totals % (24 * 60 * 60)) % (60 * 60);
+        var mins = Math.floor(totalmin / 60);
+        var secs = totalmin % 60;
+
+        var str = [];
+        if (days > 0) {
+            str.push(days + ' day' + (days % 100 == 1 ? '' : 's'));
+        }
+        if (hours > 0) {
+            str.push(hours + ' h');
+        }
+        if (mins > 0) {
+            str.push(mins + ' min');
+        }
+        if (secs > 0) {
+            str.push(secs + ' s');
+        }
+
+        return str.join(', ');
     }
 };
 

js/game.js

@@ -198,6 +198,12 @@
     return formatNiceNumber;
   }]);
 
+  app.filter('reverse', ['$filter', function($filter) {
+    return function(items) {
+      return items.slice().reverse();
+    };
+  }]);
+
   app.controller('DetectorController', function() {
     this.click = function() {
       lab.acquire(lab.detector.rate);
@@ -238,8 +244,9 @@
     this.upgrades = upgrades;
   });
 
-  app.controller('AchievementsController', function ($scope) {
-    scope.achievements = achievements.list;
+  app.controller('AchievementsController', function() {
+    this.achievements = achievements.listSummary;
+    this.achievementsAll = achievements.list;
   });
 
   achievements.setList(loadFile('json/achievements.json'));

json/achievements.json

@@ -1,12 +1,14 @@
 [
   {
     "description": "You have just discovered ${name}!",
+    "icon": "glyphicon-cog",
     "type": "research",
     "target": "research",
     "threshold": 1
   },
   {
     "description": "You have hired your first ${name}!",
+    "icon": "glyphicon-user",
     "type": "workers",
     "target": "workers",
     "threshold": 1