-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (71 loc) · 3.7 KB
/
index.html
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
<!doctype html>
<html>
<head>
<title>Life!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="divcanv1" class="left" style="display:none;">
<canvas id="canv1" width="100" height="100">
HTML5 Canvas not supported
</canvas>
</div>
<div class="right">
<div class="right-center top">
<span class="header1">Conway's Game of Life</span><br/><br/><br/>
<span>by <a id="mail" href="mailto:pawel.swiecki@gmail.com">pawel.swiecki@gmail.com</a></span>
</div>
<br/>
<div class="right-center">
<span class="header3">Controls</span><br/><br/>
<input id="start-stop" class="button1 active" value=" go " type="button"/>
<span class="block"></span>
<input id="step" class="button1 active" value="step" type="button"/>
<span class="block"></span>
<input id="reset" class="button1 active" value="reset" type="button"/>
</div>
<br/>
<div class="right-center">
<span class="header3">Drag&Drop Patterns</span><br/><br/>
<input id="pattern-pulsar" class="button1 active drag-button" value="pulsar" type="button"/>
<input id="pattern-glider" class="button1 active drag-button" value="glider" type="button"/>
<input id="pattern-glider-gun" class="button1 active drag-button" value="glider gun" type="button"/><br/><br/>
<input id="pattern-r-pentomino" class="button1 active drag-button" value="r-pentomino" type="button"/>
<input id="pattern-LWSS" class="button1 active drag-button" value="LWSS" type="button"/>
</div>
<br/>
<div class="right-center">
<div class="header3">Facts</div><br/>
<div>Currently living: <span id="counter">0 </span></div><br/>
<div>Generations passed: <span id="generations">0 </span></div><br/>
</div>
<br/>
<div class="right-center header3">
<div>Histogram<span id="counter"></span></div><br/>
<canvas id="histogram" width="497" height="77">
HTML5 Canvas not supported
</canvas>
</div>
<br/>
<div class="right-center">
<span class="header3">Rules</span><br/><br/>
<div class="rules">
<ol class="list1" type="1">
<li>Alive cell dies if has fewer than two live neighbours (under-population).</li><br/>
<li>Alive cell dies if has more than three live neighbours (overcrowding).</li><br/>
<li>Alive cell lives on to the next generation if has two or three live neighbours.</li><br/>
<li>Dead cell with exactly three live neighbours becomes a live cell (reproduction).</li>
</ol>
</div>
</div>
<br/>
</div>
<!-- SCRIPTS HERE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="frontend.js"></script>
<script type="text/javascript" src="backend.js"></script>
<script type="text/javascript" src="patterns.js"></script>
<script type="text/javascript" src="fixedqueue.js"></script>
</body>
</html>