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
This commit is contained in:
Marty 2018-08-28 07:45:43 +00:00
commit 7db2e73f53
13 changed files with 234 additions and 115 deletions

View file

@ -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/header_component.dart';
import 'package:rules_of_living/components/simulation_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/configuration_service.dart';
import 'package:rules_of_living/service/control_service.dart';
import 'package:rules_of_living/service/engine_service.dart'; import 'package:rules_of_living/service/engine_service.dart';
@Component( @Component(
@ -20,8 +21,16 @@ import 'package:rules_of_living/service/engine_service.dart';
ControlsComponent, ControlsComponent,
ConfigurationComponent 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 { class AppComponent {
var name = "World"; var name = "World";

View file

@ -1,6 +1,8 @@
import 'package:angular/angular.dart'; import 'package:angular/angular.dart';
import 'package:angular_components/material_button/material_button.dart'; import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.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_slider/material_slider.dart';
import 'package:angular_components/material_tooltip/material_tooltip.dart'; import 'package:angular_components/material_tooltip/material_tooltip.dart';
import 'package:rules_of_living/service/configuration_service.dart'; import 'package:rules_of_living/service/configuration_service.dart';
@ -8,18 +10,35 @@ import 'package:rules_of_living/service/configuration_service.dart';
@Component( @Component(
selector: "configuration", selector: "configuration",
templateUrl: "configuration_component.html", templateUrl: "configuration_component.html",
styleUrls: ["configuration_component.css"], styleUrls: [
"configuration_component.css"
],
directives: [ directives: [
MaterialButtonComponent, MaterialButtonComponent,
MaterialIconComponent, MaterialIconComponent,
MaterialSliderComponent, MaterialSliderComponent,
MaterialTooltipDirective MaterialTooltipDirective,
materialInputDirectives,
materialNumberInputDirectives,
NgModel
]) ])
class ConfigurationComponent { class ConfigurationComponent {
final ConfigurationService config; 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 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"; String get speedSliderTooltip => "Simulation Speed: $simSpeed";

View file

@ -1,5 +1,21 @@
<div id="config"> <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> 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> </div>

View file

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

View file

@ -1,7 +1,7 @@
<div id="controls"> <div id="controls">
<material-button id="reset" (click)="onResetClicked()"><material-icon icon="replay" baseline></material-icon></material-button> <material-button id="reset" (click)="onResetClicked()"><material-icon icon="replay" baseline></material-icon></material-button>
<material-button id="run" (click)="onStartClicked()"> <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="false" icon="play_arrow" baseline></material-icon>
<material-icon *ngSwitchCase="true" icon="pause" baseline></material-icon> <material-icon *ngSwitchCase="true" icon="pause" baseline></material-icon>
</span> </span>

View file

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

View file

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

View file

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

View file

@ -1,49 +1,15 @@
import 'dart:html' as html;
import 'package:rules_of_living/src/Engine.dart'; import 'package:rules_of_living/src/Engine.dart';
class EngineService { 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;
} }

View file

@ -1,4 +1,5 @@
import 'dart:html' as html; import 'dart:html' as html;
import 'dart:math';
import 'package:rules_of_living/src/Grid.dart'; 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 // ms stuck in updateloop after which game will declare itself unresponsive
final int SAFETY_TIMEOUT = 2000; 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 _updateLag = 0.0;
num _drawLag = 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 /// be used if no canvas was defined at engine creation and it should be
/// rendered later. /// rendered later.
html.CanvasElement canvas; html.CanvasElement canvas;
Grid _grid = new Grid(GRID_X, GRID_Y); Grid _grid;
bool running = false; bool running = false;
Engine([this.canvas]) { Engine([x = 100, y = 100, this.canvas]) {
_grid = Grid(x, y);
_elapsed.start(); _elapsed.start();
_grid.addPattern(amount: 15, dispersal: 5); _grid.addPattern(amount: 15, dispersal: 5);
html.window.animationFrame.then(animFrame); html.window.animationFrame.then(animFrame);
@ -61,7 +70,7 @@ class Engine {
} }
void clear() { void clear() {
_grid = new Grid(GRID_X, GRID_Y); _grid = new Grid(gridSize.x, gridSize.y);
running = false; running = false;
} }

View file

@ -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/configuration_service.dart';
import 'package:rules_of_living/service/engine_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 MockEngine extends Mock implements Engine {}
class MockEngineService extends Mock implements EngineService {
MockEngine _engine = MockEngine();
@override
Engine get engine => _engine;
}
void main() { void main() {
group("simulation speed", () {
ConfigurationService sut; ConfigurationService sut;
MockEngineService mes; EngineService engineService;
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", () { test("speed changes propagate to engine", () {
sut.simSpeed = 312; 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));
}); });
}); });
} }

View file

@ -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/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() { void main() {
EngineService sut; EngineService sut;
MockEngine me;
setUp(() { setUp(() {
me = MockEngine();
sut = EngineService(); sut = EngineService();
}); });
group("Dependency Injection", () {
test("EngineService can be passed a custom Engine", () {
sut.engine = me;
Engine result = sut.engine;
expect(result, equals(me));
});
});
group("caching", () {
test("EngineService creates an engine on demand", () { test("EngineService creates an engine on demand", () {
expect(sut.engine, isNotNull); 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)));
});
}); });
} }

View file

@ -1,7 +1,7 @@
import 'dart:html' as html; import 'dart:html' as html;
import 'dart:math';
@TestOn('browser') @TestOn('browser')
import 'package:rules_of_living/src/Engine.dart'; import 'package:rules_of_living/src/Engine.dart';
import 'package:test/test.dart'; import 'package:test/test.dart';
@ -10,7 +10,7 @@ void main() {
setUp(() { setUp(() {
sut = Engine(); sut = Engine();
}); });
group("canvas", () {
test("Engine can be instantiated without canvas", () { test("Engine can be instantiated without canvas", () {
expect(sut, isNot(throwsNoSuchMethodError)); expect(sut, isNot(throwsNoSuchMethodError));
}); });
@ -20,7 +20,8 @@ void main() {
expect(() => sut.render, isNot(throwsNoSuchMethodError)); expect(() => sut.render, isNot(throwsNoSuchMethodError));
}); });
test("Engine does not throw errors when processing without attached canvas", () { test("Engine does not throw errors when processing without attached canvas",
() {
// anonymous function necessary since throws can not use functions with args // anonymous function necessary since throws can not use functions with args
expect(() => sut.process, isNot(throwsNoSuchMethodError)); expect(() => sut.process, isNot(throwsNoSuchMethodError));
}); });
@ -29,4 +30,13 @@ void main() {
sut.canvas = new html.CanvasElement(); sut.canvas = new html.CanvasElement();
expect(sut.canvas, isNotNull); expect(sut.canvas, isNotNull);
}); });
});
group("gridSize", () {
test("zero gridSizes throw ArgumentErrors", () {
expect(() => sut.gridSize = Point(0, 5), throwsArgumentError);
});
test("negative gridSizes throw ArgumentErrors", () {
expect(() => sut.gridSize = Point(1, -5), throwsArgumentError);
});
});
} }