2018-12-05 21:57:53 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>AoC Day 5</title>
|
|
|
|
|
</head>
|
|
|
|
|
<script>
|
|
|
|
|
function sleep(ms) {
|
|
|
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function swapCase(c) {
|
2018-12-05 22:57:33 +00:00
|
|
|
return isUpper(c) ? c.toLowerCase() : c.toUpperCase();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isUpper(c) {
|
|
|
|
|
return c === c.toUpperCase();
|
2018-12-05 21:57:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function collapsePolymer() {
|
2018-12-05 22:57:33 +00:00
|
|
|
let view = document.getElementById("view").getContext("2d");
|
|
|
|
|
|
2018-12-05 21:57:53 +00:00
|
|
|
let input = document.getElementById("input");
|
|
|
|
|
input.contentEditable = false;
|
|
|
|
|
|
2018-12-05 22:57:33 +00:00
|
|
|
let polymer = input.innerHTML.split('');
|
|
|
|
|
display(polymer);
|
2018-12-05 21:57:53 +00:00
|
|
|
|
|
|
|
|
let i = 0;
|
|
|
|
|
while(i < polymer.length - 1) {
|
|
|
|
|
if (polymer[i] === swapCase(polymer[i + 1])) {
|
2018-12-05 22:57:33 +00:00
|
|
|
if (!canvasMode) input.innerHTML = polymer.slice(0, i).join('') + "<span style='color: red'>" + polymer[i] + polymer[i + 1] + "</span>" + polymer.slice(i + 2).join('');
|
2018-12-05 21:57:53 +00:00
|
|
|
|
|
|
|
|
polymer.splice(i, 2);
|
|
|
|
|
i = Math.max(-1, i - 2);
|
|
|
|
|
await sleep(0.01);
|
2018-12-05 22:57:33 +00:00
|
|
|
|
|
|
|
|
if (canvasMode) {
|
|
|
|
|
display(polymer);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
input.innerText = polymer.join('');
|
|
|
|
|
}
|
2018-12-05 21:57:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
i++;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input.contentEditable = true;
|
2018-12-05 22:57:33 +00:00
|
|
|
input.innerHTML = polymer.join('');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function display(polymer) {
|
|
|
|
|
const chars = "abcdefghijklmnopqrstuvwxyz".split('');
|
|
|
|
|
|
|
|
|
|
let view = document.getElementById("view")
|
|
|
|
|
let ctx = view.getContext("2d");
|
|
|
|
|
|
|
|
|
|
let imageData = ctx.createImageData(view.width, view.height);
|
|
|
|
|
|
|
|
|
|
let canvasPos = 0;
|
|
|
|
|
for (let i = 0; i < polymer.length; i++) {
|
|
|
|
|
let fillLen = chars.indexOf(polymer[i].toLowerCase()) + 1;
|
|
|
|
|
|
|
|
|
|
for (let j = 0; j < fillLen; j++) {
|
|
|
|
|
imageData.data[canvasPos + j*4] = isUpper(polymer[i]) ? 255 : 0;
|
|
|
|
|
imageData.data[canvasPos + j*4 + 2] = isUpper(polymer[i]) ? 0 : 255;
|
|
|
|
|
imageData.data[canvasPos + j*4 + 3] = 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvasPos += fillLen*4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
2018-12-05 21:57:53 +00:00
|
|
|
}
|
2018-12-05 22:57:33 +00:00
|
|
|
|
|
|
|
|
function toggleMode() {
|
|
|
|
|
canvasMode = !canvasMode;
|
|
|
|
|
if (canvasMode) {
|
|
|
|
|
document.getElementById("view").style.display = "block";
|
|
|
|
|
document.getElementById("input").style.display = "none";
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
document.getElementById("view").style.display = "none";
|
|
|
|
|
document.getElementById("input").style.display = "block";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
var canvasMode = false;
|
2018-12-05 21:57:53 +00:00
|
|
|
</script>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-12-05 22:57:33 +00:00
|
|
|
<input type="button" value="Toggle Mode" onclick="toggleMode()" />
|
|
|
|
|
<input type="button" value="React!" onclick="collapsePolymer()" />
|
|
|
|
|
<input type="button" value="Load My Input" onclick="document.getElementById('input').innerHTML = document.getElementById('hidden-input').innerHTML" />
|
|
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
<canvas id="view" width="800" height="800" style="width: 1200px; height: 1200px; display: none;"></canvas>
|
|
|
|
|
<br />
|
|
|
|
|
<div id="input" contenteditable="true">
|
|
|
|
|
dDdCcXxYyyYaAaBbbJjXJjxBbQwWwWqFHXxhfxTtUIiud
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hidden-input" style="display: none">
|
2018-12-05 21:57:53 +00:00
|
|
|
CXxRrcWhHoOwWtTwSsRApPWwarlYyFWHhJjJjbBTsSQqtBTtbTtwfoEeivVTtIOLwftTFQqWlaFfAGgoOMmQqyYwWWDdwyYnNBNnGgBbwWbiIZAappFjJfPYypPPzTtWwrYyRBuUbjUuJlLKhbBdDAaHkNnKZzKuUkzOoSXxnNsZtTfFIiUuHhkrRvNbBgGneAaEsCcSYyDOodVAanzOoZNJKkpPoOjXaRrAmMfFDaAdtTOfBbFAaFaobBOIiAFfUulLWwlLoOEBbRfyGgYNnFPOopgGhHLllLfBbjJFBbreifIijJEeXxLlpPUTtuLEeeyYVvEpvVHhPPNOotTnoOLlLIiGtTNnTtgQqlzZpPpzoOlVvLvNnVvHhVjJBbvVZmkDdIpAaPXxixgGXLGgNnUuAWwaldVvDVvIiaAnTtNFyYfKZzrIyYiYyRoOdkKwWfFjJCPpcIiDAaSseeEOHhFfiIoEFvVNnYyFwWfZYysSzSsqEcCeCBbcQXxJjfOJjlLSsofwWyYENnEUueekKiyGgzZYIBbUuEeFoBbOqLrWwRlVWhHwvQfKZzCHhcfFGfFgyYWwkWwbBWOVvAaoQpPqwKkbgPprdDRQqrRUfFuGmvHiIhsSXxBVNnDdvFfQqbLdDloOsSpPPpBbUuwXxvtTXhHxVhHWHeEhdNnJhHjDiIYyOoxJjXjCcLlvRSsCcrVEpPqQeJZzGAagsrRxEerQUuqRPpprRQqPArZzrRRadDBbtzlLkKVvFfdDnNiIZzdDdDdpPeEDdZzhPUuyYpxXHpoOPRrmMUpPOouaKkAhAaYdDySRrJjsHFgGnlGgLaJjAqzZkKJjdDQbalxXLANnBhHbBGgAaiYyIIisSNOomMHhLDdcClIiwWfJjzyYZbuUCcAjJaoOmMLlMmQqmMuwZzvVBbMeEmCcWUpPgiOomMIlMnNmLdDPprRiIGSsPpBvfFRrtTVVvdDEIiTaAtoOKkHMmgGpPhcyYCdDUuOeLlEDhHdoelLOoKkDdwWCkKcDeUxXwWiIWfFwTtNSaOoAsnuEXmMJqQucCUjJTtjxYybBhvVHTZMmztCMmcsSTkMGgmDfFgGdkKWwTtKKpwaAcCdDbBySUusYfJjdDFopPOnNvtTVWPpwWpPVvRrrRViIvaApOsSoyJjmIiMQqYQpPqoOPgGkKmMPUuQqrREerRBxXOokzZVvcNnPpCRrWTtCcpPnNXxdsSzZeEIiDCcJwJjWQxSMmsXqjwSsbZzdPpDEJjeKkmMRrorRXwHhWxLYylOCmMoOcRrhwWzZCjJcLlQqiRrIZzxXHBfBbzyYZFfFilMmlaAPVviIpTtXdDxzZfwWFyQqYsWgGwXAaxyYVvzZkyEeYAaKJjEJZKkztTgjLqQlJfrRCcWwVvvjJufFOoUBpPYyXxbVcCvQqBmMLlPxXeEpzZzZMHhVvNIhHiASsaYyEeZzhHkKsUPpuYUuQTtqQqmMmMySmSszZPpoOLrvVxXRlIipSsbMmqfFQBPCqQWZziIwBbLlqQZUbBuKkzgJjgGGUucESsFfPpgGTzZZzVJvVjvvVfFtJjdDYHhyhHyrRkKSKwWuUkskkKRrTtGgpPaZzpPkKUuMmyYlLAbyYRrHhBKSWwsjJktTWwgghHGyYLlRGgrMmbBQSVvsqGRrUucCxklLKXTDdmMtJUujsVBbUuzZoGgOZzpPNKklLnjWwMmcZzmMCJWyYweEXuqQUUuxgGioOOoIxYyXxzZXvUuVkIiiIrzZRFfGHhgQqUuKvjzNRrnSQqseEoLluUdsSDEesvkKVSOZIoORrxXlzZpPaRrdDAIiAaYyCNFfCcnIipPVvmMzvVZAaKkozZpPnNcwGgWCiINnOkRrKQqUuqAaCcQyYtuULKvVKkcCklXxhHbBToOcLuUVAWwazuUmMAgGaZuiIUGRrgeBbEnxXLlcCSsNAakeElLKfFcCvzzNnZZnNrRCyDdhHYrREbBNZznNneESsgGVjJrSHVgGvhKkFfsRWwDdvgGtTeRgGriIyYnjpOoPCMZzmcJCYfMkKmFyDdJjMkKIixkKBbXUuwWtTeEMmdDwWtTrRXGgAanNGgxGqQgDaAdjWjJwJmBbmMcCNUuuTVvtULCcCcLiVsSvTtIxXuCcUlmMJjlUuYspPWwkKUupEePQqzvVZSIqQiIiiPiIpoOevVEIFfOxGZzgmPpMbWLlAaQqDdZDdoOFezZEjXxGgJLgGloOSaAYyWnNJoGgOuUwWjNnwMgGCcCcKkpPGnNgroiqQIORLlqQqQAaKklLfFWqQVLNpPjFfJqQUDyYdunKRrWTtEepruUaCcARPwwWkPoONnpSdhlLHDQqsLliQqPpUbBuwNAaoOnZZzcCXHhvVxbBrRziCRrcjJxIiQdDVvKkqTeEMmELlYsSyUuwWesSXxnNHhlPOoQqpQyYsSyYEQMWmMwmZyYgoOGwWugCcTtxXGfFNJjvVnUfFeEBbcGnNyYgCVvnNAuUahHpPMmWhTtHNvJjVDdndgGjJkaWwALlKiITtDRrbKkRIidDHhLlQqoOHiIKkeEhKDdrRkiIrRMmrCcwaAWDmGgMYyCoOcIpwWPiWwQiIqwWdtGgJjTAaQqlTmMtWwLxXAaixXZzIBbbBBzOsxXSLloBbzRrZnNyZBbzXxYAawBhJjHbjJWwDdWaAjJZuUPPtxXTppJjqNnQXxcDdCNSsnZCczFfwzdDrEeBLlbyCcYyabBAYleCclLuaAfFDYNnPpqgGTtQNnyLcdDCkKoOzAaZmpPSsIiMDdcjJCdDKeEkZzWwjvkKdCccCDuUKksrRGgzLlEerRiILlWwZSFfMmBfIiDdvCcWwhHVFJoOjdDJksSKjzZIilLmEFfezZMNbBVvVBbhRrHgGPpKkvmMkccCCGgDQqGKkoHhOiqQvVIgCqiIWwKkZbbBVvBzlLoOQqwDRrGgdmnNZroOoOiIQqBbqtThoKkQnWwfFfPplLVvIiPpDdLuUGglxXmaAMrRjxXJNnrEedDRFvoITtiOYyWZzuUETtRrAiIaAaoNwcCAQHheEEdjJDtlLTvYQqGgyVIlLAHhbBaiWWZzRrzZiIwfDiGgIdFEecCOofFTtIiXxfdDFRoOrxXUnbBmMJfEepfMmBbFKkacCaaAAZzAhHiIztTHhYyfJjuUYimhHYyMJjIfYjJylLPcCpQqYNnyxXFeEQqacCAVKkWWwhHLyYCcZzXxlCcyhHYVvJGgkDdxXtTKpPrRIiLlUuLGZvVwAaWzgkJjKSlLseElbBrRZZkKzEebBzsSqjPpJLaAlrFfrtTRmcCSsSLltoeEbBOYypPMmTFfkgORroSsGaHhASGOouUgxTtRXxrBbVOohHvQqXoOsZzuUIWwIZziXxsSQqwWirRKjJhsSHZznNYuUMYymaAJjnqRrhHwLEelbBkKWhnNJjFfmMwWtqQTTkaVvAyCJjcYKtbPpBGgCcwWOoNQqqEeQKkeECtTOvVoRrcCcNSsnxuRrRryYUjJuRrQqvVUXyAaDdQqhHWBEebYHeEfFhybYypPBwQHhqWxPpIOoYjgGzZPpiTFHhMwWmfGgWwJjzZgJjGbBjlugqQGULtTJJjtMxXjvrRrRVdkKSHBbhVvarXxRAsFfEeIiZBblLjrRJrReEzQJEFfePhYyHpVvsVSsjJLbBKWwkTtEXCcukgwWUuGRrKTtFphHPQTtXxlLqxiIHhFfXoOxdDyhwWhHPWLVmGgwWMUucCvVaAzZPsSNnnNpvbiIBOofFMmQAaAPzEeZmcCMIFfpPJjGgoOwtTWiOoqQodDZznrRgZzhzZHSsEeydnNxCcOopPjJdLlNdFfDwWMmgGnqQDrIiIZziRxPYyFfplLGgzRliIaQccCufFUCqANnSmMstTLvVsCcmMSZUuzkKrTtAeERMZzPpmzZxXVvDdCcqQkbxXRrFkiEoOQoOnNSlLvVshnNKmhDdHeEmSsMGgraAeLBbqQEelMmERtTGmMNngqQxcCXGdDjJgMTtmGtTPKkpYOonhHNhHHRrCczZfFVRrRrvjXxTtJcChTtaAqQVvnNnhwNXsScyt
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
