-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
335 lines (335 loc) · 15.2 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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Game of life</title>
</head>
<body>
<div class="container">
<div class="screen-side">
<h1 class="title" id="title">Game of life</h1>
<div class="tv-frame">
<div>
<span class="triangle1"></span>
<span class="triangle2"></span>
<div id="screen" class="screen"></div>
</div>
</div>
</div>
<div class="panel">
<div class="main-btns">
<button class="start-btn start">
<svg
class="start-icon"
xmlns="http://www.w3.org/2000/svg"
width="45"
height="45"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M10.804 8 5 4.633v6.734zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696z"
/>
</svg>
<svg
class="stop-icon hide"
xmlns="http://www.w3.org/2000/svg"
width="45"
height="45"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M3.5 5A1.5 1.5 0 0 1 5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11zM5 4.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5z"
/>
</svg>
<span> Start </span>
</button>
<button class="next-iteration-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
fill="currentColor"
class="bi bi-arrow-right"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"
/>
</svg>
Next iteration
</button>
<button class="reset-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
fill="currentColor"
class="bi bi-arrow-clockwise"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"
/>
<path
d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"
/>
</svg>
Reset
</button>
</div>
<p>Number of iterations: <span class="number-of-iteration"></span></p>
<div class="secondary-btns">
<div class="wide-btns">
<button class="random-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="25"
viewBox="0 0 25 30"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.00359432 8.43893C0.0037506 7.74472 0.482425 6.89253 1.07471 6.5341L11.4291 0.268306C12.0206 -0.0896447 12.9786 -0.0896449 13.5712 0.269564L23.9292 6.54731C24.5209 6.90573 25.0002 7.75824 25 8.45544L24.9956 20.9693C24.9955 21.6646 24.516 22.5201 23.9254 22.8799L13.5487 29.2003C12.9578 29.5603 12.0011 29.5601 11.4093 29.1987L1.06893 22.8815C0.478206 22.5207 -0.0003124 21.6658 1.53025e-07 20.9713L0.00359432 8.43893ZM2.18146 7.4212L12.4698 13.1998L22.2786 7.49681L12.4532 1.69319L2.18146 7.4212ZM1.51791 9.29144C1.51791 9.54737 1.35148 20.5881 1.35148 20.5881C1.34616 20.9348 1.58074 21.361 1.87766 21.5413L11.5062 27.3865L11.5948 15.2169C11.5948 15.2169 1.51791 9.03536 1.51791 9.29144ZM13.4116 27.36L22.9307 21.2826C23.2952 21.0499 23.5907 20.5099 23.5907 20.0754V9.22935L13.4116 15.1265V27.36Z"
fill="#EED9FD"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.67077 15.3857C3.92345 15.8199 2.93266 15.5013 2.45789 14.6742C1.98328 13.8472 2.20441 12.8247 2.95173 12.3907C3.6992 11.9565 4.68999 12.2752 5.1646 13.1022C5.63937 13.9292 5.41824 14.9517 4.67077 15.3857ZM9.67161 18.687C8.9243 19.1212 7.93351 18.8025 7.45874 17.9755C6.98413 17.1485 7.20526 16.126 7.95257 15.692C8.70004 15.2578 9.69083 15.5764 10.1654 16.4035C10.6402 17.2305 10.4191 18.253 9.67161 18.687ZM4.67077 21.2022C3.92345 21.6364 2.93266 21.3178 2.45789 20.4907C1.98328 19.6637 2.20441 18.6412 2.95173 18.2072C3.6992 17.773 4.68999 18.0917 5.1646 18.9187C5.63937 19.7458 5.41824 20.7682 4.67077 21.2022ZM9.67161 24.5035C8.9243 24.9377 7.93351 24.6191 7.45874 23.792C6.98413 22.965 7.20526 21.9425 7.95257 21.5085C8.70004 21.0743 9.69083 21.3929 10.1654 22.22C10.6402 23.047 10.4191 24.0695 9.67161 24.5035ZM21.8984 12.2335C21.1509 11.7993 20.1603 12.118 19.6855 12.945C19.2109 13.772 19.4319 14.7945 20.1793 15.2285C20.9268 15.6627 21.9176 15.3441 22.3922 14.517C22.867 13.69 22.6458 12.6675 21.8984 12.2335ZM19.3607 16.7924C18.6134 16.3582 17.6226 16.6768 17.1479 17.5039C16.6733 18.3309 16.8944 19.3534 17.6417 19.7874C18.3892 20.2216 19.38 19.903 19.8546 19.0759C20.3293 18.2489 20.1082 17.2264 19.3607 16.7924ZM16.704 21.1941C15.9567 20.7599 14.9659 21.0785 14.4912 21.9056C14.0166 22.7326 14.2377 23.7551 14.985 24.1891C15.7325 24.6233 16.7233 24.3046 17.1979 23.4776C17.6726 22.6506 17.4515 21.6281 16.704 21.1941ZM12.6002 5.43683C11.6077 5.43683 10.8031 6.21105 10.8031 7.16606C10.8031 8.12107 11.6077 8.89529 12.6002 8.89529C13.5927 8.89529 14.3974 8.12107 14.3974 7.16606C14.3974 6.21105 13.5927 5.43683 12.6002 5.43683Z"
fill="#EED9FD"
/>
</svg>
Random
</button>
<button class="clear-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-trash"
viewBox="0 0 16 16"
>
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
/>
<path
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
/>
</svg>
Clear
</button>
<button class="save-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="19"
height="19"
fill="currentColor"
class="bi bi-floppy"
viewBox="0 0 16 16"
>
<path d="M11 2H9v3h2z" />
<path
d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z"
/>
</svg>
Save
</button>
</div>
<div class="small-btns">
<button class="info-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="25"
fill="currentColor"
class="bi bi-info-lg"
viewBox="0 0 16 16"
>
<path
d="m9.708 6.075-3.024.379-.108.502.595.108c.387.093.464.232.38.619l-.975 4.577c-.255 1.183.14 1.74 1.067 1.74.72 0 1.554-.332 1.933-.789l.116-.549c-.263.232-.65.325-.905.325-.363 0-.494-.255-.402-.704zm.091-2.755a1.32 1.32 0 1 1-2.64 0 1.32 1.32 0 0 1 2.64 0"
/>
</svg>
</button>
<!-- <button class="sound-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="23"
viewBox="0 0 28 27"
fill="none"
>
<path
d="M21.7174 6.74997C23.4049 8.43747 23.9674 11.25 23.9674 13.5C23.9674 15.7499 23.4049 18.5625 21.7174 20.25M18.3424 10.125C18.9049 10.6875 19.4674 11.8125 19.4674 13.5C19.4674 15.1875 18.9049 16.3125 18.3424 16.875M3.71736 11.8125V15.1875C3.71736 16.4301 4.27986 17.4375 6.52986 18C8.77986 18.5625 10.4674 23.625 13.8424 23.625C16.0924 23.625 16.0924 3.37497 13.8424 3.37497C10.4674 3.37497 8.77986 8.43747 6.52986 8.99997C4.27986 9.56247 3.71736 10.5698 3.71736 11.8125Z"
stroke="#EED9FD"
stroke-width="2.07172"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button> -->
<button class="credit-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="25"
fill="currentColor"
class="bi bi-c-circle"
viewBox="0 0 16 16"
>
<path
d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.146 4.992c-1.212 0-1.927.92-1.927 2.502v1.06c0 1.571.703 2.462 1.927 2.462.979 0 1.641-.586 1.729-1.418h1.295v.093c-.1 1.448-1.354 2.467-3.03 2.467-2.091 0-3.269-1.336-3.269-3.603V7.482c0-2.261 1.201-3.638 3.27-3.638 1.681 0 2.935 1.054 3.029 2.572v.088H9.875c-.088-.879-.768-1.512-1.729-1.512"
/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-c-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.146 4.992c.961 0 1.641.633 1.729 1.512h1.295v-.088c-.094-1.518-1.348-2.572-3.03-2.572-2.068 0-3.269 1.377-3.269 3.638v1.073c0 2.267 1.178 3.603 3.27 3.603 1.675 0 2.93-1.02 3.029-2.467v-.093H9.875c-.088.832-.75 1.418-1.729 1.418-1.224 0-1.927-.891-1.927-2.461v-1.06c0-1.583.715-2.503 1.927-2.503"/>
</svg> -->
</button>
</div>
</div>
</div>
</div>
<div id="myModal" class="info-modal modal">
<div class="modal-content">
<span class="close">×</span>
<h2 class="centered">Conway's Game of Life</h2>
<br />
<p>
Conway's Game of Life is a cellular automaton devised by the British
mathematician John Conway in 1970. It is a zero-player game, meaning
that its evolution is determined by its initial state, with no further
input from humans.
</p>
<br />
<p>
The game is played on a two-dimensional grid of cells, where each cell
can be either alive or dead. The rules govern the transitions between
generations based on the state of neighboring cells, leading to the
emergence of various interesting patterns and behaviors.
</p>
<br />
<h3>Rules:</h3>
<ul>
<li>
<strong>Birth:</strong> A dead cell with exactly three live
neighbors becomes a live cell.
</li>
<li>
<strong>Death by isolation:</strong> A live cell with fewer than two
live neighbors dies (isolation).
</li>
<li>
<strong>Death by overcrowding:</strong> A live cell with more than
three live neighbors dies (overcrowding).
</li>
<li>
<strong>Survival:</strong> A live cell with two or three live
neighbors survives to the next generation.
</li>
</ul>
<br />
<p>
The game progresses in generations, with each generation being a new
configuration of live and dead cells based on the application of these
rules.
</p>
<br />
<p>
Conway's Game of Life has been of interest to mathematicians, computer
scientists, and enthusiasts due to its ability to generate complex and
interesting patterns, including gliders, oscillators, and still lifes.
</p>
</div>
</div>
<div id="myModal" class="credit-modal modal">
<div class="modal-content">
<span class="close">×</span>
<h2 class="centered">Credits</h2>
<br />
<p>
This implementation of Conway's Game of Life was created by
<a
class="portfolio"
href="https://mohanad-80.github.io/portfolio/"
target="_blank"
>Mohanad Ahmed</a
>
</p>
<br />
<h3>Resources:</h3>
<ul>
<li>
<strong>Original Game of Life:</strong> Conceived by
<a
href="https://en.wikipedia.org/wiki/John_Horton_Conway"
target="_blank"
>John Conway</a
>
in 1970.
</li>
<li>
<strong>Code Inspiration:</strong>
<ul>
<li>
<a href="https://playgameoflife.com/" target="_blank"
>Play game of life website.</a
>
</li>
<li>
<a
href="https://codepen.io/Honda222/pen/xxBrzxg"
target="_blank"
>How to make the pop-up window.</a
>
</li>
<li>
<a
href="https://youtu.be/IMnYzR0zX0c?si=Q1UVd6FELcR74yiX"
target="_blank"
>How to make a triangle with css.</a
>
</li>
</ul>
</li>
<li>
<strong>Graphics and Design:</strong>
<ul>
<li>
UI design by the amazing
<a
href="https://www.behance.net/Mariam-Abdel-Raheem"
target="_blank"
>Mariam Abdel Raheem</a
>
</li>
<li>
Icons used are from
<a href="https://icons.getbootstrap.com/" target="_blank"
>Bootstrap</a
>
</li>
</ul>
</li>
</ul>
<br />
<p>
Feel free to explore and modify the source code on
<a href="https://github.com/mohanad-80/game_of_life" target="_blank">github</a>.
</p>
<br />
<p class="centered">
© <span class="year"></span> Mohanad Ahmed. All rights reserved.
</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>