From: Scott Worley <scottworley@scottworley.com>
Date: Thu, 27 Jan 2022 21:24:18 +0000 (-0800)
Subject: Color tags
X-Git-Url: http://git.scottworley.com/vopamoi/commitdiff_plain/c70b3eedcfa3521a21239d7f0a6d2168e063dea2?ds=inline

Color tags
---

diff --git a/vopamoi.css b/vopamoi.css
index 9f4469c..1fceed9 100644
--- a/vopamoi.css
+++ b/vopamoi.css
@@ -4,7 +4,12 @@ input {
 .tag {
   float: right;
   margin-left: 1em;
-  font-size: 85%;
+  font-size: 80%;
+}
+span.tag {
+  color: white;
+  padding: 1px .5em;
+  font-weight: bold;
 }
 input.tag {
   width: 7em;
diff --git a/vopamoi.ts b/vopamoi.ts
index 5916d0a..135fe0a 100644
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -29,6 +29,12 @@ function Clock() {
 }
 const clock = Clock();
 
+// Returns a promise for a hue based on a hash of the string
+function hashHue(str: string) {
+  // Using crypto for this is overkill
+  return crypto.subtle.digest("SHA-256", new TextEncoder().encode(str)).then((buf) => (new Uint16Array(buf)[0] * 360) / 2 ** 16);
+}
+
 const Model = {
   addTask: function (timestamp: string, description: string): Element {
     const task = document.createElement("div");
@@ -53,6 +59,7 @@ const Model = {
     tag.appendChild(document.createTextNode(tagName));
     tag.classList.add("tag");
     tag.setAttribute("tabindex", "0");
+    hashHue(tagName).then((hue) => (tag.style.backgroundColor = `hsl(${hue},90%,45%)`));
     task.appendChild(tag);
     return tag;
   },