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

atlas for item textures

Browse source
This commit is contained in:
fin444 2022-07-24 17:31:23 -04:00
parent de6108f187
commit a009e07587
52 changed files with 61 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
builder/index.html
View file

File diff suppressed because one or more lines are too long

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">
<img id="helmet-img" class="img-fluid rounded" src="../media/items/new/generic-helmet.png"> <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> </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">
<img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png"> <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> </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">
<img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png"> <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> </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">
<img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png"> <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> </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">
<img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png"> <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> </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">
<img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png"> <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> </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">
<img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png"> <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> </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">
<img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png"> <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> </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,7 +263,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='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">
<img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-dagger.png"> <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> </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">
@ -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">
<img id="weaponTome1-img" class="img-fluid rounded" src="../media/items/new/generic-weaponTome.png"> <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> </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">
<img id="weaponTome2-img" class="img-fluid rounded" src="../media/items/new/generic-weaponTome.png"> <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> </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">
<img id="armorTome1-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png"> <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> </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">
<img id="armorTome2-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png"> <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> </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">
<img id="armorTome3-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png"> <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> </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">
<img id="armorTome4-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png"> <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> </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">
<img id="guildTome1-img" class="img-fluid rounded" src="../media/items/new/generic-guildTome.png"> <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> </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">
@ -1262,7 +1262,7 @@
<script type="text/javascript" src="../js/utils.js"></script> <script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/build_utils.js"></script> <script type="text/javascript" src="../js/build_utils.js"></script>
<script type="text/javascript" src="../js/computation_graph.js"></script> <script type="text/javascript" src="../js/computation_graph.js"></script>
<script type="text/javascript" src="../js/sq2icons.js"></script> <script type="text/javascript" src="../js/icons.js"></script>
<script type="text/javascript" src="../js/powders.js"></script> <script type="text/javascript" src="../js/powders.js"></script>
<script type="text/javascript" src="../js/skillpoints.js"></script> <script type="text/javascript" src="../js/skillpoints.js"></script>
<script type="text/javascript" src="../js/damage_calc.js"></script> <script type="text/javascript" src="../js/damage_calc.js"></script>

4
crafter/index.html
View file

@ -39,7 +39,7 @@
<div class="col" id="recipe-dropdown"> <div class="col" id="recipe-dropdown">
<div class="row dark-shadow dark-5 rounded"> <div class="row dark-shadow dark-5 rounded">
<div id = "recipe-img-loc" class = "col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon"> <div id = "recipe-img-loc" class = "col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon">
<img id = "recipe-img" class = "img-fluid rounded Crafted-shadow" src = "../media/items/new/generic-potion.png"> <div id = "recipe-img" class = "img-fluid rounded Crafted-shadow" style = "background-image: url('../media/items/common.png'); image-rendering: pixelated; background-position: 25% 0; aspect-ratio: 1/1;"></div>
</div> </div>
<div class = "col ps-3"> <div class = "col ps-3">
<div class = "row row-cols-2 align-items-center"> <div class = "row row-cols-2 align-items-center">
@ -283,7 +283,7 @@
<script type="text/javascript" src="../js/query_2.js"></script> <script type="text/javascript" src="../js/query_2.js"></script>
<script type="text/javascript" src="../js/utils.js"></script> <script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/build_utils.js"></script> <script type="text/javascript" src="../js/build_utils.js"></script>
<script type="text/javascript" src="../js/sq2icons.js"></script> <script type="text/javascript" src="../js/icons.js"></script>
<script type="text/javascript" src="../js/powders.js"></script> <script type="text/javascript" src="../js/powders.js"></script>
<script type="text/javascript" src="../js/skillpoints.js"></script> <script type="text/javascript" src="../js/skillpoints.js"></script>
<script type="text/javascript" src="../js/damage_calc.js"></script> <script type="text/javascript" src="../js/damage_calc.js"></script>

2
dev/index.html
View file

@ -959,7 +959,7 @@
</div> --> </div> -->
</div> </div>
<script type="text/javascript" src="../js/dev.js"></script> <script type="text/javascript" src="../js/dev.js"></script>
<script type="text/javascript" src="../js/sq2icons.js"></script> <script type="text/javascript" src="../js/icons.js"></script>
</body> </body>
</html> </html>

2
items_adv/items_2_help.html
View file

@ -221,6 +221,6 @@
docsFns.append(genDocEntry(entry[0], entry[1], null, entry[2])); docsFns.append(genDocEntry(entry[0], entry[1], null, entry[2]));
} }
</script> </script>
<script type="text/javascript" src="../js/sq2icons.js"></script> <script type="text/javascript" src="../js/icons.js"></script>
</body> </body>
</html> </html>

3
js/builder_graph.js
View file

@ -307,7 +307,8 @@ class WeaponInputDisplayNode extends ComputeNode {
const [item] = input_map.values(); // Extract values, pattern match it into size one list and bind to first element const [item] = input_map.values(); // Extract values, pattern match it into size one list and bind to first element
const type = item.statMap.get('type'); const type = item.statMap.get('type');
this.image.setAttribute('src', '../media/items/new/generic-'+type+'.png'); this.image.style.backgroundPosition = itemBGPositions[type];
let dps = get_base_dps(item.statMap); let dps = get_base_dps(item.statMap);
if (isNaN(dps)) { if (isNaN(dps)) {
dps = dps[1]; dps = dps[1];

11
js/crafter.js
View file

@ -345,9 +345,16 @@ function toggleMaterial(buttonId) {
function updateCraftedImage() { function updateCraftedImage() {
let input = document.getElementById("recipe-choice"); let input = document.getElementById("recipe-choice");
if (all_types.includes(input.value)) { if (all_types.includes(input.value)) {
document.getElementById("recipe-img").src = "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + input.value.toLowerCase() + ".png"; let img = document.getElementById("recipe-img");
if (["potion", "scroll", "food"].includes(input.value.toLowerCase())) {
img.style.backgroundImage = "url('../media/items/common.png')";
img.style.backgroundSize = "500% 100%";
} else {
img.style.backgroundImage = "url('../media/items/" + (newIcons ? "new.png')" : "old.png')");
img.style.backgroundSize = "1200% 100%";
}
img.style.backgroundPosition = itemBGPositions[input.value.toLowerCase()]
} }
} }
/* Reset all fields /* Reset all fields

17
js/display.js
View file

@ -1,3 +1,7 @@
const itemBGPositions = {"bow": "0 0", "spear": "9.090909090909088% 0", "wand": "18.181818181818183% 0", "dagger": "27.27272727272727% 0", "relik": "36.36363636363637% 0",
"helmet": "45.45454545454546% 0", "chestplate": "54.54545454545454% 0", "leggings": "63.63636363636363% 0", "boots": "72.72727272727272% 0",
"ring": "81.81818181818181% 0", "bracelet": "90.90909090909092% 0", "necklace": "100% 0",
"potion": "25% 0", "scroll": "50% 0", "food": "75% 0"};
function apply_elemental_format(p_elem, id, suffix) { function apply_elemental_format(p_elem, id, suffix) {
suffix = (typeof suffix !== 'undefined') ? suffix : ""; suffix = (typeof suffix !== 'undefined') ? suffix : "";
@ -286,11 +290,18 @@ function displayExpandedItem(item, parent_id){
parent_div.appendChild(nolink_row); parent_div.appendChild(nolink_row);
if (item.has("type")) { if (item.has("type")) {
let img = make_elem("img", [], { let img = make_elem("div", [], {
src: "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png",
alt: item.get("type"), alt: item.get("type"),
style: " z=index: 1; position: relative;" style: "z-index: 1; position: relative; image-rendering: pixelated; width: 50%; height: 50%; background-position: " + itemBGPositions[item.get("type")] + ";"
}); });
if (["potion", "scroll", "food"].includes(item.get("type"))) {
img.style.backgroundImage = "url('../media/items/common.png')";
img.style.backgroundSize = "500% 100%";
} else {
img.style.backgroundImage = "url('../media/items/" + (newIcons ? "new.png')" : "old.png')");
img.style.backgroundSize = "1200% 100%";
}
let container = make_elem("div"); let container = make_elem("div");
let bckgrd = make_elem("div", ["col", "px-0", "d-flex", "align-items-center", "justify-content-center", 'scaled-bckgrd'], { // , "no-collapse" let bckgrd = make_elem("div", ["col", "px-0", "d-flex", "align-items-center", "justify-content-center", 'scaled-bckgrd'], { // , "no-collapse"

20
js/icons.js
View file

@ -1,33 +1,39 @@
//which icons to use //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"); icon_state_stored = window_storage.getItem("newicons");
newIcons = true; newIcons = true;
if (icon_state_stored === "false") {toggleIcons()} if (icon_state_stored === "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"); let imgs = document.getElementsByTagName("img");
let divs = document.getElementsByTagName("div");
let favicon = document.querySelector("link[rel~='icon']"); let favicon = document.querySelector("link[rel~='icon']");
let toggleiconbutton = document.getElementById("toggle-icon-button");
if (newIcons) { //switch to new if (newIcons) { //switch to new
favicon.href = favicon.href.replace("media/icons/old","media/icons/new"); favicon.href = favicon.href.replace("media/icons/old","media/icons/new");
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 (img.src.includes("media/icons/old")) {img.src = img.src.replace("media/icons/old","media/icons/new");}
if (img.src.includes("media/items/old")) {img.src = img.src.replace("media/items/old","media/items/new");}
} }
toggleiconbutton.textContent = "Use Old Icons"; 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"); window_storage.setItem("newicons","true");
} else { //switch to old } else { //switch to old
favicon.href = favicon.href.replace("media/icons/new","media/icons/old"); favicon.href = favicon.href.replace("media/icons/new","media/icons/old");
for (const img of imgs) { for (const img of imgs) {
if (img.src.includes("media/icons/new")) {img.src = img.src.replace("media/icons/new","media/icons/old");} if (img.src.includes("media/icons/new")) {img.src = img.src.replace("media/icons/new","media/icons/old");}
if (img.src.includes("media/items/new")) {img.src = img.src.replace("media/items/new","media/items/old");}
} }
toggleiconbutton.textContent = "Use New Icons"; 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"); window_storage.setItem("newicons","false");
} }
} }

34
js/sq2icons.js
View file

@ -1,34 +0,0 @@
//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()}
/** Toggle icons on the ENTIRE page.
*
*/
function toggleIcons() {
newIcons = !newIcons;
let imgs = document.getElementsByTagName("IMG");
let favicon = document.querySelector("link[rel~='icon']");
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");}
if (img.src.includes("media/items/old")) {img.src = img.src.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");}
if (img.src.includes("media/items/new")) {img.src = img.src.replace("media/items/new","media/items/old");}
}
//toggleiconbutton.textContent = "Use New Icons";
window_storage.setItem("newicons","false");
}
}

BIN
media/items/common.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 988 B

BIN
media/items/new.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
media/items/new/generic-armorTome.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
media/items/new/generic-boots.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
media/items/new/generic-bow.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3 KiB

BIN
media/items/new/generic-bracelet.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
media/items/new/generic-chestplate.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
media/items/new/generic-dagger.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
media/items/new/generic-food.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 521 B

BIN
media/items/new/generic-guildTome.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
media/items/new/generic-helmet.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
media/items/new/generic-leggings.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
media/items/new/generic-necklace.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
media/items/new/generic-potion.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 308 B

BIN
media/items/new/generic-relik.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
media/items/new/generic-ring.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
media/items/new/generic-scroll.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 324 B

BIN
media/items/new/generic-spear.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
media/items/new/generic-sword.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 345 B

BIN
media/items/new/generic-wand.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
media/items/new/generic-weaponTome.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
media/items/new/palette.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 223 B

BIN
media/items/old.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
media/items/old/generic-armorTome.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
media/items/old/generic-boots.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 418 B

BIN
media/items/old/generic-bow.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 588 B

BIN
media/items/old/generic-bracelet.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 677 B

BIN
media/items/old/generic-chestplate.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 484 B

BIN
media/items/old/generic-dagger.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 559 B

BIN
media/items/old/generic-food.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 930 B

BIN
media/items/old/generic-guildTome.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
media/items/old/generic-helmet.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 395 B

BIN
media/items/old/generic-leggings.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 411 B

BIN
media/items/old/generic-necklace.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 682 B

BIN
media/items/old/generic-potion.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 650 B

BIN
media/items/old/generic-relik.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 713 B

BIN
media/items/old/generic-ring.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 622 B

BIN
media/items/old/generic-scroll.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 705 B

BIN
media/items/old/generic-spear.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 596 B

BIN
media/items/old/generic-sword.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 828 B

BIN
media/items/old/generic-wand.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 568 B

BIN
media/items/old/generic-weaponTome.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.8 KiB