fix change appearance button

matt-meeks · Dec 2, 2023 · 19c6a87 · 19c6a87
1 parent 50dbf9f
commit 19c6a87
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/blob/script.js b/blob/script.js
@@ -158,7 +158,6 @@ 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 = "";
@@ -244,7 +243,7 @@ function blinkLoop(id) {
 function setPosition(id, x, y) {
   const elem = getCharElem(id);
   elem.style.setProperty("--pos-x", `${x}px`);
-  elem.style.setProperty("--pos-y", `${y - 50}px`);
+  elem.style.setProperty("--pos-y", `${y - 30}px`);
   elem.style.zIndex = Math.round(y);
 }
 
@@ -390,6 +389,7 @@ async function spawnScene(id) {
     imgElem.style.height = "100%";
     imgElem.style.position = "absolute";
     imgElem.style.zIndex = layer.z;
+    imgElem.style.pointerEvents = "none";
     sceneElem.appendChild(imgElem);
   }
 

diff --git a/blob/styles.css b/blob/styles.css
@@ -12,6 +12,7 @@ body {
     /* background: orange; */
     overflow: hidden;
     transform-origin: top left;
+    position: relative;
 }
 
 .character {
@@ -182,7 +183,7 @@ body {
     border-left: solid 3px #0007;
     border-right: solid 2px #fff7;
     box-sizing: border-box;
-    transform: translate(-50%, -250%) translate(var(--pos-x), var(--pos-y))
+    transform: translate(-50%, -50%) translate(var(--pos-x), var(--pos-y))
         scaleY(75%) rotate(-30deg);
 }
 
@@ -191,3 +192,16 @@ body {
     height: 100%;
     position: absolute;
 }
+
+#btn-appearance {
+    position: absolute;
+    bottom: 0;
+    z-index: 100001;
+    background: blue;
+    border: 3px solid darkblue;
+    font-weight: bold;
+    color: white;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    margin: 1rem;
+}