Game-of-Life/index.html at master · eppineda/Game-of-Life · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <link href="gameoflife.css" rel="stylesheet" type="text/css"></link>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="game.js"></script>
    <script type="text/javascript" src="patterns.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="controllers.js"></script>
    <script type="text/javascript" src="services.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body ng-app="gameoflife" ng-controller="SimController">
    <h1>Game of Life</h1>
    <fieldset ng-show="showSeed" ng-hide="!showSeed">
        <legend>Seed Generation</legend>
        <h2>cell coordinates</h2>
        <p>Enter the coordinates of each seed cell, or have them randomly placed.</p>
        <label for="howMany">how many?&nbsp;</label>
        <input id="howMany" type="number" min="0" max="100" ng-required ng-model="seed.howMany"
        ng-change="setRows()" />
        <table id="seed">
        <thead>
            <tr><th>#</th><th>x-coord</th><th>y-coord</th><th>pattern</tr>
            <tr>
                <th colspan="4">
                    <button id="randomize" ng-click="randomizeCoords()">randomize</button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="c in seed.coords">
                <td style="text-align: right;">{{seed.coords.indexOf(c)}}</td>
                <td><input type="number" min="0" max="1000"
                    ng-model="seed.coords[seed.coords.indexOf(c)].x" /></td>
                <td><input type="number" type="number" min="0" max="1000"
                    ng-model="seed.coords[seed.coords.indexOf(c)].y" /></td>
                <td>
                    <select ng-model="selectedPattern"
                            ng-options="p.name for p in patterns"
                            ng-change="addPattern(seed.coords[seed.coords.indexOf(c)], selectedPattern); seed.coords.splice(c, 1);">
                        <option value="">--optional--</option>
                    </select>
                </td>
            </tr>
        </tbody>
        </table>
    </fieldset>
    <fieldset>
        <legend>Simulation</legend>
        <div>
            <button id="start" ng-click="beginSimulation()" ng-model="showSeed">Begin simulation.</button>
            <button id="stop"  ng-click="endSimulation()"   ng-model="showSeed">End simulation.</button>
        </div>
        <svg width="100%">
        </svg>
    </fieldset>
</body>
</html>