Split Simulation & Controls into Components

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