Game-Of-Life/index.html at master · PentiumLuls/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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game Of Life</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script>
<div class="settingsContainer">
    <div class="board-size-settings">
        <label>
            Board width
            <input type="text" size="3" value="100" id="board-width-input">
        </label>
        <label>
            Board height
            <input type="text" size="3" value="100" id="board-height-input">
        </label>
        <label>
            Cell size
            <input type="text" size="3" value="5" id="board-cell-size-input">
        </label>
        <button id="board-resize" onclick="applySettings()">Save this settings</button>
    </div>
    <div class="other-settings">
        <div>
            <label>
                Speed
                <input type="text" size="3" value="NOT WORKING" id="speed-input">
            </label>
        </div>
        <div>
            <label>
                Show grid
                <input type="checkbox" name="grid" id="is-grid-displayed" onclick='toggleGridDisplaying();'>
            </label>
            <label>
                Wrap sides
                <input type="checkbox" checked name="wrapSides" id="is-sides-wrapped" onclick='toggleSidesWrapping();'>
            </label>
        </div>
        <label for="structure-selector">template</label>
        <select id="structure-selector" onchange="handleStructureSelector()" size="0">
            <option value="clear">Clear</option>
            <option value="random">Random</option>

            <option disabled>Space ships</option>
            <option value="glider">Glider</option>
            <option value="lightweight spaceship">Lightweight spaceship</option>
            <option  value="blinkerShip">Blinker ship</option>
            <option value="wickstretcher">Wickstretcher</option>
            <option value="tagalong">Tagalong</option>

            <option disabled>Puffers</option>
            <option value="frothingPuffer">Frothing puffer</option>
            <option value="blinkerPuffer2">Blinker puffer</option>

            <option disabled>Guns</option>
            <option value="gosper glider gun">Gosper glider gun</option>
            <option value="biGun">Bi-gun</option>
            <option value="gunstar">Gunstar</option>

            <option disabled>Static</option>
            <option value="small exploder">Small exploder</option>
            <option value="exploder">Exploder</option>
            <option value="10 cell row">10 Cell row</option>
            <option value="tumbler">Tumbler</option>
            <option value="boss">Boss</option>
            <option  value="verage">Verage</option>

            <option disabled>Growing</option>
            <option selected value="flower">Flower</option>
            <option value="bunnies">Bunnies</option>
            <option value="acorn">Acorn</option>
            <option value="dieHard">Die hard</option>

            <option disabled>Custom templates</option>
        </select>
        <button id="template-save-button" onclick="saveCustomTemplate()">Save your structure</button>
    </div>
    <div class="help-block">
        <p>Use 'space' to pause simulation</p>
        <p>'D' button to step over one generation</p>
        <p id="generationCounter">0</p>
    </div>
</div>
<div id="gameBoard">
    <canvas width="400" height="400" id='canvas' oncontextmenu="event.preventDefault();"></canvas>
</div>

<script src="js/structures.js"></script>
<script src="js/structuresHandlers.js"></script>
<script src="js/game.js"></script>
</body>
</html>