diff --git a/blob/script.js b/blob/script.js index 7caa553..fccc3bf 100644 --- 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 index 88c1521..8298f1c 100644 --- 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; +}