remove table el and refactor for canvas

src/components/Controls.js

@@ -26,7 +26,7 @@ const init = (gameField) => {
     forward() {
       gameField.advance();
     },
-    rate: 50,
+    rate: 10,
     updateRate(rate) {
       console.log("updating rate");
       console.log(rate);
@@ -48,7 +48,12 @@ const init = (gameField) => {
   });
   playEl.addEventListener("click", (e) => {
     e.preventDefault();
-    controls.interval ? controls.pause() : controls.play();
+    if (controls.interval) {
+      controls.pause();
+      return (forwardEl.disabled = false);
+    }
+    controls.play();
+    forwardEl.disabled = true;
   });
   return controls;
 };

src/components/GameFieldTable.js

@@ -1,68 +1,9 @@
 const css = require("../styles/gameField.css");
 const { fieldStream } = require("./GameField");
 
-const tableEl = document.getElementById("game-field");
+const canvasEl = document.getElementById("game-field");
-// const majorAxis = 55;
+const canvas2D = canvasEl.getContext("2d");
-// const minorAxis = 7;
+canvas2D.fillStyle = "white";
-
-const constructTd = (key, alive) => `<td id=${key} data-alive=${alive}></td>`;
-
-// const generateTable = (horizontal = false) => {
-//   new Array(minorAxis).fill("").forEach((_, x) => {
-//     const rowEl = document.createElement("tr");
-//     new Array(majorAxis)
-//       .fill("")
-//       .forEach((_, y) => (rowEl.innerHTML += constructTd(`${x},${y}`, false)));
-//     tableEl.appendChild(rowEl);
-//   });
-// };
-
-const addRowsToTable = ({ x0, x1, y0, y1 }) => {
-  console.log({ x0, x1, y0, y1 });
-  // range from x0 to x1 generating new tr els
-  const firstRow = document.getElementById(`${x1 + 1},y`);
-  let x = x0;
-  while (x <= x1) {
-    let y = y0;
-    const rowEl = document.createElement("tr");
-    rowEl.id = `${x},y`;
-    while (y <= y1) {
-      rowEl.innerHTML += constructTd(`${x},${y}`, false);
-      y++;
-    }
-    console.log(firstRow);
-    if (x0 < 0) {
-      tableEl.insertBefore(rowEl, firstRow);
-    } else {
-      tableEl.appendChild(rowEl);
-    }
-    x++;
-  }
-  // forEach row range from y0 to y1 generating new td els
-};
-
-const addToRows = ({ x0, x1, y0, y1 }) => {
-  let x = x0;
-  while (x <= x1) {
-    let y = y0;
-    const rowEl = document.getElementById(`${x},y`);
-    let newHTML = "";
-    while (y <= y1) {
-      newHTML += constructTd(`${x},${y}`, false);
-      y++;
-    }
-    if (y0 < 0) {
-      rowEl.innerHTML = newHTML += rowEl.innerHTML;
-    } else {
-      rowEl.innerHTML += newHTML;
-    }
-    // console.log(firstRow);
-    // if (x0 < 0) tableEl.insertBefore(rowEl, firstRow);
-    x++;
-  }
-  // range form x0 to x1 selecting tr els
-  // forEach row range from y0 to y1 generating new td els
-};
 
 const parseSeed = (seed) => ({
   fieldArray: [
@@ -77,47 +18,27 @@ const fieldView = (seed) => {
   // generateTable(true);
   const field = fieldStream(fieldArray);
   return {
-    dimension: { x0: 0, x1: 6, y0: 0, y1: 55 },
+    draw(x, y) {
-    field,
+      const { scale, offset } = this.dimension;
-    view: Object.entries(field.map)
+      canvas2D.fillRect(x * scale + offset, y * scale + offset, scale, scale);
-      .map(([key, cell]) => [key, document.getElementById(key), cell.living])
-      .reduce((obj, [key, el, living]) => {
-        obj[key] = el;
-        el.dataset.alive = living;
-        return obj;
-      }, {}),
-    expandView() {
-      const { x0, x1, y0, y1 } = this.dimension;
-      addRowsToTable({ x0: x0 - 7, x1: x0 - 1, y0: y0 - 25, y1: y1 + 25 });
-      addRowsToTable({ x0: x1 + 1, x1: x1 + 6, y0: y0 - 25, y1: y1 + 25 });
-      addToRows({ x0, x1, y0: y0 - 25, y1: y0 - 1 });
-      addToRows({ x0, x1, y0: y1, y1: y1 + 25 });
-      this.dimension = { x0: x0 - 7, x1: x1 + 6, y0: y0 - 25, y1: y1 + 25 };
     },
+    dimension: { x0: 0, y0: 0, x1: 500, y1: 300, scale: 6, offset: 100 },
+    field,
     updateView(field) {
-      // if !view[key] expandView()
+      canvas2D.clearRect(0, 0, this.dimension.x1, this.dimension.y1);
-      Object.entries(field.map).forEach(([key, cell]) => {
+      Object.entries(field.map)
-        // for all cells update `#${key}` with data-alive=`${living}`
+        .filter(([key, cell]) => cell.living)
-        let el = document.getElementById(key);
+        .map(([key]) => key.split(","))
-        if (!el) {
+        .forEach(([x, y]) => this.draw(x, y));
-          this.expandView();
-          el = document.getElementById(key);
-        }
-        this.view[key] = el;
-        this.view[key].dataset.alive = cell.living;
-      });
     },
     reset() {
       return fieldView(seed);
+      this.updateView(this.field);
     },
     advance() {
       this.field = this.field.next.next;
-      console.log(this.field);
       this.updateView(this.field);
     },
-    play(rate) {
-      // loop with timeout based on rate
-    },
     handleClick(e) {
       // toggle single cell
     },

src/components/controls.html

@@ -7,7 +7,8 @@
     id="rate"
     onchange="controls.updateRoute"
     min="1"
-    max="30"
+    max="20"
+    value="10"
   />
 </div>
 <form action="/">

src/styles/gameField.css

@@ -1,18 +1,6 @@
-tr{
+canvas {
-  height: 100%;
+  background: #222;
-  width: 100%;
+  color: white;
+  border: 0.5vmin solid #aaa;
+  fill: white;
 }
-
-td {
-  height: 1vmin;
-  width: 1vmin;
-  border: 0.3vmin solid #444;
-}
-
-td[data-alive="true"] {
-  background: #bdb;
-}
-
-td[data-alive="false"] {
-  background: #111;
-  }