-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
330 lines (288 loc) · 13.4 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/assets/favicon/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/assets/favicon/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Conway's Game of Life | @iyyel</title>
</head>
<body>
<div id="app" class="grid grid-cols-2 justify-items-center gap-4 p-10">
<!-- Grid col 1, row 1 -->
<div id="page-header" class="col-span-2 text-center">
<div class="mb-6">
<h1 class="header-text">Conway's Game of Life</h1>
</div>
<p>
This is an implementation of
<a class="text-link" href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Game of Life</a>
in
<a class="text-link" href="https://www.scala-lang.org">Scala 3</a>
with
<a class="text-link" href="https://www.scala-js.org">Scala.js</a>
and
<a class="text-link" href="/~https://github.com/raquo/Airstream/">Airstream</a>,
developed using
<a class="text-link" href="https://vite.dev/">Vite</a>
and styled with
<a class="text-link" href="https://tailwindcss.com/">Tailwind CSS</a>.
</p>
<p>
Created by
<a class="text-link" href="https://iyyel.io/">Daniel Larsen (@iyyel)</a>,
with inspiration from
<a class="text-link" href="https://ivanyu.me/">Ivan Yurchenko</a>.
The code is available on <a class="text-link" href="/~https://github.com/iyyel/conways-game-of-life">GitHub</a>
and is licensed under the <a class="text-link"
href="/~https://github.com/iyyel/conways-game-of-life/blob/main/LICENSE.md">MIT License</a>.
</p>
<div class="flex flex-wrap items-center justify-center mt-5 mb-5">
<a href="https://www.scala-lang.org" class="flex-grow-0">
<img src="/assets/img/scala_logo.svg" class="header-icon" alt="Scala logo">
</a>
<a href="https://www.scala-js.org" class="flex-grow-0 mt-3 md:mt-0">
<img src="/assets/img/scala-js_logo.svg" class="header-icon" alt="Scala.js icon">
</a>
<a href="https://vite.dev/" class="flex-grow-0 ml-3 mt-3 md:mt-0">
<img src="/assets/img/vite_logo.svg" class="header-icon" alt="Vite icon">
</a>
<a href="https://tailwindcss.com" class="flex-grow-0 ml-3 mt-3 md:mt-0">
<img src="/assets/img/tailwind-css_logo.svg" class="header-icon" alt="Tailwind CSS icon">
</a>
</div>
<hr class="h-0.5 border-t-0 bg-white/10" />
</div>
<!-- Grid col 1, row 2 -->
<div class="grid grid-cols-subgrid col-span-2">
<!-- Subgrid col 1, row 1 -->
<div id="button-controls" class="flex flex-wrap justify-end gap-2">
<div class="flex flex-wrap gap-2 justify-end md:w-1/2">
<button id="btn-clear" class="clear-btn" type="button">
<img src="/assets/img/clear_icon.svg" class="btn-icon white-icon" alt="Clear icon">
<span id="btn-label">Clear universe</span>
</button>
<button id="btn-random" class="random-universe-btn" type="button">
<img src="/assets/img/random_icon.svg" class="btn-icon white-icon" alt="Random icon">
<span id="btn-label">Random universe</span>
</button>
</div>
<div class="flex flex-wrap gap-2 justify-end md:w-1/2">
<button id="btn-new-universe" class="new-universe-btn" onclick="location.href='#modal-new-universe'">
<img src="/assets/img/universe_icon.svg" class="btn-icon white-icon" alt="New universe icon">
<span id="btn-label">New universe</span>
</button>
<button id="btn-predefined-universe" class="predefined-universe-btn"
onclick="location.href='#modal-predefined-universe'">
<img src="/assets/img/globe_icon.svg" class="btn-icon white-icon" alt="New universe icon">
<span id="btn-label">Predefined universe</span>
</button>
</div>
<div class="flex w-full justify-end gap-2">
<button id="btn-start-stop" class="start-btn" type="button">
<span id="btn-icon" class="btn-icon white-icon start-icon"></span>
<span id="btn-label">Start simulation</span>
</button>
</div>
</div>
<!-- Subgrid col 2, row 1 -->
<div id="slider-controls" class="flex flex-wrap justify-start gap-2">
<table>
<tr>
<th class="text-right pr-2">
<label for="slider-speed" class="slider-label">Speed:</label>
</th>
<td>
<div id="control-speed" class="flex items-center mb-2">
<input id="slider-speed" class="slider-input" type="range" value="4" min="1" max="7">
<span id="span-speed" class="slider-indicator inline-block ml-2">1.00×</span>
</div>
</td>
</tr>
<tr>
<th class="text-right pr-2">
<label for="slider-zoom" class="slider-label">Zoom: </label>
</th>
<td>
<div id="control-zoom" class="flex items-center mb-2">
<input id="slider-zoom" class="slider-input" type="range" value="4" min="1" max="7">
<span id="span-zoom" class="slider-indicator inline-block ml-2">1.00×</span>
</div>
</td>
</tr>
<tr>
<th class="text-right pr-2">
<label for="slider-history" class="slider-label">History: </label>
</th>
<td>
<div id="control-history" class="flex items-center mb-2">
<input id="slider-history" class="slider-input" type="range">
<span id="span-time-length" class="slider-indicator inline-block ml-2">1</span>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- Grid col 1, row 3 -->
<div id="universe" class="col-span-2 text-center">
<!-- Subgrid col 1, row 1 -->
<canvas id="universe-view">
</canvas>
<!-- Subgrid col 1, row 2 -->
<span id="span-cell-coords" class="flex justify-end text-white">
<span id="span-cell-coord-row">0</span>×<span id="span-cell-coord-col">0</span>
</span>
</div>
<!-- Grid col 1, row 5 -->
<div id="page-footer" class="col-span-2 max-w-screen-md">
<hr class="h-0.5 border-t-0 bg-white/10" />
<div class="mt-6">
<h1 class="subheader-text">Information</h1>
</div>
<p>You can find more information about the game on
<a class="text-link" href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Wikipedia</a>.
</p>
<p>The world in this implementation is toroidal, meaning the top and bottom, as well as the left and right edges,
are connected.</p>
<p>During the simulation, the history of the universe's evolution is recorded, and you can scroll to any previous
state when the simulation is paused. Additionally, while the simulation is paused, you can modify the state by
adding or removing living cells.</p>
<p>The cell plane can be cleared or randomly seeded, and you can create a new universe (with a different size)
using the buttons at the top (note that large universes may slow down the simulation). You can also select from
several interesting predefined universes.</p>
<p>Any manual changes to the state of the universe (e.g., making a cell dead or alive, clearing the plane,
randomly seeding, or creating a new universe) will cause its history to be cleared.</p>
<p>You can control the simulation speed and zoom the cell plane by adjusting the sliders at the top.</p>
<p>However, the history is unbounded and may consume a large amount of memory over time.</p>
<div class="flex flex-wrap gap-6 mt-4">
<a href="https://iyyel.io">
<img src="/assets/img/home_icon.svg" class="small-icon white-icon" alt="Home icon">
</a>
<a href="/~https://github.com/iyyel">
<img src="/assets/img/github_icon.svg" class="small-icon white-icon" alt="GitHub icon">
</a>
<a href="mailto:me@iyyel.io">
<img src="/assets/img/mail_icon.svg" class="small-icon white-icon" alt="E-mail icon">
</a>
</div>
</div>
<div id="modal-new-universe" class="modal-container">
<div id="modal-overlay" class="modal-overlay"></div>
<div class="modal-new-universe-content">
<div class="flex justify-between mb-4">
<h3 class="smallheader-text mb-2">Create a new universe</h3>
<button onclick="location.href='#'">
<img src="/assets/img/close_icon.svg" class="small-icon white-icon hover-icon" alt="Close icon">
</button>
</div>
<div>
<div class="flex">
<label for="slider-new-universe-size" class="slider-label pr-2">Size: </label>
<div class="flex items-center mb-2">
<input id="slider-new-universe-size" class="slider-input" type="range">
<span id="span-new-universe-size" class="ml-2 slider-indicator">35</span>
</div>
</div>
<div class="mb-4">
<label class="flex items-center">
<input id="cb-new-universe-random-seed" class="checkbox-input" type="checkbox" checked>
<span class="ml-2 font-bold text-gray-50">Random</span>
</label>
</div>
</div>
<div class="flex justify-end gap-2">
<button id="btn-create-universe" type="button" class="create-new-universe-btn">Create</button>
<button onclick="location.href='#'" type="button" class="cancel-btn">Cancel</button>
</div>
</div>
</div>
<div id="modal-predefined-universe" class="modal-container">
<div id="modal-overlay" class="modal-overlay"></div>
<div id="modal-predefined-universe-content" class="modal-predefined-universe-content">
<div class="flex justify-between mb-4">
<h3 class="smallheader-text mb-2">Select a predefined universe</h3>
<button onclick="location.href='#'">
<img src="/assets/img/close_icon.svg" class="small-icon white-icon hover-icon" alt="Close icon">
</button>
</div>
<div class="flex space-x-4 mb-4">
<button id="btn-glider" class="card-container">
<div class="p-4">
<h3 class="card-header">Glider</h3>
<p class="card-content">Moves across the universe</p>
</div>
</button>
<button id="btn-beehive" class="card-container">
<div class="p-4">
<h3 class="card-header">Beehive</h3>
<p class="card-content">It does nothing</p>
</div>
</button>
<button id="btn-blinker" class="card-container">
<div class="p-4">
<h3 class="card-header">Blinker</h3>
<p class="card-content">A small oscillator</p>
</div>
</div>
</button>
<div class="flex space-x-4 mb-4">
<button id="btn-toad" class="card-container">
<div class="p-4">
<h3 class="card-header">Toad</h3>
<p class="card-content">Another oscillator</p>
</div>
</button>
<button id="btn-beacon" class="card-container">
<div class="p-4">
<h3 class="card-header">Beacon</h3>
<p class="card-content">Yet another oscillator</p>
</div>
</button>
<button id="btn-two-gliders" class="card-container">
<div class="p-4">
<h3 class="card-header">Two Gliders</h3>
<p class="card-content">Two gliders that move into eachother</p>
</div>
</button>
</div>
<div class="flex space-x-4 mb-4">
<button id="btn-lightweight-spaceship" class="card-container">
<div class="p-4">
<h3 class="card-header">Lightweight Spaceship</h3>
<p class="card-content">Also moves across the universe</p>
</div>
</button>
<button id="btn-pulsar" class="card-container">
<div class="p-4">
<h3 class="card-header">Pulsar</h3>
<p class="card-content">A more advanced oscillator</p>
</div>
</button>
<button id="btn-gospers-glider-gun" class="card-container">
<div class="p-4">
<h3 class="card-header">Gosper's Glider Gun</h3>
<p class="card-content">A gun that produces gliders</p>
</div>
</button>
</div>
<div>
<p>
More interesting configurations and information can be found in the
<a class="text-link" href="https://conwaylife.com/wiki">LifeWiki</a>.
</p>
</div>
<div class="flex justify-end gap-2">
<button onclick="location.href='#'" type="button" class="cancel-btn">Cancel</button>
</div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>