Implement display of info boxes. Also fix formatting of numbers.

index.html

@@ -19,7 +19,10 @@
             <div class="media-body">
               <h4 class="media-heading">{{ 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>
-              <button class="btn" ng-disabled="!r.is_available()" ng-click="r.research()">Research <small>({{ r.cost }} data)</small></button>
+              <div class="btn-group">
+              <button class="btn btn-primary" ng-disabled="!r.is_available()" ng-click="r.research()">Research <small>({{ r.cost }} 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>
+            </div>
             </div>
           </li>
         </ul>
@@ -64,7 +67,7 @@
             <div class="media-body">
               <h4 class="media-heading">{{ w.name }} <span ng-show="w.hired > 0" class="badge">{{ w.hired }}</span></h4>
               <p ng-show="w.hired > 0">{{ w.description }} They produce {{ w.rate }} data per second.</p>
-              <button class="btn" ng-disabled="!w.is_available()" ng-click="w.hire()">Hire <small>({{ w.cost | currency }})</small></button>
+              <button class="btn btn-primary" ng-disabled="!w.is_available()" ng-click="w.hire()">Hire <small>({{ w.cost | currency }})</small></button>
             </div>
           </li>
         </ul>
@@ -79,13 +82,25 @@
             <div class="media-body">
               <h4 class="media-heading">{{ u.name }}</h4>
               <p>{{ u.description }}</p>
-              <button class="btn" ng-disabled="!u.is_available()" ng-click="u.buy()">Buy <small>({{ u.cost | currency }})</small></button>
+              <button class="btn btn-primary" ng-disabled="!u.is_available()" ng-click="u.buy()">Buy <small>({{ u.cost | currency }})</small></button>
             </div>
           </li>
         </ul>
       </div>
     </div>
 
+    <div class="modal fade" id="infoBox" tabindex="-1" role="dialog" aria-labelledby="infoBoxLabel" aria-hidden="true">
+      <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="infoBoxLabel"></h4>
+          </div>
+          <div class="modal-body"></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/game.js

@@ -1,6 +1,6 @@
 'use strict';
 (function() {
-  var loadJsonFile = function(filename) {
+  var loadFile = function(filename) {
     var res;
     $.ajax({
       async: false,
@@ -49,7 +49,7 @@
     }
   };
 
-  var research = loadJsonFile('json/research.json');
+  var research = loadFile('json/research.json');
   research.map(function(item) {
     item.level = 0;
     item.is_visible = function() {
@@ -64,9 +64,22 @@
         this.cost = Math.round(this.cost * this.cost_increase);
       }
     };
+    item.getInfo = function() {
+      if (!this._info) {
+        this._info = loadFile(this.info);
+      }
+      return this._info;
+    },
+    item.showInfo = function() {
+      // Display a bootstrap modal with the info.
+      var $modal = $('#infoBox');
+      $modal.find('#infoBoxLabel').html(this.name);
+      $modal.find('.modal-body').html(this.getInfo());
+      $modal.modal({show: true});
+    };
   });
 
-  var workers = loadJsonFile('json/workers.json');
+  var workers = loadFile('json/workers.json');
   workers.map(function(worker) {
     worker.hired = 0;
     worker.is_visible = function() {
@@ -83,7 +96,7 @@
     };
   });
 
-  var upgrades = loadJsonFile('json/upgrades.json');
+  var upgrades = loadFile('json/upgrades.json');
   upgrades.map(function(upgrade) {
     upgrade.getReceiver = function() {
       if (this.type === "detector") {
@@ -149,13 +162,13 @@
     return function(number) {
       var abs = Math.abs(number);
       if (abs >= Math.pow(10, 12)) {
-        number = (number / Math.pow(10, 12)).toFixed(3) + "T";
+        number = (number / Math.pow(10, 12)).toFixed(1) + "T";
       } else if (abs >= Math.pow(10, 9)) {
-        number = (number / Math.pow(10, 9)).toFixed(3) + "B";
+        number = (number / Math.pow(10, 9)).toFixed(1) + "B";
       } else if (abs >= Math.pow(10, 6)) {
-        number = (number / Math.pow(10, 6)).toFixed(3) + "M";
+        number = (number / Math.pow(10, 6)).toFixed(1) + "M";
       } else if (abs >= Math.pow(10, 3)) {
-        number = (number / Math.pow(10, 3)).toFixed(3) + "k";
+        number = (number / Math.pow(10, 3)).toFixed(1) + "k";
       } else {
         number = number.toFixed(0);
       }