From b9c6d094d175080bd570bf9c0b3048aec54f1666 Mon Sep 17 00:00:00 2001
From: Kevin Dungs <kevin@dun.gs>
Date: Sun, 3 Aug 2014 00:12:46 +0200
Subject: [PATCH] Some more UI stuff.

---
 css/style.css | 13 +++++++++++++
 index.html    | 54 ++++++++++++++++++++++++++++++++++++++++++++++-----
 js/game.js    | 26 ++++++++++++++++++++-----
 3 files changed, 83 insertions(+), 10 deletions(-)

diff --git a/css/style.css b/css/style.css
index 771f1eb..a43901f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,6 +7,7 @@ h1 br {
 }
 
 #InfoBox {
+  background: rgba(255, 255, 255, .5);
   color: #666;
   position: fixed;
   right: 40px;
@@ -59,3 +60,15 @@ h1 br {
 .scrollable {
   overflow: auto;
 }
+
+#HR .media-object,
+#Upgrades .media-object {
+  display: none;
+}
+
+@media screen and (min-width: 1400px) {
+  #HR .media-object,
+  #Upgrades .media-object {
+    display: block;
+  }
+}
diff --git a/index.html b/index.html
index 88c5b21..2b93549 100644
--- a/index.html
+++ b/index.html
@@ -37,9 +37,21 @@
           </canvas>
         </div>
         <div class="row lead bg-warning">
-          <p class="col-xs-4 text-center"><strong>Data</strong><br>{{ lc.lab.data | number:0 }}</p>
-          <p class="col-xs-4 text-center"><strong>Reputation</strong><br>{{ lc.lab.reputation | number:0 }}</p>
-          <p class="col-xs-4 text-center"><strong>Money</strong><br> {{ lc.lab.money | currency }}</p>
+          <p class="col-xs-4 text-center">
+            <strong>Data</strong>
+            <br>
+            {{ lc.lab.data | niceNumber }}
+          </p>
+          <p class="col-xs-4 text-center">
+            <strong>Reputation</strong>
+            <br>
+            {{ lc.lab.reputation | niceNumber }}
+          </p>
+          <p class="col-xs-4 text-center">
+            <strong>Money</strong>
+            <br>
+            {{ lc.lab.money | currency }}
+          </p>
         </div>
         <div id="ResearchHist"></div>
       </div>
@@ -64,7 +76,7 @@
         <hr>
         <ul class="media-list">
           <li class="media" ng-repeat="u in uc.upgrades" ng-show="u.is_visible()">
-            <img class="pull-left media-object visible-lg-*" src="{{ u.image }}" alt="">
+            <img style="display: none;" class="pull-left media-object visible-lg-*" src="{{ u.image }}" alt="">
             <div class="media-body">
               <h4 class="media-heading">{{ u.name }}</h4>
               <p>{{ u.description }}</p>
@@ -76,7 +88,39 @@
     </div>
 
     <div id="InfoBox">
-      Particle Clicker <a href="https://github.com/ibab/particle-clicker/"><img src="assets/github.png" alt="GitHub"></a>
+      <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>
+
+    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">Particle Clicker</h4>
+          </div>
+          <div class="modal-body">
+            <h5>About</h5>
+            <p>Particle Clicker is a game that was made during the <a href="https://webfest.web.cern.ch">CERN Webfest 2014</a>. The idea is borrowed from <a href="http://orteil.dashnet.org/cookieclicker/">Cookie Clicker</a>, an amazing and addictive cookie-themed game.</p>
+            <img class="pull-right" width="200" src="http://www.citizencyberscience.net/wiki/images/1/1b/Cernwebfest.png" alt="">
+            <h5>Libraries</h5>
+            <p>This game is realised using a few libraries. Those are</p>
+            <ul>
+              <li><a href="http://jquery.com">jQuery</a></li>
+              <li><a href="http://angularjs.org">AngularJS</a></li>
+              <li><a href="http://d3js.org/">D3.js</a></li>
+              <li><a href="http://getbootstrap.com/">Bootstrap</a></li>
+              <li><a href="http://imulus.github.io/retinajs/">retina.js</a></li>
+            </ul>
+            <h5>Authors</h5>
+            <ul>
+              <li><a href="https://github.com/gbiro">Gabor Biro</a></li>
+              <li><a href="https://github.com/ibab">Igor Babuschkin</a></li>
+              <li><a href="https://github.com/kdungs">Kevin Dungs</a></li>
+              <li><a href="https://github.com/ntadej">Tadej Novak</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
     </div>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
diff --git a/js/game.js b/js/game.js
index 2680a81..6f38759 100644
--- a/js/game.js
+++ b/js/game.js
@@ -136,11 +136,27 @@
 
   var app = angular.module('particleClicker', []);
 
-  app.filter("currency", ["$filter", function($filter) {
-    return function(input) {
-      input = Math.round(input) + ".";
-      input = input.replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
-      return "JTN " + input.substring(0, input.length-1);
+  app.filter('currency', ['$filter', function ($filter) {
+    return function (input) {
+      return 'JTN ' + $filter('niceNumber')(input);
+    };
+  }]);
+
+  app.filter('niceNumber', ['$filter', function ($filter) {
+    return function (number) {
+      var abs = Math.abs(number);
+      if (abs >= Math.pow(10, 12)) {
+        number = (number / Math.pow(10, 12)).toFixed(3) + "T";
+      } else if (abs >= Math.pow(10, 9)) {
+        number = (number / Math.pow(10, 9)).toFixed(3) + "B";
+      } else if (abs >= Math.pow(10, 6)) {
+        number = (number / Math.pow(10, 6)).toFixed(3) + "M";
+      } else if (abs >= Math.pow(10, 3)) {
+        number = (number / Math.pow(10, 3)).toFixed(3) + "k";
+      } else {
+        number = number.toFixed(0);
+      }
+      return number; 
     };
   }]);