remove table el and refactor for canvas

This commit is contained in:
Sorrel Bri 2020-05-25 14:52:00 -07:00
parent 8b20fd35f6
commit fde2e26806
5 changed files with 30 additions and 119 deletions

File diff suppressed because one or more lines are too long

View file

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

View file

@ -1,68 +1,9 @@
const css = require("../styles/gameField.css"); const css = require("../styles/gameField.css");
const { fieldStream } = require("./GameField"); 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) => ({ const parseSeed = (seed) => ({
fieldArray: [ fieldArray: [
@ -77,47 +18,27 @@ const fieldView = (seed) => {
// generateTable(true); // generateTable(true);
const field = fieldStream(fieldArray); const field = fieldStream(fieldArray);
return { 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) { 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() { reset() {
return fieldView(seed); return fieldView(seed);
this.updateView(this.field);
}, },
advance() { advance() {
this.field = this.field.next.next; this.field = this.field.next.next;
console.log(this.field);
this.updateView(this.field); this.updateView(this.field);
}, },
play(rate) {
// loop with timeout based on rate
},
handleClick(e) { handleClick(e) {
// toggle single cell // toggle single cell
}, },

View file

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

View file

@ -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;
}