Add Grid Size Input to Configuration Bar

Fixes #37

lib/components/configuration_component.dart

@@ -1,6 +1,8 @@
 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_input/material_input.dart';
+import 'package:angular_components/material_input/material_number_accessor.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';
@@ -8,18 +10,35 @@ import 'package:rules_of_living/service/configuration_service.dart';
 @Component(
     selector: "configuration",
     templateUrl: "configuration_component.html",
-    styleUrls: ["configuration_component.css"],
+    styleUrls: [
+      "configuration_component.css"
+    ],
     directives: [
       MaterialButtonComponent,
       MaterialIconComponent,
       MaterialSliderComponent,
-      MaterialTooltipDirective
+      MaterialTooltipDirective,
+      materialInputDirectives,
+      materialNumberInputDirectives,
+      NgModel
     ])
 class ConfigurationComponent {
   final ConfigurationService config;
 
+  int get width => config.gridSize.x;
+  void set width(num value) {
+    if (value == null || value <= 0) return;
+    config.setGridSize(x: value.toInt());
+  }
+
+  int get height => config.gridSize.y;
+  void set height(num value) {
+    if (value == null || value <= 0) return;
+    config.setGridSize(y: value.toInt());
+  }
+
   int get simSpeed => config.simSpeed;
-  int set simSpeed(int value) => config.simSpeed = value;
+  void set simSpeed(int value) => config.simSpeed = value;
 
   String get speedSliderTooltip => "Simulation Speed: $simSpeed";
 

lib/components/configuration_component.html

@@ -1,5 +1,21 @@
 <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>
+    <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>
+    <material-input
+            leadingGlyph="swap_horiz"
+            type="number"
+            label="Grid Width"
+            [(ngModel)]="width"
+            required
+            checkPositive
+            requiredErrorMsg="Enter a number greater than 0"
+            trailingText="Cells">
+    </material-input>
+    <material-input leadingGlyph="swap_vert" type="number" label="Grid Height" [(ngModel)]="height" required
+                    checkPositive requiredErrorMsg="Enter a number greater than 0"
+                    trailingText="Cells"></material-input>
 </div>

lib/service/configuration_service.dart

@@ -38,4 +38,6 @@ class ConfigurationService {
     y = y ?? _es.engine.gridSize.y;
     _es.engine.gridSize = Point(x, y);
   }
+
+  Point<int> get gridSize => _es.engine.gridSize;
 }