wynnbuilder-forked-for-changes/builder/doc.html
hppeng 1d6b302f38 parent 3e725eded8
author hppeng <hppeng> 1699417872 -0800
committer hppeng <hppeng> 1720354753 -0700

parent 3e725eded8
author hppeng <hppeng> 1699417872 -0800
committer hppeng <hppeng> 1720354749 -0700

parent 3e725eded8
author hppeng <hppeng> 1699417872 -0800
committer hppeng <hppeng> 1720354744 -0700

parent 3e725eded8
author hppeng <hppeng> 1699417872 -0800
committer hppeng <hppeng> 1720354739 -0700

parent 3e725eded8
author hppeng <hppeng> 1699417872 -0800
committer hppeng <hppeng> 1720354735 -0700

parent 3e725eded8
author hppeng <hppeng> 1699417872 -0800
committer hppeng <hppeng> 1720354730 -0700

parent 3e725eded8
author hppeng <hppeng> 1699417872 -0800
committer hppeng <hppeng> 1720354688 -0700

Update recipes.json (#265)

Change ratio of gems to oil as it has been updated in 2.0.4

> Updated the Jeweling Recipe Changes (Bracelet- 2:1 gems:oil, Necklaces- 3:1 gems:oil)

https://forums.wynncraft.com/threads/2-0-4-full-changelog-new-bank-lootruns-more.310535/

Finish updating recipes.json

why are there 4 versions of this file active at any given time

Fix damage calculation for rainbow raw

wow this bug has been here for a LONG time

also bump version for ing db

Bunch of bugfixes

- new major ID
- divine honor: reduce earth damage
- radiance: don't boost tomes, xp/loot bonuses

atree:
- parry: minor typo
- death magnet: marked dep
- nightcloak knife: 15s desc

Api v3 (#267)

* Tweak ordering to be consistent internally

* v3 items  (#266)

* item_wrapper script

for updating item data with v3 endpoint

* metadata from v3

* v3 item format

For the purpose of wynnbuilder, additional mapping might be needed.

* v3 item format

additional mapping might be needed for wb

* v3 compressed item json

* clean item json v3 format

* Update translate map to api v3

partially... we will need to redo scripts to flatmap all the items

* Fix items for 2.0.4.3

finally

* New ingredients (and parse script update)

just realized I forgot to commit the parse script this whole time

* Forgot to commit data files, and bump ing db version

* Sketchily reverse translate major ids

internalname and separate lookup table lol

* Forgot to update data files

todo: script should update all files at once

* Bump wynn version number

already outdated...

* Forgot to update 2.0.4.3 major ids

---------

Co-authored-by: hppeng <hppeng>
Co-authored-by: RawFish69 <108964215+RawFish69@users.noreply.github.com>

Add missing fields to ingreds

missing ids and consumableIDs tags in some ingreds

Fix missing properties in item search setup

these should be unified maybe to avoid duplicated code

Fix sacshrine dependency on fluid healing

also: fix ": " in item searcher

I managed to mess up all major ids

note: major ids min file is generated along with atree. it uses numeric ids, not just json compress

2.0.4.4 update (#269)

* 2.0.4.4 update

Fix v3 item api debug script
Implement hellfire (discombob disallow not happening yet)

* Fix boiling blood implementation

slightly more intuitive
also, janky first pass implementation for hellfire

* Atree default update

Allow sliders to specify a default value, for puppet and boiling blood for now

* Fix rainbow def

display on items and build stats
Calculate into raw def correctly

* Atree backend improvements

Allow major ids to have dependencies
Implement cherry bomb new ver. (wooo replace_spell just works out of the box!)
Add comments to atree.js

* Fix name of normal items

don't you love it when wynn api makes breaking changes for no reason

* Misc bugfix

Reckless abandon req Tempest
new damage ID in search

* Fix major id search

and temblor desc

* Fix blockers on mage

* Fix flaming uppercut implementation

* Force base dps display to display less digits

* Tomes finally pulling from the API

but still with alias feature enabled!

* Lootrun tomes (finally?)

cool? maybe?

* Fix beachside set set bonus

---------

Co-authored-by: hppeng <hppeng>

Fix rainbow def

display on items and build stats
Calculate into raw def correctly

Fix major id search

and temblor desc

Force base dps display to display less digits

Fix beachside set set bonus

Fix build decode error

reading only 7 tome fields no matter what

Give NONE tomes correct ids in load_tome

i hate this system so much

Allow searching for max/min of ranges

Fix crafted item damage display

in the process, also update powder calculation logic! Should be fully correct now...

TL;DR: Weapon damage is floating point; item display is wrong; ingame displays (damage floaters and compass) are floored.

Fluid healing now multiplicative with heal efficiency ID

NOTE: this breaks backwards compatibility with older atree jsons.
Do we care about this?

Realizing how much of a nightmare it will be (and already is) to keep
atree fully backwards compatible. Maybe that will be something left to
`git clone` instead.

fix (#274)
2024-07-07 05:19:16 -07:00

1351 lines
102 KiB
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">
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
<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="/thirdparty/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="/thirdparty/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">
<!-- main -->
<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://nori.fish/wynn/build/" target = "_blank"><img src = "../media/icons/new/nori_build.png" alt = "Build Search" title = "Build Search by Nori-Wynn"><b>Build Search</b></a>
<a href = "https://nori.fish/wynn/recipe/" target = "_blank"><img src = "../media/icons/new/nori_recipe.png" alt = "Recipe Search" title = "Recipe Search by Nori-Wynn"><b>Recipe Search</b></a>
<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://nori.fish/wynn/build/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
<img src="../media/icons/new/nori_build.png" alt="" style="height: 100%;">
<span>Build Search</span>
</a>
<a href="https://nori.fish/wynn/recipe/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
<img src="../media/icons/new/nori_recipe.png" alt="" style="height: 100%;">
<span>Recipe Search</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; display: none">
<!-- REMOVE THIS DIV AT SOME POINT. -->
<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="radiance-boost" onclick="update_radiance()">
Radiance
</button>
<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 (+20%)
</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.1
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2')">
Lv.2
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3')">
Lv.3
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4')">
Lv.4
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5')">
Lv.5
</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.1
</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.2
</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.3
</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.4
</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.5
</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.1
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2')">
Lv.2
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3')">
Lv.3
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4')">
Lv.4
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5')">
Lv.5
</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.1
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2')">
Lv.2
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3')">
Lv.3
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4')">
Lv.4
</button>
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5')">
Lv.5
</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.1
</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.2
</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.3
</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.4
</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.5
</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 class = "row">
Life Steal:
</div>
<div class = "row">
<input type = "number" placeholder = "0" id="ls" name="ls" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm"/>
</div>
<div class = "row" id = "ls-base">
Original Value: 0
</div>
</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>, <b>reschan</b>, and <b>blankman</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="/thirdparty/autoComplete.min.js"></script>
<script src="/thirdparty/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">COMPUTE_GRAPH_DEBUG=true</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/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_graph.js"></script>
<script type="text/javascript" src="../js/builder/builder.js"></script>
<!--script type="text/javascript" src="../js/builder/optimize.js"></script-->
<div id="graph_body" style="max-width: 100%; height: 100vh">
<button id="saveButton">JANKY Export SVG</button>
<a id="saveLink">savelink</a>
</div>
<script src="https://d3js.org/d3.v7.js"></script>
<script type="text/javascript" src="../js/debug/render_compute_graph.js"></script>
</body>
</html>