<h1>Cellular Automata</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">
    <button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
</div>