stub Cell component; add css loader

This commit is contained in:
Sorrel Bri 2020-05-23 22:12:39 -07:00
parent e123ae201d
commit 057a0fdd09
10 changed files with 4304 additions and 15 deletions

3
.babelrc Normal file
View file

@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env"]
}

1
dist/app.bundle.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/index.html vendored Normal file
View file

@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Game of Life</title></head><body><h1>Game of Life</h1><aside id="controls"></aside><main id="game-field"></main><script src="app.bundle.js"></script></body></html>

4230
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -4,8 +4,8 @@
"description": "",
"private": true,
"scripts": {
"build": "webpack --mode=production",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=production --config webpack.prod.js",
"test": "jest",
"start": "webpack-dev-server --open --config webpack.dev.js"
},
"author": "",
@ -13,15 +13,26 @@
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"babel-jest": "^26.0.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.5.3",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"jest": "^26.0.1",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"jest": {
"transform": {
".*": "<rootDir>/node_modules/babel-jest"
},
"testDirectoryName": "src/test",
"moduleFileExtensions": [
"js"
]
}
}

10
src/components/Cell.js Normal file
View file

@ -0,0 +1,10 @@
class Cell {
constructor() {
this.living = false;
}
toggleLiving() {
this.living = !this.living;
}
}
module.exports = Cell;

View file

@ -1,2 +1,23 @@
require("./styles/reset.css");
(() => console.log("hello world!"))();
import css from "./styles/reset.css";
require("./components/Cell")(() => console.log("hello world!"))();
// controls
// -- state=idle ?
// ---- rewind runs through gameHistory to current state - 1 step
// ---- forward adds 1 step to game
// ---- play sets state to playing, each cell runs through logic below with timeout = speed
// ---- speed sets timeout
// ---- reset restores initial gameState
// ------ form
// -------- type to load handles
// ---------- dynamic autofill after x characters (select els)
// -------- "seed" to submit handle and request contribCalender
// game-board
// -- sections of board
// ---- cells
// ------ state=idle ? onClick=changeCell : onClick=()=>{}
// ------ state=playing && cell=live ? dispatchToNeighbors(liveNeighbors++)
// -------- when playing all live cells dispatch, then all cells determine life
// -- load sections of board
// ---- onDispatch from neighboring section load square around all sections (eg 1x1 dispatch loads frame of sections around 1x1 to form new 3x3 )

View file

@ -24,11 +24,6 @@ time, mark, audio, video {
vertical-align: baseline;
}
/* make sure to set some focus styles for accessibility */
:focus {
outline: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {

26
src/test/Cell.test.js Normal file
View file

@ -0,0 +1,26 @@
const Cell = require("../components/Cell");
describe("Cell functionality", () => {
test("dispatch toggleLiving state should mark living cell dead", () => {
const cell = new Cell();
cell.toggleLiving();
expect(cell.living).toEqual(true);
});
test.todo("dispatch toggleLiving state should mark dead cell living");
test.todo(
"dispatch add Live Neighbor should increment live neighbors property"
);
test.todo(
"dispatch setLiving should determine life based on neighbors (for living cells)"
);
const livingFromLivingStates = new Array(8).map((_, i) =>
i === 2 || i === 3 ? true : false
);
test.todo(
"dispatch setLiving should determine life based on neighbors (for dead cells)"
);
const livingFromDeadStates = new Array(8).map((_, i) =>
i === 3 ? true : false
);
test.todo("dispatch setLiving should reset live neighbors");
});

View file

@ -25,9 +25,6 @@ module.exports = {
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{