explorata/main.js
2021-12-31 13:17:37 +01:00

136 lines
3.3 KiB
JavaScript

let drawing = 1;
const form = Array.from(document.forms.rules.elements);
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const main = document.querySelector('#main');
const dead = document.querySelector('#dead');
const live = document.querySelector('#live');
const startBtn = document.querySelector('#start');
const resetBtn = document.querySelector('#reset');
const stopBtn = document.querySelector('#stop');
const cellSize = document.querySelector('#cellSize');
const loop = document.querySelector('#loop');
const menuRow = document.querySelectorAll('.menu-row');
canvas.width = main.offsetWidth * 0.9;
canvas.height = main.offsetHeight * 0.9;
// TODO: Hide iterator inside
function evolve(state, acc, rules) {
const [x, y, z, ...xs] = state;
if (!xs.length) {
return acc[acc.length - 1] + acc + acc[0];
}
const rule = x + y + z;
const newAcc = acc.concat(rules[rule]);
return evolve(y + z + xs.join(''), newAcc, rules);
}
function getRules() {
const rules = {};
form.reduce((_, i) => {
if (i !== undefined
&& i.type === 'checkbox') {
if (i.checked) rules[i.name] = '1';
else rules[i.name] = '0';
}
return rules;
}, rules);
return rules;
}
function getDrawingValues(state, acc) {
const cellDim = cellSize.value;
return Object.keys(state).map(
(key) => {
const fillStyle = state[key] === '1' ? live.value : dead.value;
return {
move: [key * cellDim, acc * cellDim],
fill: [key * cellDim, acc * cellDim, cellDim, cellDim],
fillStyle,
};
},
);
}
function getRandomInt(min, max) {
const minVal = Math.ceil(min);
const maxVal = Math.floor(max);
// The maximum is exclusive and the minimum is inclusive
return Math.floor(Math.random() * (maxVal - minVal) + minVal);
}
async function sleep(ms) {
await new Promise((resolve) => setTimeout(resolve, ms));
}
async function draw(state, acc) {
if (drawing === 0) {
return;
}
const position = acc * cellSize.value;
if (position >= canvas.height && !loop.checked) return;
const rules = getRules();
const newState = evolve(state, '', rules);
const line = getDrawingValues(newState, acc);
line.map((cell) => {
ctx.moveTo(...cell.move);
ctx.fillRect(...cell.fill);
ctx.fillStyle = cell.fillStyle;
return cell;
});
await sleep(40);
const newAcc = () => {
if (position >= canvas.height && loop.checked) return 0;
return acc;
};
await draw(newState, newAcc() + 1);
}
function reset() {
drawing = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
startBtn.addEventListener('click', async () => {
reset();
await sleep(60);
drawing = 1;
const initialState = [...Array(canvas.width)].map(
() => getRandomInt(0, 2).toString(),
).join('');
draw(initialState, 1);
});
resetBtn.addEventListener('click', async () => {
reset();
});
stopBtn.addEventListener('click', async () => {
drawing = 0;
});
menuRow.forEach((elem) => {
elem.querySelector('h2').addEventListener('click', async (e) => {
// ugly
const menuDisplay = e.currentTarget.parentNode.querySelector('.menu-row-content').style;
if (menuDisplay.display !== 'none') menuDisplay.setProperty('display', 'none');
else menuDisplay.setProperty('display', 'block');
});
});