Extract DayDisplayCorner out of Simulation. Communicate via new event…

…s: dayChangedEvent and numPhotonsChangedEvent

src/dayDisplayCorner.ts

@@ -6,6 +6,8 @@ import {
   BG_COLOR_LIGHT_75,
 } from './constants';
 import { PlantGlucoseSimulation } from './plantGlucoseSimulation';
+import * as SVG from 'svg.js';
+type SVG = typeof SVG;
 
 /**
  * DayDisplayCorner --- Displays what day it is currently in the simulaton and
@@ -14,8 +16,8 @@ import { PlantGlucoseSimulation } from './plantGlucoseSimulation';
  * @author Geoffrey Kwan
  */
 export class DayDisplayCorner {
-  backgroundRect: SVG;
-  dayText: SVG;
+  private backgroundRect: SVG.Rect;
+  private dayText: SVG.Text;
 
   /**
    * @param draw An SVG draw object to paint other elements on
@@ -32,31 +34,31 @@ export class DayDisplayCorner {
       .fill(BG_COLOR_LIGHT_100)
       .stroke({ width: 2 });
     this.dayText = simulation.draw.text('Day 1').x(775).y(0).font({ size: 64 });
+    simulation.dayChangedEvent$.subscribe((day) => this.updateDayText(day));
+    simulation.numPhotonsChangedEvent$.subscribe((numPhotons) =>
+      this.updateDayColor(numPhotons)
+    );
   }
 
-  /**
-   * Updates the current day indicator as specified
-   * @param currentDayText A string containing the current day text
-   */
-  updateDayText(currentDayText: string) {
-    this.dayText.text(currentDayText);
+  private updateDayText(currentDay: number): void {
+    this.dayText.text(`Day ${currentDay}`);
   }
 
   /**
    * Updates the background color of this day display corner based on
    * number of photons
-   * @param numPhotonsThisCycle how many photons came in this day
+   * @param numPhotons how many photons came in this day
    */
-  updateDayColor(numPhotonsThisCycle: number) {
-    if (numPhotonsThisCycle === 4) {
+  private updateDayColor(numPhotons: number): void {
+    if (numPhotons === 4) {
       this.backgroundRect.fill(BG_COLOR_LIGHT_100);
-    } else if (numPhotonsThisCycle === 3) {
+    } else if (numPhotons === 3) {
       this.backgroundRect.fill(BG_COLOR_LIGHT_75);
-    } else if (numPhotonsThisCycle === 2) {
+    } else if (numPhotons === 2) {
       this.backgroundRect.fill(BG_COLOR_LIGHT_50);
-    } else if (numPhotonsThisCycle === 1) {
+    } else if (numPhotons === 1) {
       this.backgroundRect.fill(BG_COLOR_LIGHT_25);
-    } else if (numPhotonsThisCycle === 0) {
+    } else if (numPhotons === 0) {
       this.backgroundRect.fill(BG_COLOR_LIGHT_0);
     }
   }

src/main.ts

@@ -6,6 +6,7 @@ import { PlayPauseButton } from './playPauseButton';
 import { Graph } from './graph';
 import { SimulationEndFeedback } from './simulationEndFeedback';
 import { EnergyIndicatorView } from './energyIndicatorView';
+import { DayDisplayCorner } from './dayDisplayCorner';
 
 /**
  * Entry point for the application. Initializes the simulation with parameters
@@ -86,6 +87,7 @@ $(document).ready(function () {
   new ResetButton(simulation);
   new SimulationEndFeedback(simulation);
   new EnergyIndicatorView(simulation);
+  new DayDisplayCorner(simulation);
   if (showGraph) {
     new Graph(
       simulation,

src/plantGlucoseSimulation.ts

@@ -1,4 +1,3 @@
-import { DayDisplayCorner } from './dayDisplayCorner';
 import { Event } from './event';
 import { Feedback } from './feedback';
 import { LightSwitch } from './lightSwitch';
@@ -31,8 +30,12 @@ import { Subject } from 'rxjs';
  * @author Jonathan Lim-Breitbart
  */
 export class PlantGlucoseSimulation {
+  private dayChangedEvent: Subject<number> = new Subject<number>();
+  public dayChangedEvent$ = this.dayChangedEvent.asObservable();
   private energyLeftEvent: Subject<number> = new Subject<number>();
   public energyLeftEvent$ = this.energyLeftEvent.asObservable();
+  private numPhotonsChangedEvent: Subject<number> = new Subject<number>();
+  public numPhotonsChangedEvent$ = this.numPhotonsChangedEvent.asObservable();
   private readyToPlayEvent: Subject<void> = new Subject<void>();
   public readyToPlayEvent$ = this.readyToPlayEvent.asObservable();
   private resetEvent: Subject<void> = new Subject<void>();
@@ -85,7 +88,6 @@ export class PlantGlucoseSimulation {
   waterAnimation: SVG;
   currentDayNumber: number = 0;
   currentTrialData: any;
-  dayDisplayCorner: DayDisplayCorner;
   draw: SVG.Doc;
   enableInputControls: boolean = true;
   energyLeft: number = 100;
@@ -201,7 +203,6 @@ export class PlantGlucoseSimulation {
     }
     this.simulationSpeedSwitch = new SimulationSpeedSwitch(this);
     this.plantAnimationCorner = new PlantAnimationCorner(this);
-    this.dayDisplayCorner = new DayDisplayCorner(this);
     this.chloroplast = this.draw
       .image('./images/chloroplast.png')
       .attr({ x: this.CHLOROPLAST_X, y: this.CHLOROPLAST_Y });
@@ -352,7 +353,7 @@ export class PlantGlucoseSimulation {
     if (this.currentDayNumber > this.numDays) {
       this.handleSimulationEnded();
     } else {
-      this.dayDisplayCorner.updateDayText('Day ' + this.currentDayNumber);
+      this.dayChangedEvent.next(this.currentDayNumber);
 
       if (
         this.numWaterNextCycle != null &&
@@ -409,8 +410,8 @@ export class PlantGlucoseSimulation {
 
   private updateNumPhotonsThisCycle(numPhotonsThisCycle: number): void {
     this.numPhotonsThisCycle = numPhotonsThisCycle;
+    this.numPhotonsChangedEvent.next(numPhotonsThisCycle);
     this.glucoseCreatedIncrement = this.calculateGlucoseCreatedIncrement();
-    this.dayDisplayCorner.updateDayColor(numPhotonsThisCycle);
     this.plantAnimationCorner.updateBackground(numPhotonsThisCycle);
   }
 
@@ -872,7 +873,7 @@ export class PlantGlucoseSimulation {
     this.removeMitochondrionBatteries();
     this.resetEnergyToFull();
     this.plantAnimationCorner.showGreenLeaf();
-    this.dayDisplayCorner.updateDayText('Day 1');
+    this.dayChangedEvent.next(1);
 
     // re-initialize the variables
     this.currentDayNumber = 0;