clickable labels, colors, precision, purer func

index.html

@@ -12,36 +12,44 @@
             <label>Rules</label>
           </div>
           <div class="form-field">
-            <label>111</label>
+            <label>111
-            <input type="checkbox" name="111">
+              <input type="checkbox" name="111" checked>
+            </label>
           </div>
           <div class="form-field">
-            <label>110</label>
+            <label>110
               <input type="checkbox" name="110">
+            </label>
           </div>
           <div class="form-field">
-            <label>101</label>
+            <label>101
-            <input type="checkbox" name="101">
+              <input type="checkbox" name="101" checked>
+            </label>
           </div>
           <div class="form-field">
-            <label>100</label>
+            <label>100
               <input type="checkbox" name="100">
+            </label>
           </div>
           <div class="form-field">
-            <label>011</label>
+            <label>011
-            <input type="checkbox" name="011">
+              <input type="checkbox" name="011" checked>
+            </label>
           </div>
           <div class="form-field">
-            <label>010</label>
+            <label>010
               <input type="checkbox" name="010">
+            </label>
           </div>
           <div class="form-field">
-            <label>001</label>
+            <label>001
               <input type="checkbox" name="001">
+            </label>
           </div>
           <div class="form-field">
-            <label>000</label>
+            <label>000
-            <input type="checkbox" name="000">
+              <input type="checkbox" name="000" checked>
+            </label>
           </div>
           <div class="form-field">
             <input type="button" name="start" id="start" value="start"/>
@@ -54,13 +62,17 @@
       <div class="menu-row">
         <form method="">
           <div class="form-field">
-            <label>Living cell color</label>
+            <label for="live">Living cell color</label>
             <input name="live" type="color" id="live" value="#000000"/>
           </div>
           <div class="form-field">
-            <label>Dead cell color</label>
+            <label for="dead">Dead cell color</label>
             <input name="dead" type="color" id="dead" value="#99FF00"/>
           </div>
+          <div class="form-field">
+            <label>Cell size</label>
+            <input name="cellSize" type="number" id="cellSize" value="5"/>
+          </div>
         </form>
       </div>
     </sidebar>

main.js

@@ -1,25 +1,19 @@
 let drawing = 1;
 
 const form = Array.from(document.forms.rules.elements);
-const canvas = document.getElementById('canvas');
+const canvas = document.querySelector('#canvas');
-const main = document.getElementById('main');
+const ctx = canvas.getContext('2d');
+const main = document.querySelector('#main');
+const dead = document.querySelector('#dead');
+const live = document.querySelector('#live');
+const startBtn = document.querySelector('#start');
+const resetBtn = document.querySelector('#reset');
+const cellSize = document.querySelector('#cellSize');
+
 canvas.width = main.offsetWidth;
 canvas.height = main.offsetHeight;
 
-const dead = document.getElementById('dead');
+// TODO: Hide iterator inside
-const live = document.getElementById('live');
-
-function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  // The maximum is exclusive and the minimum is inclusive
-  return Math.floor(Math.random() * (max - min) + min);
-}
-
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 function evolve(state, acc, rules) {
   const [x, y, z, ...xs] = state;
   if (!xs.length) {
@@ -31,56 +25,89 @@ function evolve(state, acc, rules) {
   return evolve(y + z + xs.join(''), newAcc, rules);
 }
 
-function draw(state, context, acc) {
+function getRules() {
-  const cellDim = 5;
+  const rules = {};
 
-  Object.keys(state).forEach(
+  form.reduce((_, i) => {
+    if (i !== undefined
+          && i.type === 'checkbox') {
+      if (i.checked) rules[i.name] = '1';
+      else rules[i.name] = '0';
+    }
+    return rules;
+  }, rules);
+
+  return rules;
+}
+
+function getDrawingValues(state, acc) {
+  const cellDim = cellSize.value;
+
+  return Object.keys(state).map(
     (key) => {
-      context.moveTo(key * cellDim, acc * cellDim);
+      const fillStyle = state[key] === '1' ? live.value : dead.value;
-      context.fillRect(key * cellDim, acc * cellDim, cellDim, cellDim);
+      return {
-      if (state[key] === '1') context.fillStyle = live.value;
+        move: [key * cellDim, acc * cellDim],
-      else context.fillStyle = dead.value;
+        fill: [key * cellDim, acc * cellDim, cellDim, cellDim],
+        fillStyle,
+      };
     },
   );
 }
 
-const start = document.getElementById('start');
+function getRandomInt(min, max) {
-
+  const minVal = Math.ceil(min);
-start.addEventListener('click', async () => {
+  const maxVal = Math.floor(max);
-  drawing = 1;
+  // The maximum is exclusive and the minimum is inclusive
-  const rules = form.reduce((a, i) => {
+  return Math.floor(Math.random() * (maxVal - minVal) + minVal);
-    if (i !== undefined
-          && i.type === 'checkbox') {
-      if (i.checked) a[i.name] = '1';
-      else a[i.name] = '0';
 }
-    return a;
-  }, {});
 
-  const ctx = canvas.getContext('2d');
+async function sleep(ms) {
+  await new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function draw(state, acc) {
+  if (drawing === 0) {
+    return;
+  }
+
+  const rules = getRules();
+  const newState = evolve(state, '', rules);
+  const line = getDrawingValues(newState, acc);
+
+  line.map((cell) => {
+    ctx.moveTo(...cell.move);
+    ctx.fillRect(...cell.fill);
+    ctx.fillStyle = cell.fillStyle;
+    return cell;
+  });
+
+  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);
+}
+
+function reset() {
+  drawing = 0;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+startBtn.addEventListener('click', async () => {
+  reset();
+
+  await sleep(60);
+
+  drawing = 1;
 
   const initialState = [...Array(canvas.width)].map(
-    (_) => getRandomInt(0, 2).toString(),
+    () => getRandomInt(0, 2).toString(),
   ).join('');
 
-  let newState = evolve(initialState, '', rules);
+  draw(initialState, 1);
-  let acc = 0;
-
-  while (acc < canvas.width) {
-    if (drawing === 0) {
-      break;
-    }
-    draw(newState, ctx, acc);
-    newState = evolve(newState, '', rules);
-    acc += 1;
-    await sleep(60);
-  }
 });
 
-const reset = document.getElementById('reset');
+resetBtn.addEventListener('click', async () => {
-
+  reset();
-reset.addEventListener('click', async () => {
-  drawing = 0;
-  const ctx = canvas.getContext('2d');
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
 });