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

Add FontAwesome Icons to Buttons

Browse source
This commit is contained in:
Marty Oehme 2018-07-07 19:05:56 +02:00
parent 96a5bd0cec
commit 69b680e554
3 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
lib/app_component.dart
View file

@ -5,7 +5,8 @@ import 'package:rules_of_living/src/App.dart';
@Component( @Component(
selector: 'my-app', selector: 'my-app',
templateUrl: "app_component.html" templateUrl: "app_component.html",
directives: [coreDirectives]
) )
class AppComponent implements OnInit { class AppComponent implements OnInit {
var name = "World"; var name = "World";
@ -32,10 +33,17 @@ class AppComponent implements OnInit {
void onStartClicked() { void onStartClicked() {
bool isRunning = !engine.running; bool isRunning = !engine.running;
engine.running = isRunning; engine.running = isRunning;
}
switch (isRunning) { switch (isRunning) {
case true: buttonRunText = "Stop"; break; case true: buttonRunText = "Stop"; break;
case false: buttonRunText = "Start"; break; case false: buttonRunText = "Start"; break;
} }
void onStepClicked() {
} }
void onResetClicked() {
}
void onRandomClicked() {}
} }

16
lib/app_component.html
View file

@ -1,14 +1,20 @@
<h1>Cellular Automata - The Rules of Life</h1> <h1>Cellular Automata - The Rules of Life</h1>
<div id="rules-input"> <div id="rules-input">
Ruleset: <input type="text" title="ruleset" content="S23/B3"> Ruleset: <input type="text" title="ruleset" content="S23/B3">
<i class="fas fa-paint-brush"></i>
</div> </div>
<div id="output"> <div id="output">
<canvas #caCanvas width="500" height="500"></canvas> <canvas #caCanvas width="500" height="500"></canvas>
</div> </div>
<div id="controls"> <div id="controls">
<button id="run" (click)="onStartClicked()">{{buttonRunText}}</button> <button id="run" (click)="onStartClicked()">
<button id="step">Step</button> <span [ngSwitch]="engine.running">
<button id="reset">Reset</button> <i *ngSwitchCase="false" class="fas fa-play"></i>
<button id="random">Random</button> <i *ngSwitchCase="true" class="fas fa-stop"></i>
Speed: <input type="text" title="speed" value="1"> </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> </div>

3
web/index.html
View file

@ -17,6 +17,9 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="favicon.png"> <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> <script defer src="main.dart.js"></script>
</head> </head>