Public
Edited
Aug 2
⠀#
viewof codec = {
const ꖅ=(O,ꖅꖅ=O=>O[0]?[...ꖅꖅ(O.slice(1)),O[0],...ꖅꖅ(O.slice(1))]:[])=>ꖅꖅ([...O]).join``
const ↈ=(O,ↈↈ=O=>O[0]?O[(O.length-1)/2]+ↈↈ(O.slice(0,(O.length-1)/2)):"")=>ↈↈ([...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;
}
⠀#