remove table el and refactor for canvas
This commit is contained in:
parent
8b20fd35f6
commit
fde2e26806
5 changed files with 30 additions and 119 deletions
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -1,68 +1,9 @@
|
|||
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 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 canvasEl = document.getElementById("game-field");
|
||||
const canvas2D = canvasEl.getContext("2d");
|
||||
canvas2D.fillStyle = "white";
|
||||
|
||||
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 },
|
||||
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;
|
||||
}, {}),
|
||||
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 };
|
||||
draw(x, y) {
|
||||
const { scale, offset } = this.dimension;
|
||||
canvas2D.fillRect(x * scale + offset, y * scale + offset, scale, scale);
|
||||
},
|
||||
dimension: { x0: 0, y0: 0, x1: 500, y1: 300, scale: 6, offset: 100 },
|
||||
field,
|
||||
updateView(field) {
|
||||
// if !view[key] expandView()
|
||||
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;
|
||||
});
|
||||
canvas2D.clearRect(0, 0, this.dimension.x1, this.dimension.y1);
|
||||
Object.entries(field.map)
|
||||
.filter(([key, cell]) => cell.living)
|
||||
.map(([key]) => key.split(","))
|
||||
.forEach(([x, y]) => this.draw(x, y));
|
||||
},
|
||||
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
|
||||
},
|
||||
|
|
|
@ -7,7 +7,8 @@
|
|||
id="rate"
|
||||
onchange="controls.updateRoute"
|
||||
min="1"
|
||||
max="30"
|
||||
max="20"
|
||||
value="10"
|
||||
/>
|
||||
</div>
|
||||
<form action="/">
|
||||
|
|
|
@ -1,18 +1,6 @@
|
|||
tr{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
canvas {
|
||||
background: #222;
|
||||
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;
|
||||
}
|
Loading…
Reference in a new issue