From 23499b59dee02cf236fbc20e0db9bf48e3b5fdd9 Mon Sep 17 00:00:00 2001
From: reschan <49411618+reschan@users.noreply.github.com>
Date: Tue, 16 Aug 2022 22:03:16 +0700
Subject: [PATCH] fix equipment box awkward sizing (#209)

* fix equipment box awkward sizing

* minify index.html

Co-authored-by: reschan <h>
---
 builder/index.html      |  2 +-
 builder/index_full.html | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/builder/index.html b/builder/index.html
index 94a8230..e7ce36c 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -1,2 +1,2 @@
 <!-- NOTE: unminified html is in builder/index_full.html-->
-<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <meta name="HandheldFriendly" content="true"/> <meta name="MobileOptimized" content="320"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no"/> <title>WynnBuilder</title> <link rel="icon" href="../media/icons/new/builder.png" type="image/icon type"> <meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css"> <link rel="stylesheet" href="../css/sq2bs.css"> <link rel="stylesheet" href="../css/sidebar.css"> <link rel="stylesheet" href="../css/wynnstyles.css"></head><body class="text-light" id="body"> <div id="main-sidebar" class="sidebar dark-7 dark-shadow"> <a href=""><img src="../media/icons/new/builder.png" alt="WynnBuilder" title="WynnBuilder"><b>WynnBuilder</b></a> <a href="../crafter/"><img src="../media/icons/new/crafter.png" alt="WynnCrafter" title="WynnCrafter"><b>WynnCrafter</b></a> <a href="../items/"><img src="../media/icons/new/searcher.png" alt="WynnAtlas" title="WynnAtlas"><b>WynnAtlas</b></a> <a href="../custom/"><img src="../media/icons/new/custom.png" alt="WynnCustom" title="WynnCustom"><b>WynnCustom</b></a> <a href="../map/"><img src="../media/icons/new/compass.png" alt="WynnGPS" title="WynnGPS"><b>WynnGPS</b></a> <a href="../wynnfo/"><img src="../media/icons/new/book.png" alt="Wynnfo" title="Wynnfo"><b>Wynnfo</b></a> <a onclick="toggleIcons()"><img src="../media/icons/new/reload.png" alt="" title="Swap items on page"><b>Swap Icon Style</b></a> <hr/> <a href="https://discord.gg/CGavnAnerv" target="_blank"><img src="../media/icons/discord.png" alt="WB Discord" title="WB Discord"><b>WB Discord</b></a> </div><div id="mobile-navbar" class="navbar dark-5 dark-shadow fixed-top d-lg-none pb-0"> <div class="container-fluid scaled-font justify-content-center" style="height: 5vh;"> <div class="navbar-brand mx-auto scaled-font" style="height: 100%;"> <img src="../media/icons/new/builder.png" alt="" style="height: 100%;"> <span>WynnBuilder</span> </div><button class="btn dropdown-toggle dark-2 px-4 text-white scaled-font border-dark border-3" onclick="toggle_tab('mobile-navbar-dropdown');"></button> </div><div class="container-fluid scaled-font dark-3 px-3 py-3" id="mobile-navbar-dropdown" style="display: none;"> <a href="../builder/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/builder.png" alt="" style="height: 100%;"> <span>WynnBuilder</span> </a> <a href="../crafter/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/crafter.png" alt="" style="height: 100%;"> <span>WynnCrafter</span> </a> <a href="../items/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/searcher.png" alt="" style="height: 100%;"> <span>WynnAtlas</span> </a> <a href="../custom/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/custom.png" alt="" style="height: 100%;"> <span>WynnCustom</span> </a> <a href="../map/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/compass.png" alt="" style="height: 100%;"> <span>WynnGPS</span> </a> <a href="../wynnfo/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/book.png" alt="" style="height: 100%;"> <span>WynnFo</span> </a> <a onclick="toggleIcons()" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/reload.png" alt="" style="height: 100%;"> <span>Swap Icon Style</span> </a> <a href="https://discord.gg/CGavnAnerv" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/discord.png" alt="" style="height: 100%;"> <span>Discord</span> </a> </div></div><div class="container-fluid overall-box mt-lg-2" style="margin-top: 6vh;"> <div class="row scaled-font mx-auto" id="discord-banner-dev"> <div class="col text-center item-title">Join the <a class="link" href="https://discord.gg/CGavnAnerv" target="_blank">discord</a> today to suggest new features, submit bug reports, and hangout/talk to devs!</div></div><div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3 gx-0"> <div class="col-xl-6"> <div class="row my-2 dark-6 rounded text-center g-0 px-3 d-flex d-lg-none"> <div class="col"> <p class="fake-button scaled-font mb-0 selected-btn" id="equipment-inputs-btn" onclick="show_tab('equipment-inputs', ['equipment-inputs', 'adjust-id'])">Equipments</p></div><div class="col"> <p class="fake-button scaled-font mb-0" id="adjust-id-btn" onclick="show_tab('adjust-id', ['equipment-inputs', 'adjust-id'])">Ability Tree</p></div></div><div class="row row-cols-1 mb-3 gy-4" id="equipment-inputs"> <div class="col"> <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 justify-content-center equipment-input rounded gy-3 gy-lg-0 mt-auto"> <div class="col-auto rounded order-xl-0 order-0 my-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="helmet-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="helmet-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/> </div></div></div></div></div><div class="col-auto order-xl-0 order-1 my-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring1-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring1-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end" style="height: 100%;"> </div></div></div></div></div><div class="col-auto order-xl-0 order-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="chestplate-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="chestplate-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/> </div></div></div></div></div><div class="col-auto order-xl-0 order-1"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring2-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring2-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end" style="height: 100%;"> </div></div></div></div></div><div class="col-auto order-xl-0 order-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="leggings-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="leggings-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders" tabindex="1"/> </div></div></div></div></div><div class="col-auto order-xl-0 order-1"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="bracelet-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="bracelet-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end" style="height: 100%;"> </div></div></div></div></div><div class="col-auto order-xl-0 order-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="boots-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="boots-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/> </div></div></div></div></div><div class="col-auto order-xl-0 order-1"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="necklace-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="necklace-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end" style="height: 100%;"> </div></div></div></div></div><div class="col-auto order-xl-0 order-1"> <div class="row h-auto px-1" 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 id="weapon-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png');"></div></div><div class="col-3"> <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"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="weapon-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/> </div></div></div></div></div><div class="col-auto order-xl-0 order-1 level-input"> <div class="row h-100 px-1"> <div class="col"> <div class="row align-items-center justify-content-left"> <div class="col-auto text-nowrap fw-bold scaled-font"> Level: </div><div class="col d-flex px-1"> <input class="equipment-input text-light form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/> </div><div class="col-auto px-1 scaled-font"> <button class="button py-0 fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="resetFields()">Reset</button> </div></div><div class="row align-items-left justify-content-left my-1"> <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=copy-button onclick="copyBuild()">Copy short</button> <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=share-button onclick="shareBuild(player_build)">Copy for sharing</button> </div></div></div></div></div></div><div class="col"> <div class="row row-cols-1 gy-2 rounded dark-5 dark-shadow"> <div class="col"> <div class="row row-cols-2 row-cols-xl-5 gy-2 justify-content-center"> <div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="str-skp" class="eDam skp-tooltip">Strength</label> <input type="string" id="str-skp" name="str-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="str-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="str-skp-base" class="skp-tooltip"> Original: 0 </div><div id="str-skp-pct" class="skp-tooltip"> </div></div></div><div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="dex-skp" class="tDam skp-tooltip">Dexterity</label> <input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="dex-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="dex-skp-base" class="skp-tooltip"> Original: 0 </div><div id="dex-skp-pct" class="skp-tooltip"> </div></div></div><div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="int-skp" class="wDam skp-tooltip text-nowrap">Intelligence</label> <input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="int-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="int-skp-base" class="skp-tooltip"> Original: 0 </div><div id="int-skp-pct" class="skp-tooltip"> </div></div></div><div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="def-skp" class="fDam skp-tooltip">Defense</label> <input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="def-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="def-skp-base" class="skp-tooltip"> Original: 0 </div><div id="def-skp-pct" class="skp-tooltip"> </div></div></div><div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="agi-skp" class="aDam skp-tooltip">Agility</label> <input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="agi-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="agi-skp-base" class="skp-tooltip"> Original: 0 </div><div id="agi-skp-pct" class="skp-tooltip"> </div></div></div></div></div><div class="col text-center py-1"> <div id="summary-box"></div><div id="err-box"></div><div id="stack-box"></div><div id="str-warnings"></div><div id="dex-warnings"></div><div id="int-warnings"></div><div id="def-warnings"></div><div id="agi-warnings"></div></div></div></div><div class="col mb-1 text-center scaled-font dark-5 rounded dark-shadow"> <div class="row row-cols-1 justify-content-center"> <div class="col fw-bold dark-4 rounded-top"> Active boosts </div><div class="col"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="update_boosts('warscream-boost')"> War Scream </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="ragnarokkr-boost" onclick="update_boosts('ragnarokkr-boost')"> Ragnarokkr (+30%) </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="totem-boost" onclick="update_boosts('totem-boost')"> Vengeful Spirit (+20%) </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="fortitude-boost" onclick="update_boosts('fortitude-boost')"> Fortitude (+60%) </button> </div><div class="col" id="boost-toggles"> </div></div><div class="row row-cols-1 justify-content-center" id="boost-sliders"> </div></div><div class="col mb-1"> <div class="row row-cols-1 rounded text-center dark-5 scaled-font"> <div class="row p-0 m-0 text-nowrap"> <div id="str-boost-btn" class="col eDam dark-4u fake-button elem-boost" onclick="show_tab('str-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Earth </div><div id="dex-boost-btn" class="col tDam dark-4u fake-button elem-boost" onclick="show_tab('dex-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Thunder </div><div id="int-boost-btn" class="col wDam dark-4u fake-button elem-boost" onclick="show_tab('int-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Water </div><div id="def-boost-btn" class="col fDam dark-4u fake-button elem-boost" onclick="show_tab('def-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Fire </div><div id="agi-boost-btn" class="col aDam dark-4u fake-button elem-boost" onclick="show_tab('agi-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Air </div></div><div class="row row-cols-1 p-0 m-0" id="str-boost" style="display: none;"> <div class="col eDam dark-5"> Quake (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1" > <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-1" onclick="updatePowderSpecials('Quake-1')"> Lv.4 [e4e4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-2" onclick="updatePowderSpecials('Quake-2')"> Lv.4.5 [e5e4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-3" onclick="updatePowderSpecials('Quake-3')"> Lv.5 [e5e5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-4" onclick="updatePowderSpecials('Quake-4')"> Lv.5.5 [e6e5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-5" onclick="updatePowderSpecials('Quake-5')"> Lv.6 [e6e6] </button> </div><div class="col eDam"> Rage (Passive) </div></div><div class="row row-cols-1 p-0 m-0" id="dex-boost" style="display: none;"> <div class="col tDam dark-5"> Chain Lightning (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-1" onclick="updatePowderSpecials('Chain_Lightning-1')"> Lv.4 [t4t4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-2" onclick="updatePowderSpecials('Chain_Lightning-2')"> Lv.4.5 [t5t4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-3" onclick="updatePowderSpecials('Chain_Lightning-3')"> Lv.5 [t5t5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-4" onclick="updatePowderSpecials('Chain_Lightning-4')"> Lv.5.5 [t6t5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-5" onclick="updatePowderSpecials('Chain_Lightning-5')"> Lv.6 [t6t6] </button> </div><div class="col tDam"> Kill Streak (Passive) </div></div><div class="row row-cols-1 p-0 m-0" id="int-boost"> <div class="col wDam dark-5"> Curse (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-1" onclick="updatePowderSpecials('Curse-1')"> Lv.4 [w4w4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-2" onclick="updatePowderSpecials('Curse-2')"> Lv.4.5 [w5w4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-3" onclick="updatePowderSpecials('Curse-3')"> Lv.5 [w5w5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-4" onclick="updatePowderSpecials('Curse-4')"> Lv.5.5 [w6w5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-5" onclick="updatePowderSpecials('Curse-5')"> Lv.6 [w6w6] </button> </div><div class="col wDam"> Concentration (Passive) </div></div><div class="row row-cols-1 p-0 m-0" id="def-boost" style="display: none;"> <div class="col fDam dark-5"> Courage (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-1" onclick="updatePowderSpecials('Courage-1')"> Lv.4 [f4f4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-2" onclick="updatePowderSpecials('Courage-2')"> Lv.4.5 [f5f4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-3" onclick="updatePowderSpecials('Courage-3')"> Lv.5 [f5f5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-4" onclick="updatePowderSpecials('Courage-4')"> Lv.5.5 [f6f5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-5" onclick="updatePowderSpecials('Courage-5')"> Lv.6 [f6f6] </button> </div><div class="col fDam"> Endurance (Passive) </div></div><div class="row row-cols-1 p-0 m-0" id="agi-boost" style="display: none;"> <div class="col aDam dark-5"> Wind Prison (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-1" onclick="updatePowderSpecials('Wind_Prison-1')"> Lv.4 [a4a4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-2" onclick="updatePowderSpecials('Wind_Prison-2')"> Lv.4.5 [a5a4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-3" onclick="updatePowderSpecials('Wind_Prison-3')"> Lv.5 [a5a5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-4" onclick="updatePowderSpecials('Wind_Prison-4')"> Lv.5.5 [a6a5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-5" onclick="updatePowderSpecials('Wind_Prison-5')"> Lv.6 [a6a6] </button> </div><div class="col aDam"> Dodge (Passive) </div></div></div></div></div><div class="row row-cols-1 d-lg-flex" id="adjust-id" style="display: none;"> <div class="col"> <div class="row row-cols-1 gy-3"> <div class="col mb-1"> <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow"> <div class="col fw-bold dark-4 rounded-top"> <div class="row"> <div class="col-3 py-2"> <button class="col-auto button rounded scaled-font fw-bold text-light dark-5" id="toggle-tomes" onclick="toggle_tab('tomes-dropdown'); toggleButton('toggle-tomes')"> Show Tomes </button> </div><div class="col-3 py-2"> <button class="col-auto button rounded scaled-font fw-bold text-light dark-5" id="toggle-atree" onclick="toggle_tab('atree-dropdown'); toggleButton('toggle-atree')"> Edit Abilities </button> </div><div class="col-3 py-2"> <button class="button rounded scaled-font fw-bold text-light dark-5" id="edit-ID-button" onclick="toggle_tab('edit_id_tab'); toggleButton('edit-ID-button')"> Edit IDs </button> </div><div class="col-3 py-2"> <button class="button rounded scaled-font fw-bold text-light dark-5" id="edit-ID-button" onclick="resetEditableIDs();"> Reset Edited IDs </button> </div></div></div><div class="col dark-6 rounded-bottom my-3 my-xl-1" id="tomes-dropdown" style="display: none;"> <div class="row h-100 row-cols-1 row-cols-xl-2 gy-2 rounded"> <div class="col-auto rounded"> <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 id="weaponTome1-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Weapon </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome1-choice" name="weaponTome1-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="weaponTome2-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Weapon </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome2-choice" name="weaponTome2-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="armorTome1-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Armor </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome1-choice" name="armorTome1-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="armorTome2-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Armor </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome2-choice" name="armorTome2-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="armorTome3-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Armor </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome3-choice" name="armorTome3-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="armorTome4-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Armor </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome4-choice" name="armorTome4-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="guildTome1-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Guild </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="guildTome1-choice" name="guildTome1-choice" placeholder="No Tome" value=""/> </div></div></div></div></div></div></div><div class="col dark-6 rounded-bottom my-3 my-xl-1" id="atree-dropdown" style="display:none;"> <div class="row row-cols-1 row-cols-xl-2"> <div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 90vh; overflow-y: auto;"> </div><div class="col mx-auto" style="height: 90vh; overflow-y: auto;" id="atree-rhs"> <div class="col mx-auto" style="height: 2em; overflow-y: auto;" id="atree-header"> </div><div class="col mx-auto" style="" id="atree-warning"> </div><div class="col mx-auto" style="overflow-y: auto;" id="atree-active"> </div></div></div></div><div class="col dark-6 rounded-bottom my-3 my-xl-1" id="edit_id_tab" style="display:none;"> <div class="row big-title justify-content-center"> Damage Stats </div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row"> Spell Damage %: </div><div class="row"> <input type="number" placeholder="0" id="sdPct" name="sdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="sdPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Spell Damage Raw: </div><div class="row"> <input type="number" placeholder="0" id="sdRaw" name="sdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="sdRaw-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Melee Damage %: </div><div class="row"> <input type="number" placeholder="0" id="mdPct" name="mdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="mdPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Melee Damage Raw: </div><div class="row"> <input type="number" placeholder="0" id="mdRaw" name="mdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="mdRaw-base"> Original Value: 0 </div></div></div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row"> Poison: </div><div class="row"> <input type="number" placeholder="0" id="poison" name="poison" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="poison-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row eDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="eDamPct" name="eDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="eDamPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row tDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="tDamPct" name="tDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="tDamPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row wDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="wDamPct" name="wDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="wDamPct-base"> Original Value: 0 </div></div></div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row fDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="fDamPct" name="fDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="fDamPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row aDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="aDamPct" name="aDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="aDamPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> + Tier: </div><div class="row"> <input type="number" placeholder="0" id="atkTier" name="atkTier" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="atkTier-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> </div></div><div class="row big-title justify-content-center"> Defense Stats </div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row Earth"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="eDefPct" name="eDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="eDefPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row Thunder"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="tDefPct" name="tDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="tDefPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row Water"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="wDefPct" name="wDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="wDefPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row Fire"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="fDefPct" name="fDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="fDefPct-base"> Original Value: 0 </div></div></div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row Air"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="aDefPct" name="aDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="aDefPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Health Regen Raw: </div><div class="row"> <input type="number" placeholder="0" id="hprRaw" name="hprRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="hprRaw-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Health Regen %: </div><div class="row"> <input type="number" placeholder="0" id="hprPct" name="hprPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="hprPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Health Bonus: </div><div class="row"> <input type="number" placeholder="0" id="hpBonus" name="hpBonus" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="hpBonus-base"> Original Value: 0 </div></div></div><div class="row big-title justify-content-center"> Utility Stats </div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row"> 1st Spell Cost %: </div><div class="row"> <input type="number" placeholder="0" id="spPct1" name="spPct1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spPct1-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 2nd Spell Cost %: </div><div class="row"> <input type="number" placeholder="0" id="spPct2" name="spPct2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spPct2-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 3rd Spell Cost %: </div><div class="row"> <input type="number" placeholder="0" id="spPct3" name="spPct3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spPct3-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 4th Spell Cost %: </div><div class="row"> <input type="number" placeholder="0" id="spPct4" name="spPct4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spPct4-base"> Original Value: 0 </div></div></div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row"> 1st Spell Cost Raw: </div><div class="row"> <input type="number" placeholder="0" id="spRaw1" name="spRaw1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spRaw1-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 2nd Spell Cost Raw: </div><div class="row"> <input type="number" placeholder="0" id="spRaw2" name="spRaw2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spRaw2-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 3rd Spell Cost Raw: </div><div class="row"> <input type="number" placeholder="0" id="spRaw3" name="spRaw3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spRaw3-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 4th Spell Cost Raw: </div><div class="row"> <input type="number" placeholder="0" id="spRaw4" name="spRaw4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spRaw4-base"> Original Value: 0 </div></div></div></div></div></div></div></div></div></div><div class="col-xl-3 mb-3 order-2 order-lg-0"> <div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font"> <div class="col rounded-top"> <div class="row"> <div id="detailed-stats-btn" class="col text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('detailed-stats', ['detailed-stats', 'summary-stats'])"> Detailed </div><div id="summary-stats-btn" class="col text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7 selected-btn" onclick="show_tab('summary-stats', ['detailed-stats', 'summary-stats'])"> Summary </div></div></div><div style="display: none;" id="detailed-stats" class="col text-nowrap"></div><div id="summary-stats" class="col text-nowrap"></div></div></div><div class="col-xl-3 mb-3 px-0"> <div id="all-spells-display" class="row row-cols-1 gy-3 mb-4 text-center scaled-font"> <div class="col pe-0"> <div class="col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">Input a weapon to see abilities!</div></div></div><div class="row row-cols-1 gy-3 mb-4 text-center scaled-font" id="build-poison-stats" style="display: none"> </div><div class="row row-cols-1 gy-3 mb-4 text-center scaled-font"> <div class="col pe-0"> <div class="col pe-0 spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="powder-special-stats"></div></div></div></div></div><div class="row mx-2 mx-lg-3"> <div class="col" id="masonry-container"> <div id="helmet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="chestplate-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="leggings-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="boots-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="ring1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="ring2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="bracelet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="necklace-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id="build-order"> </div><div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id="set-info"></div></div></div><div class="row mx-2 mx-lg-3"> <div class="col-12 dark-5 scaled-font"> <footer class="text-center"> <div id="header2"> <p>Made by <b class="hppeng">hppeng</b>, <b class="ferricles">ferricles</b>, and <b>reschan</b> with <a href="../atlas" target="_blank" class="atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p><p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p></div><div id="credits"> <a href="../credits.txt" class="link">Additional credits</a> </div></footer> </div></div></div><div class="container h-75 mx-0 mx-lg-auto dark-2 border border-4 scaled-font align-self-center" style="position: fixed; z-index: 2000; overflow: auto; display: none;" id="search-container"> <div class="row justify-content-end"> <div class="col-auto"> <button type="button" class="btn-close btn-close-white" aria-label="Close" onclick="document.querySelector('#search-container').style.display='none';"></button> </div></div><div class="row row-cols-1 justify-content-center"> <div class="col-10 dark-5 p-2 dark-shadow rounded-top"> <div class="row row-cols-1 row-cols-xl-4 justify-content-center mb-1"> <div class="col-auto"> <label for="item-name-choice">Name:</label> <input class="search-field" type="text" id="item-name-choice" name="item-name-choice" placeholder="Name" oninput="doSearchSchedule();"/> </div><div class="col-auto"> <label for="item-category-choice">Category:</label> <input class="search-field" id="item-category-choice" name="item-category-choice" placeholder="Category"/> </div><div class="col-auto"> <label for="item-rarity-choice">Rarity:</label> <input class="search-field" id="item-rarity-choice" name="item-rarity-choice" placeholder="Rarity"/> </div><div class="col-auto"> <label for="item-level-choice">Level:</label> <input class="search-field" type="text" id="item-level-choice" name="item-level-choice" placeholder="1-106"/> </div></div><div class="row row-cols-1 row-cols-xl-4 justify-content-center my-1"> <div class="col-auto" id="filter1-dropdown"> <label for="filter1-choice">Filter 1:</label> <input class="search-field" list="filter-items" id="filter1-choice" name="filter1-choice" placeholder=""/> </div><div class="col-auto" id="filter2-dropdown"> <label for="filter2-choice">Filter 2:</label> <input class="search-field" list="filter-items" id="filter2-choice" name="filter2-choice" placeholder=""/> </div><div class="col-auto" id="filter3-dropdown"> <label for="filter3-choice">Filter 3:</label> <input class="search-field" list="filter-items" id="filter3-choice" name="filter3-choice" placeholder=""/> </div><div class="col-auto" id="filter4-dropdown"> <label for="filter4-choice">Filter 4:</label> <input class="search-field" list="filter-items" id="filter4-choice" name="filter4-choice" placeholder=""/> </div></div><div class="row box-title justify-content-center my-1" id="summary"> </div><div class="row" id="search-results"> </div></div></div></div><script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/macy@2"></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/computation_graph.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/skillpoints.js"></script> <script type="text/javascript" src="../js/damage_calc.js"></script> <script type="text/javascript" src="../js/display_constants.js"></script> <script type="text/javascript" src="../js/display.js"></script> <script type="text/javascript" src="../js/load.js"></script> <script type="text/javascript" src="../js/load_ing.js"></script> <script type="text/javascript" src="../js/load_tome.js"></script> <script type="text/javascript" src="../js/custom.js"></script> <script type="text/javascript" src="../js/craft.js"></script> <script type="text/javascript" src="../js/builder/atree_constants_min.js"></script> <script type="text/javascript" src="../js/builder/build.js"></script> <script type="text/javascript" src="../js/builder/builder_constants.js"></script> <script type="text/javascript" src="../js/builder/build_encode_decode.js"></script> <script type="text/javascript" src="../js/builder/atree.js"></script> <script type="text/javascript" src="../js/builder/builder.js"></script> <script type="text/javascript" src="../js/builder/builder_graph.js"></script> </body></html> 
+<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <meta name="HandheldFriendly" content="true"/> <meta name="MobileOptimized" content="320"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no"/> <title>WynnBuilder</title> <link rel="icon" href="../media/icons/new/builder.png" type="image/icon type"> <meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css"> <link rel="stylesheet" href="../css/sq2bs.css"> <link rel="stylesheet" href="../css/sidebar.css"> <link rel="stylesheet" href="../css/wynnstyles.css"></head><body class="text-light" id="body"> <div id="main-sidebar" class="sidebar dark-7 dark-shadow"> <a href=""><img src="../media/icons/new/builder.png" alt="WynnBuilder" title="WynnBuilder"><b>WynnBuilder</b></a> <a href="../crafter/"><img src="../media/icons/new/crafter.png" alt="WynnCrafter" title="WynnCrafter"><b>WynnCrafter</b></a> <a href="../items/"><img src="../media/icons/new/searcher.png" alt="WynnAtlas" title="WynnAtlas"><b>WynnAtlas</b></a> <a href="../custom/"><img src="../media/icons/new/custom.png" alt="WynnCustom" title="WynnCustom"><b>WynnCustom</b></a> <a href="../map/"><img src="../media/icons/new/compass.png" alt="WynnGPS" title="WynnGPS"><b>WynnGPS</b></a> <a href="../wynnfo/"><img src="../media/icons/new/book.png" alt="Wynnfo" title="Wynnfo"><b>Wynnfo</b></a> <a onclick="toggleIcons()"><img src="../media/icons/new/reload.png" alt="" title="Swap items on page"><b>Swap Icon Style</b></a> <hr/> <a href="https://discord.gg/CGavnAnerv" target="_blank"><img src="../media/icons/discord.png" alt="WB Discord" title="WB Discord"><b>WB Discord</b></a> </div><div id="mobile-navbar" class="navbar dark-5 dark-shadow fixed-top d-lg-none pb-0"> <div class="container-fluid scaled-font justify-content-center" style="height: 5vh;"> <div class="navbar-brand mx-auto scaled-font" style="height: 100%;"> <img src="../media/icons/new/builder.png" alt="" style="height: 100%;"> <span>WynnBuilder</span> </div><button class="btn dropdown-toggle dark-2 px-4 text-white scaled-font border-dark border-3" onclick="toggle_tab('mobile-navbar-dropdown');"></button> </div><div class="container-fluid scaled-font dark-3 px-3 py-3" id="mobile-navbar-dropdown" style="display: none;"> <a href="../builder/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/builder.png" alt="" style="height: 100%;"> <span>WynnBuilder</span> </a> <a href="../crafter/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/crafter.png" alt="" style="height: 100%;"> <span>WynnCrafter</span> </a> <a href="../items/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/searcher.png" alt="" style="height: 100%;"> <span>WynnAtlas</span> </a> <a href="../custom/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/custom.png" alt="" style="height: 100%;"> <span>WynnCustom</span> </a> <a href="../map/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/compass.png" alt="" style="height: 100%;"> <span>WynnGPS</span> </a> <a href="../wynnfo/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/book.png" alt="" style="height: 100%;"> <span>WynnFo</span> </a> <a onclick="toggleIcons()" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/new/reload.png" alt="" style="height: 100%;"> <span>Swap Icon Style</span> </a> <a href="https://discord.gg/CGavnAnerv" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;"> <img src="../media/icons/discord.png" alt="" style="height: 100%;"> <span>Discord</span> </a> </div></div><div class="container-fluid overall-box mt-lg-2" style="margin-top: 6vh;"> <div class="row scaled-font mx-auto" id="discord-banner-dev"> <div class="col text-center item-title">Join the <a class="link" href="https://discord.gg/CGavnAnerv" target="_blank">discord</a> today to suggest new features, submit bug reports, and hangout/talk to devs!</div></div><div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3 gx-0"> <div class="col-xl-6"> <div class="row my-2 dark-6 rounded text-center g-0 px-3 d-flex d-lg-none"> <div class="col"> <p class="fake-button scaled-font mb-0 selected-btn" id="equipment-inputs-btn" onclick="show_tab('equipment-inputs', ['equipment-inputs', 'adjust-id'])">Equipments</p></div><div class="col"> <p class="fake-button scaled-font mb-0" id="adjust-id-btn" onclick="show_tab('adjust-id', ['equipment-inputs', 'adjust-id'])">Ability Tree</p></div></div><div class="row row-cols-1 mb-3 gy-4" id="equipment-inputs"> <div class="col"> <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 justify-content-center equipment-input rounded gy-3 gy-lg-0 mt-auto"> <div class="col rounded order-xl-0 order-0 my-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="helmet-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="helmet-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/> </div></div></div></div></div><div class="col order-xl-0 order-1 my-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring1-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring1-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end" style="height: 100%;"> </div></div></div></div></div><div class="col order-xl-0 order-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="chestplate-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="chestplate-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/> </div></div></div></div></div><div class="col order-xl-0 order-1"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring2-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring2-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end" style="height: 100%;"> </div></div></div></div></div><div class="col order-xl-0 order-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="leggings-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="leggings-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders" tabindex="1"/> </div></div></div></div></div><div class="col order-xl-0 order-1"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="bracelet-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="bracelet-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end" style="height: 100%;"> </div></div></div></div></div><div class="col order-xl-0 order-0"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="boots-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="boots-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/> </div></div></div></div></div><div class="col order-xl-0 order-1"> <div class="row h-100 px-1" 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 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 class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="necklace-health"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="necklace-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end" style="height: 100%;"> </div></div></div></div></div><div class="col order-xl-0 order-1"> <div class="row h-auto px-1" 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 id="weapon-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png');"></div></div><div class="col-3"> <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"> 0 </div><div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="weapon-lv"> 0 </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/> </div><div class="col d-flex justify-content-end"> <input class="equipment-input text-light form-control" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/> </div></div></div></div></div><div class="col order-xl-0 order-1 level-input"> <div class="row h-100 px-1"> <div class="col"> <div class="row align-items-center justify-content-left"> <div class="col-auto text-nowrap fw-bold scaled-font"> Level: </div><div class="col d-flex px-1"> <input class="equipment-input text-light form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/> </div><div class="col-auto px-1 scaled-font"> <button class="button py-0 fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="resetFields()">Reset</button> </div></div><div class="row align-items-left justify-content-left my-1"> <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=copy-button onclick="copyBuild()">Copy short</button> <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=share-button onclick="shareBuild(player_build)">Copy for sharing</button> </div></div></div></div></div></div><div class="col"> <div class="row row-cols-1 gy-2 rounded dark-5 dark-shadow"> <div class="col"> <div class="row row-cols-2 row-cols-xl-5 gy-2 justify-content-center"> <div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="str-skp" class="eDam skp-tooltip">Strength</label> <input type="string" id="str-skp" name="str-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="str-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="str-skp-base" class="skp-tooltip"> Original: 0 </div><div id="str-skp-pct" class="skp-tooltip"> </div></div></div><div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="dex-skp" class="tDam skp-tooltip">Dexterity</label> <input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="dex-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="dex-skp-base" class="skp-tooltip"> Original: 0 </div><div id="dex-skp-pct" class="skp-tooltip"> </div></div></div><div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="int-skp" class="wDam skp-tooltip text-nowrap">Intelligence</label> <input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="int-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="int-skp-base" class="skp-tooltip"> Original: 0 </div><div id="int-skp-pct" class="skp-tooltip"> </div></div></div><div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="def-skp" class="fDam skp-tooltip">Defense</label> <input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="def-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="def-skp-base" class="skp-tooltip"> Original: 0 </div><div id="def-skp-pct" class="skp-tooltip"> </div></div></div><div class="col text-center gx-2"> <div class="rounded dark-6 dark-shadow-sm px-2"> <label for="agi-skp" class="aDam skp-tooltip">Agility</label> <input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <div id="agi-skp-assign" class="skp-tooltip"> Assign: 0 </div><div id="agi-skp-base" class="skp-tooltip"> Original: 0 </div><div id="agi-skp-pct" class="skp-tooltip"> </div></div></div></div></div><div class="col text-center py-1"> <div id="summary-box"></div><div id="err-box"></div><div id="stack-box"></div><div id="str-warnings"></div><div id="dex-warnings"></div><div id="int-warnings"></div><div id="def-warnings"></div><div id="agi-warnings"></div></div></div></div><div class="col mb-1 text-center scaled-font dark-5 rounded dark-shadow"> <div class="row row-cols-1 justify-content-center"> <div class="col fw-bold dark-4 rounded-top"> Active boosts </div><div class="col"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="update_boosts('warscream-boost')"> War Scream </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="ragnarokkr-boost" onclick="update_boosts('ragnarokkr-boost')"> Ragnarokkr (+30%) </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="totem-boost" onclick="update_boosts('totem-boost')"> Vengeful Spirit (+20%) </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="fortitude-boost" onclick="update_boosts('fortitude-boost')"> Fortitude (+60%) </button> </div><div class="col" id="boost-toggles"> </div></div><div class="row row-cols-1 justify-content-center" id="boost-sliders"> </div></div><div class="col mb-1"> <div class="row row-cols-1 rounded text-center dark-5 scaled-font"> <div class="row p-0 m-0 text-nowrap"> <div id="str-boost-btn" class="col eDam dark-4u fake-button elem-boost" onclick="show_tab('str-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Earth </div><div id="dex-boost-btn" class="col tDam dark-4u fake-button elem-boost" onclick="show_tab('dex-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Thunder </div><div id="int-boost-btn" class="col wDam dark-4u fake-button elem-boost" onclick="show_tab('int-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Water </div><div id="def-boost-btn" class="col fDam dark-4u fake-button elem-boost" onclick="show_tab('def-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Fire </div><div id="agi-boost-btn" class="col aDam dark-4u fake-button elem-boost" onclick="show_tab('agi-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])"> Air </div></div><div class="row row-cols-1 p-0 m-0" id="str-boost" style="display: none;"> <div class="col eDam dark-5"> Quake (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1" > <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-1" onclick="updatePowderSpecials('Quake-1')"> Lv.4 [e4e4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-2" onclick="updatePowderSpecials('Quake-2')"> Lv.4.5 [e5e4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-3" onclick="updatePowderSpecials('Quake-3')"> Lv.5 [e5e5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-4" onclick="updatePowderSpecials('Quake-4')"> Lv.5.5 [e6e5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Quake-5" onclick="updatePowderSpecials('Quake-5')"> Lv.6 [e6e6] </button> </div><div class="col eDam"> Rage (Passive) </div></div><div class="row row-cols-1 p-0 m-0" id="dex-boost" style="display: none;"> <div class="col tDam dark-5"> Chain Lightning (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-1" onclick="updatePowderSpecials('Chain_Lightning-1')"> Lv.4 [t4t4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-2" onclick="updatePowderSpecials('Chain_Lightning-2')"> Lv.4.5 [t5t4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-3" onclick="updatePowderSpecials('Chain_Lightning-3')"> Lv.5 [t5t5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-4" onclick="updatePowderSpecials('Chain_Lightning-4')"> Lv.5.5 [t6t5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Chain_Lightning-5" onclick="updatePowderSpecials('Chain_Lightning-5')"> Lv.6 [t6t6] </button> </div><div class="col tDam"> Kill Streak (Passive) </div></div><div class="row row-cols-1 p-0 m-0" id="int-boost"> <div class="col wDam dark-5"> Curse (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-1" onclick="updatePowderSpecials('Curse-1')"> Lv.4 [w4w4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-2" onclick="updatePowderSpecials('Curse-2')"> Lv.4.5 [w5w4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-3" onclick="updatePowderSpecials('Curse-3')"> Lv.5 [w5w5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-4" onclick="updatePowderSpecials('Curse-4')"> Lv.5.5 [w6w5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Curse-5" onclick="updatePowderSpecials('Curse-5')"> Lv.6 [w6w6] </button> </div><div class="col wDam"> Concentration (Passive) </div></div><div class="row row-cols-1 p-0 m-0" id="def-boost" style="display: none;"> <div class="col fDam dark-5"> Courage (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-1" onclick="updatePowderSpecials('Courage-1')"> Lv.4 [f4f4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-2" onclick="updatePowderSpecials('Courage-2')"> Lv.4.5 [f5f4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-3" onclick="updatePowderSpecials('Courage-3')"> Lv.5 [f5f5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-4" onclick="updatePowderSpecials('Courage-4')"> Lv.5.5 [f6f5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Courage-5" onclick="updatePowderSpecials('Courage-5')"> Lv.6 [f6f6] </button> </div><div class="col fDam"> Endurance (Passive) </div></div><div class="row row-cols-1 p-0 m-0" id="agi-boost" style="display: none;"> <div class="col aDam dark-5"> Wind Prison (Active) </div><div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1"> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-1" onclick="updatePowderSpecials('Wind_Prison-1')"> Lv.4 [a4a4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-2" onclick="updatePowderSpecials('Wind_Prison-2')"> Lv.4.5 [a5a4] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-3" onclick="updatePowderSpecials('Wind_Prison-3')"> Lv.5 [a5a5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-4" onclick="updatePowderSpecials('Wind_Prison-4')"> Lv.5.5 [a6a5] </button> <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="Wind_Prison-5" onclick="updatePowderSpecials('Wind_Prison-5')"> Lv.6 [a6a6] </button> </div><div class="col aDam"> Dodge (Passive) </div></div></div></div></div><div class="row row-cols-1 d-lg-flex" id="adjust-id" style="display: none;"> <div class="col"> <div class="row row-cols-1 gy-3"> <div class="col mb-1"> <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow"> <div class="col fw-bold dark-4 rounded-top"> <div class="row"> <div class="col-3 py-2"> <button class="col-auto button rounded scaled-font fw-bold text-light dark-5" id="toggle-tomes" onclick="toggle_tab('tomes-dropdown'); toggleButton('toggle-tomes')"> Show Tomes </button> </div><div class="col-3 py-2"> <button class="col-auto button rounded scaled-font fw-bold text-light dark-5" id="toggle-atree" onclick="toggle_tab('atree-dropdown'); toggleButton('toggle-atree')"> Edit Abilities </button> </div><div class="col-3 py-2"> <button class="button rounded scaled-font fw-bold text-light dark-5" id="edit-ID-button" onclick="toggle_tab('edit_id_tab'); toggleButton('edit-ID-button')"> Edit IDs </button> </div><div class="col-3 py-2"> <button class="button rounded scaled-font fw-bold text-light dark-5" id="edit-ID-button" onclick="resetEditableIDs();"> Reset Edited IDs </button> </div></div></div><div class="col dark-6 rounded-bottom my-3 my-xl-1" id="tomes-dropdown" style="display: none;"> <div class="row h-100 row-cols-1 row-cols-xl-2 gy-2 rounded"> <div class="col-auto rounded"> <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 id="weaponTome1-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Weapon </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome1-choice" name="weaponTome1-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="weaponTome2-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Weapon </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome2-choice" name="weaponTome2-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="armorTome1-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Armor </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome1-choice" name="armorTome1-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="armorTome2-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Armor </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome2-choice" name="armorTome2-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="armorTome3-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Armor </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome3-choice" name="armorTome3-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="armorTome4-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Armor </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome4-choice" name="armorTome4-choice" placeholder="No Tome" value=""/> </div></div></div></div></div><div class="col-auto rounded"> <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 id="guildTome1-img" class="img-fluid rounded tome-image"></div></div><div class="col-3"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col scaled-font fw-bold gx-3"> Guild </div><div class="col scaled-font fw-bold gx-3"> Tome </div></div></div><div class="col g-0 rounded"> <div class="row row-cols-1 h-100 align-items-center"> <div class="col d-flex justify-content-end"> <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="guildTome1-choice" name="guildTome1-choice" placeholder="No Tome" value=""/> </div></div></div></div></div></div></div><div class="col dark-6 rounded-bottom my-3 my-xl-1" id="atree-dropdown" style="display:none;"> <div class="row row-cols-1 row-cols-xl-2"> <div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 90vh; overflow-y: auto;"> </div><div class="col mx-auto" style="height: 90vh; overflow-y: auto;" id="atree-rhs"> <div class="col mx-auto" style="height: 2em; overflow-y: auto;" id="atree-header"> </div><div class="col mx-auto" style="" id="atree-warning"> </div><div class="col mx-auto" style="overflow-y: auto;" id="atree-active"> </div></div></div></div><div class="col dark-6 rounded-bottom my-3 my-xl-1" id="edit_id_tab" style="display:none;"> <div class="row big-title justify-content-center"> Damage Stats </div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row"> Spell Damage %: </div><div class="row"> <input type="number" placeholder="0" id="sdPct" name="sdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="sdPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Spell Damage Raw: </div><div class="row"> <input type="number" placeholder="0" id="sdRaw" name="sdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="sdRaw-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Melee Damage %: </div><div class="row"> <input type="number" placeholder="0" id="mdPct" name="mdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="mdPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Melee Damage Raw: </div><div class="row"> <input type="number" placeholder="0" id="mdRaw" name="mdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="mdRaw-base"> Original Value: 0 </div></div></div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row"> Poison: </div><div class="row"> <input type="number" placeholder="0" id="poison" name="poison" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="poison-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row eDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="eDamPct" name="eDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="eDamPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row tDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="tDamPct" name="tDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="tDamPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row wDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="wDamPct" name="wDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="wDamPct-base"> Original Value: 0 </div></div></div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row fDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="fDamPct" name="fDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="fDamPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row aDam"> Damage %: </div><div class="row"> <input type="number" placeholder="0" id="aDamPct" name="aDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="aDamPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> + Tier: </div><div class="row"> <input type="number" placeholder="0" id="atkTier" name="atkTier" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="atkTier-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> </div></div><div class="row big-title justify-content-center"> Defense Stats </div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row Earth"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="eDefPct" name="eDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="eDefPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row Thunder"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="tDefPct" name="tDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="tDefPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row Water"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="wDefPct" name="wDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="wDefPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row Fire"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="fDefPct" name="fDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="fDefPct-base"> Original Value: 0 </div></div></div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row Air"> Defense %: </div><div class="row"> <input type="number" placeholder="0" id="aDefPct" name="aDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="aDefPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Health Regen Raw: </div><div class="row"> <input type="number" placeholder="0" id="hprRaw" name="hprRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="hprRaw-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Health Regen %: </div><div class="row"> <input type="number" placeholder="0" id="hprPct" name="hprPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="hprPct-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> Health Bonus: </div><div class="row"> <input type="number" placeholder="0" id="hpBonus" name="hpBonus" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="hpBonus-base"> Original Value: 0 </div></div></div><div class="row big-title justify-content-center"> Utility Stats </div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row"> 1st Spell Cost %: </div><div class="row"> <input type="number" placeholder="0" id="spPct1" name="spPct1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spPct1-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 2nd Spell Cost %: </div><div class="row"> <input type="number" placeholder="0" id="spPct2" name="spPct2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spPct2-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 3rd Spell Cost %: </div><div class="row"> <input type="number" placeholder="0" id="spPct3" name="spPct3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spPct3-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 4th Spell Cost %: </div><div class="row"> <input type="number" placeholder="0" id="spPct4" name="spPct4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spPct4-base"> Original Value: 0 </div></div></div><div class="row px-1"> <div class="col-lg-3 col-sm-6"> <div class="row"> 1st Spell Cost Raw: </div><div class="row"> <input type="number" placeholder="0" id="spRaw1" name="spRaw1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spRaw1-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 2nd Spell Cost Raw: </div><div class="row"> <input type="number" placeholder="0" id="spRaw2" name="spRaw2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spRaw2-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 3rd Spell Cost Raw: </div><div class="row"> <input type="number" placeholder="0" id="spRaw3" name="spRaw3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spRaw3-base"> Original Value: 0 </div></div><div class="col-lg-3 col-sm-6"> <div class="row"> 4th Spell Cost Raw: </div><div class="row"> <input type="number" placeholder="0" id="spRaw4" name="spRaw4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/> </div><div class="row" id="spRaw4-base"> Original Value: 0 </div></div></div></div></div></div></div></div></div></div><div class="col-xl-3 mb-3 order-2 order-lg-0"> <div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font"> <div class="col rounded-top"> <div class="row"> <div id="detailed-stats-btn" class="col text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('detailed-stats', ['detailed-stats', 'summary-stats'])"> Detailed </div><div id="summary-stats-btn" class="col text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7 selected-btn" onclick="show_tab('summary-stats', ['detailed-stats', 'summary-stats'])"> Summary </div></div></div><div style="display: none;" id="detailed-stats" class="col text-nowrap"></div><div id="summary-stats" class="col text-nowrap"></div></div></div><div class="col-xl-3 mb-3 px-0"> <div id="all-spells-display" class="row row-cols-1 gy-3 mb-4 text-center scaled-font"> <div class="col pe-0"> <div class="col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">Input a weapon to see abilities!</div></div></div><div class="row row-cols-1 gy-3 mb-4 text-center scaled-font" id="build-poison-stats" style="display: none"> </div><div class="row row-cols-1 gy-3 mb-4 text-center scaled-font"> <div class="col pe-0"> <div class="col pe-0 spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="powder-special-stats"></div></div></div></div></div><div class="row mx-2 mx-lg-3"> <div class="col" id="masonry-container"> <div id="helmet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="chestplate-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="leggings-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="boots-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="ring1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="ring2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="bracelet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="necklace-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3"> </div><div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id="build-order"> </div><div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id="set-info"></div></div></div><div class="row mx-2 mx-lg-3"> <div class="col-12 dark-5 scaled-font"> <footer class="text-center"> <div id="header2"> <p>Made by <b class="hppeng">hppeng</b>, <b class="ferricles">ferricles</b>, and <b>reschan</b> with <a href="../atlas" target="_blank" class="atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p><p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p></div><div id="credits"> <a href="../credits.txt" class="link">Additional credits</a> </div></footer> </div></div></div><div class="container h-75 mx-0 mx-lg-auto dark-2 border border-4 scaled-font align-self-center" style="position: fixed; z-index: 2000; overflow: auto; display: none;" id="search-container"> <div class="row justify-content-end"> <div class="col-auto"> <button type="button" class="btn-close btn-close-white" aria-label="Close" onclick="document.querySelector('#search-container').style.display='none';"></button> </div></div><div class="row row-cols-1 justify-content-center"> <div class="col-10 dark-5 p-2 dark-shadow rounded-top"> <div class="row row-cols-1 row-cols-xl-4 justify-content-center mb-1"> <div class="col-auto"> <label for="item-name-choice">Name:</label> <input class="search-field" type="text" id="item-name-choice" name="item-name-choice" placeholder="Name" oninput="doSearchSchedule();"/> </div><div class="col-auto"> <label for="item-category-choice">Category:</label> <input class="search-field" id="item-category-choice" name="item-category-choice" placeholder="Category"/> </div><div class="col-auto"> <label for="item-rarity-choice">Rarity:</label> <input class="search-field" id="item-rarity-choice" name="item-rarity-choice" placeholder="Rarity"/> </div><div class="col-auto"> <label for="item-level-choice">Level:</label> <input class="search-field" type="text" id="item-level-choice" name="item-level-choice" placeholder="1-106"/> </div></div><div class="row row-cols-1 row-cols-xl-4 justify-content-center my-1"> <div class="col-auto" id="filter1-dropdown"> <label for="filter1-choice">Filter 1:</label> <input class="search-field" list="filter-items" id="filter1-choice" name="filter1-choice" placeholder=""/> </div><div class="col-auto" id="filter2-dropdown"> <label for="filter2-choice">Filter 2:</label> <input class="search-field" list="filter-items" id="filter2-choice" name="filter2-choice" placeholder=""/> </div><div class="col-auto" id="filter3-dropdown"> <label for="filter3-choice">Filter 3:</label> <input class="search-field" list="filter-items" id="filter3-choice" name="filter3-choice" placeholder=""/> </div><div class="col-auto" id="filter4-dropdown"> <label for="filter4-choice">Filter 4:</label> <input class="search-field" list="filter-items" id="filter4-choice" name="filter4-choice" placeholder=""/> </div></div><div class="row box-title justify-content-center my-1" id="summary"> </div><div class="row" id="search-results"> </div></div></div></div><script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/macy@2"></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/computation_graph.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/skillpoints.js"></script> <script type="text/javascript" src="../js/damage_calc.js"></script> <script type="text/javascript" src="../js/display_constants.js"></script> <script type="text/javascript" src="../js/display.js"></script> <script type="text/javascript" src="../js/load.js"></script> <script type="text/javascript" src="../js/load_ing.js"></script> <script type="text/javascript" src="../js/load_tome.js"></script> <script type="text/javascript" src="../js/custom.js"></script> <script type="text/javascript" src="../js/craft.js"></script> <script type="text/javascript" src="../js/builder/atree_constants_min.js"></script> <script type="text/javascript" src="../js/builder/build.js"></script> <script type="text/javascript" src="../js/builder/builder_constants.js"></script> <script type="text/javascript" src="../js/builder/build_encode_decode.js"></script> <script type="text/javascript" src="../js/builder/atree.js"></script> <script type="text/javascript" src="../js/builder/builder.js"></script> <script type="text/javascript" src="../js/builder/builder_graph.js"></script> </body></html> 
diff --git a/builder/index_full.html b/builder/index_full.html
index e9c1054..4a3cef7 100644
--- a/builder/index_full.html
+++ b/builder/index_full.html
@@ -97,7 +97,7 @@
                 <div class="row row-cols-1 mb-3 gy-4" id="equipment-inputs">
                     <div class="col">
                         <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 justify-content-center equipment-input rounded gy-3 gy-lg-0 mt-auto">
-                            <div class="col-auto rounded order-xl-0 order-0 my-0">
+                            <div class="col rounded order-xl-0 order-0 my-0">
                                 <div class="row h-100 px-1" 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 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>
@@ -124,7 +124,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1 my-0">
+                            <div class="col order-xl-0 order-1 my-0">
                                 <div class="row h-100 px-1" 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 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>
@@ -150,7 +150,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-0">
+                            <div class="col order-xl-0 order-0">
                                 <div class="row h-100 px-1" 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 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>
@@ -177,7 +177,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col order-xl-0 order-1">
                                 <div class="row h-100 px-1" 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 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>
@@ -203,7 +203,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-0">
+                            <div class="col order-xl-0 order-0">
                                 <div class="row h-100 px-1" 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 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>
@@ -230,7 +230,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col order-xl-0 order-1">
                                 <div class="row h-100 px-1" 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 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>
@@ -257,7 +257,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-0">
+                            <div class="col order-xl-0 order-0">
                                 <div class="row h-100 px-1" 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 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>
@@ -284,7 +284,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col order-xl-0 order-1">
                                 <div class="row h-100 px-1" 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 id="necklace-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 100% 0;"></div>
@@ -310,7 +310,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col order-xl-0 order-1">
                                 <div class="row h-auto px-1" 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 id="weapon-img" class="img-fluid rounded item-display-new-toggleable" style = "background-image: url('../media/items/new.png');"></div>
@@ -337,7 +337,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1 level-input">
+                            <div class="col order-xl-0 order-1 level-input">
                                 <div class="row h-100 px-1">
                                     <div class="col">
                                         <div class="row align-items-center justify-content-left">
