-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (144 loc) · 7.05 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Conway's Game of Life</title>
<link rel='icon' href='./gol_images/icon.svg' type='image/ico'/>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>
<script src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossorigin='anonymous'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' crossorigin='anonymous'></script>
<link rel='stylesheet' href='gol_style.css'>
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-light'>
<a class='navbar-brand' onclick='location.reload()'><h4>Conway's Game of Life</h4></a>
<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Toggle navigation'>
<span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarNavDropdown'>
<ul class='navbar-nav'>
<li class='btn-group nav-item mr-3 mt-1' role='group'>
<button id='next' class='btn btn-secondary'>Next Gen</button>
<button id='play' class='btn btn-secondary'>Play</button>
<button id='pause' class='btn btn-secondary'>Pause</button>
<button id='clear' class='btn btn-secondary'>Clear</button>
</li>
<li class='nav-item mr-3 mt-1'>
<select id='pattern'>
<option selected disabled hidden>Choose a Pattern</option>
<optgroup label='Oscillators'>
<option value='blinker'>Blinker</option>
<option value='toad'>Toad</option>
<option value='beacon'>Beacon</option>
<option value='pulsar'>Pulsar</option>
<option value='pentadeca'>Penta-decathlon</option>
</optgroup>
<optgroup label='Spaceships'>
<option value='glider'>Glider</option>
<option value='lwss'>Light-weight spaceship</option>
<option value='mwss'>Middle-weight spaceship</option>
<option value='hwss'>Heavy-weight spaceship</option>
</optgroup>
<optgroup label='Guns'>
<option value='gun'>Gosper's glider gun</option>
</optgroup>
</select>
</li>
<li id='slider' class='mr-3 mt-1'>
<div>Pace</div>
<div><input id='pace' type='range' min='10' max='500'></div>
</li>
<li class='nav-item mt-1'>
<button id='info' class='btn btn-secondary' data-toggle='modal' data-target='#staticBackdrop'><b>?</b></button>
</li>
</ul>
</div>
</nav>
<div id='inst' class='mt-2'>
<div>
<div></div>
<h6 class='ml-2'>Live cell</h6>
</div>
<div>
<div></div>
<h6 class='ml-2'>Dead cell</h6>
</div>
<div>
<p><b>Current Population: </b><span id='popCount'>0</span></p>
</div>
</div>
<table id='board'></table>
<!-- Modal -->
<div class='modal fade' id='staticBackdrop' data-backdrop='static' data-keyboard='false' tabindex='-1' aria-labelledby='staticBackdropLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title' id='staticBackdropLabel'>Conway's Game of Life</h3>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body' id='tutorial'>
<div>
<h3>Welcome to Conway's Game of Life</h3>
<p>
The Game of Life, also known simply as Life, is a cellular automaton
devised by the British mathematician John Horton Conway in 1970.
</p>
<p>
The world of Game of life is typically a two-dimentional infinitely
long plane. But in this application we are restricted to the size
of the screen. This plane is divided into small square cells with
each of them in two possible states, <b>live</b> or <b>dead</b>.
</p>
<p>The rules of <b>Game of Life</b> are:</p>
<ul class='text-left'>
<li>A live cell with fewer than two live neighbouring cells dies (underpopulation)</li>
<li>A live cell with more than three live neighbouring cells dies (overpopulation)</li>
<li>A live cell with two or three live neighbouring survives</li>
<li>A dead cell with three neighbourig cells becomes a live cell (reproduction)</li>
</ul>
<b>Credits</b>: For more info <a href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life' target='_blank'>Click here</a>.
</div>
<div>
<h5>Click and drag on the board to create live cells</h5>
<img src='gol_images/select.gif'>
</div>
<div>
<h5>Use these options to do your simulation</h5>
<img src='gol_images/actions.png'>
<ul class='text-left'>
<li><b>Next Gen</b> - To display the next generation</li>
<li><b>Play</b> - To start the simulation</li>
<li><b>Pause</b> - To stop the simulation</li>
<li><b>Clear</b> - To clear the board</li>
</ul>
<h5>You can set the pace of the simulation even in real time</h5>
<img src='gol_images/pace.gif'>
</div>
<div>
<h6>You can choose pre-built patterns to run your simulation. Try one it will amuse you!</h6>
<img src='gol_images/pattern.png'>
</div>
<div>
<h4>Rest In Peace</h4>
<h2>John Horton Conway</h2>
<h6>26 December 1937 – 11 April 2020</h6>
</div>
<div>
<h2>Have Fun!</h2>
For the source code of this application checkout my <a href='https://github.com/dinesh-GDK/Game-Of-Life/' target='_blank'>GitHub</a>.
</div>
</div>
<div class='modal-footer justify-content-between'>
<button class='btn btn-secondary' id='pre'>Previous</button>
<div id='page_no'></div>
<button class='btn btn-secondary' id='nxt'>Next</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src='gol_patterns.js'></script>
<script src='gol.js'></script>
</html>