150 lines
3.8 KiB
HTML
150 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8" />
|
|
<title>dollcode</title>
|
|
<link rel="preconnect" href="https://fonts.bunny.net" />
|
|
<link
|
|
href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
|
|
rel="stylesheet"
|
|
/>
|
|
<style>
|
|
:root {
|
|
--top: #d9073b;
|
|
--mid-top: #40b39a;
|
|
--mid: #658e85;
|
|
--mid-half: rgba(101, 142, 133, 0.5);
|
|
--bottom: #0c100f;
|
|
--floor: #040504;
|
|
|
|
font-family: "Atkinson Hyperlegible", sans-serif;
|
|
background-color: var(--bottom);
|
|
color: #efefef;
|
|
}
|
|
|
|
section {
|
|
padding: 2em;
|
|
}
|
|
|
|
#output {
|
|
background-color: var(--floor);
|
|
border: 1px solid var(--mid-half);
|
|
display: inline-flex;
|
|
margin: 4rem 0;
|
|
padding: 3rem;
|
|
font-size: 2em;
|
|
}
|
|
</style>
|
|
|
|
<section>
|
|
<h1>dollcode generator</h1>
|
|
<p>
|
|
this is actually 2-track pharmacode but it doesn't give a shit about corpo
|
|
names.
|
|
</p>
|
|
<p>
|
|
<noscript>
|
|
<b>unfortunately this website requires javascript to function</b>
|
|
</noscript>
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<p>input a number or dollcode</p>
|
|
<input type="string" id="id" value="41666" placeholder="41666" />
|
|
<input type="radio" id="decimal" name="radix" value="10" checked />
|
|
<label for="decimal">Decimal (base10)</label>
|
|
<input type="radio" id="hex" name="radix" value="16" />
|
|
<label for="hex">Hexadecimal (base16)</label>
|
|
<input type="radio" id="dollcode" name="radix" value="dollcode" />
|
|
<label for="dollcode">dollcode</label>
|
|
<div>
|
|
<div id="output">▖▘▌▘▘▌▌▌▖▘</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2>what?</h2>
|
|
<p>
|
|
dollcode is a trinary number, with a ▖, ▘, ▌ denoting the three bit states,
|
|
with most significant bit on the left side.
|
|
</p>
|
|
<p>
|
|
if we were to count from 1 to 16, we would get ▖ ▘ ▌ ▖▖ ▖▘ ▖▌ ▘▖ ▘▘ ▘▌ ▌▖ ▌▘
|
|
▌▌ ▖▖▖ ▖▖▘ ▖▖▌ ▖▘▖
|
|
</p>
|
|
<p>
|
|
this is a simple case of looping through the number, and checking each
|
|
modulus 3 section, and replacing it with one of the 3 characters.<br /><b
|
|
>see source for the algo, it's simple.</b
|
|
>
|
|
</p>
|
|
</section>
|
|
<script>
|
|
const charmap = ["▌", "▖", "▘"];
|
|
const genCode = (number) => {
|
|
const output = [];
|
|
let window = number;
|
|
let loopProtection = 1000;
|
|
|
|
while (loopProtection > 0 && window > 0) {
|
|
const mod = window % 3;
|
|
|
|
if (mod == 0) {
|
|
window = (window - 3) / 3;
|
|
} else {
|
|
window = (window - mod) / 3;
|
|
}
|
|
|
|
output.unshift(charmap[mod]);
|
|
|
|
loopProtection--;
|
|
}
|
|
|
|
return output.join("");
|
|
};
|
|
|
|
const parseDollcode = (code) => {
|
|
// reverse the nibs!
|
|
const nibs = code.trim().split("").reverse();
|
|
|
|
console.log({ nibs });
|
|
|
|
return nibs
|
|
.map((nib) => (nib === "▖" ? 1 : nib === "▘" ? 2 : 3))
|
|
.reduce((acc, val, index) => {
|
|
const r = val * Math.pow(3, index);
|
|
const res = r + acc;
|
|
console.log({ acc, val, index, r, res });
|
|
return res;
|
|
}, 0);
|
|
};
|
|
|
|
const setOutput = (t) => {
|
|
document.querySelector("#output").innerHTML = t;
|
|
};
|
|
|
|
const getIDRadix = () => {
|
|
return document.querySelector("#hex").checked ? 16 : 10;
|
|
};
|
|
|
|
const updateEvent = () => {
|
|
const id = document.querySelector("#id").value;
|
|
|
|
if (document.querySelector("#dollcode").checked) {
|
|
const number = parseDollcode(id);
|
|
console.log({ number });
|
|
setOutput(
|
|
`<ul><li>dec: ${number.toString(10)}</li><li>hex: ${number.toString(
|
|
16
|
|
)}</li></ul>`
|
|
);
|
|
} else {
|
|
const number = parseInt(id, getIDRadix());
|
|
setOutput(genCode(number));
|
|
}
|
|
};
|
|
|
|
document.querySelectorAll("input").forEach((x) => {
|
|
x.addEventListener("change", updateEvent);
|
|
x.addEventListener("keyup", updateEvent);
|
|
x.addEventListener("keypress", updateEvent);
|
|
x.addEventListener("keydown", updateEvent);
|
|
});
|
|
</script>
|