experiments/cellular-automata
1
0
Fork 0
Code Issues 29 Pull requests Projects Releases Wiki Activity

Add Configuration Sidebar with ConfigurationService

Browse source
This commit is contained in:
Marty Oehme 2018-08-23 14:12:22 +02:00
parent 6ba0ca55cb
commit bf0d136d8b
10 changed files with 83 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
lib/app_component.css Normal file
View file

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

9
lib/app_component.dart
View file

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

9
lib/app_component.html
View file

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

4
lib/components/configuration_component.css Normal file
View file

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

31
lib/components/configuration_component.dart Normal file
View file

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

5
lib/components/configuration_component.html Normal file
View file

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

4
lib/components/controls_component.css
View file

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

8
lib/components/controls_component.dart
View file

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

2
lib/components/controls_component.html
View file

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

17
lib/service/configuration_service.dart Normal file
View file

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