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