From d5400b1a5332de0250fcd602a5e651e90e5aabe8 Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Tue, 26 May 2020 00:45:24 -0700 Subject: [PATCH] clean styles; minor refactors --- index.html | 1 + src/components/Controls.js | 4 ---- src/components/GameFieldTable.js | 5 ----- src/index.js | 21 --------------------- src/styles/controls.css | 20 +++++++++++++++----- src/styles/gameField.css | 1 + src/styles/reset.css | 4 ---- src/styles/style.css | 8 ++++++-- 8 files changed, 23 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index f7e35bc..65770f1 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@
+

Touch to toggle seed cells

diff --git a/src/components/Controls.js b/src/components/Controls.js index 6d19460..c33701e 100644 --- a/src/components/Controls.js +++ b/src/components/Controls.js @@ -34,7 +34,6 @@ const init = (gameField) => { seed(weeks) { if (weeks.length) { gameField = gameField.seed(weeks); - console.log(gameField); } }, forward() { @@ -45,9 +44,6 @@ const init = (gameField) => { gameField = gameField.toggleCell(x, y); }, updateRate(rate) { - console.log("updating rate"); - console.log(rate); - console.log(this.interval); controls.rate = rate; if (this.interval) { clearInterval(this.interval); diff --git a/src/components/GameFieldTable.js b/src/components/GameFieldTable.js index 9a72159..afb9c68 100644 --- a/src/components/GameFieldTable.js +++ b/src/components/GameFieldTable.js @@ -15,10 +15,7 @@ const parseSeed = (seed) => { }; const fieldView = (seed) => { - // console.log(seed); seed = parseSeed(seed); - // // generateTable(true); - // console.log(seed); const field = fieldStream(seed); const view = { draw(x, y) { @@ -43,7 +40,6 @@ const fieldView = (seed) => { return newField; }, seed(seed) { - console.log(seed); return fieldView(seed); }, advance() { @@ -54,7 +50,6 @@ const fieldView = (seed) => { const { scale, offset } = this.dimension; x = Math.floor((x - offset) / scale); y = Math.floor((y - offset) / scale); - console.log(x, y); const fieldMap = Object.entries(this.field.map) .map(([key, cell]) => [key, cell.living]) .reduce((map, [key, living]) => { diff --git a/src/index.js b/src/index.js index 887ba4e..727179c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,28 +1,7 @@ import reset from "./styles/reset.css"; import css from "./styles/style.css"; -// import Controls from './components/Controls'; const { fieldView } = require("./components/GameFieldTable"); const { init } = require("./components/Controls"); (() => console.log("hello world!"))(); window.game = fieldView([]); 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 ) diff --git a/src/styles/controls.css b/src/styles/controls.css index 7256fef..81e78dc 100644 --- a/src/styles/controls.css +++ b/src/styles/controls.css @@ -1,15 +1,16 @@ aside { - background: red; + background: #944; justify-content: space-evenly; display: flex; flex-flow: column nowrap; position: float; top: 0; + border-bottom: solid 1em #522; } aside * { - background: red; - color: white; + background: inherit; + color: #dff; } h1 { @@ -22,7 +23,7 @@ div.playControls { min-width: 30vw; display: grid; border-radius: 1vh; - border: solid white .5vh; + border: solid .5vh; grid-template-rows: 2fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1vh; @@ -32,10 +33,19 @@ div.playControls { button { width: 100%; + background: #ccc; border-radius: .5vh; - border: solid white .5vh; +} + +button:disabled { + background: #999; } input[type="range"] { grid-area: slider; } + +form { + margin: 0.5em; + padding: 0.5em +} \ No newline at end of file diff --git a/src/styles/gameField.css b/src/styles/gameField.css index 5ee183e..07bf8a4 100644 --- a/src/styles/gameField.css +++ b/src/styles/gameField.css @@ -3,4 +3,5 @@ canvas { color: white; border: 0.5vmin solid #aaa; fill: white; + margin: 0 3em 3em 3em; } \ No newline at end of file diff --git a/src/styles/reset.css b/src/styles/reset.css index 62deea8..b6a04c4 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -163,10 +163,6 @@ figure { * Correct margin displayed oddly in IE 6/7. */ -form { - margin: 0; -} - /** * Define consistent border, margin, and padding. */ diff --git a/src/styles/style.css b/src/styles/style.css index 6cfb590..e24e367 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -4,6 +4,7 @@ } body { + font-family: Verdana, Geneva, Tahoma, sans-serif; display: flex; flex-flow: column nowrap; align-items: center; @@ -11,13 +12,16 @@ body { main, aside { display: flex; - flex-flow: row nowrap; + flex-flow: column nowrap; align-items: center; justify-content: center; height: 100%; width: 100%; } main { - overflow: scroll; +} + +main p { + padding: 1em; } \ No newline at end of file