clean styles; minor refactors

index.html

@@ -12,6 +12,7 @@
     <!-- insert controls for animation -->
   </aside>
   <main>
+    <p>Touch to toggle seed cells</p>
     <canvas id="game-field" width="500" height="300"></canvas>
   </main>
 </body>

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

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

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 )

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;
+  background: inherit;
-  color: white;
+  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
+}

src/styles/gameField.css

@@ -3,4 +3,5 @@ canvas {
   color: white;
   border: 0.5vmin solid #aaa;
   fill: white;
+  margin: 0 3em 3em 3em;
 }

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

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