diff --git a/features/features.json b/features/features.json index e3b1f078..aa9089c7 100644 --- a/features/features.json +++ b/features/features.json @@ -1,4 +1,9 @@ [ + { + "version": 2, + "id": "sprite-layers", + "versionAdded": "v3.9.0" + }, { "version": 2, "id": "hide-project-tags", diff --git a/features/sprite-layers/data.json b/features/sprite-layers/data.json new file mode 100644 index 00000000..c0c4d920 --- /dev/null +++ b/features/sprite-layers/data.json @@ -0,0 +1,32 @@ +{ + "title": "View Sprite Layers", + "description": "Allows you to hover over the show/hide toggle in the sprite properties panel of the editor to view the sprite layers.", + "credits": [ + { + "username": "-Brass_Glass-", + "url": "https://scratch.mit.edu/users/-Brass_Glass-/" + }, + { + "username": "rgantzos", + "url": "https://scratch.mit.edu/users/rgantzos/" + } + ], + "type": [ + "Editor" + ], + "tags": [ + "New" + ], + "scripts": [ + { + "file": "script.js", + "runOn": "/projects/*" + } + ], + "styles": [ + { + "file": "style.css", + "runOn": "/projects/*" + } + ] +} \ No newline at end of file diff --git a/features/sprite-layers/script.js b/features/sprite-layers/script.js new file mode 100644 index 00000000..372ad934 --- /dev/null +++ b/features/sprite-layers/script.js @@ -0,0 +1,61 @@ +export default async function ({ feature, console }) { + window.feature = feature + + ScratchTools.waitForElements("div[class*='sprite-info_row_']:nth-child(2) > div[class*='sprite-info_group_']:nth-child(1)", function (button) { + button.addEventListener("mouseover", function () { + if (feature.traps.vm.editingTarget.isStage || button.querySelector(".ste-layers")) return; + + button.style.position = "relative" + + let div = document.createElement("div") + div.className = "ste-layers" + + let h3 = document.createElement("h3") + h3.textContent = "Layers" + div.appendChild(h3) + + div.appendChild(buildDiagram()) + + if (div.querySelector("div").childNodes.length > 12) { + div.classList.add("ste-long-layers") + } + + let p = document.createElement("p") + p.textContent = "Layers to the left are to the front. Bright blue indicates the current sprite, and light blue indicates any of its clones." + div.appendChild(p) + + button.appendChild(div) + }) + + button.addEventListener("mouseout", function () { + button.querySelector(".ste-layers")?.remove() + button.style.position = null + }) + }) + + function buildDiagram() { + let targets = feature.traps.vm.runtime.targets + + let div = document.createElement("div") + let elements = [] + + for (var i in targets) { + let place = document.createElement("div") + place.style.width = `calc(${(100 / targets.length).toString()}% - .1rem)` + elements.push(place) + } + + for (var i in targets) { + if (targets[i].sprite.name === feature.traps.vm.editingTarget.sprite.name) { + if (targets[i].isOriginal) { + elements[targets[i].getLayerOrder() - 1].style.backgroundColor = "#034efc" + } else { + elements[targets[i].getLayerOrder() - 1].style.backgroundColor = "#034efc70" + } + } + } + + div.append(...elements) + return div + } +} \ No newline at end of file diff --git a/features/sprite-layers/style.css b/features/sprite-layers/style.css new file mode 100644 index 00000000..178f6f77 --- /dev/null +++ b/features/sprite-layers/style.css @@ -0,0 +1,53 @@ +.ste-layers { + width: 25rem; + border-radius: .5rem; + height: 9.75rem; + background: white; + position: absolute; + border: 2px solid rgba(3, 78, 252, .5); + padding: .5rem; + text-align: left; + left: 50%; + bottom: -7rem; + transform: translate(-50%, -100%); + z-index: 999; + box-shadow: 0px 0px 10px rgb(3, 78, 252, .3); +} + +.ste-layers h3 { + font-size: 1.1rem; + margin-bottom: .5rem; + margin-left: .15rem; +} + +.ste-layers>div>div { + border-radius: .5rem; + height: 3rem; + display: inline-block; + background-color: lightgray; + margin-left: .05rem; + margin-right: .05rem; + flex-shrink: 0; +} + +.ste-layers>div { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + text-align: center; +} + +.ste-layers p { + font-size: .8rem; + opacity: .6; + font-style: italic; + line-height: .95rem; + padding-left: .05rem; + padding-right: .05rem; +} + +.ste-long-layers>div>div:nth-child(even) { + height: 2rem; + position: relative; + top: .5rem; +} \ No newline at end of file