optional looping option

index.html

@@ -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>

main.js

@@ -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() {