-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
216 lines (187 loc) · 8.89 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./assets/stylesheets/conway.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/67a41cd936.js"></script>
<script src='./lib/bundle.js'></script>
<link href="https://fonts.googleapis.com/css?family=Amiko|Sigmar+One" rel="stylesheet">
<title>Life</title>
</head>
<body>
<img class='background' src="./assets/images/geothermal.jpeg" alt="Primordial Soup">
<div class="project-container">
<div class="popover hidden-popover">
</div>
<div class='instructions hidden-instructions'>
<div class="top-content">
<div class="x-button">
x
</div>
<h1 class='instructions-heading'>Instructions</h1>
<div class="petri-dish">
<img src="assets/images/cartoon-germ-virus.jpg" alt="germ" class='cell-picture' id='cell1'>
</div>
<header class='instructions-description'>
<p>
Primordial soup is a simulation of cellular automata, a simple model
of interaction between cells.
</p>
<p>
The rules are simple.
</p>
</header>
<div class="rules-container">
<label class="instructions-label" for="rules">Rules</label>
<ol id="rules" class='rules-list'>
<li class='rules-item'>Live cells are represented by green squares,
while dead cells are represented by orange cells.</li>
<li class='rules-item'>A living cell with less than 2 neighbors dies from 'loneliness'</li>
<li class='rules-item'>A living cell with 4 or more neighbors will die from overpopulation</li>
<li class='rules-item'>A living cell with 2 or 3 neighbors will remain living.</li>
<li class='rules-item'>A 'dead' cell space with exactly 3 neighbors will become alive on the next turn</li>
<li class='rules-item'>In this version the board is infinitely wrapped to itself,
a cell that goes off the board on the right will reappear on the left
</li>
</ol>
</div>
<div class="nav-arrow-container left-arrow-nav-btn hideable-btn">
<img class="nav-arrow left-arrow"src="./assets/images/green-arrow-right.png" alt="left-arrow">
<div class="rules-text">
Rules
</div>
</div>
<div class="controls-container hideable-container">
<label class="instructions-label" for="controls">Controls</label>
<ul class='controls-list'>
<li class='controls-item'>
<i class="fa fa-play" aria-hidden="true"></i>
will resume the game from a paused state.
</li>
<li class='controls-item'>
<i class="fa fa-pause" aria-hidden="true"></i>
will stop the game from a moving state.
</li>
<li class='controls-item'>Reset will reset the board to the shape used at the beginning of the round</li>
<li class='controls-item'>The slider can be used to control the speed of the game. As the speed increases,
the interval between each game tick and cell live/die cycle becomes shorter.
</li>
<li class='controls-item'>
The size menu can be used to select a board size from a list of preconfigured board sizes.
It is recommended that players on lower-end hardware (such as mobile phones) should not go above a
5000 square board size.
</li>
<li class='controls-item'>
The shapes menu can be used to select from a list of preconfigured shapes.
If the current board size is too small for the selected shape, it will <strong>automatically
resize the board</strong> to an acceptable size. A shape may still be manually be drawn by selecting and deselecting
squares with the mouse, and a blank board has been provided through the 'Cleared' option.
</li>
</ul>
</div>
<div class="nav-arrow-container right-arrow-nav-btn">
<img class="nav-arrow"src="./assets/images/green-arrow-right.png" alt="right-arrow">
<div class="controls-text">
Controls
</div>
</div>
</div>
<footer class='lucky-message'>
Enjoy, and good luck! Make some fun shapes!
<div class="close-button">
Close
</div>
</footer>
</div>
<div class="popover-launcher">
Instructions
</div>
<div class='game-container'>
<h1 class='game-title'>Primordial Soup</h1>
<div id="canvasLife"></div>
<div class="control-btns">
<div class="effect-btns">
<div class="movement-btns">
<div class="start-btn cell-status-btn">
<i class="fa fa-play" aria-hidden="true"></i>
</div>
<div class="pause-btn cell-status-btn">
<i class="fa fa-pause" aria-hidden="true"></i>
</div>
<div class="clear-btn cell-status-btn">
Reset
</div>
</div>
<div class="board-config">
<table class='config-table'>
<tr>
<td class='config-table-data'>
<label class="shapes-label" for="shapes-menu">Shapes</label>
</td>
<td class='config-table-data'>
<div class="shapes-menu">
<select id='shapes-menu' class="menu-btn">
<option value="cleared">Cleared</option>
<option value="tetromino">Tetromino</option>
<option value="glider">Glider</option>
<option value="gosper-glider">Gosper Glider</option>
<option value="sunshine" selected>Sunshine</option>
<option value="supernova">Supernova</option>
</select>
</div>
</td>
</tr>
<tr>
<td class='config-table-data'>
<label class="sizes-label" for="size-menu">Board Sizes</label>
</td>
<td class='config-table-data'>
<div class="sizes-menu">
<select id='size-menu' class="board-size" name="board-size">
<option value="100">100</option>
<option value="300">300</option>
<option value="1000" selected>1000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="5000">10000</option>
<option value="5000">20000</option>
</select>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="slider-container">
<label class="speed-slider-title" for="speed-slider">Speed</label>
<div class="range-inputs">
<input type="text" class="speed-slider-value" value="" disabled>
<input class="speed-slider" type="range" min="1" max="10" value="1">
</div>
<div class="speed-labels">
<span class="lowest-speed">1</span>
<span class="highest-speed">10</span>
</div>
</div>
</div>
</div>
<div class="credits">
<h2 class='author-heading'>Built by <strong>Michael Chilton</strong></h2>
<div class="credits-info">
<ul class="links-list">
<li class="github-link credit-link">
<i class="fa fa-github-square credit-icon" aria-hidden="true"></i><a href="https://github.com/mc962/conways">GitHub</a>
</li>
<li class="linkedin-link">
<i class="fa fa-linkedin-square credit-icon" aria-hidden="true"></i><a href="https://www.linkedin.com/in/michaelchilton1/">LinkedIn</a>
</li>
<li class="portfolio-link credit-link">
<i class="fa fa-folder credit-icon" aria-hidden="true"></i><a href="https://mc962.github.io/">Portfolio</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>