clean styles; minor refactors

This commit is contained in:
sorrelbri 2020-05-26 00:45:24 -07:00
parent 529428181c
commit d5400b1a53
8 changed files with 23 additions and 41 deletions

View file

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

View file

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

View file

@ -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]) => {

View file

@ -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 )

View file

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

View file

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

View file

@ -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.
*/ */

View file

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