Split Simulation & Controls into Components

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