diff --git a/blob/index.html b/blob/index.html
index 1948455..6675b11 100644
--- a/blob/index.html
+++ b/blob/index.html
@@ -23,9 +23,15 @@
+
+
+
+
diff --git a/blob/script.js b/blob/script.js
index dbaa5d7..8e89d7a 100644
--- 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
index 9595227..115d160 100644
--- 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);
+}