diff --git a/index.html b/index.html index 7844448..f7e35bc 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,7 @@
- - - - -
+
\ No newline at end of file diff --git a/src/components/Controls.js b/src/components/Controls.js index 59ace3e..aa02240 100644 --- a/src/components/Controls.js +++ b/src/components/Controls.js @@ -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; }; diff --git a/src/components/GameFieldTable.js b/src/components/GameFieldTable.js index d9c4ec0..cf59002 100644 --- a/src/components/GameFieldTable.js +++ b/src/components/GameFieldTable.js @@ -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) => ``; - -// 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 }, diff --git a/src/components/controls.html b/src/components/controls.html index 371dc38..99ac0b8 100644 --- a/src/components/controls.html +++ b/src/components/controls.html @@ -7,7 +7,8 @@ id="rate" onchange="controls.updateRoute" min="1" - max="30" + max="20" + value="10" />
diff --git a/src/styles/gameField.css b/src/styles/gameField.css index c3f29c5..5ee183e 100644 --- a/src/styles/gameField.css +++ b/src/styles/gameField.css @@ -1,18 +1,6 @@ -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 +canvas { + background: #222; + color: white; + border: 0.5vmin solid #aaa; + fill: white; +} \ No newline at end of file