Add more resources

src/index.html

@@ -8,12 +8,16 @@
     <nav>
       <ul>
         <li>Dust: <strong id="res-dust">0</strong></li>
-        <li>Crystals: <strong id="res-crystals">0</strong></li>
-        <li>Time on this ateroid: <strong id="time">0 hours</strong></li>
+        <li>Stone: <strong id="res-stone">0</strong></li>
+        <li>Carbon: <strong id="res-carbon">0</strong></li>
+        <li>Metal: <strong id="res-metal">0</strong></li>
+        <li>Time wasted on this ateroid: <strong id="time">0 hours</strong></li>
       </ul>
     </nav>
 
-    <button id="btn-mine">Mine on this asteroid</button>
+    <h2>Asteroid classification: <span id="asteroid-classification"></span></h2>
+
+    <button id="btn-mine">Mine on this asteroid now!</button>
 
     <script>bootstrap();</script>
   </body>

src/main.js

@@ -1,3 +1,5 @@
+// Theme: Reversed
+
 class Engine {
     constructor() {
         this.ticks = 0;
@@ -5,7 +7,9 @@ class Engine {
         this.asteroids = [this.current_asteroid];
         this.resources = {
             dust: 0,
-            crystals: 0
+            stone: 0,
+            carbon: 0,
+            metal: 0
         }
     }
 
@@ -15,8 +19,12 @@ class Engine {
 
     update() {
         document.querySelector('#time').innerHTML = this.ticks + ' hours';
+        document.querySelector('#asteroid-classification').innerHTML = this.current_asteroid.classification;
+
         document.querySelector('#res-dust').innerHTML = this.resources.dust;
-        document.querySelector('#res-crystals').innerHTML = this.resources.crystals;
+        document.querySelector('#res-stone').innerHTML = this.resources.stone;
+        document.querySelector('#res-carbon').innerHTML = this.resources.carbon;
+        document.querySelector('#res-metal').innerHTML = this.resources.metal;
     }
 }
 
@@ -32,8 +40,24 @@ class Player {
 }
 
 class Asteroid {
+    constructor() {
+        // Determine the class
+        this.classification = [
+            'A', // small, stone, dust, random
+            'C', // dark carbon
+            'S', // stone
+            'X' // metal
+        ][Helper.random_number(0, 4)];
+    }
+
     mine_resource() {
-        return ['dust', 'dust', 'dust', 'crystals'][Helper.random_number(0, 4)];
+        let resources = {
+            'A': ['dust', 'dust', 'stone'],
+            'C': ['dust', 'carbon', 'carbon', 'carbon'],
+            'S': ['dust', 'stone', 'stone'],
+            'X': ['metal']
+        }[this.classification];
+        return resources[Helper.random_number(0, resources.length)];
     }
 }
 
@@ -50,4 +74,6 @@ var bootstrap = function() {
         player.mine();   
         engine.update();
     };
+
+    engine.update();
 };