Split Simulation & Controls into Components

lib/app_component.dart

@@ -1,66 +1,17 @@
 import 'package:angular/angular.dart';
 import 'package:angular_components/angular_components.dart';
+import 'package:rules_of_living/components/controls_component.dart';
 import 'package:rules_of_living/components/header_component.dart';
-
+import 'package:rules_of_living/components/simulation_component.dart';
-import 'dart:html' as html;
+import 'package:rules_of_living/service/engine_service.dart';
-import 'package:rules_of_living/src/Engine.dart';
 
 @Component(
     selector: 'my-app',
     templateUrl: "app_component.html",
-    directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent, HeaderComponent],
+    directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent, HeaderComponent, SimulationComponent, ControlsComponent],
-    providers: [materialProviders],
+    providers: [materialProviders, ClassProvider(EngineService)],
     styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
 )
-class AppComponent implements OnInit {
+class AppComponent {
   var name = "World";
-
-  Engine engine;
-
-  @ViewChild("caCanvas")
-  html.CanvasElement canvas;
-
-  @override
-  void ngOnInit() {
-    canvas.context2D.setFillColorRgb(200, 0, 0);
-    canvas.context2D.fillRect(0, 0, canvas.width, canvas.height);
-    canvas.context2D.setFillColorRgb(0, 255, 0);
-    canvas.context2D.fillText('''
-    If you see this 
-    the app is broken :(
-    ''', canvas.width/2, canvas.height/2);
-    engine = new Engine(canvas);
-
-    html.window.animationFrame.then(animFrame);
-  }
-
-  void animFrame(num now) {
-    engine.process(now);
-    html.window.animationFrame.then(animFrame);
-  }
-
-  void onStartClicked() {
-    engine.running = !engine.running;
-  }
-
-  void onStepClicked() {
-    engine.step();
-  }
-
-  void onResetClicked() {
-    engine.reset();
-  }
-
-  void onRandomClicked() {
-    engine.running = false;
-    engine.addPattern();
-  }
-
-  void onEdgesClicked() {
-    engine.toggleEdgeRendering();
-  }
-
-  void onClearClicked() {
-    engine.clear();
-  }
 }

lib/app_component.html

@@ -3,20 +3,7 @@
     Ruleset: <input type="text" title="ruleset" content="S23/B3">
     <i class="fas fa-paint-brush"></i>
 </div>
-<div id="output">
+<div id="viewport">
-    <canvas #caCanvas width="500" height="500"></canvas>
+    <gol-simulation></gol-simulation>
-</div>
+    <sim-controls></sim-controls>
-<div id="controls">
-    <button id="run" (click)="onStartClicked()">
-        <span [ngSwitch]="engine.running">
-            <i *ngSwitchCase="false" class="fas fa-play"></i>
-            <i *ngSwitchCase="true" class="fas fa-stop"></i>
-        </span>
-    </button>
-    <button id="step" (click)="onStepClicked()"><i class="fas fa-step-forward"></i></button>
-    <button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></button>
-    <button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></button>
-    <button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></button>
-    <i class="fas fa-clock"> Speed:</i><material-slider [max]="10" [min]="1" [value]="1"></material-slider>
-    <button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
 </div>

lib/components/controls_component.css

@@ -0,0 +1,4 @@
+material-slider {
+    display: inline-block;
+    width: 50px;
+}

lib/components/controls_component.dart

@@ -0,0 +1,42 @@
+import 'package:angular/angular.dart';
+import 'package:angular_components/angular_components.dart';
+import 'package:rules_of_living/service/engine_service.dart';
+import 'package:rules_of_living/src/Engine.dart';
+
+@Component(
+  selector: 'sim-controls',
+  templateUrl: "controls_component.html",
+  directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent],
+  providers: [],
+  styleUrls: const ["controls_component.css"],
+)
+class ControlsComponent {
+  final EngineService engineService;
+  Engine get engine => engineService.engine;
+  ControlsComponent(this.engineService);
+
+  void onStartClicked() {
+    engine.running = !engine.running;
+  }
+
+  void onStepClicked() {
+    engine.step();
+  }
+
+  void onResetClicked() {
+    engine.reset();
+  }
+
+  void onRandomClicked() {
+    engine.running = false;
+    engine.addPattern();
+  }
+
+  void onEdgesClicked() {
+    engine.toggleEdgeRendering();
+  }
+
+  void onClearClicked() {
+    engine.clear();
+  }
+}

lib/components/controls_component.html

@@ -0,0 +1,14 @@
+<div id="controls">
+    <material-button id="run" (click)="onStartClicked()">
+        <span [ngSwitch]="engine.running">
+            <i *ngSwitchCase="false" class="fas fa-play"></i>
+            <i *ngSwitchCase="true" class="fas fa-stop"></i>
+        </span>
+    </material-button>
+    <material-button id="step" (click)="onStepClicked()"><i class="fas fa-step-forward"></i></material-button>
+    <material-button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></material-button>
+    <material-button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></material-button>
+    <material-button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></material-button>
+    <i class="fas fa-clock"> Speed:</i><material-slider [max]="10" [min]="1" [value]="1" ></material-slider>
+    <material-button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </material-button>
+</div>

lib/components/simulation_component.dart

@@ -0,0 +1,41 @@
+import 'dart:html' as html;
+
+import 'package:angular/angular.dart';
+import 'package:rules_of_living/service/engine_service.dart';
+
+@Component(
+  selector: 'gol-simulation',
+  templateUrl: "simulation_component.html",
+  directives: [coreDirectives],
+  providers: [],
+//  styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
+)
+class SimulationComponent implements OnInit {
+  final EngineService engineService;
+
+  SimulationComponent(this.engineService);
+
+  @override
+  void ngOnInit() {
+    html.CanvasElement canvas = html.CanvasElement()..id = "simulation";
+    html.querySelector("#simulation")..append(canvas);
+    canvas.width = 500;
+    canvas.height= 500;
+
+    canvas.context2D.setFillColorRgb(200, 0, 0);
+    canvas.context2D.fillRect(0, 0, canvas.width, canvas.height);
+    canvas.context2D.setFillColorRgb(0, 255, 0);
+    canvas.context2D.fillText('''
+    If you see this\n
+    the app is broken :(
+    ''', canvas.width/2-50, canvas.height/2);
+    engineService.create(canvas);
+
+    html.window.animationFrame.then(animFrame);
+  }
+
+  void animFrame(num now) {
+    engineService.engine.process(now);
+    html.window.animationFrame.then(animFrame);
+  }
+}

lib/components/simulation_component.html

@@ -0,0 +1 @@
+<div id="simulation"></div>

lib/service/engine_service.dart

@@ -0,0 +1,11 @@
+import 'dart:html' as html;
+
+import 'package:rules_of_living/src/Engine.dart';
+
+class EngineService {
+  Engine _engine;
+
+  Engine get engine => _engine;
+
+  void create(html.CanvasElement canvas) => _engine = Engine(canvas);
+}