Add visualization of counter updates

css/style.css

@@ -96,3 +96,24 @@ h1 br {
 #Status strong {
   color: #666;
 }
+
+.update-value {
+  position: relative;
+  float: right;
+}
+
+.update-plus {
+  color: green;
+  float: left;
+  right: 5px;
+  position: absolute;
+}
+
+.update-minus {
+  color: red;
+  float: left;
+  right: 5px;
+  position: absolute;
+}
+
+

index.html

@@ -46,16 +46,19 @@
             <strong>Data</strong>
             <br>
             {{ lc.lab.data | niceNumber }}
+            <div class="update-value" id="update-data"></div>
           </div>
           <div class="col-xs-4 text-center">
             <strong>Reputation</strong>
             <br>
             {{ lc.lab.reputation | niceNumber }}
+            <div class="update-value" id="update-reputation"></div>
           </div>
-          <div class="col-xs-4 text-center">
-            <strong>Funding</strong>
+          <div class="col-xs-4">
+            <strong class="text-center">Funding</strong>
             <br>
             {{ lc.lab.money | currency }}
+            <div class="update-value" id="update-funding"></div>
           </div>
         </div>
       </div>

js/game.js

@@ -33,17 +33,21 @@
     getGrant: function () {
       var addition = this.reputation * this.factor.rate;  // TODO: adjust factor
       this.money += addition;
+      showUpdateValue("#update-funding", addition);
       achievements.update('count', 'money', addition);
     },
     acquire: function(amount) {
       this.data += amount;
       achievements.update('count', 'data', amount);
+      showUpdateValue("#update-data", amount);
     },
     research: function(cost, reputation) {
       if (this.data >= cost) {
         this.data -= cost;
         this.reputation += reputation;
         achievements.update('count', 'reputation', reputation);
+        showUpdateValue("#update-data", -cost);
+        showUpdateValue("#update-reputation", reputation);
         return true;
       }
       return false;
@@ -51,6 +55,7 @@
     buy: function(cost) {
       if (this.money >= cost) {
         this.money -= cost;
+        showUpdateValue("#update-funding", -cost);
         return true;
       }
       return false;

js/ui.js

@@ -40,4 +40,31 @@ $(function() {
         else        
             detector.visible = !this[hidden];
     }
-})();
+})();
+
+function showUpdateValue(ident, num) {
+    if (num != 0) {
+        if (num > 0) {
+            insert = $("<div></div>")
+                .attr("class", "update-plus")
+                .html("+" + num);
+        } else {
+            insert = $("<div></div>")
+                .attr("class", "update-minus")
+                .html(num);
+        }
+        showUpdate(ident, insert);
+    }
+}
+
+function showUpdate(ident, insert) {
+    elem = $(ident);
+    elem.append(insert);
+    insert.animate({
+        "bottom":"+=30px",
+        "opacity": 0
+    }, { duration: 500, complete: function() {
+        $(this).remove();
+    }});
+}
+