structure game View

src/components/GameField.js

@@ -16,8 +16,6 @@ class GameField {
       ([key, [live, neighbors]]) =>
         (this.map[key] = cellStream(live, neighbors))
     );
-    // instead of implementing multiple GameFields, clear irrelevant keys and expand Game Field as needed
-    // discrete Field expansion should only happen in View (to keep view fields centered)
   }
 }
 
@@ -30,7 +28,7 @@ class FieldStream extends Stream {
   }
   addLiveNeighbor(key) {
     if (this.map[key] === undefined) {
-      this.map[key] = new cellStream(false);
+      this.map[key] = cellStream(false);
     }
     this.map[key].addLiveNeighbor();
   }
@@ -75,13 +73,11 @@ const fieldStream = ({ fieldArray, fieldMap }) => {
 };
 
 // wrapper for fieldStream
-// -- .next => calls .next.next on fieldStream to advance one generation
 // -- .reset => instantiates new fieldStream
 // -- .toggle(cell) => manually toggles cell state
 
 // instantiate table (orientation of major and minor axis dependent on viewport)
 // const gameFields = new Array(1).fill(new GameField({}));
-// const container = document.getElementById("game-field");
 
 module.exports = {
   GameField,

src/components/GameFieldTable.js

@@ -0,0 +1,60 @@
+const css = require("../styles/gameField.css");
+const { fieldStream } = require("./GameField");
+
+const tableEl = document.getElementById("game-field");
+const majorAxis = 55;
+const minorAxis = 7;
+
+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 parseSeed = (seed) => ({
+  fieldArray: [
+    [0, 1, 0],
+    [0, 0, 1],
+    [1, 1, 1],
+  ],
+});
+const fieldView = (seed) => {
+  fieldArray = parseSeed(seed);
+  generateTable(true);
+  const field = fieldStream(fieldArray);
+  return {
+    field,
+    view: Object.entries(field.map)
+      .map(([key, cell]) => [key, document.getElementById(key), cell.living])
+      .reduce((obj, [key, el, living]) => {
+        obj[key] = el;
+        el.dataset.alive = living;
+        return obj;
+      }, {}),
+    updateView() {
+      // if !view[key] expandView()
+      // for all cells update `#${key}` with data-alive=`${living}`
+    },
+    reset() {},
+    advance() {
+      // this.field.next.next;
+      // this.updateView();
+    },
+    play(rate) {
+      // loop with timeout based on rate
+    },
+    handleClick(e) {
+      // toggle single cell
+    },
+  };
+};
+
+module.exports = {
+  fieldView,
+};

src/index.js

@@ -1,8 +1,9 @@
 import reset from "./styles/reset.css";
 import css from "./styles/style.css";
 // import Controls from './components/Controls';
-const { GameField } = require("./components/GameField");
+const { fieldView } = require("./components/GameFieldTable");
 (() => console.log("hello world!"))();
+window.game = fieldView();
 // controls
 // -- state=idle ?
 // ---- rewind runs through gameHistory to current state - 1 step

src/styles/gameField.css

@@ -0,0 +1,18 @@
+tr{
+  height: 100%;
+  width: 100%;
+}
+
+td {
+  height: 1vmin;
+  width: 1vmin;
+  border: 0.3vmin solid #444;
+}
+
+td[data-alive="true"] {
+  background: #bdb;
+}
+
+td[data-alive="false"] {
+  background: #111;
+  }

src/styles/reset.css

@@ -3,6 +3,10 @@
    License: none (public domain)
 */
 
+* {
+  box-sizing: border-box;
+}
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,

src/styles/style.css

@@ -16,4 +16,8 @@ main, aside {
   justify-content: center;
   height: 100%;
   width: 100%;
+}
+main {
+
+  overflow: scroll;
 }

src/test/GameField.test.js

@@ -257,6 +257,7 @@ describe("fieldStream.next tests oscillators, spaceships", () => {
       expect(streamBlinker.next.next.map[key].living).toEqual(live);
     });
   });
+
   [
     ["0,0", false],
     ["0,1", true],