add color thingo

2024-05-02 21:02:17 -04:00 · 2024-05-02 21:02:17 -04:00 · 4d190031b6
commit 4d190031b6
parent 060461d536
1 changed files with 102 additions and 0 deletions
--- a/lightrunner/-~-/index.html
+++ b/lightrunner/-~-/index.html
@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<title>base32 color</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap"
+  rel="stylesheet"
+/>
+<script
+  src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js"
+  referrerpolicy="no-referrer"
+></script>
+<style>
+  :root {
+    font-family: "Atkinson Hyperlegible", sans-serif;
+    background-color: black;
+    color: #efefef;
+  }
+
+  section {
+    padding: 2em;
+  }
+
+  #color-box {
+    width: 300px;
+    height: 300px;
+    background-color: var(--color);
+  }
+</style>
+
+<noscript>
+  unfortunately we need javascript to do math, please enable &lt;333
+</noscript>
+<main>
+  <section>colors are hot</section>
+  <section>
+    <form id="form">
+      <input
+        id="input"
+        type="text"
+        maxlength="9"
+        minlength="9"
+        value="turquoise"
+      />
+    </form>
+    <label for="input">9 character word (case insensitive)</label>
+    <button id="update">update</button>
+  </section>
+  <section>
+    <div id="color-box"></div>
+    <ul>
+      <li id="rgb">rgb(-1,-1,-1)</li>
+      <li id="hex">#HHHHHH</li>
+    </ul>
+  </section>
+</main>
+
+<script>
+  const inputEl = document.querySelector("#input");
+  const updateEl = document.querySelector("#update");
+  const colorBoxEl = document.querySelector("#color-box");
+  const hexEl = document.querySelector("#hex");
+  const rgbEl = document.querySelector("#rgb");
+
+  const setColor = (r, g, b) => {
+    colorBoxEl.setAttribute("style", `--color: rgb(${r}, ${g}, ${b})`);
+    hexEl.innerHTML = `#${(
+      r.toString(16).padStart(2, "0") +
+      b.toString(16).padStart(2, "0") +
+      b.toString(16).padStart(2, "0")
+    ).toLowerCase()}`;
+    rgbEl.innerHTML = `rgb(${r}, ${g}, ${b})`;
+  };
+
+  const base32to8bit = (b32) => Math.round((parseInt(b32, 36) / 46655) * 255);
+
+  const inputToColor = (inputRaw) => {
+    const input = inputRaw + "000000000";
+    // Input will be 0-9A-Z,
+    const r = base32to8bit(input.substr(0, 3));
+    const g = base32to8bit(input.substr(3, 3));
+    const b = base32to8bit(input.substr(6, 3));
+
+    return { r, g, b };
+  };
+
+  const onUpdate = (event) => {
+    console.log("onUpdate", { event, inputEl });
+    const { r, g, b } = inputToColor(event.target.value);
+    setColor(r, g, b);
+  };
+
+  setTimeout(() => {
+    onUpdate({ target: document.querySelector("#input") });
+  });
+
+  inputEl.addEventListener("keyup", onUpdate);
+  inputEl.addEventListener("change", onUpdate);
+  inputEl.addEventListener("keypress", onUpdate);
+  inputEl.addEventListener("blur", onUpdate);
+  update.addEventListener("click", onUpdate.bind(null, { target: inputEl }));
+</script>