Implement the station and some little DOM helpers

This commit is contained in:
Aaron Fischer 2015-08-26 12:16:49 +02:00
parent 56f0c087df
commit c73c0f5c34
3 changed files with 89 additions and 39 deletions

View file

@ -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));
}
}

View file

@ -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>

View file

@ -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();
};