gator/explorata
gator/explorata
1
0
Fork 0
Code Pull Requests Projects Releases 1 Activity

stop button, loop skipped a frame

Browse Source
This commit is contained in:
Ali Gator 2021-12-31 11:10:32 +01:00
parent e62fafb55d
commit 0b1073b66e
3 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -54,13 +54,16 @@
<div class="form-field"> <div class="form-field">
<input type="button" name="start" id="start" value="start"/> <input type="button" name="start" id="start" value="start"/>
</div> </div>
<div class="form-field">
<input type="button" name="stop" id="stop" value="stop"/>
</div>
<div class="form-field"> <div class="form-field">
<input type="button" name="reset" id="reset" value="reset"/> <input type="button" name="reset" id="reset" value="reset"/>
</div> </div>
</form> </form>
</div> </div>
<div class="menu-row"> <div class="menu-row">
<form method=""> <form>
<div class="form-field"> <div class="form-field">
<label for="live">Living cell color</label> <label for="live">Living cell color</label>
<input name="live" type="color" id="live" value="#000000"/> <input name="live" type="color" id="live" value="#000000"/>

11
main.js
View File

@ -8,11 +8,12 @@ const dead = document.querySelector('#dead');
const live = document.querySelector('#live'); const live = document.querySelector('#live');
const startBtn = document.querySelector('#start'); const startBtn = document.querySelector('#start');
const resetBtn = document.querySelector('#reset'); const resetBtn = document.querySelector('#reset');
const stopBtn = document.querySelector('#stop');
const cellSize = document.querySelector('#cellSize'); const cellSize = document.querySelector('#cellSize');
const loop = document.querySelector('#loop'); const loop = document.querySelector('#loop');
canvas.width = main.offsetWidth; canvas.width = main.offsetWidth * 0.9;
canvas.height = main.offsetHeight; canvas.height = main.offsetHeight * 0.9;
// TODO: Hide iterator inside // TODO: Hide iterator inside
function evolve(state, acc, rules) { function evolve(state, acc, rules) {
@ -89,7 +90,7 @@ async function draw(state, acc) {
await sleep(40); await sleep(40);
const newAcc = () => { const newAcc = () => {
if (position >= canvas.height && loop.checked) return 1; if (position >= canvas.height && loop.checked) return 0;
return acc; return acc;
}; };
@ -118,3 +119,7 @@ startBtn.addEventListener('click', async () => {
resetBtn.addEventListener('click', async () => { resetBtn.addEventListener('click', async () => {
reset(); reset();
}); });
stopBtn.addEventListener('click', async () => {
drawing = 0;
});

11
style.css
View File

@ -10,6 +10,11 @@ body {
font-family: Courier New; font-family: Courier New;
} }
canvas {
background: #110812;
margin: 20px 0 0 0;
}
h1 { h1 {
font-size: large; font-size: large;
font-weight: bold; font-weight: bold;
@ -20,6 +25,12 @@ sidebar {
padding: 10px; padding: 10px;
} }
input[type="button"] {
min-width: 60px;
padding: 5px;
font-weight: bold;
}
.form-field { .form-field {
display: flex; display: flex;
margin: 10px; margin: 10px;