Merge branch '37-make-grid-size-configurable' into 'master'

Resolve "Make Grid Size configurable"

Closes #38, #39, and #37

See merge request marty.oehme/cellular-automata!10

lib/app_component.dart

@@ -5,6 +5,7 @@ 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/control_service.dart';
 import 'package:rules_of_living/service/engine_service.dart';
 
 @Component(
@@ -20,8 +21,16 @@ import 'package:rules_of_living/service/engine_service.dart';
     ControlsComponent,
     ConfigurationComponent
   ],
-  providers: [materialProviders, ClassProvider(EngineService), ClassProvider(ConfigurationService)],
+  providers: [
-  styleUrls: const ['package:angular_components/app_layout/layout.scss.css', 'app_component.css'],
+    materialProviders,
+    ClassProvider(EngineService),
+    ClassProvider(ConfigurationService),
+    ClassProvider(ControlService)
+  ],
+  styleUrls: const [
+    'package:angular_components/app_layout/layout.scss.css',
+    'app_component.css'
+  ],
 )
 class AppComponent {
   var name = "World";

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>
+    <material-button id="edges" (click)="onEdgesClicked()">
-    <span [materialTooltip]="speedSliderTooltip"><material-icon icon="alarm" baseline></material-icon><material-slider [max]="10" [min]="1" [(value)]="simSpeed"></material-slider></span>
+        <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/components/controls_component.dart

@@ -1,6 +1,6 @@
 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/service/control_service.dart';
 
 @Component(
   selector: 'sim-controls',
@@ -15,27 +15,27 @@ import 'package:rules_of_living/service/engine_service.dart';
   styleUrls: const ["controls_component.css"],
 )
 class ControlsComponent {
-  final EngineService engine;
+  final ControlService ctrl;
 
-  ControlsComponent(this.engine);
+  ControlsComponent(this.ctrl);
 
   void onStartClicked() {
-    engine.toggleRunning();
+    ctrl.toggleRunning();
   }
 
   void onStepClicked() {
-    engine.step();
+    ctrl.step();
   }
 
   void onResetClicked() {
-    engine.reset();
+    ctrl.reset();
   }
 
   void onRandomClicked() {
-    engine.addRandomPattern();
+    ctrl.addRandomPattern();
   }
 
   void onClearClicked() {
-    engine.clear();
+    ctrl.clear();
   }
 }

lib/components/controls_component.html

@@ -1,7 +1,7 @@
 <div id="controls">
     <material-button id="reset" (click)="onResetClicked()"><material-icon icon="replay" baseline></material-icon></material-button>
     <material-button id="run" (click)="onStartClicked()">
-        <span [ngSwitch]="engine.isRunning">
+        <span [ngSwitch]="ctrl.isRunning">
             <material-icon *ngSwitchCase="false" icon="play_arrow" baseline></material-icon>
             <material-icon *ngSwitchCase="true" icon="pause" baseline></material-icon>
         </span>

lib/components/simulation_component.dart

@@ -1,7 +1,7 @@
 import 'dart:html' as html;
 
 import 'package:angular/angular.dart';
-import 'package:rules_of_living/service/engine_service.dart';
+import 'package:rules_of_living/service/configuration_service.dart';
 
 @Component(
   selector: 'gol-simulation',
@@ -10,9 +10,9 @@ import 'package:rules_of_living/service/engine_service.dart';
   providers: [],
 )
 class SimulationComponent implements OnInit {
-  final EngineService engineService;
+  final ConfigurationService config;
 
-  SimulationComponent(this.engineService);
+  SimulationComponent(this.config);
 
   @override
   void ngOnInit() {
@@ -29,6 +29,6 @@ class SimulationComponent implements OnInit {
     
     the canvas did not load correctly :(
     ''', canvas.width / 2 - 50, canvas.height / 2);
-    engineService.canvas = canvas;
+    config.canvas = canvas;
   }
 }

lib/service/configuration_service.dart

@@ -1,12 +1,20 @@
+import 'dart:html' as html;
+import 'dart:math';
+
 import 'package:rules_of_living/service/engine_service.dart';
 
 class ConfigurationService {
-  final EngineService engineService;
+  final EngineService _es;
 
   bool showGrid;
 
   int _simSpeed;
 
+  ConfigurationService(this._es) {
+    showGrid = false;
+    simSpeed = 5;
+  }
+
   /// Simulation Speed
   ///
   /// Sets the number of updates the simulation takes per second. Can range from
@@ -15,15 +23,21 @@ class ConfigurationService {
   int get simSpeed => _simSpeed;
   void set simSpeed(int val) {
     _simSpeed = val;
-    engineService.engine.stepsPerSecond = simSpeed;
+    _es.engine.stepsPerSecond = simSpeed;
   }
 
-  ConfigurationService(this.engineService) {
+  void set canvas(html.CanvasElement canvas) => _es.engine.canvas = canvas;
-    showGrid = false;
+  html.CanvasElement get canvas => _es.engine.canvas;
-    simSpeed = 5;
-  }
 
   void toggleGrid() {
     showGrid = !showGrid;
   }
-}
+
+  void setGridSize({int x, int y}) {
+    x = x ?? _es.engine.gridSize.x;
+    y = y ?? _es.engine.gridSize.y;
+    _es.engine.gridSize = Point(x, y);
+  }
+
+  Point<int> get gridSize => _es.engine.gridSize;
+}

lib/service/control_service.dart

@@ -0,0 +1,38 @@
+import 'package:rules_of_living/service/engine_service.dart';
+
+class ControlService {
+  EngineService _es;
+
+  ControlService(this._es);
+
+  void run() {
+    _es.engine.running = true;
+  }
+
+  void stop() {
+    _es.engine.running = false;
+  }
+
+  void toggleRunning() {
+    _es.engine.running = !_es.engine.running;
+  }
+
+  void step() {
+    _es.engine.step();
+  }
+
+  void reset() {
+    _es.engine.reset();
+  }
+
+  void addRandomPattern() {
+    _es.engine.running = false;
+    _es.engine.addPattern();
+  }
+
+  void clear() {
+    _es.engine.clear();
+  }
+
+  bool get isRunning => _es.engine.running;
+}

lib/service/engine_service.dart

@@ -1,49 +1,15 @@
-import 'dart:html' as html;
-
 import 'package:rules_of_living/src/Engine.dart';
 
 class EngineService {
-  Engine _engine;
+  Engine _uncachedEngineAccess;
 
-  Engine get engine => _engine ?? createEngine(null);
+  Engine get engine => _uncachedEngineAccess ?? _setCachedAndReturn(Engine());
-
+  void set engine(Engine newEngine) {
-  Engine createEngine(html.CanvasElement canvas) {
+    _uncachedEngineAccess = newEngine;
-    _engine = Engine(canvas);
-    return _engine;
   }
 
-  void set canvas(html.CanvasElement canvas) => engine.canvas = canvas;
+  Engine _setCachedAndReturn(Engine newEngine) {
-  html.CanvasElement get canvas => engine.canvas;
+    engine = newEngine;
-
+    return newEngine;
-  void run() {
-    engine.running = true;
   }
-
-  void stop() {
-    engine.running = false;
-  }
-
-  void toggleRunning() {
-    engine.running = !engine.running;
-  }
-
-  void step() {
-    engine.step();
-  }
-
-  void reset() {
-    engine.reset();
-  }
-
-  void addRandomPattern() {
-    engine.running = false;
-    engine.addPattern();
-  }
-
-  void clear() {
-    engine.clear();
-  }
-
-  bool get isRunning => engine.running;
-
 }

lib/src/Engine.dart

@@ -1,4 +1,5 @@
 import 'dart:html' as html;
+import 'dart:math';
 
 import 'package:rules_of_living/src/Grid.dart';
 
@@ -28,9 +29,15 @@ class Engine {
   // ms stuck in updateloop after which game will declare itself unresponsive
   final int SAFETY_TIMEOUT = 2000;
 
-  // Grid Size TODO add as configurable option
+  /// Grid Size
-  static final GRID_X = 100;
+  ///
-  static final GRID_Y = 100;
+  /// Number of cells on x coordinate and y coordinate. Can be set individually.
+  Point get gridSize => Point<int>(_grid.w, _grid.h);
+  void set gridSize(Point<int> value) {
+    if (value.x <= 0 || value.y <= 0)
+      throw ArgumentError("grid size must not be smaller than 1");
+    _grid = Grid(value.x, value.y);
+  }
 
   num _updateLag = 0.0;
   num _drawLag = 0.0;
@@ -41,10 +48,12 @@ class Engine {
   /// be used if no canvas was defined at engine creation and it should be
   /// rendered later.
   html.CanvasElement canvas;
-  Grid _grid = new Grid(GRID_X, GRID_Y);
+  Grid _grid;
   bool running = false;
 
-  Engine([this.canvas]) {
+  Engine([x = 100, y = 100, this.canvas]) {
+    _grid = Grid(x, y);
+
     _elapsed.start();
     _grid.addPattern(amount: 15, dispersal: 5);
     html.window.animationFrame.then(animFrame);
@@ -61,7 +70,7 @@ class Engine {
   }
 
   void clear() {
-    _grid = new Grid(GRID_X, GRID_Y);
+    _grid = new Grid(gridSize.x, gridSize.y);
     running = false;
   }
 
@@ -111,7 +120,7 @@ class Engine {
   /// the internal engine processing. Does not do anything if no canvas is
   /// defined.
   void render([num interp]) {
-    if(canvas != null) _grid.render(canvas, interp);
+    if (canvas != null) _grid.render(canvas, interp);
   }
 
   void addPattern(

test/service/configuration_service_test.dart

@@ -1,30 +1,46 @@
-import 'package:rules_of_living/src/Engine.dart';
+import 'dart:math';
-@TestOn('browser')
 
-import 'package:test/test.dart';
+import 'package:mockito/mockito.dart';
 import 'package:rules_of_living/service/configuration_service.dart';
 import 'package:rules_of_living/service/engine_service.dart';
-import 'package:mockito/mockito.dart';
+import 'package:rules_of_living/src/Engine.dart';
+@TestOn('browser')
+import 'package:test/test.dart';
 
 class MockEngine extends Mock implements Engine {}
-class MockEngineService extends Mock implements EngineService {
-  MockEngine _engine = MockEngine();
-  @override
-  Engine get engine => _engine;
-}
 
 void main() {
-  group("simulation speed", () {
+  ConfigurationService sut;
-    ConfigurationService sut;
+  EngineService engineService;
-    MockEngineService mes;
+  MockEngine me;
-    setUp(() {
+  setUp(() {
-      mes = MockEngineService();
+    me = MockEngine();
-      sut = ConfigurationService(mes);
+    engineService = EngineService();
-    });
+    engineService.engine = me;
+    sut = ConfigurationService(engineService);
+  });
 
+  group("simulation speed", () {
     test("speed changes propagate to engine", () {
       sut.simSpeed = 312;
-      verify(mes.engine.stepsPerSecond=312);
+      verify(me.stepsPerSecond = 312);
+    });
+  });
+
+  group("grid size", () {
+    test("grid changes are sent to engine", () {
+      sut.setGridSize(x: 512, y: 388);
+      verify(me.gridSize = Point(512, 388));
+    });
+    test("grid can be changed solely on x axis", () {
+      when(me.gridSize).thenReturn(Point(100, 100));
+      sut.setGridSize(x: 555);
+      verify(me.gridSize = Point(555, 100));
+    });
+    test("grid can be changed solely on y axis", () {
+      when(me.gridSize).thenReturn(Point(100, 100));
+      sut.setGridSize(y: 556);
+      verify(me.gridSize = Point(100, 556));
     });
   });
 }

test/service/engine_service_test.dart

@@ -1,19 +1,41 @@
-@TestOn('browser')
+import 'package:mockito/mockito.dart';
-
-import 'package:test/test.dart';
 import 'package:rules_of_living/service/engine_service.dart';
+import 'package:rules_of_living/src/Engine.dart';
+@TestOn('browser')
+import 'package:test/test.dart';
+
+class MockEngine extends Mock implements Engine {}
 
 void main() {
   EngineService sut;
+  MockEngine me;
   setUp(() {
+    me = MockEngine();
     sut = EngineService();
   });
+  group("Dependency Injection", () {
+    test("EngineService can be passed a custom Engine", () {
+      sut.engine = me;
 
-  test("EngineService creates an engine on demand", () {
+      Engine result = sut.engine;
-    expect(sut.engine, isNotNull);
+      expect(result, equals(me));
+    });
   });
+  group("caching", () {
+    test("EngineService creates an engine on demand", () {
+      Engine result = sut.engine;
+      expect(result, TypeMatcher<Engine>());
+    });
 
-  test("EngineService returns the cached engine on subsequent requests", () {
+    test("EngineService returns the cached engine on subsequent requests", () {
-    expect(sut.engine, allOf(isNotNull, equals(sut.engine)));
+      Engine result = sut.engine;
+      expect(sut.engine, equals(result));
+    });
+    test("caching can be overriden by providing a custom engine", () {
+      Engine first = sut.engine;
+      sut.engine = me;
+      Engine second = sut.engine;
+      expect(second, isNot(equals(first)));
+    });
   });
 }

test/src/engine_test.dart

@@ -1,7 +1,7 @@
 import 'dart:html' as html;
+import 'dart:math';
 
 @TestOn('browser')
-
 import 'package:rules_of_living/src/Engine.dart';
 import 'package:test/test.dart';
 
@@ -10,23 +10,33 @@ void main() {
   setUp(() {
     sut = Engine();
   });
+  group("canvas", () {
+    test("Engine can be instantiated without canvas", () {
+      expect(sut, isNot(throwsNoSuchMethodError));
+    });
 
-  test("Engine can be instantiated without canvas", () {
+    test("Engine does not throw errors when calling render directly", () {
-    expect(sut, isNot(throwsNoSuchMethodError));
+      // anonymous function necessary since throws can not use functions with args
-  });
+      expect(() => sut.render, isNot(throwsNoSuchMethodError));
+    });
 
-  test("Engine does not throw errors when calling render directly", () {
+    test("Engine does not throw errors when processing without attached canvas",
-    // anonymous function necessary since throws can not use functions with args
+        () {
-    expect(() => sut.render, isNot(throwsNoSuchMethodError));
+      // anonymous function necessary since throws can not use functions with args
-  });
+      expect(() => sut.process, isNot(throwsNoSuchMethodError));
+    });
 
-  test("Engine does not throw errors when processing without attached canvas", () {
+    test("setCanvas allows setting a canvas for an engine at any point", () {
-    // anonymous function necessary since throws can not use functions with args
+      sut.canvas = new html.CanvasElement();
-    expect(() => sut.process, isNot(throwsNoSuchMethodError));
+      expect(sut.canvas, isNotNull);
+    });
   });
-
+  group("gridSize", () {
-  test("setCanvas allows setting a canvas for an engine at any point", () {
+    test("zero gridSizes throw ArgumentErrors", () {
-    sut.canvas = new html.CanvasElement();
+      expect(() => sut.gridSize = Point(0, 5), throwsArgumentError);
-    expect(sut.canvas, isNotNull);
+    });
+    test("negative gridSizes throw ArgumentErrors", () {
+      expect(() => sut.gridSize = Point(1, -5), throwsArgumentError);
+    });
   });
-}
+}