structure game View

This commit is contained in:
Sorrel Bri 2020-05-24 21:32:29 -07:00
parent e3cc5ae984
commit f7dfdcd204
8 changed files with 96 additions and 8 deletions

File diff suppressed because one or more lines are too long

View file

@ -16,8 +16,6 @@ class GameField {
([key, [live, neighbors]]) => ([key, [live, neighbors]]) =>
(this.map[key] = cellStream(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) { addLiveNeighbor(key) {
if (this.map[key] === undefined) { if (this.map[key] === undefined) {
this.map[key] = new cellStream(false); this.map[key] = cellStream(false);
} }
this.map[key].addLiveNeighbor(); this.map[key].addLiveNeighbor();
} }
@ -75,13 +73,11 @@ const fieldStream = ({ fieldArray, fieldMap }) => {
}; };
// wrapper for fieldStream // wrapper for fieldStream
// -- .next => calls .next.next on fieldStream to advance one generation
// -- .reset => instantiates new fieldStream // -- .reset => instantiates new fieldStream
// -- .toggle(cell) => manually toggles cell state // -- .toggle(cell) => manually toggles cell state
// instantiate table (orientation of major and minor axis dependent on viewport) // instantiate table (orientation of major and minor axis dependent on viewport)
// const gameFields = new Array(1).fill(new GameField({})); // const gameFields = new Array(1).fill(new GameField({}));
// const container = document.getElementById("game-field");
module.exports = { module.exports = {
GameField, GameField,

View file

@ -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) => `<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 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,
};

View file

@ -1,8 +1,9 @@
import reset from "./styles/reset.css"; import reset from "./styles/reset.css";
import css from "./styles/style.css"; import css from "./styles/style.css";
// import Controls from './components/Controls'; // import Controls from './components/Controls';
const { GameField } = require("./components/GameField"); const { fieldView } = require("./components/GameFieldTable");
(() => console.log("hello world!"))(); (() => console.log("hello world!"))();
window.game = fieldView();
// controls // controls
// -- state=idle ? // -- state=idle ?
// ---- rewind runs through gameHistory to current state - 1 step // ---- rewind runs through gameHistory to current state - 1 step

18
src/styles/gameField.css Normal file
View file

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

View file

@ -3,6 +3,10 @@
License: none (public domain) License: none (public domain)
*/ */
* {
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,

View file

@ -16,4 +16,8 @@ main, aside {
justify-content: center; justify-content: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
}
main {
overflow: scroll;
} }

View file

@ -257,6 +257,7 @@ describe("fieldStream.next tests oscillators, spaceships", () => {
expect(streamBlinker.next.next.map[key].living).toEqual(live); expect(streamBlinker.next.next.map[key].living).toEqual(live);
}); });
}); });
[ [
["0,0", false], ["0,0", false],
["0,1", true], ["0,1", true],