Add UI functionality for saving.

Also fix problems with rounding and the numbers popping up.

index.html

@@ -22,6 +22,14 @@
         </div>
         <ul class="nav navbar-nav navbar-left">
           <li><a href="#" data-toggle="modal" data-target="#achievements-modal"><i class="fa fa-trophy"></i> Achievements</a></li>
+          <li class="dropdown" ng-controller="SaveController">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Last saved: {{ lastSaved | date : 'H:mm:ss' }} <span class="caret"></span></a>
+            <ul class="dropdown-menu" role="menu">
+              <li><a href="#" ng-click="saveNow()"><i class="fa fa-save"></i> Save now</a></li>
+              <li class="divider"></li>              
+              <li><a href="#" ng-click="restart()"><i class="fa fa-refresh"></i> Restart</a></li>
+            </ul>
+          </li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
           <li><a href="https://github.com/particle-clicker/particle-clicker/" target="_blank"><i class="fa fa-github"></i> GitHub</a></li>
@@ -48,7 +56,7 @@
             <img ng-hide="r.level > 0" class="pull-left" class="media-object" src="assets/icons/png/unknown.png" alt="">
             <div class="media-body">
               <h4 class="media-heading">{{ r.level > 0 ? r.name : '?????' }} <span ng-show="r.level > 0" class="badge">Level {{ r.level }}</span></h4>
-              <p ng-show="r.level > 0">{{ r.description }} Researching it will give you {{ r.reputation }} reputation.</p>
+              <p ng-show="r.level > 0">{{ r.description }} Researching it will give you {{ r.reputation | niceNumber }} reputation.</p>
               <div class="btn-group">
               <button class="btn btn-primary" ng-disabled="!r.is_available()" ng-click="rc.doResearch(r)">Research <small>({{ r.cost | niceNumber }} data)</small></button>
               <button class="btn btn-info" ng-show="r.level > 0" ng-click="r.showInfo()"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
@@ -99,7 +107,7 @@
           <li class="media" ng-repeat="w in hrc.workers" ng-show="w.is_visible()">
             <div class="media-body">
               <h4 class="media-heading">{{ w.name }} <span ng-show="w.hired > 0" class="badge">{{ w.hired | niceNumber }}</span></h4>
-              <p ng-show="w.hired > 0">{{ w.description }} They produce {{ w.rate }} data per second.</p>
+              <p ng-show="w.hired > 0">{{ w.description }} They produce {{ w.rate | niceNumber }} data per second.</p>
               <button class="btn btn-primary" ng-disabled="!w.is_available()" ng-click="hrc.hire(w)">Hire <small>({{ w.cost | currency }})</small></button>
             </div>
           </li>

js/game.js

@@ -80,7 +80,7 @@
         achievements.update('count', 'moneyWorkers', cost);
         achievements.update('workers', worker.name, 1);
         achievements.update('count', 'workers', 1);
-        UI.showUpdateValue("#update-funding", cost);
+        UI.showUpdateValue("#update-funding", -cost);
       }
     };
   });
@@ -102,9 +102,18 @@
     this.achievementsAll = achievements.list;
   });
 
-  // Activate auto-saving every 10 seconds
-  setInterval(function () {
-    GameObjects.saveAll();
-    console.log('The game has been saved.');
-  }, 10000);
+  app.controller('SaveController', ['$scope', '$interval', function($scope, $interval) {
+    $scope.lastSaved = new Date();
+    $scope.saveNow = function() {
+      GameObjects.saveAll();
+      $scope.lastSaved = new Date();
+    };
+    $scope.restart = function() {
+      if (window.confirm('Do you really want to restart the game? All progress will be lost.')) {
+        ObjectStorage.clear();
+        window.location.reload(true);
+      }
+    };
+    $interval($scope.saveNow, 10000);
+  }]);
 })();

js/ui.js

@@ -24,17 +24,17 @@ var UI = (function () {
   };
 
   var showUpdateValue = function(ident, num) {
-    var formatted = Helpers.formatNumberPostfix(num);
     if (num != 0) {
+      var formatted = Helpers.formatNumberPostfix(num);
       var insert;
       if (num > 0) {
         insert = $("<div></div>")
                   .attr("class", "update-plus")
-                  .html("+" + num);
+                  .html("+" + formatted);
       } else {
         insert = $("<div></div>")
                   .attr("class", "update-minus")
-                  .html(num);
+                  .html(formatted);
       }
       showUpdate(ident, insert);
     }