Public
Edited
Aug 2
viewof codec = {
const ꖅ = (O, f = O => O[0] ? [...f(O.slice(1)), O[0], ...f(O.slice(1))] : []) => f([...O]).join``;
const ↈ = (O, f = O => O[0] ? O[(O.length - 1) / 2] + f(O.slice(0, (O.length - 1) / 2)) : "") => f([...O]);
const ƎE = O => [...O].reverse().join`` + [...O].slice(1).join``;
const ↀ = O => O.slice(-(O.length + 1) / 2);
const ui = html`
<div style="display:grid;TEXT-ALIGN:CENTER">
<pre style=""></pre>
${row("", [["◦୦◦◯◦୦◦", ꖅ], ["◯୦◯◦◯୦◯", ↈ], ["◦୦◦◯◦୦◦", ꖅ]])}
${row("", [["◦୦◯୦◦", ƎE], ["◯୦◦୦◯", ↀ], ["◦୦◯୦◦", ƎE]])}
${row("", [["◦୦◦◯◦୦◦", ꖅ], ["◯୦◯◦◯୦◯", ↈ], ["◦୦◦◯◦୦◦", ꖅ]])}
<input placeholder="" style="WIDTH:99%;TEXT-ALIGN:CENTER; ALIGN-ITEMS:CENTER">
${row("", [["◦୦◦◯◦୦◦", ꖅ], ["◯୦◯◦◯୦◯", ↈ], ["◦୦◦◯◦୦◦", ꖅ]])}
${row("", [["◦୦◯୦◦", ƎE], ["◯୦◦୦◯", ↀ], ["◦୦◯୦◦", ƎE]])}
${row("", [["◦୦◦◯◦୦◦", ꖅ], ["◯୦◯◦◯୦◯", ↈ], ["◦୦◦◯◦୦◦", ꖅ]])}
<pre style=""></pre>
</div>`;
const input = ui.querySelector("input");
const out = ui.querySelector("pre");
function row(name, ops) {
return html`<div style="display:grid;grid-template-columns:repeat(3,1fr)">
${ops.map(([label, fn]) => {
const b = html`<button>${name} ${label}</button>`;
b.onclick = () => {
out.textContent = fn(input.value);
ui.value = out.textContent;
ui.dispatchEvent(new CustomEvent("input"));
};
return b;
})}
</div>`;
}
return ui;
}