From 69b680e5541db4b72d6dfef9e85de77a0bcc5e51 Mon Sep 17 00:00:00 2001
From: Marty Oehme <marty.oehme@gmail.com>
Date: Sat, 7 Jul 2018 19:05:56 +0200
Subject: [PATCH] Add FontAwesome Icons to Buttons

---
 lib/app_component.dart | 10 +++++++++-
 lib/app_component.html | 16 +++++++++++-----
 web/index.html         |  3 +++
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/lib/app_component.dart b/lib/app_component.dart
index 637c8cf..8239568 100644
--- a/lib/app_component.dart
+++ b/lib/app_component.dart
@@ -5,7 +5,8 @@ import 'package:rules_of_living/src/App.dart';
 
 @Component(
   selector: 'my-app',
-  templateUrl: "app_component.html"
+  templateUrl: "app_component.html",
+  directives: [coreDirectives]
 )
 class AppComponent implements OnInit {
   var name = "World";
@@ -32,10 +33,17 @@ class AppComponent implements OnInit {
   void onStartClicked() {
     bool isRunning = !engine.running;
     engine.running = isRunning;
+  }
 
     switch (isRunning) {
       case true: buttonRunText = "Stop"; break;
       case false: buttonRunText = "Start"; break;
     }
+  void onStepClicked() {
   }
+
+  void onResetClicked() {
+  }
+
+  void onRandomClicked() {}
 }
diff --git a/lib/app_component.html b/lib/app_component.html
index b0f6234..366ce7b 100644
--- a/lib/app_component.html
+++ b/lib/app_component.html
@@ -1,14 +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()">{{buttonRunText}}</button>
-    <button id="step">Step</button>
-    <button id="reset">Reset</button>
-    <button id="random">Random</button>
-    Speed: <input type="text" title="speed" value="1">
+    <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>
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 36f2b5a..35bd3cb 100644
--- a/web/index.html
+++ b/web/index.html
@@ -17,6 +17,9 @@
   <link rel="stylesheet" href="styles.css">
   <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>