Implement ????? for unknown research items. Also add info page for detector.

html/detector.html

@@ -0,0 +1 @@
+<p>Some text about your detector.</p>

index.html

@@ -15,9 +15,10 @@
         <hr>
         <ul class="media-list">
           <li class="media" ng-repeat="r in rc.research" ng-show="r.is_visible()">
-              <img class="pull-left" class="media-object" src="{{ r.image }}" alt="">
+            <img ng-show="r.level > 0" class="pull-left" class="media-object" src="{{ r.image }}" alt="">
+            <img ng-hide="r.level > 0" class="pull-left" class="media-object" src="assets/unknown.png" alt="">
             <div class="media-body">
-              <h4 class="media-heading">{{ r.name }} <span ng-show="r.level > 0" class="badge">Level {{ r.level }}</span></h4>
+              <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>
               <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>
@@ -31,6 +32,7 @@
       <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>
         <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">
           <canvas id="detector-core" width="400" height="400">
             Your detector. Click on it to generate events.
@@ -65,7 +67,7 @@
           <li class="media" ng-repeat="w in hrc.workers" ng-show="w.is_visible()">
             <img style="display: none" class="pull-left media-object" src="{{ w.image }}" alt="">
             <div class="media-body">
-              <h4 class="media-heading">{{ w.name }} <span ng-show="w.hired > 0" class="badge">{{ w.hired }}</span></h4>
+              <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>
               <button class="btn btn-primary" ng-disabled="!w.is_available()" ng-click="w.hire()">Hire <small>({{ w.cost | currency }})</small></button>
             </div>

js/game.js

@@ -12,6 +12,13 @@
     return res;
   }
 
+  var showModal = function(title, text) {
+    var $modal = $('#infoBox');
+    $modal.find('#infoBoxLabel').html(title);
+    $modal.find('.modal-body').html(text);
+    $modal.modal({show: true});
+  };
+
   var lab = {
     name: 'My Awesome Lab',
     detector: {
@@ -71,11 +78,7 @@
       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});
+      showModal(this.name, this.getInfo());
     };
   });
 
@@ -186,6 +189,12 @@
 
   app.controller('LabController', ['$interval', function($interval) {
     this.lab = lab;
+    this.showDetectorInfo = function() {
+      if (!this._detectorInfo) {
+        this._detectorInfo = loadFile('html/detector.html');
+      }
+      showModal('Detector', this._detectorInfo);
+    };
     $interval(function() {  // one tick
       lab.getGrant();
       var sum = 0;