commit ca6e479baa85fd08f497532bb7006ac3d1f1eab1 · dunkirk.sh/aoc-2025

+23 -8

vis/04/generate.ts

···

       201
        
       		}

     

       202
        
       		.cell {

     

       203
        
       			background: #181825;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       204
        
       		}

     

       205
        
       		.cell.paper {

     

       206
        
       			background: #a6e3a1;

     

       0
        
       
     

       207
        
       		}

     

       208
        
       		.stats {

     

       209
        
       			margin-top: 20px;

     
···

       226
        
       		<button id="prev">← Previous</button>

     

       227
        
       		<button id="play" data-playing="false">▶ Play</button>

     

       228
        
       		<button id="next">Next →</button>

     

       0
        
       
     

       229
        
       		<span class="speed-control">

     

       230
        
       			<label for="speed">Speed:</label>

     

       231
        
       			<input type="range" id="speed" min="100" max="1000" value="500" step="50">

     
···

       264
        
       		const prevBtn = document.getElementById('prev');

     

       265
        
       		const nextBtn = document.getElementById('next');

     

       266
        
       		const playBtn = document.getElementById('play');

     

       0
        
       
     

       267
        
       		const speedSlider = document.getElementById('speed');

     

       268
        
       

     

       269
        
       		function renderGrid() {

     
···

       287
        
       			for (let row = 0; row < numRows; row++) {

     

       288
        
       				for (let col = 0; col < numCols; col++) {

     

       289
        
       					const idx = row * numCols + col;

     

       0
        
       
     

       290
        
       					if (stage.map[row][col]) {

     

       291
       -
       						cells[idx].classList.add('paper');

     

       0
        
       
     

       292
        
       					} else {

     

       293
       -
       						cells[idx].classList.remove('paper');

     

       0
        
       
     

       294
        
       					}

     

       295
        
       				}

     

       296
        
       			}

     
···

       325
        
       			for (let i = 0; i < cells.length; i++) {

     

       326
        
       				cells[i].style.width = cellSize + 'px';

     

       327
        
       				cells[i].style.height = cellSize + 'px';

     

       0
        
       
     

       328
        
       			}

     

       329
        
       		}

     

       330
        
       

     
···

       333
        
       			renderGrid();

     

       334
        
       		}

     

       335
        
       

     

       336
       -
       		prevBtn.addEventListener('click', () => {

     

       337
       -
       			goToStage(currentStage - 1);

     

       338
       -
       		});

     

       339
        
       

     

       340
       -
       		nextBtn.addEventListener('click', () => {

     

       341
       -
       			goToStage(currentStage + 1);

     

       342
       -
       		});

     

       343
        
       

     

       344
        
       		playBtn.addEventListener('click', () => {

     

       345
        
       			if (playInterval) {

     
···

       347
        
       				playInterval = null;

     

       348
        
       				playBtn.textContent = '▶ Play';

     

       349
        
       			} else {

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       350
        
       				playBtn.textContent = '⏸ Pause';

     

       351
        
       				const speed = 1100 - parseInt(speedSlider.value);

     

       352
        
       				playInterval = setInterval(() => {

     
···

       385
        
       				e.preventDefault();

     

       386
        
       				playBtn.click();

     

       387
        
       			}

     

       0
        
       
     

       388
        
       		});

     

       389
        
       

     

       390
        
       		// Rescale on window resize

···

       201
        
       		}

     

       202
        
       		.cell {

     

       203
        
       			background: #181825;

     

       204
       +
       			display: flex;

     

       205
       +
       			align-items: center;

     

       206
       +
       			justify-content: center;

     

       207
       +
       			font-size: 14px;

     

       208
        
       		}

     

       209
        
       		.cell.paper {

     

       210
        
       			background: #a6e3a1;

     

       211
       +
       			color: #1e1e2e;

     

       212
        
       		}

     

       213
        
       		.stats {

     

       214
        
       			margin-top: 20px;

     
···

       231
        
       		<button id="prev">← Previous</button>

     

       232
        
       		<button id="play" data-playing="false">▶ Play</button>

     

       233
        
       		<button id="next">Next →</button>

     

       234
       +
       		<button id="reset">↺ Reset</button>

     

       235
        
       		<span class="speed-control">

     

       236
        
       			<label for="speed">Speed:</label>

     

       237
        
       			<input type="range" id="speed" min="100" max="1000" value="500" step="50">

     
···

       270
        
       		const prevBtn = document.getElementById('prev');

     

       271
        
       		const nextBtn = document.getElementById('next');

     

       272
        
       		const playBtn = document.getElementById('play');

     

       273
       +
       		const resetBtn = document.getElementById('reset');

     

       274
        
       		const speedSlider = document.getElementById('speed');

     

       275
        
       

     

       276
        
       		function renderGrid() {

     
···

       294
        
       			for (let row = 0; row < numRows; row++) {

     

       295
        
       				for (let col = 0; col < numCols; col++) {

     

       296
        
       					const idx = row * numCols + col;

     

       297
       +
       					const cell = cells[idx];

     

       298
        
       					if (stage.map[row][col]) {

     

       299
       +
       						cell.classList.add('paper');

     

       300
       +
       						cell.textContent = '@';

     

       301
        
       					} else {

     

       302
       +
       						cell.classList.remove('paper');

     

       303
       +
       						cell.textContent = '';

     

       304
        
       					}

     

       305
        
       				}

     

       306
        
       			}

     
···

       335
        
       			for (let i = 0; i < cells.length; i++) {

     

       336
        
       				cells[i].style.width = cellSize + 'px';

     

       337
        
       				cells[i].style.height = cellSize + 'px';

     

       338
       +
       				cells[i].style.fontSize = Math.max(10, cellSize * 0.5) + 'px';

     

       339
        
       			}

     

       340
        
       		}

     

       341
        
       

     
···

       344
        
       			renderGrid();

     

       345
        
       		}

     

       346
        
       

     

       347
       +
       		function resetAnimation() {

     

       348
       +
       			goToStage(0);

     

       349
       +
       		}

     

       350
        
       

     

       351
       +
       		prevBtn.addEventListener('click', () => goToStage(currentStage - 1));

     

       352
       +
       		nextBtn.addEventListener('click', () => goToStage(currentStage + 1));

     

       353
       +
       		resetBtn.addEventListener('click', resetAnimation);

     

       354
        
       

     

       355
        
       		playBtn.addEventListener('click', () => {

     

       356
        
       			if (playInterval) {

     
···

       358
        
       				playInterval = null;

     

       359
        
       				playBtn.textContent = '▶ Play';

     

       360
        
       			} else {

     

       361
       +
       				if (currentStage === stages.length - 1) {

     

       362
       +
       					resetAnimation();

     

       363
       +
       				}

     

       364
        
       				playBtn.textContent = '⏸ Pause';

     

       365
        
       				const speed = 1100 - parseInt(speedSlider.value);

     

       366
        
       				playInterval = setInterval(() => {

     
···

       399
        
       				e.preventDefault();

     

       400
        
       				playBtn.click();

     

       401
        
       			}

     

       402
       +
       			if (e.key === 'r' || e.key === 'R') resetBtn.click();

     

       403
        
       		});

     

       404
        
       

     

       405
        
       		// Rescale on window resize

+23 -8

vis/04/index.html

···

       117
        
       		}

     

       118
        
       		.cell {

     

       119
        
       			background: #181825;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       120
        
       		}

     

       121
        
       		.cell.paper {

     

       122
        
       			background: #a6e3a1;

     

       0
        
       
     

       123
        
       		}

     

       124
        
       		.stats {

     

       125
        
       			margin-top: 20px;

     
···

       142
        
       		<button id="prev">← Previous</button>

     

       143
        
       		<button id="play" data-playing="false">▶ Play</button>

     

       144
        
       		<button id="next">Next →</button>

     

       0
        
       
     

       145
        
       		<span class="speed-control">

     

       146
        
       			<label for="speed">Speed:</label>

     

       147
        
       			<input type="range" id="speed" min="100" max="1000" value="500" step="50">

     
···

       180
        
       		const prevBtn = document.getElementById('prev');

     

       181
        
       		const nextBtn = document.getElementById('next');

     

       182
        
       		const playBtn = document.getElementById('play');

     

       0
        
       
     

       183
        
       		const speedSlider = document.getElementById('speed');

     

       184
        
       

     

       185
        
       		function renderGrid() {

     
···

       203
        
       			for (let row = 0; row < numRows; row++) {

     

       204
        
       				for (let col = 0; col < numCols; col++) {

     

       205
        
       					const idx = row * numCols + col;

     

       0
        
       
     

       206
        
       					if (stage.map[row][col]) {

     

       207
       -
       						cells[idx].classList.add('paper');

     

       0
        
       
     

       208
        
       					} else {

     

       209
       -
       						cells[idx].classList.remove('paper');

     

       0
        
       
     

       210
        
       					}

     

       211
        
       				}

     

       212
        
       			}

     
···

       241
        
       			for (let i = 0; i < cells.length; i++) {

     

       242
        
       				cells[i].style.width = cellSize + 'px';

     

       243
        
       				cells[i].style.height = cellSize + 'px';

     

       0
        
       
     

       244
        
       			}

     

       245
        
       		}

     

       246
        
       

     
···

       249
        
       			renderGrid();

     

       250
        
       		}

     

       251
        
       

     

       252
       -
       		prevBtn.addEventListener('click', () => {

     

       253
       -
       			goToStage(currentStage - 1);

     

       254
       -
       		});

     

       255
        
       

     

       256
       -
       		nextBtn.addEventListener('click', () => {

     

       257
       -
       			goToStage(currentStage + 1);

     

       258
       -
       		});

     

       259
        
       

     

       260
        
       		playBtn.addEventListener('click', () => {

     

       261
        
       			if (playInterval) {

     
···

       263
        
       				playInterval = null;

     

       264
        
       				playBtn.textContent = '▶ Play';

     

       265
        
       			} else {

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       266
        
       				playBtn.textContent = '⏸ Pause';

     

       267
        
       				const speed = 1100 - parseInt(speedSlider.value);

     

       268
        
       				playInterval = setInterval(() => {

     
···

       301
        
       				e.preventDefault();

     

       302
        
       				playBtn.click();

     

       303
        
       			}

     

       0
        
       
     

       304
        
       		});

     

       305
        
       

     

       306
        
       		// Rescale on window resize

···

       117
        
       		}

     

       118
        
       		.cell {

     

       119
        
       			background: #181825;

     

       120
       +
       			display: flex;

     

       121
       +
       			align-items: center;

     

       122
       +
       			justify-content: center;

     

       123
       +
       			font-size: 14px;

     

       124
        
       		}

     

       125
        
       		.cell.paper {

     

       126
        
       			background: #a6e3a1;

     

       127
       +
       			color: #1e1e2e;

     

       128
        
       		}

     

       129
        
       		.stats {

     

       130
        
       			margin-top: 20px;

     
···

       147
        
       		<button id="prev">← Previous</button>

     

       148
        
       		<button id="play" data-playing="false">▶ Play</button>

     

       149
        
       		<button id="next">Next →</button>

     

       150
       +
       		<button id="reset">↺ Reset</button>

     

       151
        
       		<span class="speed-control">

     

       152
        
       			<label for="speed">Speed:</label>

     

       153
        
       			<input type="range" id="speed" min="100" max="1000" value="500" step="50">

     
···

       186
        
       		const prevBtn = document.getElementById('prev');

     

       187
        
       		const nextBtn = document.getElementById('next');

     

       188
        
       		const playBtn = document.getElementById('play');

     

       189
       +
       		const resetBtn = document.getElementById('reset');

     

       190
        
       		const speedSlider = document.getElementById('speed');

     

       191
        
       

     

       192
        
       		function renderGrid() {

     
···

       210
        
       			for (let row = 0; row < numRows; row++) {

     

       211
        
       				for (let col = 0; col < numCols; col++) {

     

       212
        
       					const idx = row * numCols + col;

     

       213
       +
       					const cell = cells[idx];

     

       214
        
       					if (stage.map[row][col]) {

     

       215
       +
       						cell.classList.add('paper');

     

       216
       +
       						cell.textContent = '@';

     

       217
        
       					} else {

     

       218
       +
       						cell.classList.remove('paper');

     

       219
       +
       						cell.textContent = '';

     

       220
        
       					}

     

       221
        
       				}

     

       222
        
       			}

     
···

       251
        
       			for (let i = 0; i < cells.length; i++) {

     

       252
        
       				cells[i].style.width = cellSize + 'px';

     

       253
        
       				cells[i].style.height = cellSize + 'px';

     

       254
       +
       				cells[i].style.fontSize = Math.max(10, cellSize * 0.5) + 'px';

     

       255
        
       			}

     

       256
        
       		}

     

       257
        
       

     
···

       260
        
       			renderGrid();

     

       261
        
       		}

     

       262
        
       

     

       263
       +
       		function resetAnimation() {

     

       264
       +
       			goToStage(0);

     

       265
       +
       		}

     

       266
        
       

     

       267
       +
       		prevBtn.addEventListener('click', () => goToStage(currentStage - 1));

     

       268
       +
       		nextBtn.addEventListener('click', () => goToStage(currentStage + 1));

     

       269
       +
       		resetBtn.addEventListener('click', resetAnimation);

     

       270
        
       

     

       271
        
       		playBtn.addEventListener('click', () => {

     

       272
        
       			if (playInterval) {

     
···

       274
        
       				playInterval = null;

     

       275
        
       				playBtn.textContent = '▶ Play';

     

       276
        
       			} else {

     

       277
       +
       				if (currentStage === stages.length - 1) {

     

       278
       +
       					resetAnimation();

     

       279
       +
       				}

     

       280
        
       				playBtn.textContent = '⏸ Pause';

     

       281
        
       				const speed = 1100 - parseInt(speedSlider.value);

     

       282
        
       				playInterval = setInterval(() => {

     
···

       315
        
       				e.preventDefault();

     

       316
        
       				playBtn.click();

     

       317
        
       			}

     

       318
       +
       			if (e.key === 'r' || e.key === 'R') resetBtn.click();

     

       319
        
       		});

     

       320
        
       

     

       321
        
       		// Rescale on window resize