Merge branch 'change-to-angular-dart'

lib/app_component.dart

@@ -0,0 +1,47 @@
+import 'package:angular/angular.dart';
+
+import 'dart:html' as html;
+import 'package:rules_of_living/src/App.dart';
+
+@Component(
+  selector: 'my-app',
+  templateUrl: "app_component.html",
+  directives: [coreDirectives]
+)
+class AppComponent implements OnInit {
+  var name = "World";
+
+  App engine;
+
+  @ViewChild("caCanvas")
+  html.CanvasElement canvas;
+
+  @override
+  void ngOnInit() {
+    canvas.context2D.setFillColorRgb(255, 0, 0);
+    canvas.context2D.fillRect(0, 0, 200, 150);
+    engine = new App(canvas);
+
+    html.window.animationFrame.then(animFrame);
+  }
+
+  void animFrame(num now) {
+    engine.process(now);
+    html.window.animationFrame.then(animFrame);
+  }
+
+  void onStartClicked() {
+    engine.running = !engine.running;
+  }
+
+  void onStepClicked() {
+    engine.running = false;
+    engine.update();
+  }
+
+  void onResetClicked() {
+    engine.reset();
+  }
+
+  void onRandomClicked() {}
+}

lib/app_component.html

@@ -0,0 +1,20 @@
+<h1>Cellular Automata - The Rules of Life</h1>
+<div id="rules-input">
+    Ruleset: <input type="text" title="ruleset" content="S23/B3">
+    <i class="fas fa-paint-brush"></i>
+</div>
+<div id="output">
+    <canvas #caCanvas width="500" height="500"></canvas>
+</div>
+<div id="controls">
+    <button id="run" (click)="onStartClicked()">
+        <span [ngSwitch]="engine.running">
+            <i *ngSwitchCase="false" class="fas fa-play"></i>
+            <i *ngSwitchCase="true" class="fas fa-stop"></i>
+        </span>
+    </button>
+    <button id="step" (click)="onStepClicked()"><i class="fas fa-step-forward"></i></button>
+    <button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></button>
+    <button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></button>
+    <i class="fas fa-clock"> Speed:</i><input type="text" title="speed" value="1">
+</div>

lib/src/App.dart

@@ -1,7 +1,6 @@
 import 'dart:html' as html;
 
-import 'package:rules_of_living/Cell.dart';
-import 'package:rules_of_living/Grid.dart';
+import 'package:rules_of_living/src/Grid.dart';
 
 class App {
   // Elapsed Time Counter - useful for Safety Timeout
@@ -26,12 +25,11 @@ class App {
 
   App(this.canvas) {
     _elapsed.start();
-    var runBtn = html.querySelector("#run");
-    runBtn.onClick.forEach((html.MouseEvent mouse) {
-      running = !running;
-      if(running) runBtn.innerHtml = "Stop";
-      if(!running) runBtn.innerHtml = "Start";
-    });
+  }
+
+  void reset () {
+    grid = new Grid(100, 100);
+    running = false;
   }
 
   void process(num now) {
@@ -45,7 +43,7 @@ class App {
         print("ERROR STUCK IN UPDATE LOOP");
         break;
       }
-      update();
+      if (running == true) update();
       _updateLag -= _MS_PER_STEP;
     }
 
@@ -57,7 +55,7 @@ class App {
 
   void update() {
 //    print("updating");
-    if (running) grid.update();
+    grid.update();
   }
 
 

lib/src/Cell.dart

@@ -1,4 +1,4 @@
-import 'package:rules_of_living/Rule.dart';
+import 'package:rules_of_living/src/Rule.dart';
 
 class Cell {
   bool state;
@@ -6,11 +6,16 @@ class Cell {
   List<Rule> surviveRules = new List<Rule>();
   List<Rule> birthRules = new List<Rule>();
 
+  /// For determining if render updates are necessary in [Grid].render() function
+  bool dirty = false;
+
   Cell([bool state = false]) : this.state = state;
 
   void advanceState() {
     this.state = this.nextState;
     this.nextState = false;
+
+    this.dirty = true;
   }
 
   void update(int neighbors) {

lib/src/Grid.dart

@@ -1,13 +1,15 @@
 import 'dart:html' as html;
 
-import 'Cell.dart';
-import 'Rule.dart';
+import 'package:rules_of_living/src/Cell.dart';
+import 'package:rules_of_living/src/Rule.dart';
 
 class Grid {
   final int w;
   final int h;
   final List<List<Cell>> map;
 
+  bool _dirty = true;
+
   Grid(int w, int h)
       : this.w = w,
         this.h = h,
@@ -82,6 +84,7 @@ class Grid {
       for (int x = 0; x < w; x++) {
         // DEFAULTS TO CONWAY GAME OF LIFE RANGE OF ONE
         map[y][x].update(getSurroundingNeighbors(x, y, 1));
+        if (!_dirty && map[y][x].dirty) _dirty = true;
       }
     }
     for (int y = 0; y < h; y++) {
@@ -110,6 +113,9 @@ class Grid {
   }
 
   void render(html.CanvasElement canvas, [num interp]) {
+    // only renders if any cells changed between renders
+    if (!_dirty) return;
+
     html.CanvasRenderingContext2D ctx = canvas.getContext('2d');
     int brickW = (canvas.width ~/ map[0].length);
     int brickH = (canvas.height ~/ map.length);
@@ -124,5 +130,7 @@ class Grid {
         ctx.fillRect(x * brickW, y * brickH, brickW, brickH);
       }
     }
+
+    _dirty = false;
   }
 }

pubspec.yaml

@@ -7,10 +7,12 @@ homepage: https://www.martyoehme.org/
 environment:
   sdk: '>=2.0.0-dev.66.0 <2.0.0'
 
-#dependencies:
-#  path: ^1.4.1
+dependencies:
+  angular: ^5.0.0-beta
 
 dev_dependencies:
+  angular_test: ^2.0.0-beta
   build_runner: ^0.9.0
+  build_test: ^0.10.2
   build_web_compilers: ^0.4.0
-  test: ^1.2.0
+  test: ^1.0.0

test/app_test.dart

@@ -0,0 +1,32 @@
+@TestOn('browser')
+
+import 'package:rules_of_living/app_component.dart';
+import 'package:rules_of_living/app_component.template.dart' as ng;
+import 'package:angular_test/angular_test.dart';
+import 'package:test/test.dart';
+
+void main() {
+  final testBed =
+      NgTestBed.forComponent<AppComponent>(ng.AppComponentNgFactory);
+  NgTestFixture<AppComponent> fixture;
+
+  setUp(() async {
+    fixture = await testBed.create();
+  });
+
+  tearDown(disposeAnyRunningTest);
+
+  test('Default greeting', () {
+    expect(fixture.text, 'Hello Angular');
+  });
+
+  test('Greet world', () async {
+    await fixture.update((c) => c.name = 'World');
+    expect(fixture.text, 'Hello World');
+  });
+
+  test('Greet world HTML', () {
+    final html = fixture.rootElement.innerHtml;
+    expect(html, '<h1>Hello Angular</h1>');
+  });
+}

web/index.html

@@ -1,29 +1,31 @@
 <!DOCTYPE html>
-
 <html>
+
 <head>
+  <script>
+    // WARNING: DO NOT set the <base href> like this in production!
+    // Details: https://webdev.dartlang.org/angular/guide/router
+    (function () {
+      var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);
+      document.write('<base href="' + (m ? m[0] : '/') + '" />');
+    }());
+  </script>
+
+  <title>Hello Angular</title>
   <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="scaffolded-by" content="https://github.com/google/stagehand">
-    <title>rules_of_living</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
-    <link rel="icon" href="favicon.ico">
+  <link rel="icon" type="image/png" href="favicon.png">
+
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">
+
   <script defer src="main.dart.js"></script>
 </head>
 
 <body>
-
-  <div id="output">
-      <canvas id="canvas"></canvas>
-  </div>
-  <div id="controls">
-      <button id="run">Run</button>
-      <button id="step">Step</button>
-      <button id="reset">Reset</button>
-      <button id="random">Random</button>
-      <input id="speed" title="Speed" value="1">
-  </div>
+  <my-app>Loading...</my-app>
 
 </body>
+
 </html>

web/main.dart

@@ -1,19 +1,7 @@
-import 'dart:html' as html;
+import 'package:angular/angular.dart';
+import 'package:rules_of_living/app_component.template.dart' as ng;
 
-import 'package:rules_of_living/App.dart';
-
-
-html.CanvasElement el;
-App engine;
 
 void main() {
-  el = new html.CanvasElement(width: 500, height: 500);
-  html.querySelector('#output').append(el);
-  engine = new App(el);
-  html.window.animationFrame.then(animFrame);
-}
-
-void animFrame(num now) {
-  engine.process(now);
-  html.window.animationFrame.then(animFrame);
+  runApp(ng.AppComponentNgFactory);
 }

web/styles.css

@@ -1,14 +1,117 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto);
+@import url(https://fonts.googleapis.com/css?family=Material+Icons);
 
-html, body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
+/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+label {
+  padding-right: 0.5em;
+}
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
+  width: 24em;
 }
-
-#output {
-  padding: 20px;
-  text-align: center;
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
 }