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