···
205
+
align-items: center;
206
+
justify-content: center;
···
<button id="prev">← Previous</button>
<button id="play" data-playing="false">▶ Play</button>
<button id="next">Next →</button>
234
+
<button id="reset">↺ Reset</button>
<span class="speed-control">
<label for="speed">Speed:</label>
<input type="range" id="speed" min="100" max="1000" value="500" step="50">
···
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const playBtn = document.getElementById('play');
273
+
const resetBtn = document.getElementById('reset');
const speedSlider = document.getElementById('speed');
···
for (let row = 0; row < numRows; row++) {
for (let col = 0; col < numCols; col++) {
const idx = row * numCols + col;
297
+
const cell = cells[idx];
if (stage.map[row][col]) {
291
-
cells[idx].classList.add('paper');
299
+
cell.classList.add('paper');
300
+
cell.textContent = '@';
293
-
cells[idx].classList.remove('paper');
302
+
cell.classList.remove('paper');
303
+
cell.textContent = '';
···
for (let i = 0; i < cells.length; i++) {
cells[i].style.width = cellSize + 'px';
cells[i].style.height = cellSize + 'px';
338
+
cells[i].style.fontSize = Math.max(10, cellSize * 0.5) + 'px';
···
336
-
prevBtn.addEventListener('click', () => {
337
-
goToStage(currentStage - 1);
347
+
function resetAnimation() {
340
-
nextBtn.addEventListener('click', () => {
341
-
goToStage(currentStage + 1);
351
+
prevBtn.addEventListener('click', () => goToStage(currentStage - 1));
352
+
nextBtn.addEventListener('click', () => goToStage(currentStage + 1));
353
+
resetBtn.addEventListener('click', resetAnimation);
playBtn.addEventListener('click', () => {
···
playBtn.textContent = '▶ Play';
361
+
if (currentStage === stages.length - 1) {
playBtn.textContent = '⏸ Pause';
const speed = 1100 - parseInt(speedSlider.value);
playInterval = setInterval(() => {
···
402
+
if (e.key === 'r' || e.key === 'R') resetBtn.click();
// Rescale on window resize
dunkirk.sh