optional looping option

This commit is contained in:
Ali Gator 2021-12-31 10:31:52 +01:00
parent 5558b867d5
commit e62fafb55d
2 changed files with 15 additions and 3 deletions

View File

@ -73,6 +73,11 @@
<label>Cell size</label>
<input name="cellSize" type="number" id="cellSize" value="5"/>
</div>
<div class="form-field">
<label>Loop
<input name="loop" type="checkbox" id="loop"/>
</label>
</div>
</form>
</div>
</sidebar>

13
main.js
View File

@ -9,6 +9,7 @@ const live = document.querySelector('#live');
const startBtn = document.querySelector('#start');
const resetBtn = document.querySelector('#reset');
const cellSize = document.querySelector('#cellSize');
const loop = document.querySelector('#loop');
canvas.width = main.offsetWidth;
canvas.height = main.offsetHeight;
@ -71,6 +72,9 @@ async function draw(state, acc) {
return;
}
const position = acc * cellSize.value;
if (position >= canvas.height && !loop.checked) return;
const rules = getRules();
const newState = evolve(state, '', rules);
const line = getDrawingValues(newState, acc);
@ -84,9 +88,12 @@ async function draw(state, acc) {
await sleep(40);
// TODO: makes it redraw on top of canvas once bottom is reached
const newAcc = acc < canvas.height ? acc + 1 : 1;
await draw(newState, newAcc);
const newAcc = () => {
if (position >= canvas.height && loop.checked) return 1;
return acc;
};
await draw(newState, newAcc() + 1);
}
function reset() {