From 8b20fd35f68da5e8b6920ec5f34241ed4de979d3 Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Mon, 25 May 2020 12:42:58 -0700 Subject: [PATCH] init controls for play, pause, and generation rate --- index.html | 2 +- src/components/Controls.js | 58 ++++++++++++++++++++++++++++++++ src/components/GameFieldTable.js | 4 ++- src/components/controls.html | 16 +++++++++ src/index.js | 2 ++ src/styles/contols.css | 41 ++++++++++++++++++++++ 6 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 src/components/Controls.js create mode 100644 src/components/controls.html create mode 100644 src/styles/contols.css diff --git a/index.html b/index.html index 2920e39..7844448 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,8 @@ Game of Life -

Game of Life

diff --git a/src/components/Controls.js b/src/components/Controls.js new file mode 100644 index 0000000..59ace3e --- /dev/null +++ b/src/components/Controls.js @@ -0,0 +1,58 @@ +const html = require("./controls.html"); +const css = require("../styles/contols.css"); + +const init = (gameField) => { + const controlsEl = document.getElementById("controls"); + controlsEl.innerHTML += html; + const rateEl = document.getElementById("rate"); + const forwardEl = document.getElementById("forward"); + const playEl = document.getElementById("play"); + const controls = { + interval: null, + play() { + const gameLoop = () => gameField.advance(); + this.interval = setInterval(gameLoop, 1000 / this.rate); + }, + pause() { + if (this.interval) { + clearInterval(this.interval); + this.interval = null; + } + }, + reset() { + this.pause(); + gameField.reset(); + }, + forward() { + gameField.advance(); + }, + rate: 50, + updateRate(rate) { + console.log("updating rate"); + console.log(rate); + console.log(this.interval); + controls.rate = rate; + if (this.interval) { + clearInterval(this.interval); + this.play(); + } + }, + }; + rateEl.addEventListener("change", (e) => { + e.preventDefault(); + controls.updateRate(e.target.value); + }); + forwardEl.addEventListener("click", (e) => { + e.preventDefault(); + controls.forward(); + }); + playEl.addEventListener("click", (e) => { + e.preventDefault(); + controls.interval ? controls.pause() : controls.play(); + }); + return controls; +}; + +module.exports = { + init, +}; diff --git a/src/components/GameFieldTable.js b/src/components/GameFieldTable.js index 24e1a97..d9c4ec0 100644 --- a/src/components/GameFieldTable.js +++ b/src/components/GameFieldTable.js @@ -107,7 +107,9 @@ const fieldView = (seed) => { this.view[key].dataset.alive = cell.living; }); }, - reset() {}, + reset() { + return fieldView(seed); + }, advance() { this.field = this.field.next.next; console.log(this.field); diff --git a/src/components/controls.html b/src/components/controls.html new file mode 100644 index 0000000..371dc38 --- /dev/null +++ b/src/components/controls.html @@ -0,0 +1,16 @@ +
+ + + + +
+
+ + +
diff --git a/src/index.js b/src/index.js index 207955c..8c64e80 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,10 @@ 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 diff --git a/src/styles/contols.css b/src/styles/contols.css new file mode 100644 index 0000000..ee5cdce --- /dev/null +++ b/src/styles/contols.css @@ -0,0 +1,41 @@ +aside { + background: red; + justify-content: space-evenly; + display: flex; + flex-flow: column nowrap; + position: float; + top: 0; +} + +aside * { + background: red; + color: white; +} + +h1 { + font-size: 130%; + padding: 1em; + +} + +div.playControls { + min-width: 30vw; + display: grid; + border-radius: 1vh; + border: solid white .5vh; + grid-template-rows: 2fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + gap: 1vh; + grid-template-areas: "buttons buttons buttons" " slider slider slider"; + padding: 1vh; +} + +button { + width: 100%; + border-radius: .5vh; + border: solid white .5vh; +} + +input[type="range"] { + grid-area: slider; +}