glasses

matt-meeks · Nov 30, 2023 · e364e00 · e364e00
1 parent 7969f8b
commit e364e00
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 1 deletion.
diff --git a/blob/index.html b/blob/index.html
@@ -23,9 +23,15 @@
                                 <div class="pupil"></div>
                             </div>
                         </div>
+                        <div class="apparel"></div>
                     </div>
                 </div>
             </template>
+            <template id="cool-glasses">
+                <div class="cool-glasses">
+                    <div class="cool-glasses--sides"></div>
+                </div>
+            </template>
             <button id="btn-appearance">Change Appearance</button>
         </div>
         <script type="text/javascript" src="script.js"></script>

diff --git a/blob/script.js b/blob/script.js
@@ -4,10 +4,21 @@
  * @prop {number} y
  */
 
+/**
+ * @typedef {Object} CoolGlassesOption
+ * @prop {CoolGlasses} CoolGlasses
+ */
+
+/**
+ * @typedef {Object} CoolGlasses
+ * @prop {number} hue
+ */
+
 /**
  * @typedef {Object} ChangeAppearance
  * @prop {number} body_hue
  * @prop {number} iris_hue
+ * @prop {"None" | CoolGlassesOption} face_apparel
  */
 
 /**
@@ -108,9 +119,25 @@ function spawnCharacter(id, state) {
  * @param {ChangeAppearance} state
  */
 function changeAppearance(id, state) {
+  console.log(state);
   const charElem = getCharElem(id);
+  const apparelElem = charElem.querySelector(".apparel");
+  apparelElem.innerHTML = "";
   charElem.style.setProperty("--hue", state.body_hue);
   charElem.style.setProperty("--iris-hue", state.iris_hue);
+  if (
+    typeof state.face_apparel === "object" &&
+    "CoolGlasses" in state.face_apparel
+  ) {
+    const tmpl = document.getElementById("cool-glasses");
+    const elemFrag = tmpl.content.cloneNode(true);
+    apparelElem.appendChild(elemFrag);
+
+    charElem.style.setProperty(
+      "--glasses-hue",
+      state.face_apparel.CoolGlasses.hue,
+    );
+  }
 }
 
 function despawnCharacter(id) {
@@ -241,6 +268,10 @@ document.getElementById("btn-appearance").onclick = (ev) => {
     ChangeAppearance: {
       body_hue: Math.trunc(Math.random() * 360),
       iris_hue: Math.trunc(Math.random() * 360),
+      face_apparel:
+        Math.random() < 0.15
+          ? { CoolGlasses: { hue: Math.trunc(Math.random() * 360) } }
+          : "None",
     },
   });
   ev.stopPropagation();

diff --git a/blob/styles.css b/blob/styles.css
@@ -70,7 +70,9 @@ body {
     border-top: solid calc(var(--eye-lid-state, 0) * 10px) var(--lid-color);
     border-bottom: solid calc(var(--eye-lid-state, 0) * 10px) var(--lid-color);
     border-radius: 50%;
-    transition: border 0.1s;
+    transition:
+        border 0.1s,
+        border-color 1s;
 }
 
 .left-eye {
@@ -112,3 +114,56 @@ body {
 body {
     margin: 0;
 }
+
+.cool-glasses {
+    --color: hsla(var(--glasses-hue, 0), 100%, 50%, 100%);
+    translate: -50% -50%;
+    position: absolute;
+    left: 40px;
+    top: 30px;
+    background: var(--color);
+    width: 9px;
+    height: 6px;
+}
+
+.cool-glasses::before,
+.cool-glasses::after {
+    content: "";
+    position: absolute;
+    top: -7px;
+    width: 26px;
+    height: 20px;
+    background: #0007;
+    border-radius: 50%;
+    border: solid 2px var(--color);
+    box-sizing: border-box;
+}
+
+.cool-glasses::before {
+    right: 7px;
+}
+
+.cool-glasses::after {
+    left: 7px;
+}
+
+.cool-glasses--sides::before,
+.cool-glasses--sides::after {
+    content: "";
+    position: absolute;
+    /* background: black; */
+    height: 6px;
+    width: 13px;
+    border-top: solid 4px var(--color);
+    border-radius: 2px;
+}
+
+.cool-glasses--sides::before {
+    right: 30px;
+    border-left: solid 2px var(--color);
+}
+
+.cool-glasses--sides::after {
+    left: 30px;
+    border-right: solid 2px var(--color);
+}