fixed < 1 number formatting

Makefile

@@ -1,13 +0,0 @@
-all: lint build
-
-build:
-	tsc
-
-lint:
-	tslint --project .
-
-clean:
-	rm -f public/js/irreligious.js
-
-run:
-	firefox public/index.html

cmd

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+cmd=$1
+
+if [ "$cmd" = "build" ]; then
+  tslint --project . && tsc
+elif [ "$cmd" = "run" ]; then
+  firefox public/index.html &
+else
+  echo "Usage: ./cmd build    - lint and compile"
+  echo "       ./cmd run      - run in firefox"
+fi

public/css/debugger.css

@@ -1,4 +1,5 @@
-#irreligious-game {
+#irreligious-game, .resource-type-container {
+  clear: all;
   overflow: auto;
 }
 div.resource {

src/model/GameConfig.ts

@@ -1,7 +1,7 @@
 /// <reference path="./GameState.ts" />
 /// <reference path="./resource/Money.ts" />
 /// <reference path="./resource/Religion.ts" />
-/// <reference path="./resource/SavingsBonds.ts" />
+/// <reference path="./resource/Savings.ts" />
 
 class GameConfig {
   public worldPopulation: number = 790000000;
@@ -58,7 +58,7 @@ class GameConfig {
 
     // add purchasable resources
     state.addResource('money', new Money(0, 1000));
-    state.addResource('bonds', new SavingsBonds(0));
+    state.addResource('bonds', new Savings(0));
 
     return state;
   }

src/model/resource/IResource.ts

@@ -1,7 +1,7 @@
 enum ResourceType {
-  Religion,
+  Religion = 'religion',
-  Consumable,
+  Consumable = 'consumable',
-  Infrastructure
+  Infrastructure = 'infrastructure'
 }
 
 interface IResource {

src/model/resource/Savings.ts

@@ -1,14 +1,14 @@
 /// <reference path="./Purchasable.ts" />
 
-class SavingsBonds extends Purchasable {
+class Savings extends Purchasable {
   public max?: number = null;
   private _isUnlocked = false;
 
   constructor (
     public value: number,
   ) {
-    super('Savings Bonds', 'Grows money by a small amount over time.');
+    super('Savings', "Can't be spent, but grows money over time.");
-    this.cost = { 'money': 25 };
+    this.cost = { 'money': 10 };
     this._costMultiplier = { 'money': 1.1 };
   }
 
@@ -22,6 +22,6 @@ class SavingsBonds extends Purchasable {
   }
 
   protected purchaseEffect (state: GameState) {
-    state.getResource('money').inc += 0.25;
+    state.getResource('money').inc += 1;
   }
 }

src/render/DebugRenderer.ts

@@ -6,64 +6,70 @@ class DebugRenderer implements IRenderer {
   private _handleClick = true;
 
   public render (state: GameState) {
-    const container = document.getElementById('irreligious-game');
+    if (!this._initialized) {
-    if (container === null) {
+      const container = document.getElementById('irreligious-game');
-      console.log('Cannot find #irreligious-game container.'); // tslint:disable-line
+      this._initialized = true;
-    } else {
+      state.onResourceClick.push(() => this._handleClick = true);
-      if (!this._initialized) {
+      const style = document.createElement('link');
-        this._initialized = true;
+      style.setAttribute('rel', 'stylesheet');
-        state.onResourceClick.push(() => this._handleClick = true);
+      style.setAttribute('href', 'css/debugger.css');
-        const style = document.createElement('link');
+      const head = document.getElementsByTagName('head')[0];
-        style.setAttribute('rel', 'stylesheet');
+      head.appendChild(style);
-        style.setAttribute('href', 'css/debugger.css');
+      // create containers for each resource type
-        const head = document.getElementsByTagName('head')[0];
+      for (const item in ResourceType) {
-        head.appendChild(style);
+        if (isNaN(Number(item))) {
+          const el = document.createElement('div');
+          el.id = `resource-container-${ResourceType[item]}`;
+          el.className = 'resource-type-container';
+          container.appendChild(el);
+        }
       }
-      const rkeys = state.getResources();
+    }
-      for (const rkey of rkeys) {
+    const rkeys = state.getResources();
-        const resource = state.getResource(rkey);
+    for (const rkey of rkeys) {
-        if (resource.isUnlocked(state)) {
+      const resource = state.getResource(rkey);
-          let el = document.getElementById(`r_${rkey}`);
+      console.log(`getting container resource-container-${resource.resourceType}`); // tslint:disable-line
-          if (el === null) {
+      const container = document.getElementById(`resource-container-${resource.resourceType}`);
-            el = document.createElement('div');
+      if (resource.isUnlocked(state)) {
-            el.className = 'resource';
+        let el = document.getElementById(`resource-details-${rkey}`);
-            el.id = `r_${rkey}`;
+        if (el === null) {
-            let content = `
+          el = document.createElement('div');
-              <span class='resourceTitle' title='${resource.description}'>${resource.name}</span><br>
+          el.className = 'resource';
-              <span class='value'></span><span class='max'></span><span class='inc'></span>
+          el.id = `resource-details-${rkey}`;
-            `;
+          let content = `
-            if (resource.clickText !== null) {
+            <span class='resource-title' title='${resource.description}'>${resource.name}</span><br>
-              content += `<br><button class='btn' title='${resource.clickDescription}'>${resource.clickText}</button>`;
+            <span class='resource-value'></span><span class='resource-max'></span><span class='resource-inc'></span>
-            }
+          `;
-            if (resource.cost !== null && Object.keys(resource.cost) !== null) {
+          if (resource.clickText !== null) {
-              content += `<br>Cost: <span class='cost'></span>`;
+            content += `<br><button class='resource-btn' title='${resource.clickDescription}'>${resource.clickText}</button>`;
-            }
-            el.innerHTML = content;
-            container.appendChild(el);
-            if (resource.clickAction !== null) {
-              const btn = el.getElementsByClassName('btn')[0];
-              btn.addEventListener('click', () => state.performClick(rkey));
-            }
           }
-          const elV = el.getElementsByClassName('value')[0];
+          if (resource.cost !== null && Object.keys(resource.cost) !== null) {
-          const elT = el.getElementsByClassName('max')[0];
+            content += `<br>Cost: <span class='resource-cost'></span>`;
-          elV.innerHTML = this.formatNumber(resource.value, 1);
+          }
-          elT.innerHTML = resource.max !== null ? ` / ${this.formatNumber(resource.max, 1)}` : '';
+          el.innerHTML = content;
-          if (this._handleClick) {
+          container.appendChild(el);
-            if (resource.inc > 0) {
+          if (resource.clickAction !== null) {
-              console.log(`${resource.name} inc ${resource.inc} to ${this.formatNumber(resource.inc, 1)}`); // tslint:disable-line
+            const btn = el.getElementsByClassName('resource-btn')[0];
-              const elI = el.getElementsByClassName('inc')[0];
+            btn.addEventListener('click', () => state.performClick(rkey));
-              elI.innerHTML = ` +${this.formatNumber(resource.inc, 1)}/s`;
+          }
-            }
+        }
-            const elC = el.getElementsByClassName('cost');
+        const elV = el.getElementsByClassName('resource-value')[0];
-            if (elC.length > 0) {
+        const elT = el.getElementsByClassName('resource-max')[0];
-              elC[0].innerHTML = this.getCostStr(resource, state);
+        elV.innerHTML = this.formatNumber(resource.value, 1);
-            }
+        elT.innerHTML = resource.max !== null ? ` / ${this.formatNumber(resource.max, 1)}` : '';
+        if (this._handleClick) {
+          if (resource.inc > 0) {
+            const elI = el.getElementsByClassName('resource-inc')[0];
+            elI.innerHTML = ` +${this.formatNumber(resource.inc, 1)}/s`;
+          }
+          const elC = el.getElementsByClassName('resource-cost');
+          if (elC.length > 0) {
+            elC[0].innerHTML = this.getCostStr(resource, state);
           }
         }
       }
-      this._handleClick = false;
     }
+    this._handleClick = false;
   }
 
   private getCostStr (resource: IResource, state: GameState) {
@@ -84,7 +90,7 @@ class DebugRenderer implements IRenderer {
   private formatNumber (num: number, digits: number): string {
     const lookup = [
       { value: 1, symbol: "" },
-      { value: 1e3, symbol: "k" },
+      { value: 1e3, symbol: "K" },
       { value: 1e6, symbol: "M" },
       { value: 1e9, symbol: "G" },
       { value: 1e12, symbol: "T" },
@@ -95,6 +101,6 @@ class DebugRenderer implements IRenderer {
     const item = lookup.slice().reverse().find((i) => num >= i.value);
     return item
       ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol
-      : "0";
+      : num.toFixed(digits).replace(rx, "$1");
   }
 }