new logger and button disabling logic

public/css/debugger.css

@@ -1,3 +1,34 @@
+body, html {
+  font-family: sans-serif;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+#irreligious-game {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+#resource-section {
+  flex-basis: 75%;
+  margin: 0.25em 0.5em;
+  overflow: auto;
+}
+#logging-section {
+  flex-basis: 25%;
+  overflow: auto;
+  background-color: #eee;
+  border: 2px solid black;
+  margin: 0.25em 0.5em;
+  padding: 0.25em 0.5em;
+}
+#logging-section div p {
+  margin: 0 0 0.25em 0;
+  padding: 0;
+}
 .resource-type-container {
   display: flex;
   flex-wrap: wrap;

src/model/logging/DebugLogger.ts

@@ -0,0 +1,15 @@
+class DebugLogger implements ILogger {
+  private _container: HTMLElement;
+
+  constructor (container: HTMLElement) {
+    this._container = container;
+  }
+
+  public msg (text: string): void {
+    const p: HTMLElement = document.createElement('p');
+    p.innerText = text;
+    this._container.appendChild(p);
+    this._container.parentElement.scrollTop =
+      this._container.parentElement.scrollHeight;
+  }
+}

src/model/resource/Money.ts

@@ -12,7 +12,7 @@ class Money extends Purchasable {
     super('Money', 'Used to purchase goods and services.');
     this.clickText = 'Collect Tithes';
     this.clickDescription = 'Voluntary contributions from followers.';
-    this._baseMax = 999999;
+    this._baseMax = 1000000;
   }
 
   public isUnlocked (state: GameState): boolean {
@@ -37,8 +37,12 @@ class Money extends Purchasable {
     }
     // each follower gives you $10
     const tithings: number = plorg.value * 10;
-    state.log(`You collected $${state.formatNumber(tithings)} from ${state.formatNumber(plorg.value)} followers.`);
     this._lastCollectionTime = state.now;
     return tithings;
   }
+
+  protected _purchaseLog (amount: number, state: GameState): string {
+    const followers: number = state.getResource('plorg').value;
+    return `You collected $${amount} from ${followers} followers.`;
+  }
 }

src/model/resource/Purchasable.ts

@@ -21,9 +21,13 @@ abstract class Purchasable implements IResource {
   public clickAction (state: GameState): void {
     if (this.max(state) !== null && this.value >= this.max(state)) return;
     if (state.deductCost(this.cost)) {
-      this.value += this._purchaseAmount(state);
-      for (const rkey of Object.keys(this._costMultiplier)) {
-        this.cost[rkey] *= this._costMultiplier[rkey];
+      const amount: number = this._purchaseAmount(state);
+      if (amount > 0) {
+        this.value += amount;
+        state.log(this._purchaseLog(amount, state));
+        for (const rkey of Object.keys(this._costMultiplier)) {
+          this.cost[rkey] *= this._costMultiplier[rkey];
+        }
       }
     }
   }
@@ -50,4 +54,8 @@ abstract class Purchasable implements IResource {
   protected _purchaseAmount (state: GameState): number {
     return 1;
   }
+
+  protected _purchaseLog (amount: number, state: GameState): string {
+    return `You purchased ${amount} x ${this.name}.`;
+  }
 }

src/render/DebugRenderer.ts

@@ -1,4 +1,4 @@
-/// <reference path="../model/logging/ConsoleLogger.ts" />
+/// <reference path="../model/logging/DebugLogger.ts" />
 
 class DebugRenderer implements IRenderer {
   private _initialized: boolean = false;
@@ -6,7 +6,6 @@ class DebugRenderer implements IRenderer {
 
   public render (state: GameState): void {
     if (!this._initialized) {
-      state.logger = new ConsoleLogger();
       const container: HTMLElement =
         document.getElementById('irreligious-game');
       this._initialized = true;
@@ -18,13 +17,23 @@ class DebugRenderer implements IRenderer {
       style.setAttribute('href', 'css/debugger.css');
       const head: HTMLElement = document.getElementsByTagName('head')[0];
       head.appendChild(style);
+      // create resource area and logging area
+      const resDiv: HTMLElement = document.createElement('div');
+      resDiv.id = 'resource-section';
+      container.appendChild(resDiv);
+      const logDiv: HTMLElement = document.createElement('div');
+      logDiv.id = 'logging-section';
+      container.appendChild(logDiv);
+      const logContent: HTMLElement = document.createElement('div');
+      logDiv.appendChild(logContent);
+      state.logger = new DebugLogger(logContent);
       // create containers for each resource type
       for (const item in ResourceType) {
         if (isNaN(Number(item))) {
           const el: HTMLElement = document.createElement('div');
           el.id = `resource-container-${ResourceType[item]}`;
           el.className = 'resource-type-container';
-          container.appendChild(el);
+          resDiv.appendChild(el);
         }
       }
     }
@@ -78,6 +87,14 @@ class DebugRenderer implements IRenderer {
           && resource.max(state) !== null
           ? ` / ${state.formatNumber(resource.max(state))}`
           : '';
+        const elB: HTMLCollectionOf<Element> =
+          el.getElementsByClassName('resource-btn');
+        if (elB.length > 0) {
+          const enabled: boolean = state.isPurchasable(resource.cost)
+            && resource.value < resource.max(state);
+          if (enabled) elB[0].removeAttribute('disabled');
+          else elB[0].setAttribute('disabled', 'disabled');
+        }
         if (this._handleClick) {
           if (resource.inc !== null && resource.inc(state) > 0) {
             const elI: Element =