add dollcode

2024-06-18 14:35:18 -04:00 · 2024-06-18 14:35:18 -04:00 · cbb8d8cc2f
commit cbb8d8cc2f
parent 94e9063545
1 changed files with 125 additions and 0 deletions
--- a/dollcode/index.html
+++ b/dollcode/index.html
@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<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</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>
+  <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 setOutput = (t) => {
+    document.querySelector("#output").innerHTML = t;
+  };
+
+  const getIDRadix = () => {
+    return document.querySelector("#hex").checked ? 16 : 10;
+  };
+
+  const updateEvent = () => {
+    const id = document.querySelector("#id").value;
+    const number = parseInt(id, getIDRadix());
+
+    setOutput(genCode(number));
+  };
+
+  document.body.addEventListener("keyup", updateEvent);
+  document.body.addEventListener("keydown", updateEvent);
+  document.body.addEventListener("keypress", updateEvent);
+  document.body.addEventListener("mousedown", updateEvent);
+  document.body.addEventListener("change", updateEvent);
+  document.body.addEventListener("focus", updateEvent);
+  document.body.addEventListener("blur", updateEvent);
+  document
+    .querySelectorAll("input")
+    .forEach((x) => x.addEventListener("change", updateEvent));
+</script>