diff --git a/lib/app_component.css b/lib/app_component.css new file mode 100644 index 0000000..2e1a6f4 --- /dev/null +++ b/lib/app_component.css @@ -0,0 +1,11 @@ +#wrapper { + display: flex; +} + +#viewport { + flex: 0 0 65%; +} + +#sidebar { + flex: 1; +} \ No newline at end of file diff --git a/lib/app_component.dart b/lib/app_component.dart index 9576d3a..e9b44cc 100644 --- a/lib/app_component.dart +++ b/lib/app_component.dart @@ -1,8 +1,10 @@ import 'package:angular/angular.dart'; import 'package:angular_components/angular_components.dart'; +import 'package:rules_of_living/components/configuration_component.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 'package:rules_of_living/service/configuration_service.dart'; import 'package:rules_of_living/service/engine_service.dart'; @Component( @@ -15,10 +17,11 @@ import 'package:rules_of_living/service/engine_service.dart'; MaterialSliderComponent, HeaderComponent, SimulationComponent, - ControlsComponent + ControlsComponent, + ConfigurationComponent ], - providers: [materialProviders, ClassProvider(EngineService)], - styleUrls: const ['package:angular_components/app_layout/layout.scss.css'], + providers: [materialProviders, ClassProvider(EngineService), ClassProvider(ConfigurationService)], + styleUrls: const ['package:angular_components/app_layout/layout.scss.css', 'app_component.css'], ) class AppComponent { var name = "World"; diff --git a/lib/app_component.html b/lib/app_component.html index f4dc816..8b57941 100644 --- a/lib/app_component.html +++ b/lib/app_component.html @@ -1,9 +1,10 @@ -
- Ruleset: - -
-
- - +
+
+ + +
+
\ No newline at end of file diff --git a/lib/components/configuration_component.css b/lib/components/configuration_component.css new file mode 100644 index 0000000..2108951 --- /dev/null +++ b/lib/components/configuration_component.css @@ -0,0 +1,4 @@ +material-slider { + display: inline-block; + width: 150px; +} \ No newline at end of file diff --git a/lib/components/configuration_component.dart b/lib/components/configuration_component.dart new file mode 100644 index 0000000..bd3ae0c --- /dev/null +++ b/lib/components/configuration_component.dart @@ -0,0 +1,31 @@ +import 'package:angular/angular.dart'; +import 'package:angular_components/material_button/material_button.dart'; +import 'package:angular_components/material_icon/material_icon.dart'; +import 'package:angular_components/material_slider/material_slider.dart'; +import 'package:angular_components/material_tooltip/material_tooltip.dart'; +import 'package:rules_of_living/service/configuration_service.dart'; + +@Component( + selector: "configuration", + templateUrl: "configuration_component.html", + styleUrls: ["configuration_component.css"], + directives: [ + MaterialButtonComponent, + MaterialIconComponent, + MaterialSliderComponent, + MaterialTooltipDirective + ]) +class ConfigurationComponent { + final ConfigurationService config; + + int get simSpeed => config.simSpeed; + int set simSpeed(int value) => config.simSpeed = value; + + String get speedSliderTooltip => "Simulation Speed: $simSpeed"; + + ConfigurationComponent(this.config); + + void onEdgesClicked() { + config.toggleGrid(); + } +} diff --git a/lib/components/configuration_component.html b/lib/components/configuration_component.html new file mode 100644 index 0000000..a17261d --- /dev/null +++ b/lib/components/configuration_component.html @@ -0,0 +1,5 @@ +
+ + + Ruleset: +
\ No newline at end of file diff --git a/lib/components/controls_component.css b/lib/components/controls_component.css index 580e03c..e69de29 100644 --- a/lib/components/controls_component.css +++ b/lib/components/controls_component.css @@ -1,4 +0,0 @@ -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 index 1655abf..1f2a65d 100644 --- a/lib/components/controls_component.dart +++ b/lib/components/controls_component.dart @@ -1,5 +1,6 @@ import 'package:angular/angular.dart'; import 'package:angular_components/angular_components.dart'; +import 'package:rules_of_living/service/configuration_service.dart'; import 'package:rules_of_living/service/engine_service.dart'; import 'package:rules_of_living/src/Engine.dart'; @@ -10,7 +11,6 @@ import 'package:rules_of_living/src/Engine.dart'; coreDirectives, MaterialButtonComponent, MaterialIconComponent, - MaterialSliderComponent, MaterialTooltipDirective ], providers: [], @@ -18,8 +18,6 @@ import 'package:rules_of_living/src/Engine.dart'; ) class ControlsComponent { final EngineService engineService; - int simSpeed = 5; - String get speedSliderTooltip => "Simulation Speed: $simSpeed"; Engine get engine => engineService.engine; ControlsComponent(this.engineService); @@ -41,10 +39,6 @@ class ControlsComponent { engine.addPattern(); } - void onEdgesClicked() { - engine.toggleEdgeRendering(); - } - void onClearClicked() { engine.clear(); } diff --git a/lib/components/controls_component.html b/lib/components/controls_component.html index b5ab389..30ddf55 100644 --- a/lib/components/controls_component.html +++ b/lib/components/controls_component.html @@ -9,6 +9,4 @@ - -
\ No newline at end of file diff --git a/lib/service/configuration_service.dart b/lib/service/configuration_service.dart new file mode 100644 index 0000000..7da2ca6 --- /dev/null +++ b/lib/service/configuration_service.dart @@ -0,0 +1,17 @@ +import 'package:rules_of_living/service/engine_service.dart'; + +class ConfigurationService { + final EngineService engineService; + + bool showGrid; + int simSpeed; + + ConfigurationService(this.engineService) { + showGrid = false; + simSpeed = 5; + } + + void toggleGrid() { + showGrid = !showGrid; + } +} \ No newline at end of file