init controls for play, pause, and generation rate
This commit is contained in:
parent
c3a5ef388f
commit
8b20fd35f6
6 changed files with 121 additions and 2 deletions
|
@ -6,8 +6,8 @@
|
|||
<title>Game of Life</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game of Life</h1>
|
||||
<aside id="controls">
|
||||
<h1>Game of Life</h1>
|
||||
<!-- insert form for fetch seed data -->
|
||||
<!-- insert controls for animation -->
|
||||
</aside>
|
||||
|
|
58
src/components/Controls.js
Normal file
58
src/components/Controls.js
Normal file
|
@ -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,
|
||||
};
|
|
@ -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);
|
||||
|
|
16
src/components/controls.html
Normal file
16
src/components/controls.html
Normal file
|
@ -0,0 +1,16 @@
|
|||
<div class="playControls">
|
||||
<button id="stop">⏹️</button>
|
||||
<button id="play">⏯️</button>
|
||||
<button id="forward">⏩️</button>
|
||||
<input
|
||||
type="range"
|
||||
id="rate"
|
||||
onchange="controls.updateRoute"
|
||||
min="1"
|
||||
max="30"
|
||||
/>
|
||||
</div>
|
||||
<form action="/">
|
||||
<input type="text" />
|
||||
<input type="submit" value="seed" />
|
||||
</form>
|
|
@ -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
|
||||
|
|
41
src/styles/contols.css
Normal file
41
src/styles/contols.css
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue