Add Configuration Sidebar with ConfigurationService

lib/app_component.css

@@ -0,0 +1,11 @@
+#wrapper {
+    display: flex;
+}
+
+#viewport {
+    flex: 0 0 65%;
+}
+
+#sidebar {
+    flex: 1;
+}

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)],
+  providers: [materialProviders, ClassProvider(EngineService), ClassProvider(ConfigurationService)],
-  styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
+  styleUrls: const ['package:angular_components/app_layout/layout.scss.css', 'app_component.css'],
 )
 class AppComponent {
   var name = "World";

lib/app_component.html

@@ -1,9 +1,10 @@
 <app_header></app_header>
-<div id="rules-input">
+<div id="wrapper">
-    Ruleset: <input type="text" title="ruleset" content="S23/B3">
-    <i class="fas fa-paint-brush"></i>
-</div>
     <div id="viewport">
         <gol-simulation></gol-simulation>
         <sim-controls></sim-controls>
     </div>
+    <div id="sidebar">
+        <configuration></configuration>
+    </div>
+</div>

lib/components/configuration_component.css

@@ -0,0 +1,4 @@
+material-slider {
+    display: inline-block;
+    width: 150px;
+}

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

lib/components/configuration_component.html

@@ -0,0 +1,5 @@
+<div id="config">
+    <material-button id="edges" (click)="onEdgesClicked()"><material-icon icon="border_all" baseline></material-icon></material-button>
+    <span [materialTooltip]="speedSliderTooltip"><material-icon icon="alarm" baseline></material-icon><material-slider [max]="10" [min]="1" [(value)]="simSpeed"></material-slider></span>
+    Ruleset: <input type="text" title="ruleset" content="S23/B3"><i class="fas fa-paint-brush"></i>
+</div>

lib/components/controls_component.css

@@ -1,4 +0,0 @@
-material-slider {
-    display: inline-block;
-    width: 50px;
-}

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

lib/components/controls_component.html

@@ -9,6 +9,4 @@
     <material-button id="step" (click)="onStepClicked()" materialTooltip="Step Forward"><material-icon icon="skip_next" baseline></material-icon></material-button>
     <material-button id="random" (click)="onRandomClicked()" materialTooltip="Add Random Pattern"><material-icon icon="add" baseline></material-icon></material-button>
     <material-button id="clear" (click)="onClearClicked()" materialTooltip="Clear"><material-icon icon="clear" baseline></material-icon></material-button>
-    <span [materialTooltip]="speedSliderTooltip"><material-icon icon="alarm" baseline></material-icon><material-slider [max]="10" [min]="1" [(value)]="simSpeed"></material-slider></span>
-    <material-button id="edges" (click)="onEdgesClicked()"><material-icon icon="border_all" baseline></material-icon></material-button>
 </div>

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