From 8a1a050d81e4e071cb01d8906571cdbec1c2e306 Mon Sep 17 00:00:00 2001 From: Marty Oehme Date: Mon, 9 Jul 2018 17:54:29 +0200 Subject: [PATCH 1/7] Add Angulard Material Dependency --- pubspec.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/pubspec.yaml b/pubspec.yaml index 9dc2faa..1e77191 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -9,6 +9,7 @@ environment: dependencies: angular: ^5.0.0-beta + angular_components: ^0.9.0-beta dev_dependencies: angular_test: ^2.0.0-beta From 8485a96aa3e99498ecd7d23586cd34a72dee3684 Mon Sep 17 00:00:00 2001 From: Marty Oehme Date: Mon, 9 Jul 2018 18:11:34 +0200 Subject: [PATCH 2/7] Add Required Material Font --- web/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/index.html b/web/index.html index 35bd3cb..3b85bf1 100644 --- a/web/index.html +++ b/web/index.html @@ -20,6 +20,8 @@ + + From c5cd600cfc6daf39aa75d433458c5c884fafa051 Mon Sep 17 00:00:00 2001 From: Marty Oehme Date: Tue, 10 Jul 2018 12:52:56 +0200 Subject: [PATCH 3/7] Add Sample Material Styling --- lib/app_component.dart | 6 +- lib/app_component.html | 15 ++- web/index.html | 4 +- web/styles.css | 233 +++++++++++++++++++++-------------------- 4 files changed, 142 insertions(+), 116 deletions(-) diff --git a/lib/app_component.dart b/lib/app_component.dart index 8e726df..458b205 100644 --- a/lib/app_component.dart +++ b/lib/app_component.dart @@ -1,4 +1,5 @@ import 'package:angular/angular.dart'; +import 'package:angular_components/angular_components.dart'; import 'dart:html' as html; import 'package:rules_of_living/src/Engine.dart'; @@ -6,7 +7,10 @@ import 'package:rules_of_living/src/Engine.dart'; @Component( selector: 'my-app', templateUrl: "app_component.html", - directives: [coreDirectives]) + directives: [coreDirectives, MaterialIconComponent], + styleUrls: const ['package:angular_components/app_layout/layout.scss.css'], + providers: const [materialProviders], +) class AppComponent implements OnInit { var name = "World"; diff --git a/lib/app_component.html b/lib/app_component.html index 90606c7..0532aea 100644 --- a/lib/app_component.html +++ b/lib/app_component.html @@ -1,4 +1,15 @@ -

Cellular Automata

+
+
+ + + + Cellular Automata +
+ +
+
Ruleset: @@ -19,4 +30,4 @@ Speed: -
\ No newline at end of file + diff --git a/web/index.html b/web/index.html index 3b85bf1..be2e05b 100644 --- a/web/index.html +++ b/web/index.html @@ -15,13 +15,15 @@ + + - + diff --git a/web/styles.css b/web/styles.css index ef7a186..e0b0d35 100644 --- a/web/styles.css +++ b/web/styles.css @@ -1,117 +1,126 @@ @import url(https://fonts.googleapis.com/css?family=Roboto); @import url(https://fonts.googleapis.com/css?family=Material+Icons); -/* Master Styles */ -h1 { - color: #369; - font-family: Arial, Helvetica, sans-serif; - font-size: 250%; -} -h2, h3 { - color: #444; - font-family: Arial, Helvetica, sans-serif; - font-weight: lighter; -} -body { - margin: 2em; -} -body, input[text], button { - color: #888; - font-family: Cambria, Georgia; -} -a { - cursor: pointer; - cursor: hand; -} -button { - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #aaa; - cursor: auto; -} -label { - padding-right: 0.5em; -} -/* Navigation link styles */ -nav a { - padding: 5px 10px; - text-decoration: none; - margin-right: 10px; - margin-top: 10px; - display: inline-block; - background-color: #eee; - border-radius: 4px; -} -nav a:visited, a:link { - color: #607D8B; -} -nav a:hover { - color: #039be5; - background-color: #CFD8DC; -} -nav a.active { - color: #039be5; +html, body { + height: 100%; + margin: 0; + padding: 0; + width: 100%; + font-family: 'Roboto', sans-serif; + } -/* items class */ -.items { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 24em; -} -.items li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} -.items li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.items li.selected { - background-color: #CFD8DC; - color: white; -} -.items li.selected:hover { - background-color: #BBD8DC; -} -.items .text { - position: relative; - top: -3px; -} -.items .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} -/* everywhere else */ -* { - font-family: Arial, Helvetica, sans-serif; -} +/*!* Master Styles *!*/ +/*h1 {*/ + /*color: #369;*/ + /*font-family: Arial, Helvetica, sans-serif;*/ + /*font-size: 250%;*/ +/*}*/ +/*h2, h3 {*/ + /*color: #444;*/ + /*font-family: Arial, Helvetica, sans-serif;*/ + /*font-weight: lighter;*/ +/*}*/ +/*body {*/ + /*margin: 2em;*/ +/*}*/ +/*body, input[text], button {*/ + /*color: #888;*/ + /*font-family: Cambria, Georgia;*/ +/*}*/ +/*a {*/ + /*cursor: pointer;*/ + /*cursor: hand;*/ +/*}*/ +/*button {*/ + /*font-family: Arial;*/ + /*background-color: #eee;*/ + /*border: none;*/ + /*padding: 5px 10px;*/ + /*border-radius: 4px;*/ + /*cursor: pointer;*/ + /*cursor: hand;*/ +/*}*/ +/*button:hover {*/ + /*background-color: #cfd8dc;*/ +/*}*/ +/*button:disabled {*/ + /*background-color: #eee;*/ + /*color: #aaa;*/ + /*cursor: auto;*/ +/*}*/ +/*label {*/ + /*padding-right: 0.5em;*/ +/*}*/ +/*!* Navigation link styles *!*/ +/*nav a {*/ + /*padding: 5px 10px;*/ + /*text-decoration: none;*/ + /*margin-right: 10px;*/ + /*margin-top: 10px;*/ + /*display: inline-block;*/ + /*background-color: #eee;*/ + /*border-radius: 4px;*/ +/*}*/ +/*nav a:visited, a:link {*/ + /*color: #607D8B;*/ +/*}*/ +/*nav a:hover {*/ + /*color: #039be5;*/ + /*background-color: #CFD8DC;*/ +/*}*/ +/*nav a.active {*/ + /*color: #039be5;*/ +/*}*/ + +/*!* items class *!*/ +/*.items {*/ + /*margin: 0 0 2em 0;*/ + /*list-style-type: none;*/ + /*padding: 0;*/ + /*width: 24em;*/ +/*}*/ +/*.items li {*/ + /*cursor: pointer;*/ + /*position: relative;*/ + /*left: 0;*/ + /*background-color: #EEE;*/ + /*margin: .5em;*/ + /*padding: .3em 0;*/ + /*height: 1.6em;*/ + /*border-radius: 4px;*/ +/*}*/ +/*.items li:hover {*/ + /*color: #607D8B;*/ + /*background-color: #DDD;*/ + /*left: .1em;*/ +/*}*/ +/*.items li.selected {*/ + /*background-color: #CFD8DC;*/ + /*color: white;*/ +/*}*/ +/*.items li.selected:hover {*/ + /*background-color: #BBD8DC;*/ +/*}*/ +/*.items .text {*/ + /*position: relative;*/ + /*top: -3px;*/ +/*}*/ +/*.items .badge {*/ + /*display: inline-block;*/ + /*font-size: small;*/ + /*color: white;*/ + /*padding: 0.8em 0.7em 0 0.7em;*/ + /*background-color: #607D8B;*/ + /*line-height: 1em;*/ + /*position: relative;*/ + /*left: -1px;*/ + /*top: -4px;*/ + /*height: 1.8em;*/ + /*margin-right: .8em;*/ + /*border-radius: 4px 0 0 4px;*/ +/*}*/ +/*!* everywhere else *!*/ +/** {*/ + /*font-family: Arial, Helvetica, sans-serif;*/ +/*}*/ From b5413530918974eb74f02bc61bee07ab9cb00a36 Mon Sep 17 00:00:00 2001 From: Marty Oehme Date: Tue, 10 Jul 2018 14:28:41 +0200 Subject: [PATCH 4/7] Fix Material directives import statement --- lib/app_component.dart | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/app_component.dart b/lib/app_component.dart index 458b205..10c8575 100644 --- a/lib/app_component.dart +++ b/lib/app_component.dart @@ -7,9 +7,8 @@ import 'package:rules_of_living/src/Engine.dart'; @Component( selector: 'my-app', templateUrl: "app_component.html", - directives: [coreDirectives, MaterialIconComponent], + directives: [coreDirectives, materialDirectives], styleUrls: const ['package:angular_components/app_layout/layout.scss.css'], - providers: const [materialProviders], ) class AppComponent implements OnInit { var name = "World"; From 917d1c3fabc5ea5e2337771b357e52523709785b Mon Sep 17 00:00:00 2001 From: Marty Oehme Date: Wed, 22 Aug 2018 13:00:41 +0200 Subject: [PATCH 5/7] Split App Header into Component --- lib/app_component.dart | 4 +++- lib/app_component.html | 15 ++------------- lib/components/header_component.dart | 13 +++++++++++++ lib/components/header_component.html | 12 ++++++++++++ 4 files changed, 30 insertions(+), 14 deletions(-) create mode 100644 lib/components/header_component.dart create mode 100644 lib/components/header_component.html diff --git a/lib/app_component.dart b/lib/app_component.dart index 10c8575..ee605b1 100644 --- a/lib/app_component.dart +++ b/lib/app_component.dart @@ -1,5 +1,6 @@ import 'package:angular/angular.dart'; import 'package:angular_components/angular_components.dart'; +import 'package:rules_of_living/components/header_component.dart'; import 'dart:html' as html; import 'package:rules_of_living/src/Engine.dart'; @@ -7,7 +8,8 @@ import 'package:rules_of_living/src/Engine.dart'; @Component( selector: 'my-app', templateUrl: "app_component.html", - directives: [coreDirectives, materialDirectives], + directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent, HeaderComponent], + providers: [materialProviders], styleUrls: const ['package:angular_components/app_layout/layout.scss.css'], ) class AppComponent implements OnInit { diff --git a/lib/app_component.html b/lib/app_component.html index 0532aea..9406daa 100644 --- a/lib/app_component.html +++ b/lib/app_component.html @@ -1,15 +1,4 @@ -
-
- - - - Cellular Automata -
- -
-
+
Ruleset: @@ -28,6 +17,6 @@ - Speed: + Speed:
diff --git a/lib/components/header_component.dart b/lib/components/header_component.dart new file mode 100644 index 0000000..94e9a9b --- /dev/null +++ b/lib/components/header_component.dart @@ -0,0 +1,13 @@ +import 'package:angular/angular.dart'; +import 'package:angular_components/angular_components.dart'; + +@Component( + selector: 'app_header', + templateUrl: "header_component.html", + directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent], + providers: [], + styleUrls: const ['package:angular_components/app_layout/layout.scss.css'], +) +class HeaderComponent { + +} diff --git a/lib/components/header_component.html b/lib/components/header_component.html new file mode 100644 index 0000000..2f87a66 --- /dev/null +++ b/lib/components/header_component.html @@ -0,0 +1,12 @@ +
+
+ + + + Cellular Automata +
+ +
+
\ No newline at end of file From c86d8d8b59c338641892994620c1eae08c46b103 Mon Sep 17 00:00:00 2001 From: Marty Oehme Date: Wed, 22 Aug 2018 20:16:31 +0200 Subject: [PATCH 6/7] Split Simulation & Controls into Components --- lib/app_component.dart | 61 +++--------------------- lib/app_component.html | 21 ++------ lib/components/controls_component.css | 4 ++ lib/components/controls_component.dart | 42 ++++++++++++++++ lib/components/controls_component.html | 14 ++++++ lib/components/simulation_component.dart | 41 ++++++++++++++++ lib/components/simulation_component.html | 1 + lib/service/engine_service.dart | 11 +++++ 8 files changed, 123 insertions(+), 72 deletions(-) create mode 100644 lib/components/controls_component.css create mode 100644 lib/components/controls_component.dart create mode 100644 lib/components/controls_component.html create mode 100644 lib/components/simulation_component.dart create mode 100644 lib/components/simulation_component.html create mode 100644 lib/service/engine_service.dart diff --git a/lib/app_component.dart b/lib/app_component.dart index ee605b1..bfdd949 100644 --- a/lib/app_component.dart +++ b/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 'dart:html' as html; -import 'package:rules_of_living/src/Engine.dart'; +import 'package:rules_of_living/components/simulation_component.dart'; +import 'package:rules_of_living/service/engine_service.dart'; @Component( selector: 'my-app', templateUrl: "app_component.html", - directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent, HeaderComponent], - providers: [materialProviders], + directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent, HeaderComponent, SimulationComponent, ControlsComponent], + 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(); - } } diff --git a/lib/app_component.html b/lib/app_component.html index 9406daa..f4dc816 100644 --- a/lib/app_component.html +++ b/lib/app_component.html @@ -3,20 +3,7 @@ Ruleset: -
- -
-
- - - - - - Speed: - -
+
+ + +
\ No newline at end of file diff --git a/lib/components/controls_component.css b/lib/components/controls_component.css new file mode 100644 index 0000000..580e03c --- /dev/null +++ b/lib/components/controls_component.css @@ -0,0 +1,4 @@ +material-slider { + display: inline-block; + width: 50px; +} \ No newline at end of file diff --git a/lib/components/controls_component.dart b/lib/components/controls_component.dart new file mode 100644 index 0000000..3f0fa1b --- /dev/null +++ b/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(); + } +} diff --git a/lib/components/controls_component.html b/lib/components/controls_component.html new file mode 100644 index 0000000..cc6f600 --- /dev/null +++ b/lib/components/controls_component.html @@ -0,0 +1,14 @@ +
+ + + + + + + + + + + Speed: + +
\ No newline at end of file diff --git a/lib/components/simulation_component.dart b/lib/components/simulation_component.dart new file mode 100644 index 0000000..47567d5 --- /dev/null +++ b/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); + } +} diff --git a/lib/components/simulation_component.html b/lib/components/simulation_component.html new file mode 100644 index 0000000..1e5f113 --- /dev/null +++ b/lib/components/simulation_component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/lib/service/engine_service.dart b/lib/service/engine_service.dart new file mode 100644 index 0000000..5107f3c --- /dev/null +++ b/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); +} From bd7990991e00b48eeedb08e0ec192d035bdf927f Mon Sep 17 00:00:00 2001 From: Marty Oehme Date: Thu, 23 Aug 2018 09:33:15 +0200 Subject: [PATCH 7/7] Connect Speed Slider to internal Variable --- lib/components/controls_component.dart | 2 ++ lib/components/controls_component.html | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/components/controls_component.dart b/lib/components/controls_component.dart index 3f0fa1b..cd18105 100644 --- a/lib/components/controls_component.dart +++ b/lib/components/controls_component.dart @@ -12,6 +12,8 @@ import 'package:rules_of_living/src/Engine.dart'; ) class ControlsComponent { final EngineService engineService; + int simSpeed = 5; + Engine get engine => engineService.engine; ControlsComponent(this.engineService); diff --git a/lib/components/controls_component.html b/lib/components/controls_component.html index cc6f600..4d07357 100644 --- a/lib/components/controls_component.html +++ b/lib/components/controls_component.html @@ -9,6 +9,6 @@ - Speed: + {{simSpeed}} \ No newline at end of file