endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

resolve comments on PR #172

Browse source
This commit is contained in:
fin444 2022-07-26 13:44:16 -04:00
parent 5c98878d51
commit d2c4d5a9a6
5 changed files with 49 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
builder/index_full.html
View file

@ -49,7 +49,7 @@
<div class="col-auto rounded order-xl-0 order-0"> <div class="col-auto rounded order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
<div id="helmet-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; background-position: 45.45454545454546% 0; aspect-ratio: 1/1;"></div> <div id="helmet-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 45.45454545454546% 0;"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -76,7 +76,7 @@
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc">
<div id="ring1-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; background-position: 81.81818181818181% 0; aspect-ratio: 1/1;"></div> <div id="ring1-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 81.81818181818181% 0;"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -103,7 +103,7 @@
<div class="col-auto order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc">
<div id="chestplate-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; background-position: 54.54545454545454% 0; aspect-ratio: 1/1;"></div> <div id="chestplate-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 54.54545454545454% 0;"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -130,7 +130,7 @@
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc">
<div id="ring2-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; background-position: 81.81818181818181% 0; aspect-ratio: 1/1;"></div> <div id="ring2-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 81.81818181818181% 0;"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -156,7 +156,7 @@
<div class="col-auto order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc">
<div id="leggings-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; background-position: 63.63636363636363% 0; aspect-ratio: 1/1;"></div> <div id="leggings-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 63.63636363636363% 0;"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -183,7 +183,7 @@
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc">
<div id="bracelet-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; background-position: 90.90909090909092% 0; aspect-ratio: 1/1;"></div> <div id="bracelet-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 90.90909090909092% 0;"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -210,7 +210,7 @@
<div class="col-auto order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc">
<div id="boots-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; background-position: 72.72727272727272% 0; aspect-ratio: 1/1;"></div> <div id="boots-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 72.72727272727272% 0;"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -237,7 +237,7 @@
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc">
<div id="necklace-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; background-position: 100% 0; aspect-ratio: 1/1;"></div> <div id="necklace-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 100% 0;"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -263,8 +263,8 @@
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'> <div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'>
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
<div id="weapon-img" class="img-fluid rounded" style="background-image: url('../media/items/new.png'); image-rendering: pixelated; background-size: 1200% 100%; aspect-ratio: 1/1;"></div> <div id="weapon-img" class="img-fluid rounded item-display-new-toggleable"></div>
</div> background-image: url('../media/items/new.png'); </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font fw-bold gx-3 Damage base_dps" id="weapon-dps"> <div class="col text-nowrap scaled-font fw-bold gx-3 Damage base_dps" id="weapon-dps">
@ -620,7 +620,7 @@
<div class="col-auto rounded"> <div class="col-auto rounded">
<div class="row h-100 dark-shadow rounded" id='weaponTome1-dropdown'> <div class="row h-100 dark-shadow rounded" id='weaponTome1-dropdown'>
<div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="weaponTome1-img-loc"> <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="weaponTome1-img-loc">
<div id="weaponTome1-img" class="img-fluid rounded" style="background-image: url('../media/items/common.png'); image-rendering: pixelated; background-size: 500% 100%; background-position: 100% 0; aspect-ratio: 1/1;"></div> <div id="weaponTome1-img" class="img-fluid rounded tome-image"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -644,7 +644,7 @@
<div class="col-auto rounded"> <div class="col-auto rounded">
<div class="row h-100 dark-shadow rounded" id='weaponTome2-dropdown'> <div class="row h-100 dark-shadow rounded" id='weaponTome2-dropdown'>
<div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="weaponTome2-img-loc"> <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="weaponTome2-img-loc">
<div id="weaponTome2-img" class="img-fluid rounded" style="background-image: url('../media/items/common.png'); image-rendering: pixelated; background-size: 500% 100%; background-position: 100% 0; aspect-ratio: 1/1;"></div> <div id="weaponTome2-img" class="img-fluid rounded tome-image"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -668,7 +668,7 @@
<div class="col-auto rounded"> <div class="col-auto rounded">
<div class="row h-100 dark-shadow rounded" id='armorTome1-dropdown'> <div class="row h-100 dark-shadow rounded" id='armorTome1-dropdown'>
<div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome1-img-loc"> <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome1-img-loc">
<div id="armorTome1-img" class="img-fluid rounded" style="background-image: url('../media/items/common.png'); image-rendering: pixelated; background-size: 500% 100%; background-position: 100% 0; aspect-ratio: 1/1;"></div> <div id="armorTome1-img" class="img-fluid rounded tome-image"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -692,7 +692,7 @@
<div class="col-auto rounded"> <div class="col-auto rounded">
<div class="row h-100 dark-shadow rounded" id='armorTome2-dropdown'> <div class="row h-100 dark-shadow rounded" id='armorTome2-dropdown'>
<div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome2-img-loc"> <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome2-img-loc">
<div id="armorTome2-img" class="img-fluid rounded" style="background-image: url('../media/items/common.png'); image-rendering: pixelated; background-size: 500% 100%; background-position: 100% 0; aspect-ratio: 1/1;"></div> <div id="armorTome2-img" class="img-fluid rounded tome-image"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -716,7 +716,7 @@
<div class="col-auto rounded"> <div class="col-auto rounded">
<div class="row h-100 dark-shadow rounded" id='armorTome3-dropdown'> <div class="row h-100 dark-shadow rounded" id='armorTome3-dropdown'>
<div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome3-img-loc"> <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome3-img-loc">
<div id="armorTome3-img" class="img-fluid rounded" style="background-image: url('../media/items/common.png'); image-rendering: pixelated; background-size: 500% 100%; background-position: 100% 0; aspect-ratio: 1/1;"></div> <div id="armorTome3-img" class="img-fluid rounded tome-image"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -740,7 +740,7 @@
<div class="col-auto rounded"> <div class="col-auto rounded">
<div class="row h-100 dark-shadow rounded" id='armorTome4-dropdown'> <div class="row h-100 dark-shadow rounded" id='armorTome4-dropdown'>
<div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome4-img-loc"> <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome4-img-loc">
<div id="armorTome4-img" class="img-fluid rounded" style="background-image: url('../media/items/common.png'); image-rendering: pixelated; background-size: 500% 100%; background-position: 100% 0; aspect-ratio: 1/1;"></div> <div id="armorTome4-img" class="img-fluid rounded tome-image"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -764,7 +764,7 @@
<div class="col-auto rounded"> <div class="col-auto rounded">
<div class="row h-100 dark-shadow rounded" id='guildTome1-dropdown'> <div class="row h-100 dark-shadow rounded" id='guildTome1-dropdown'>
<div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="guildTome1-img-loc"> <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="guildTome1-img-loc">
<div id="guildTome1-img" class="img-fluid rounded" style="background-image: url('../media/items/common.png'); image-rendering: pixelated; background-size: 500% 100%; background-position: 100% 0; aspect-ratio: 1/1;"></div> <div id="guildTome1-img" class="img-fluid rounded tome-image"></div>
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">

13
css/sq2bs.css
View file

@ -460,3 +460,16 @@ a:hover {
.ferricles{ .ferricles{
color: #5be553; 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;
}

4
js/atree.js
View file

@ -1009,7 +1009,7 @@ function render_AT(UI_elem, list_elem, tree) {
// create node // create node
let node_elem = document.getElementById("atree-row-" + ability.display.row).children[ability.display.col]; 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); node_elem.appendChild(node_wrap.img);
// create hitbox // create hitbox
@ -1277,7 +1277,7 @@ const atreeNodeAtlasPositions = {
"node_assassin": 7, "node_assassin": 7,
"node_shaman": 8 "node_shaman": 8
} }
const atreeNodeAtlasSize = [17, 5] const atreeNodeAtlasSize = [9, 3]
function atlasBGPositionCalc(pos, atlasSize) { function atlasBGPositionCalc(pos, atlasSize) {
// https://css-tricks.com/focusing-background-image-precise-location-percentages/ // https://css-tricks.com/focusing-background-image-precise-location-percentages/
// p = (c + 0.5/z - 0.5) * z/(z - 1) + 0.5 // p = (c + 0.5/z - 0.5) * z/(z - 1) + 0.5

42
js/icons.js
View file

@ -1,39 +1,27 @@
//which icons to use
let window_storage = window.localStorage; let window_storage = window.localStorage;
console.log(window_storage);
icon_state_stored = window_storage.getItem("newicons");
newIcons = true; newIcons = true;
if (icon_state_stored === "false") {toggleIcons()} if (window_storage.getItem("newicons") === "false") {
toggleIcons();
}
/** Toggle icons on the ENTIRE page. /** Toggle icons on the ENTIRE page.
* *
*/ */
function toggleIcons() { function toggleIcons() {
newIcons = !newIcons; newIcons = !newIcons;
let imgs = document.getElementsByTagName("img"); window_storage.setItem("newicons", newIcons.toString());
let divs = document.getElementsByTagName("div"); let newOrOld = (newIcons ? "new" : "old");
let favicon = document.querySelector("link[rel~='icon']");
if (newIcons) { //switch to new let imgs = document.getElementsByTagName("img");
favicon.href = favicon.href.replace("media/icons/old","media/icons/new"); 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) { for (const img of imgs) {
if (img.src.includes("media/icons/old")) {img.src = img.src.replace("media/icons/old","media/icons/new");} // if doesn't contain, replace() does nothing
img.src = img.src.replace("media/icons/" + (newIcons ? "old" : "new"), "media/icons/" + newOrOld);
} }
for (const div of divs) { for (let i = 0; i < divs.length; i++) {
if (div.style.backgroundImage.includes("media/items/old")) {div.style.backgroundImage = div.style.backgroundImage.replace("media/items/old","media/items/new");} console.log(divs.item(i))
} divs.item(i).style.backgroundImage = "url('../media/items/" + (newIcons ? "new" : "old") + ".png')";
//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");
} }
} }

BIN
media/atree/icons.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB