clean styles; minor refactors
This commit is contained in:
parent
529428181c
commit
d5400b1a53
8 changed files with 23 additions and 41 deletions
|
@ -12,6 +12,7 @@
|
||||||
<!-- insert controls for animation -->
|
<!-- insert controls for animation -->
|
||||||
</aside>
|
</aside>
|
||||||
<main>
|
<main>
|
||||||
|
<p>Touch to toggle seed cells</p>
|
||||||
<canvas id="game-field" width="500" height="300"></canvas>
|
<canvas id="game-field" width="500" height="300"></canvas>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -34,7 +34,6 @@ const init = (gameField) => {
|
||||||
seed(weeks) {
|
seed(weeks) {
|
||||||
if (weeks.length) {
|
if (weeks.length) {
|
||||||
gameField = gameField.seed(weeks);
|
gameField = gameField.seed(weeks);
|
||||||
console.log(gameField);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
forward() {
|
forward() {
|
||||||
|
@ -45,9 +44,6 @@ const init = (gameField) => {
|
||||||
gameField = gameField.toggleCell(x, y);
|
gameField = gameField.toggleCell(x, y);
|
||||||
},
|
},
|
||||||
updateRate(rate) {
|
updateRate(rate) {
|
||||||
console.log("updating rate");
|
|
||||||
console.log(rate);
|
|
||||||
console.log(this.interval);
|
|
||||||
controls.rate = rate;
|
controls.rate = rate;
|
||||||
if (this.interval) {
|
if (this.interval) {
|
||||||
clearInterval(this.interval);
|
clearInterval(this.interval);
|
||||||
|
|
|
@ -15,10 +15,7 @@ const parseSeed = (seed) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const fieldView = (seed) => {
|
const fieldView = (seed) => {
|
||||||
// console.log(seed);
|
|
||||||
seed = parseSeed(seed);
|
seed = parseSeed(seed);
|
||||||
// // generateTable(true);
|
|
||||||
// console.log(seed);
|
|
||||||
const field = fieldStream(seed);
|
const field = fieldStream(seed);
|
||||||
const view = {
|
const view = {
|
||||||
draw(x, y) {
|
draw(x, y) {
|
||||||
|
@ -43,7 +40,6 @@ const fieldView = (seed) => {
|
||||||
return newField;
|
return newField;
|
||||||
},
|
},
|
||||||
seed(seed) {
|
seed(seed) {
|
||||||
console.log(seed);
|
|
||||||
return fieldView(seed);
|
return fieldView(seed);
|
||||||
},
|
},
|
||||||
advance() {
|
advance() {
|
||||||
|
@ -54,7 +50,6 @@ const fieldView = (seed) => {
|
||||||
const { scale, offset } = this.dimension;
|
const { scale, offset } = this.dimension;
|
||||||
x = Math.floor((x - offset) / scale);
|
x = Math.floor((x - offset) / scale);
|
||||||
y = Math.floor((y - offset) / scale);
|
y = Math.floor((y - offset) / scale);
|
||||||
console.log(x, y);
|
|
||||||
const fieldMap = Object.entries(this.field.map)
|
const fieldMap = Object.entries(this.field.map)
|
||||||
.map(([key, cell]) => [key, cell.living])
|
.map(([key, cell]) => [key, cell.living])
|
||||||
.reduce((map, [key, living]) => {
|
.reduce((map, [key, living]) => {
|
||||||
|
|
21
src/index.js
21
src/index.js
|
@ -1,28 +1,7 @@
|
||||||
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';
|
|
||||||
const { fieldView } = require("./components/GameFieldTable");
|
const { fieldView } = require("./components/GameFieldTable");
|
||||||
const { init } = require("./components/Controls");
|
const { init } = require("./components/Controls");
|
||||||
(() => console.log("hello world!"))();
|
(() => console.log("hello world!"))();
|
||||||
window.game = fieldView([]);
|
window.game = fieldView([]);
|
||||||
window.controls = init(game);
|
window.controls = init(game);
|
||||||
// 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 )
|
|
||||||
|
|
|
@ -1,15 +1,16 @@
|
||||||
aside {
|
aside {
|
||||||
background: red;
|
background: #944;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
position: float;
|
position: float;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
border-bottom: solid 1em #522;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside * {
|
aside * {
|
||||||
background: red;
|
background: inherit;
|
||||||
color: white;
|
color: #dff;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -22,7 +23,7 @@ div.playControls {
|
||||||
min-width: 30vw;
|
min-width: 30vw;
|
||||||
display: grid;
|
display: grid;
|
||||||
border-radius: 1vh;
|
border-radius: 1vh;
|
||||||
border: solid white .5vh;
|
border: solid .5vh;
|
||||||
grid-template-rows: 2fr 1fr;
|
grid-template-rows: 2fr 1fr;
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
gap: 1vh;
|
gap: 1vh;
|
||||||
|
@ -32,10 +33,19 @@ div.playControls {
|
||||||
|
|
||||||
button {
|
button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background: #ccc;
|
||||||
border-radius: .5vh;
|
border-radius: .5vh;
|
||||||
border: solid white .5vh;
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
background: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"] {
|
input[type="range"] {
|
||||||
grid-area: slider;
|
grid-area: slider;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin: 0.5em;
|
||||||
|
padding: 0.5em
|
||||||
|
}
|
|
@ -3,4 +3,5 @@ canvas {
|
||||||
color: white;
|
color: white;
|
||||||
border: 0.5vmin solid #aaa;
|
border: 0.5vmin solid #aaa;
|
||||||
fill: white;
|
fill: white;
|
||||||
|
margin: 0 3em 3em 3em;
|
||||||
}
|
}
|
|
@ -163,10 +163,6 @@ figure {
|
||||||
* Correct margin displayed oddly in IE 6/7.
|
* Correct margin displayed oddly in IE 6/7.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
form {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Define consistent border, margin, and padding.
|
* Define consistent border, margin, and padding.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -11,13 +12,16 @@ body {
|
||||||
|
|
||||||
main, aside {
|
main, aside {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: column nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
|
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main p {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
Loading…
Reference in a new issue