diff --git a/index.html b/index.html index aeb4e40..b41d2f9 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,12 @@ -
- +
+ + + + +
\ No newline at end of file diff --git a/src/components/GameField.js b/src/components/GameField.js index 3706504..d295dcb 100644 --- a/src/components/GameField.js +++ b/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, diff --git a/src/components/GameFieldTable.js b/src/components/GameFieldTable.js new file mode 100644 index 0000000..f7b5f70 --- /dev/null +++ b/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) => ``; + +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, +}; diff --git a/src/index.js b/src/index.js index 8f21f88..207955c 100644 --- a/src/index.js +++ b/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 diff --git a/src/styles/gameField.css b/src/styles/gameField.css new file mode 100644 index 0000000..c3f29c5 --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/src/styles/reset.css b/src/styles/reset.css index fc9dace..62deea8 100644 --- a/src/styles/reset.css +++ b/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, diff --git a/src/styles/style.css b/src/styles/style.css index 02c915a..6cfb590 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -16,4 +16,8 @@ main, aside { justify-content: center; height: 100%; width: 100%; +} +main { + + overflow: scroll; } \ No newline at end of file diff --git a/src/test/GameField.test.js b/src/test/GameField.test.js index 5791d9b..0a994bd 100644 --- a/src/test/GameField.test.js +++ b/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],