diff --git a/css/sq2bs.css b/css/sq2bs.css
index 59e4e99..1519a35 100644
--- a/css/sq2bs.css
+++ b/css/sq2bs.css
@@ -460,3 +460,16 @@ a:hover {
.ferricles{
color: #5be553;
}
+
+.item-display-new-toggleable {
+ image-rendering: pixelated;
+ background-size: 1200% 100%;
+ aspect-ratio: 1/1;
+}
+.tome-image {
+ background-image: url('../media/items/common.png');
+ image-rendering: pixelated;
+ background-size: 500% 100%;
+ background-position: 100% 0;
+ aspect-ratio: 1/1;
+}
\ No newline at end of file
diff --git a/js/atree.js b/js/atree.js
index e43e743..3d385ef 100644
--- a/js/atree.js
+++ b/js/atree.js
@@ -1009,7 +1009,7 @@ function render_AT(UI_elem, list_elem, tree) {
// create node
let node_elem = document.getElementById("atree-row-" + ability.display.row).children[ability.display.col];
- node_wrap.img = make_elem("div", [], {style: "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1; background-image: url('../media/atree/icons.png'); background-size: 1700% 500%;"})
+ node_wrap.img = make_elem("div", [], {style: "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1; background-image: url('../media/atree/icons.png'); background-size: 900% 300%;"})
node_elem.appendChild(node_wrap.img);
// create hitbox
@@ -1277,7 +1277,7 @@ const atreeNodeAtlasPositions = {
"node_assassin": 7,
"node_shaman": 8
}
-const atreeNodeAtlasSize = [17, 5]
+const atreeNodeAtlasSize = [9, 3]
function atlasBGPositionCalc(pos, atlasSize) {
// https://css-tricks.com/focusing-background-image-precise-location-percentages/
// p = (c + 0.5/z - 0.5) * z/(z - 1) + 0.5
diff --git a/js/icons.js b/js/icons.js
index ddf9ef0..76088b4 100644
--- a/js/icons.js
+++ b/js/icons.js
@@ -1,39 +1,27 @@
-//which icons to use
let window_storage = window.localStorage;
-console.log(window_storage);
-icon_state_stored = window_storage.getItem("newicons");
newIcons = true;
-if (icon_state_stored === "false") {toggleIcons()}
-
+if (window_storage.getItem("newicons") === "false") {
+ toggleIcons();
+}
/** Toggle icons on the ENTIRE page.
*
*/
- function toggleIcons() {
+function toggleIcons() {
newIcons = !newIcons;
- let imgs = document.getElementsByTagName("img");
- let divs = document.getElementsByTagName("div");
- let favicon = document.querySelector("link[rel~='icon']");
+ window_storage.setItem("newicons", newIcons.toString());
+ let newOrOld = (newIcons ? "new" : "old");
- if (newIcons) { //switch to new
- favicon.href = favicon.href.replace("media/icons/old","media/icons/new");
- for (const img of imgs) {
- if (img.src.includes("media/icons/old")) {img.src = img.src.replace("media/icons/old","media/icons/new");}
- }
- for (const div of divs) {
- if (div.style.backgroundImage.includes("media/items/old")) {div.style.backgroundImage = div.style.backgroundImage.replace("media/items/old","media/items/new");}
- }
- //toggleiconbutton.textContent = "Use Old Icons";
- window_storage.setItem("newicons","true");
- } else { //switch to old
- favicon.href = favicon.href.replace("media/icons/new","media/icons/old");
- for (const img of imgs) {
- if (img.src.includes("media/icons/new")) {img.src = img.src.replace("media/icons/new","media/icons/old");}
- }
- for (const div of divs) {
- if (div.style.backgroundImage.includes("media/items/new")) {div.style.backgroundImage = div.style.backgroundImage.replace("media/items/new","media/items/old");}
- }
- //toggleiconbutton.textContent = "Use New Icons";
- window_storage.setItem("newicons","false");
+ let imgs = document.getElementsByTagName("img");
+ let divs = document.getElementsByClassName("item-display-new-toggleable");
+ let favicon = document.querySelector("link[rel~='icon']");
+ favicon.href = favicon.href.replace("media/icons/" + (newIcons ? "old" : "new"), "media/icons/" + newOrOld);
+ for (const img of imgs) {
+ // if doesn't contain, replace() does nothing
+ img.src = img.src.replace("media/icons/" + (newIcons ? "old" : "new"), "media/icons/" + newOrOld);
+ }
+ for (let i = 0; i < divs.length; i++) {
+ console.log(divs.item(i))
+ divs.item(i).style.backgroundImage = "url('../media/items/" + (newIcons ? "new" : "old") + ".png')";
}
}
\ No newline at end of file
diff --git a/media/atree/icons.png b/media/atree/icons.png
index d812ac4..fcbc48d 100644
Binary files a/media/atree/icons.png and b/media/atree/icons.png differ