add controls for clearing canvas and resetting to initial seed
This commit is contained in:
parent
fde2e26806
commit
dbd671a964
6 changed files with 75 additions and 23 deletions
|
@ -43,6 +43,9 @@ class CellStream extends Stream {
|
||||||
setLiving() {
|
setLiving() {
|
||||||
this.head.setLiving();
|
this.head.setLiving();
|
||||||
}
|
}
|
||||||
|
toggleLiving() {
|
||||||
|
this.head.toggleLiving();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const cellStream = (living = false, liveNeighbors = 0) => {
|
const cellStream = (living = false, liveNeighbors = 0) => {
|
||||||
|
|
|
@ -7,6 +7,9 @@ const init = (gameField) => {
|
||||||
const rateEl = document.getElementById("rate");
|
const rateEl = document.getElementById("rate");
|
||||||
const forwardEl = document.getElementById("forward");
|
const forwardEl = document.getElementById("forward");
|
||||||
const playEl = document.getElementById("play");
|
const playEl = document.getElementById("play");
|
||||||
|
const resetEl = document.getElementById("reset");
|
||||||
|
const clearEl = document.getElementById("clear");
|
||||||
|
const canvasEl = document.getElementById("game-field");
|
||||||
const controls = {
|
const controls = {
|
||||||
interval: null,
|
interval: null,
|
||||||
play() {
|
play() {
|
||||||
|
@ -19,14 +22,20 @@ const init = (gameField) => {
|
||||||
this.interval = null;
|
this.interval = null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
clear() {
|
||||||
|
gameField = gameField.clear();
|
||||||
|
},
|
||||||
reset() {
|
reset() {
|
||||||
this.pause();
|
this.pause();
|
||||||
gameField.reset();
|
gameField = gameField.reset();
|
||||||
},
|
},
|
||||||
forward() {
|
forward() {
|
||||||
gameField.advance();
|
gameField.advance();
|
||||||
},
|
},
|
||||||
rate: 10,
|
rate: 10,
|
||||||
|
updateField(x, y) {
|
||||||
|
gameField = gameField.toggleCell(x, y);
|
||||||
|
},
|
||||||
updateRate(rate) {
|
updateRate(rate) {
|
||||||
console.log("updating rate");
|
console.log("updating rate");
|
||||||
console.log(rate);
|
console.log(rate);
|
||||||
|
@ -55,6 +64,20 @@ const init = (gameField) => {
|
||||||
controls.play();
|
controls.play();
|
||||||
forwardEl.disabled = true;
|
forwardEl.disabled = true;
|
||||||
});
|
});
|
||||||
|
resetEl.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
controls.reset();
|
||||||
|
});
|
||||||
|
clearEl.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
controls.clear();
|
||||||
|
});
|
||||||
|
canvasEl.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (controls.interval) return;
|
||||||
|
const { offsetX, offsetY } = e;
|
||||||
|
controls.updateField(offsetX, offsetY);
|
||||||
|
});
|
||||||
return controls;
|
return controls;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -5,44 +5,70 @@ const canvasEl = document.getElementById("game-field");
|
||||||
const canvas2D = canvasEl.getContext("2d");
|
const canvas2D = canvasEl.getContext("2d");
|
||||||
canvas2D.fillStyle = "white";
|
canvas2D.fillStyle = "white";
|
||||||
|
|
||||||
const parseSeed = (seed) => ({
|
const parseSeed = (seed) => {
|
||||||
|
if (seed && Array.isArray(seed)) {
|
||||||
|
return {
|
||||||
fieldArray: [
|
fieldArray: [
|
||||||
[0, 1, 0],
|
[0, 1, 0],
|
||||||
[0, 0, 1],
|
[0, 0, 1],
|
||||||
[1, 1, 1],
|
[1, 1, 1],
|
||||||
],
|
],
|
||||||
});
|
};
|
||||||
|
}
|
||||||
|
return seed;
|
||||||
|
};
|
||||||
|
|
||||||
const fieldView = (seed) => {
|
const fieldView = (seed) => {
|
||||||
fieldArray = parseSeed(seed);
|
console.log(seed);
|
||||||
|
seed = parseSeed(seed);
|
||||||
// generateTable(true);
|
// generateTable(true);
|
||||||
const field = fieldStream(fieldArray);
|
console.log(seed);
|
||||||
return {
|
const field = fieldStream(seed);
|
||||||
|
const view = {
|
||||||
draw(x, y) {
|
draw(x, y) {
|
||||||
const { scale, offset } = this.dimension;
|
const { scale, offset } = this.dimension;
|
||||||
canvas2D.fillRect(x * scale + offset, y * scale + offset, scale, scale);
|
canvas2D.fillRect(x * scale + offset, y * scale + offset, scale, scale);
|
||||||
},
|
},
|
||||||
dimension: { x0: 0, y0: 0, x1: 500, y1: 300, scale: 6, offset: 100 },
|
dimension: { x0: 0, y0: 0, x1: 500, y1: 300, scale: 6, offset: 100 },
|
||||||
field,
|
field,
|
||||||
updateView(field) {
|
updateView() {
|
||||||
canvas2D.clearRect(0, 0, this.dimension.x1, this.dimension.y1);
|
canvas2D.clearRect(0, 0, this.dimension.x1, this.dimension.y1);
|
||||||
Object.entries(field.map)
|
Object.entries(this.field.map)
|
||||||
.filter(([key, cell]) => cell.living)
|
.filter(([key, cell]) => cell.living)
|
||||||
.map(([key]) => key.split(","))
|
.map(([key]) => key.split(","))
|
||||||
.forEach(([x, y]) => this.draw(x, y));
|
.forEach(([x, y]) => this.draw(x, y));
|
||||||
},
|
},
|
||||||
|
clear() {
|
||||||
|
return fieldView({});
|
||||||
|
},
|
||||||
reset() {
|
reset() {
|
||||||
return fieldView(seed);
|
const newField = fieldView(seed);
|
||||||
this.updateView(this.field);
|
newField.updateView();
|
||||||
|
return newField;
|
||||||
},
|
},
|
||||||
advance() {
|
advance() {
|
||||||
this.field = this.field.next.next;
|
this.field = this.field.next.next;
|
||||||
this.updateView(this.field);
|
this.updateView();
|
||||||
},
|
},
|
||||||
handleClick(e) {
|
toggleCell(x, y) {
|
||||||
// toggle single cell
|
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]) => {
|
||||||
|
map[key] = [living];
|
||||||
|
return map;
|
||||||
|
}, {});
|
||||||
|
fieldMap[`${x},${y}`] = !!fieldMap[`${x},${y}`]
|
||||||
|
? [!fieldMap[`${x},${y}`][0]]
|
||||||
|
: [true];
|
||||||
|
return new fieldView({ fieldMap });
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
view.updateView();
|
||||||
|
return view;
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<div class="playControls">
|
<div class="playControls">
|
||||||
<button id="stop">⏹️</button>
|
<button id="clear">⏹️</button>
|
||||||
|
<button id="reset">🔄️</button>
|
||||||
<button id="play">⏯️</button>
|
<button id="play">⏯️</button>
|
||||||
<button id="forward">⏩️</button>
|
<button id="forward">⏩️</button>
|
||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
id="rate"
|
id="rate"
|
||||||
onchange="controls.updateRoute"
|
|
||||||
min="1"
|
min="1"
|
||||||
max="20"
|
max="20"
|
||||||
value="10"
|
value="10"
|
||||||
|
|
|
@ -4,7 +4,7 @@ import css from "./styles/style.css";
|
||||||
const { fieldView } = require("./components/GameFieldTable");
|
const { fieldView } = require("./components/GameFieldTable");
|
||||||
const { init } = require("./components/Controls");
|
const { init } = require("./components/Controls");
|
||||||
(() => console.log("hello world!"))();
|
(() => console.log("hello world!"))();
|
||||||
window.game = fieldView();
|
window.game = fieldView([]);
|
||||||
window.controls = init(game);
|
window.controls = init(game);
|
||||||
// controls
|
// controls
|
||||||
// -- state=idle ?
|
// -- state=idle ?
|
||||||
|
|
|
@ -24,9 +24,9 @@ div.playControls {
|
||||||
border-radius: 1vh;
|
border-radius: 1vh;
|
||||||
border: solid white .5vh;
|
border: solid white .5vh;
|
||||||
grid-template-rows: 2fr 1fr;
|
grid-template-rows: 2fr 1fr;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
gap: 1vh;
|
gap: 1vh;
|
||||||
grid-template-areas: "buttons buttons buttons" " slider slider slider";
|
grid-template-areas: "buttons buttons buttons buttons" "slider slider slider slider";
|
||||||
padding: 1vh;
|
padding: 1vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue