Implement the station and some little DOM helpers

src/helpers.js

@@ -3,3 +3,19 @@ class Helper {
         return Math.floor((Math.random() * max) + min);
     }
 }
+
+class DOMNode {
+    constructor(node) {
+        this.node = node;
+    }
+
+    node() {
+        return this.node;
+    }
+}
+
+class DOM {
+    static s(selector) {
+        return new DOMNode(document.querySelector(selector));
+    }
+}

src/index.html

@@ -11,13 +11,20 @@
         <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>
 
+    <div id="asteroid">
+      <p>Time wasted on this ateroid: <strong id="time">0 hours</strong></p>
       <h2>Asteroid classification: <span id="asteroid-classification"></span></h2>
-
       <button id="btn-mine">Mine on this asteroid now!</button>
+      <button id="btn-to-station">Fly to station</button>
+    </div>
+
+    <div id="station">
+      <h2>Docked to station</h2>
+      <button id="btn-to-asteroid">Fly to the asteroid</button>
+    </div>
 
     <script>bootstrap();</script>
   </body>

src/main.js

@@ -5,7 +5,42 @@ class Engine {
     constructor() {
         this.ticks = 0;
         this.current_asteroid = new Asteroid();
+        this.station = new Station();
+        this.ship = new Ship(this.current_asteroid);
         this.asteroids = [this.current_asteroid];
+    }
+
+    tick() {
+        this.ticks++;
+    }
+
+    update() {
+        // Resources
+        DOM.s('#res-dust').node.innerHTML = this.ship.resources.dust;
+        DOM.s('#res-stone').node.innerHTML = this.ship.resources.stone;
+        DOM.s('#res-carbon').node.innerHTML = this.ship.resources.carbon;
+        DOM.s('#res-metal').node.innerHTML = this.ship.resources.metal;
+
+        if (this.ship.docked_to instanceof Station) {
+            DOM.s('#asteroid').node.style.display = 'none';
+            DOM.s('#station').node.style.display = '';
+        }
+
+        if (this.ship.docked_to instanceof Asteroid) {
+            DOM.s('#station').node.style.display = 'none';
+            DOM.s('#asteroid').node.style.display = '';
+
+            DOM.s('#time').node.innerHTML = (this.ticks-this.current_asteroid.landed_on) + ' hours';
+            DOM.s('#asteroid-classification').node.innerHTML = this.current_asteroid.classification;
+        }
+    }
+}
+
+class Ship {
+    constructor(asteroid) {
+        this.docked_to = asteroid;
+
+        this.equipment = ['probe'];
         this.resources = {
             dust: 0,
             stone: 0,
@@ -14,35 +49,18 @@ class Engine {
         }
     }
 
-    tick() {
-        this.ticks++;
-    }
-
-    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-stone').innerHTML = this.resources.stone;
-        document.querySelector('#res-carbon').innerHTML = this.resources.carbon;
-        document.querySelector('#res-metal').innerHTML = this.resources.metal;
-    }
-}
-
-class Player {
-    constructor(engine) {
-        this.engine = engine;
-        this.equipment = ['probe'];
-    }
-
     mine() {
-        let type = this.engine.current_asteroid.mine_resource();
-        this.engine.resources[type]++;
+        if (this.docked_to instanceof Asteroid) {
+            let [type, amount] = this.docked_to.harvest();
+            this.resources[type] += amount;
+        }
     }
 }
 
 class Asteroid {
     constructor() {
+        this.landed_on = 0;
+
         // Determine the class
         this.classification = [
             'A', // small, stone, dust, random
@@ -52,7 +70,7 @@ class Asteroid {
         ][Helper.random_number(0, 4)];
     }
 
-    mine_resource(player) {
+    harvest(ship) {
         let resources = {
             'A': ['dust', 'dust', 'stone'],
             'C': ['dust', 'carbon', 'carbon', 'carbon'],
@@ -60,15 +78,14 @@ class Asteroid {
             'X': ['metal']
         }[this.classification];
         let res_type = resources[Helper.random_number(0, resources.length)];
-
-
-        // TODO: gain!
+        // TODO: amount
+        return [res_type, 1];
     }
 }
 
 class Station {
     constructor() {
-        this.inventory = [
+        this.inventory = {
             // take probes from the asteroid
             'probe': {'A': 1, 'C': 1, 'S': 1, 'X': 1},
 
@@ -83,19 +100,17 @@ class Station {
 
             // melt the matrix
             'vaporizer': {'A': 4, 'C': 7, 'S': 6, 'X': 5}
-        ];
+        };
     }
 
-    buy(player, item) {
+    buy(ship, item) {
         if (this.inventory.indexOf(item) !== -1 &&
-            player.equipment.indexOf(item) === -1)
-            player.equipment.push(item);
+            ship.equipment.indexOf(item) === -1)
+            ship.equipment.push(item);
     }
 }
 
 var engine = new Engine();
-var player = new Player(engine);
-var station = new Station();
 
 var bootstrap = function() {
     setInterval(() => {
@@ -103,10 +118,22 @@ var bootstrap = function() {
         engine.update();
     }, 1000);
 
-    document.querySelector('#btn-mine').onclick = () => {
-        player.mine();   
+    DOM.s('#btn-mine').node.onclick = () => {
+        engine.ship.mine();
         engine.update();
     };
 
+    DOM.s('#btn-to-station').node.onclick = () => {
+        engine.ship.docked_to = engine.station;
+        engine.current_asteroid = null;
+        engine.update();
+    }
+
+    DOM.s('#btn-to-asteroid').node.onclick = () => {
+        engine.ship.docked_to = engine.asteroids[0];
+        engine.current_asteroid = engine.asteroids[0];
+        engine.current_asteroid.landed_on = engine.ticks;
+        engine.update();
+    }
     engine.update();
 };