oxaliq/game-of-life
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

init controls for play, pause, and generation rate

Browse source
This commit is contained in:
Sorrel Bri 2020-05-25 12:42:58 -07:00
parent c3a5ef388f
commit 8b20fd35f6
6 changed files with 121 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -6,8 +6,8 @@
<title>Game of Life</title> <title>Game of Life</title>
</head> </head>
<body> <body>
<h1>Game of Life</h1>
<aside id="controls"> <aside id="controls">
<h1>Game of Life</h1>
<!-- insert form for fetch seed data --> <!-- insert form for fetch seed data -->
<!-- insert controls for animation --> <!-- insert controls for animation -->
</aside> </aside>

58
src/components/Controls.js Normal file
View 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,
};

4
src/components/GameFieldTable.js
View file

@ -107,7 +107,9 @@ const fieldView = (seed) => {
this.view[key].dataset.alive = cell.living; this.view[key].dataset.alive = cell.living;
}); });
}, },
reset() {}, reset() {
return fieldView(seed);
},
advance() { advance() {
this.field = this.field.next.next; this.field = this.field.next.next;
console.log(this.field); console.log(this.field);

16
src/components/controls.html Normal file
View 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
src/index.js
View file

@ -2,8 +2,10 @@ import reset from "./styles/reset.css";
import css from "./styles/style.css"; import css from "./styles/style.css";
// import Controls from './components/Controls'; // import Controls from './components/Controls';
const { fieldView } = require("./components/GameFieldTable"); const { fieldView } = require("./components/GameFieldTable");
const { init } = require("./components/Controls");
(() => console.log("hello world!"))(); (() => console.log("hello world!"))();
window.game = fieldView(); window.game = fieldView();
window.controls = init(game);
// controls // controls
// -- state=idle ? // -- state=idle ?
// ---- rewind runs through gameHistory to current state - 1 step // ---- rewind runs through gameHistory to current state - 1 step

41
src/styles/contols.css Normal file
View 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;
}