updates View with each generation; View expands as needed

This commit is contained in:
Sorrel Bri 2020-05-24 23:08:48 -07:00
parent f7dfdcd204
commit c3a5ef388f
2 changed files with 82 additions and 15 deletions

File diff suppressed because one or more lines are too long

View file

@ -2,19 +2,66 @@ const css = require("../styles/gameField.css");
const { fieldStream } = require("./GameField"); const { fieldStream } = require("./GameField");
const tableEl = document.getElementById("game-field"); const tableEl = document.getElementById("game-field");
const majorAxis = 55; // const majorAxis = 55;
const minorAxis = 7; // const minorAxis = 7;
const constructTd = (key, alive) => `<td id=${key} data-alive=${alive}></td>`; const constructTd = (key, alive) => `<td id=${key} data-alive=${alive}></td>`;
const generateTable = (horizontal = false) => { // const generateTable = (horizontal = false) => {
new Array(minorAxis).fill("").forEach((_, x) => { // 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"); const rowEl = document.createElement("tr");
new Array(majorAxis) rowEl.id = `${x},y`;
.fill("") while (y <= y1) {
.forEach((_, y) => (rowEl.innerHTML += constructTd(`${x},${y}`, false))); rowEl.innerHTML += constructTd(`${x},${y}`, false);
tableEl.appendChild(rowEl); 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) => ({ const parseSeed = (seed) => ({
@ -24,11 +71,13 @@ const parseSeed = (seed) => ({
[1, 1, 1], [1, 1, 1],
], ],
}); });
const fieldView = (seed) => { const fieldView = (seed) => {
fieldArray = parseSeed(seed); fieldArray = parseSeed(seed);
generateTable(true); // generateTable(true);
const field = fieldStream(fieldArray); const field = fieldStream(fieldArray);
return { return {
dimension: { x0: 0, x1: 6, y0: 0, y1: 55 },
field, field,
view: Object.entries(field.map) view: Object.entries(field.map)
.map(([key, cell]) => [key, document.getElementById(key), cell.living]) .map(([key, cell]) => [key, document.getElementById(key), cell.living])
@ -37,14 +86,32 @@ const fieldView = (seed) => {
el.dataset.alive = living; el.dataset.alive = living;
return obj; return obj;
}, {}), }, {}),
updateView() { 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 };
},
updateView(field) {
// if !view[key] expandView() // if !view[key] expandView()
// for all cells update `#${key}` with data-alive=`${living}` Object.entries(field.map).forEach(([key, cell]) => {
// for all cells update `#${key}` with data-alive=`${living}`
let el = document.getElementById(key);
if (!el) {
this.expandView();
el = document.getElementById(key);
}
this.view[key] = el;
this.view[key].dataset.alive = cell.living;
});
}, },
reset() {}, reset() {},
advance() { advance() {
// this.field.next.next; this.field = this.field.next.next;
// this.updateView(); console.log(this.field);
this.updateView(this.field);
}, },
play(rate) { play(rate) {
// loop with timeout based on rate // loop with timeout based on rate