feat: add detailed view, copy btns
This commit is contained in:
reschan
parent
1e82559f72
commit
365c9f72e9
7 changed files with 1131 additions and 798 deletions
BIN
media/icons/new/save.png
Normal file
BIN
media/icons/new/save.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 444 B |
93
sq2bs.css
93
sq2bs.css
|
|
@ -169,6 +169,25 @@ li.search-item:hover {
|
|||
background-color: hsl(0, 0%, 11%) !important;
|
||||
}
|
||||
|
||||
/* boosts styles */
|
||||
.button-boost:hover {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.toggleOn {
|
||||
background-color: #0a0 !important;
|
||||
}
|
||||
|
||||
/* floating tooltip styles */
|
||||
.float-tooltip {
|
||||
background-color: hsl(0, 0%, 16%);
|
||||
position: absolute;
|
||||
transition: .5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* generic */
|
||||
|
||||
input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
|
@ -219,6 +238,15 @@ input.equipment-input {
|
|||
width: 6.5rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd img {
|
||||
width: 6.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) and (max-width: 1400px) {
|
||||
.scaled-font {
|
||||
font-size: .8rem;
|
||||
|
|
@ -236,6 +264,15 @@ input.equipment-input {
|
|||
width: 2.8rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd img {
|
||||
width: 2.8rem;
|
||||
}
|
||||
|
||||
.warning {
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
|
@ -243,6 +280,10 @@ input.equipment-input {
|
|||
.spell-display b {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1400px) {
|
||||
|
|
@ -262,6 +303,16 @@ input.equipment-input {
|
|||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd img {
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
|
||||
.warning {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
|
@ -269,6 +320,10 @@ input.equipment-input {
|
|||
.spell-display b {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fake button for build stats */
|
||||
|
|
@ -277,7 +332,7 @@ input.equipment-input {
|
|||
}
|
||||
|
||||
.fake-button:hover {
|
||||
background-color: hsl(0, 0%, 14%);
|
||||
background-color: hsl(0, 0%, 14%) !important;
|
||||
}
|
||||
|
||||
/* material design dark mode */
|
||||
|
|
@ -317,6 +372,42 @@ input.equipment-input {
|
|||
background-color: hsl(0, 0%, 16%) !important;
|
||||
}
|
||||
|
||||
.dark-1u {
|
||||
background-color: hsl(0, 0%, 5%);
|
||||
}
|
||||
|
||||
.dark-2u {
|
||||
background-color: hsl(0, 0%, 7%);
|
||||
}
|
||||
|
||||
.dark-3u {
|
||||
background-color: hsl(0, 0%, 8%);
|
||||
}
|
||||
|
||||
.dark-4u {
|
||||
background-color: hsl(0, 0%, 9%);
|
||||
}
|
||||
|
||||
.dark-5u {
|
||||
background-color: hsl(0, 0%, 11%);
|
||||
}
|
||||
|
||||
.dark-6u {
|
||||
background-color: hsl(0, 0%, 12%);
|
||||
}
|
||||
|
||||
.dark-7u {
|
||||
background-color: hsl(0, 0%, 14%);
|
||||
}
|
||||
|
||||
.dark-8u {
|
||||
background-color: hsl(0, 0%, 15%);
|
||||
}
|
||||
|
||||
.dark-9u {
|
||||
background-color: hsl(0, 0%, 16%);
|
||||
}
|
||||
|
||||
.dark-shadow {
|
||||
box-shadow: 0rem 0rem 1.25rem 0.1875rem black;
|
||||
}
|
||||
|
|
|
|||
556
sq2bs.html
556
sq2bs.html
|
|
@ -17,13 +17,20 @@
|
|||
<link rel="stylesheet" href="sq2bs.css">
|
||||
</head>
|
||||
<body class="text-light d-flex justify-content-center" style="background-color: #121212;">
|
||||
<!-- hover tooltip stuff -->
|
||||
|
||||
<!-- main -->
|
||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||
<a href=""><img src="media/icons/new/atlas64.png" alt="place" title="WynnBuilder"><b>WynnBuilder</b></a>
|
||||
<a href=""><img src="media/items/new/generic-scroll.png" alt="" title="Overall Build Stats"><b>Build Stats</b></a>
|
||||
<a href=""><img src="media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</b></a>
|
||||
<a href=""><img src="media/icons/new/custom.png" alt="" title="Active boosts"><b>Class Boosts</b></a>
|
||||
<hr/>
|
||||
<a onclick="shareBuild()" style="cursor: pointer;"><img src="media/items/new/generic-scroll.png" alt="" title="Item Search"><b>Copy For Sharing</b></a>
|
||||
<a onclick="copyBuild()" style="cursor: pointer;"><img src="media/icons/new/save.png" alt="" title="Item Search"><b>Copy build</b></a>
|
||||
|
||||
</div>
|
||||
<div class="container py-5 vh-100 mx-0 mx-lg-auto">
|
||||
<div class="row h-100 row-cols-1">
|
||||
<div class="col">
|
||||
<div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-0">
|
||||
<div class="col-xl-6">
|
||||
<div class="row row-cols-1 gy-5">
|
||||
|
|
@ -32,7 +39,7 @@
|
|||
<div class="col rounded order-xl-0 order-0">
|
||||
<div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown">
|
||||
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="helmet-img-loc">
|
||||
<img class="img-fluid" src="media/items/new/generic-helmet.png">
|
||||
<img id="helmet-img" class="img-fluid" src="media/items/new/generic-helmet.png">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row row-cols-1 h-100 align-items-center">
|
||||
|
|
@ -275,7 +282,7 @@
|
|||
<div class="col-auto rounded order-xl-0 order-1">
|
||||
<div class="row h-100 dark-shadow dark-6 rounded">
|
||||
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="weapon-img-loc">
|
||||
<img id="weapon-img" class="img-fluid" src="media/icons/new/Gears.png">
|
||||
<img class="img-fluid" src="media/icons/new/Gears.png">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row row-cols-1 h-100 align-items-center">
|
||||
|
|
@ -299,6 +306,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto rounded order-xl-0 order-1 mobile-only">
|
||||
<div class="row h-100 dark-shadow dark-6 rounded">
|
||||
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="weapon-img-loc">
|
||||
<img class="img-fluid" src="media/items/new/generic-scroll.png">
|
||||
</div>
|
||||
<div class="col g-0 rounded">
|
||||
<div class="row gy-3 row-cols-1 h-100 align-items-center">
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button class="border-dark text-light dark-5 rounded scaled-font w-75 rounded" onclick="copyBuild()">Copy short</button>
|
||||
</div>
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button class="border-dark text-light dark-5 rounded scaled-font w-75 rounded" onclick="shareBuild()">Copy For Sharing</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
|
@ -387,6 +411,279 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-5">
|
||||
<div class="row row-cols-1 gy-3">
|
||||
<div class="col">
|
||||
<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">
|
||||
Active boosts
|
||||
</div>
|
||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||
<div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="updateBoosts('vanish-boost', true)">
|
||||
Vanish (+80%)
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="updateBoosts('warscream-boost', true)">
|
||||
War Scream (+10%)
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="updateBoosts('yourtotem-boost', true)">
|
||||
Your Totem (+35%)
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="updateBoosts('allytotem-boost', true)">
|
||||
Ally Totem (+15%)
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="bash-boost" onclick="updateBoosts('bash-boost', true)">
|
||||
Bash (+50%)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row row-cols-1 rounded text-center dark-5 scaled-font">
|
||||
<div class="col">
|
||||
<div class="row text-nowrap">
|
||||
<div class="col eDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('str')">
|
||||
Earth
|
||||
</div>
|
||||
<div class="col tDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('dex')">
|
||||
Thunder
|
||||
</div>
|
||||
<div class="col wDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('int')">
|
||||
Water
|
||||
</div>
|
||||
<div class="col fDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('def')">
|
||||
Fire
|
||||
</div>
|
||||
<div class="col aDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('agi')">
|
||||
Air
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" id="str-boost" style="display: none;">
|
||||
<div class="row row-cols-1">
|
||||
<div class="col eDam dark-5">
|
||||
Quake (Active)
|
||||
</div>
|
||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||
<div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-1" onclick = "updatePowderSpecials('Quake-1', true)">
|
||||
Lv.4 [e4e4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2', true)">
|
||||
Lv.4.5 [e5e4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3', true)">
|
||||
Lv.5 [e5e5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4', true)">
|
||||
Lv.5.5 [e6e5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5', true)">
|
||||
Lv.6 [e6e6]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col eDam">
|
||||
Rage (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
placeholder
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" id="dex-boost" style="display: none;">
|
||||
<div class="row row-cols-1">
|
||||
<div class="col tDam dark-5">
|
||||
Chain Lightning (Active)
|
||||
</div>
|
||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||
<div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-1" onclick = "updatePowderSpecials('Chain_Lightning-1', true)">
|
||||
Lv.4 [t4t4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-2" onclick = "updatePowderSpecials('Chain_Lightning-2', true)">
|
||||
Lv.4.5 [t5t4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-3" onclick = "updatePowderSpecials('Chain_Lightning-3', true)">
|
||||
Lv.5 [t5t5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-4" onclick = "updatePowderSpecials('Chain_Lightning-4', true)">
|
||||
Lv.5.5 [t6t5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-5" onclick = "updatePowderSpecials('Chain_Lightning-5', true)">
|
||||
Lv.6 [t6t6]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col tDam">
|
||||
Kill Streak (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
placeholder
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" id="int-boost">
|
||||
<div class="row row-cols-1">
|
||||
<div class="col wDam dark-5">
|
||||
Curse (Active)
|
||||
</div>
|
||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||
<div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-1" onclick = "updatePowderSpecials('Curse-1', true)">
|
||||
Lv.4 [w4w4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2', true)">
|
||||
Lv.4.5 [w5w4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3', true)">
|
||||
Lv.5 [w5w5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4', true)">
|
||||
Lv.5.5 [w6w5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5', true)">
|
||||
Lv.6 [w6w6]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col wDam">
|
||||
Concentration (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
placeholder
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" id="def-boost" style="display: none;">
|
||||
<div class="row row-cols-1">
|
||||
<div class="col fDam dark-5">
|
||||
Courage (Active)
|
||||
</div>
|
||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||
<div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-1" onclick = "updatePowderSpecials('Courage-1', true)">
|
||||
Lv.4 [f4f4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2', true)">
|
||||
Lv.4.5 [f5f4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3', true)">
|
||||
Lv.5 [f5f5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4', true)">
|
||||
Lv.5.5 [f6f5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5', true)">
|
||||
Lv.6 [f6f6]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col fDam">
|
||||
Endurance (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
how do calc
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" id="agi-boost" style="display: none;">
|
||||
<div class="row row-cols-1">
|
||||
<div class="col aDam dark-5">
|
||||
Wind Prison (Active)
|
||||
</div>
|
||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||
<div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-1" onclick = "updatePowderSpecials('Wind_Prison-1', true)">
|
||||
Lv.4 [a4a4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-2" onclick = "updatePowderSpecials('Wind_Prison-2', true)">
|
||||
Lv.4.5 [a5a4]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-3" onclick = "updatePowderSpecials('Wind_Prison-3', true)">
|
||||
Lv.5 [a5a5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-4" onclick = "updatePowderSpecials('Wind_Prison-4', true)">
|
||||
Lv.5.5 [a6a5]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-5" onclick = "updatePowderSpecials('Wind_Prison-5', true)">
|
||||
Lv.6 [a6a6]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col aDam">
|
||||
Dodge (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
how do calc
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3">
|
||||
|
|
@ -429,10 +726,48 @@
|
|||
<div class="col">
|
||||
<div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="spell3-infoAvg">spell4</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<div id="chestplate-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
|
||||
</div>
|
||||
<div id="leggings-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
|
||||
</div>
|
||||
<div id="boots-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
|
||||
</div>
|
||||
<div id="ring1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
|
||||
</div>
|
||||
<div id="ring2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
|
||||
</div>
|
||||
<div id="bracelet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
|
||||
</div>
|
||||
<div id="necklace-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
|
||||
</div>
|
||||
<div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col dark-5">
|
||||
<footer class="text-center">
|
||||
<div id="header2">
|
||||
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "./atlas.html" target = "_blank" class = "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 id="drag-full-eqs" style="display: none;">
|
||||
<div class = "build hide-container-grid" style="display: none;">
|
||||
|
|
@ -871,14 +1206,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div style="display: none;">
|
||||
<div id="overall-window" class="draggable window-container">
|
||||
<div id="overall-window-header" class="window-header">
|
||||
<div style="flex: 1"></div>
|
||||
<div style="flex: 2; text-align: center;">Overall Build Stats</div>
|
||||
<div style="flex: 1; text-align: right;"><button onclick="$('#overall-window').toggle()">[x]</button></div>
|
||||
</div>
|
||||
<div style="overflow: auto;" id="all-stats" class="minimal-stats-container"></div>
|
||||
</div>
|
||||
<div id="search-container" class="draggable full-border window-container" style="border-top: none;">
|
||||
<div id="search-container-header" class="window-header">
|
||||
<div style="flex: 1"></div>
|
||||
|
|
@ -936,213 +1263,10 @@
|
|||
<div class="search-result-container" id='main'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="boost-container" class="draggable full-border window-container">
|
||||
<div id="boost-container-header" class="window-header">
|
||||
<div style="flex: 1"></div>
|
||||
<div style="flex: 2; text-align: center;">Active boosts</div>
|
||||
<div style="flex: 1; text-align: right;"><button onclick="$('#boost-container').toggle()">[x]</button></div>
|
||||
</div>
|
||||
<div style="display: inline-flex;">
|
||||
<div style="display: inline-flex; flex-direction: column;">
|
||||
<table id="boost-table" style="text-align: center;">
|
||||
<tr style="height: 2rem;">
|
||||
<th colspan="5" class="nDam">Class boosts</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button class="button-boost" id="vanish-boost" onclick = "updateBoosts('vanish-boost', true)">
|
||||
Vanish (+80%)
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "warscream-boost" onclick = "updateBoosts('warscream-boost', true)">
|
||||
War Scream (+10%)
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "yourtotem-boost" onclick = "updateBoosts('yourtotem-boost', true)">
|
||||
Your Totem (+35%)
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "allytotem-boost" onclick = "updateBoosts('allytotem-boost', true)">
|
||||
Ally Totem (+15%)
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "bash-boost" onclick = "updateBoosts('bash-boost', true)">
|
||||
Bash (+50%)
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 2rem;">
|
||||
<th colspan="5" class="Earth">Quake</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Quake-1" onclick = "updatePowderSpecials('Quake-1', true)">
|
||||
Lv.4 [e4e4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2', true)">
|
||||
Lv.4.5 [e5e4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3', true)">
|
||||
Lv.5 [e5e5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4', true)">
|
||||
Lv.5.5 [e6e5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5', true)">
|
||||
Lv.6 [e6e6]
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 2rem;">
|
||||
<th colspan="5" class="Thunder">Chain Lightning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Chain_Lightning-1" onclick = "updatePowderSpecials('Chain_Lightning-1', true)">
|
||||
Lv.4 [t4t4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Chain_Lightning-2" onclick = "updatePowderSpecials('Chain_Lightning-2', true)">
|
||||
Lv.4.5 [t5t4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Chain_Lightning-3" onclick = "updatePowderSpecials('Chain_Lightning-3', true)">
|
||||
Lv.5 [t5t5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Chain_Lightning-4" onclick = "updatePowderSpecials('Chain_Lightning-4', true)">
|
||||
Lv.5.5 [t6t5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Chain_Lightning-5" onclick = "updatePowderSpecials('Chain_Lightning-5', true)">
|
||||
Lv.6 [t6t6]
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 2rem;">
|
||||
<th colspan="5" class="Water">Curse</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Curse-1" onclick = "updatePowderSpecials('Curse-1', true)">
|
||||
Lv.4 [w4w4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2', true)">
|
||||
Lv.4.5 [w5w4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3', true)">
|
||||
Lv.5 [w5w5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4', true)">
|
||||
Lv.5.5 [w6w5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5', true)">
|
||||
Lv.6 [w6w6]
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 2rem;">
|
||||
<th colspan="5" class="Fire">Courage</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Courage-1" onclick = "updatePowderSpecials('Courage-1', true)">
|
||||
Lv.4 [f4f4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2', true)">
|
||||
Lv.4.5 [f5f4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3', true)">
|
||||
Lv.5 [f5f5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4', true)">
|
||||
Lv.5.5 [f6f5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5', true)">
|
||||
Lv.6 [f6f6]
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 2rem;">
|
||||
<th colspan="5" class="Air">Wind Prison</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Wind_Prison-1" onclick = "updatePowderSpecials('Wind_Prison-1', true)">
|
||||
Lv.4 [f4f4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Wind_Prison-2" onclick = "updatePowderSpecials('Wind_Prison-2', true)">
|
||||
Lv.4.5 [f5f4]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Wind_Prison-3" onclick = "updatePowderSpecials('Wind_Prison-3', true)">
|
||||
Lv.5 [f5f5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Wind_Prison-4" onclick = "updatePowderSpecials('Wind_Prison-4', true)">
|
||||
Lv.5.5 [f6f5]
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class = "button-boost" id = "Wind_Prison-5" onclick = "updatePowderSpecials('Wind_Prison-5', true)">
|
||||
Lv.6 [f6f6]
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="display: inline-flex; flex-direction: column; max-height: 25rem; overflow-y: scroll;">
|
||||
<div class = "center" id = "powder-special-stats">
|
||||
<p class = "nDam" style="text-align: center; font-weight: bold;">Powder Specials</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
<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="sq2icons.js"></script>
|
||||
|
|
|
|||
148
sq2bs.js
148
sq2bs.js
|
|
@ -1,12 +1,13 @@
|
|||
let equipment_keys = ['weapon', 'helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace'];
|
||||
let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace', 'weapon'];
|
||||
let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear']
|
||||
let skp_keys = ['str', 'dex', 'int', 'def', 'agi'];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
for (const i in equipment_keys) {
|
||||
document.querySelector("#"+equipment_keys[i]+"-choice").setAttribute("oninput", "calcBuildSchedule()");
|
||||
document.querySelector("#"+equipment_keys[i]+"-powder").setAttribute("oninput", "calcBuildSchedule()");
|
||||
for (const eq of equipment_keys) {
|
||||
document.querySelector("#"+eq+"-choice").setAttribute("oninput", "update_field('"+ eq +"'); calcBuildSchedule();");
|
||||
document.querySelector("#"+eq+"-powder").setAttribute("oninput", "calcBuildSchedule();");
|
||||
document.querySelector("#"+eq+"-tooltip").setAttribute("onclick", "collapse_element('"+ eq +"')");
|
||||
}
|
||||
document.querySelector("#level-choice").setAttribute("oninput", "calcBuildSchedule()")
|
||||
|
||||
|
|
@ -15,6 +16,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
for (i = 0; i < skp_fields.length; i++) {
|
||||
skp_fields[i].setAttribute("oninput", "updateStatSchedule()");
|
||||
}
|
||||
|
||||
let masonry = Macy({
|
||||
container: "#masonry-container",
|
||||
columns: 1,
|
||||
mobileFirst: true,
|
||||
breakAt: {
|
||||
1200: 4,
|
||||
},
|
||||
margin: {
|
||||
x: 20,
|
||||
y: 20,
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// phanta scheduler
|
||||
|
|
@ -29,7 +47,7 @@ function calcBuildSchedule(){
|
|||
calcBuildTask = setTimeout(function(){
|
||||
calcBuildTask = null;
|
||||
calculateBuild();
|
||||
}, 1000);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function updateStatSchedule(){
|
||||
|
|
@ -53,77 +71,130 @@ function doSearchSchedule(){
|
|||
}
|
||||
|
||||
// equipment field dynamic styling
|
||||
|
||||
function update_fields() {
|
||||
for (const i in equipment_keys) {
|
||||
|
||||
function update_field(field) {
|
||||
// built on the assumption of no one will type in CI/CR letter by letter
|
||||
// resets
|
||||
document.querySelector("#"+equipment_keys[i]+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set');
|
||||
console.log(document.querySelector("#"+equipment_keys[i]+"-choice").value)
|
||||
let item = player_build[equipment_keys[i]];
|
||||
document.querySelector("#"+field+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set');
|
||||
|
||||
item = document.querySelector("#"+field+"-choice").value
|
||||
let powder_slots;
|
||||
let tier;
|
||||
let category;
|
||||
let type;
|
||||
|
||||
// get item info
|
||||
if (item.slice(0, 3) == "CI-") {
|
||||
item = getCustomFromHash(item);
|
||||
powder_slots = item.statMap.get("slots");
|
||||
tier = item.statMap.get("tier");
|
||||
category = item.statMap.get("category");
|
||||
type = item.statMap.get("type");
|
||||
}
|
||||
else if (item.slice(0, 3) == "CR-") {
|
||||
item = getCraftFromHash(item);
|
||||
powder_slots = item.statMap.get("slots");
|
||||
tier = item.statMap.get("tier");
|
||||
category = item.statMap.get("category");
|
||||
type = item.statMap.get("type");
|
||||
}
|
||||
else if (itemMap.get(item)) {
|
||||
item = itemMap.get(item);
|
||||
if (!item) {return false;}
|
||||
powder_slots = item.slots;
|
||||
tier = item.tier;
|
||||
category = item.category;
|
||||
type = item.type;
|
||||
}
|
||||
else {
|
||||
// item not found
|
||||
document.querySelector("#"+field+"-choice").classList.add("text-light");
|
||||
if (item) { document.querySelector("#"+field+"-choice").classList.add("is-invalid"); }
|
||||
|
||||
if ((item.get('name') == 'No '+ equipment_keys[i].charAt(0).toUpperCase() + equipment_keys[i].slice(1)) && (document.querySelector("#"+equipment_keys[i]+"-choice").value)) {
|
||||
document.querySelector("#"+equipment_keys[i]+"-choice").classList.add("text-light", "is-invalid");
|
||||
document.querySelector("#"+equipment_keys[i]+"-powder").disabled = true;
|
||||
continue;
|
||||
return false;
|
||||
}
|
||||
|
||||
// set input text color
|
||||
document.querySelector("#"+equipment_keys[i]+"-choice").classList.add(item.get('tier'));
|
||||
// set item color
|
||||
document.querySelector("#"+field+"-choice").classList.add(tier);
|
||||
|
||||
// set powder slots
|
||||
document.querySelector("#"+equipment_keys[i]+"-powder").setAttribute("placeholder", item.get('slots')+" slots");
|
||||
document.querySelector("#"+field+"-powder").setAttribute("placeholder", powder_slots+" slots");
|
||||
|
||||
if (item.get('slots') == 0) {
|
||||
document.querySelector("#"+equipment_keys[i]+"-powder").disabled = true;
|
||||
if (powder_slots == 0) {
|
||||
document.querySelector("#"+field+"-powder").disabled = true;
|
||||
} else {
|
||||
document.querySelector("#"+equipment_keys[i]+"-powder").disabled = false;
|
||||
document.querySelector("#"+field+"-powder").disabled = false;
|
||||
}
|
||||
|
||||
// set weapon image
|
||||
if (item.get('category') == 'weapon') {
|
||||
document.querySelector("#weapon-img").setAttribute('src', 'media/items/new/generic-'+item.get('type')+'.png');
|
||||
}
|
||||
}
|
||||
// set weapon img
|
||||
if (category == 'weapon') {
|
||||
document.querySelector("#weapon-img").setAttribute('src', 'media/items/new/generic-'+type+'.png');
|
||||
}
|
||||
|
||||
// tabular stats
|
||||
// call calc build
|
||||
}
|
||||
|
||||
|
||||
let tabs = ['all-stats', 'minimal-offensive-stats', 'minimal-defensive-stats'];
|
||||
|
||||
function show_tab(tab) {
|
||||
collapse_element("helmet");
|
||||
for (const i in tabs) {
|
||||
document.querySelector("#"+tabs[i]).style.display = "none";
|
||||
}
|
||||
document.querySelector("#"+tab).style.display = "";
|
||||
}
|
||||
|
||||
function toggle_boost_tab(tab) {
|
||||
for (const i of skp_keys) {
|
||||
document.querySelector("#"+i+"-boost").style.display = "none";
|
||||
}
|
||||
document.querySelector("#"+tab+"-boost").style.display = "";
|
||||
}
|
||||
|
||||
function collapse_element(eq) {
|
||||
elem_list = document.querySelector("#"+eq+"-tooltip").children
|
||||
for (elem of elem_list) {
|
||||
if (elem.classList.contains("no-collapse")) { continue; }
|
||||
if (elem.style.display == "none") {
|
||||
elem.style.display = "";
|
||||
} else {
|
||||
elem.style.display = "none";
|
||||
}
|
||||
}
|
||||
// macy quirk
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
// weird bug where display: none overrides??
|
||||
document.querySelector("#"+eq+"-tooltip").style.display = "";
|
||||
}
|
||||
|
||||
// autocomplete initialize
|
||||
function init_autocomplete() {
|
||||
let dropdowns = new Map()
|
||||
for (const i in equipment_keys) {
|
||||
for (const eq of equipment_keys) {
|
||||
// build dropdown
|
||||
console.log('init dropdown for '+ equipment_keys[i])
|
||||
console.log('init dropdown for '+ eq)
|
||||
let item_arr = [];
|
||||
if (equipment_keys[i] == 'weapon') {
|
||||
if (eq == 'weapon') {
|
||||
for (const weaponType of weapon_keys) {
|
||||
for (const weapon of itemLists.get(weaponType)) {
|
||||
let item_obj = itemMap.get(weapon);
|
||||
if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
|
||||
continue;
|
||||
}
|
||||
if (item_obj["name"] == 'No '+ equipment_keys[i].charAt(0).toUpperCase() + equipment_keys[i].slice(1)) {
|
||||
if (item_obj["name"] == 'No '+ eq.charAt(0).toUpperCase() + eq.slice(1)) {
|
||||
continue;
|
||||
}
|
||||
item_arr.push(weapon);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (const item of itemLists.get(equipment_keys[i].replace(/[0-9]/g, ''))) {
|
||||
for (const item of itemLists.get(eq.replace(/[0-9]/g, ''))) {
|
||||
let item_obj = itemMap.get(item);
|
||||
if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
|
||||
continue;
|
||||
}
|
||||
if (item_obj["name"] == 'No '+ equipment_keys[i].charAt(0).toUpperCase() + equipment_keys[i].slice(1)) {
|
||||
if (item_obj["name"] == 'No '+ eq.charAt(0).toUpperCase() + eq.slice(1)) {
|
||||
continue;
|
||||
}
|
||||
item_arr.push(item)
|
||||
|
|
@ -131,11 +202,11 @@ function init_autocomplete() {
|
|||
}
|
||||
|
||||
// create dropdown
|
||||
dropdowns.set(equipment_keys[i], new autoComplete({
|
||||
dropdowns.set(eq, new autoComplete({
|
||||
data: {
|
||||
src: item_arr
|
||||
},
|
||||
selector: "#"+ equipment_keys[i] +"-choice",
|
||||
selector: "#"+ eq +"-choice",
|
||||
wrapper: false,
|
||||
resultsList: {
|
||||
tabSelect: true,
|
||||
|
|
@ -143,7 +214,7 @@ function init_autocomplete() {
|
|||
class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
|
||||
element: (list, data) => {
|
||||
// dynamic result loc
|
||||
let position = document.getElementById(equipment_keys[i]+'-dropdown').getBoundingClientRect();
|
||||
let position = document.getElementById(eq+'-dropdown').getBoundingClientRect();
|
||||
list.style.top = position.bottom + window.scrollY +"px";
|
||||
list.style.left = position.x+"px";
|
||||
list.style.width = position.width+"px";
|
||||
|
|
@ -151,8 +222,7 @@ function init_autocomplete() {
|
|||
if (!data.results.length) {
|
||||
message = document.createElement('li');
|
||||
message.classList.add('scaled-font');
|
||||
message.textContent = "Add: "+ data.query;
|
||||
message.value = data.query;
|
||||
message.textContent = "No results found!";
|
||||
list.prepend(message);
|
||||
}
|
||||
},
|
||||
|
|
@ -170,7 +240,7 @@ function init_autocomplete() {
|
|||
if (event.detail.selection.value) {
|
||||
event.target.value = event.detail.selection.value;
|
||||
}
|
||||
update_fields(equipment_keys[i]);
|
||||
update_field(eq);
|
||||
calcBuildSchedule();
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -72,6 +72,9 @@ let powderInputs = [
|
|||
function init() {
|
||||
console.log("builder.js init");
|
||||
init_autocomplete();
|
||||
for (const i of equipment_keys) {
|
||||
update_field(i);
|
||||
}
|
||||
decodeBuild(url_tag);
|
||||
}
|
||||
|
||||
|
|
@ -639,8 +642,9 @@ function updatePowderSpecials(buttonId, recalcStats) {
|
|||
if (recalcStats) {
|
||||
calculateBuildStats();
|
||||
}
|
||||
displayPowderSpecials(document.getElementById("powder-special-stats"), powderSpecials, player_build);
|
||||
displaysq2PowderSpecials(document.getElementById("powder-special-stats"), powderSpecials, player_build, true);
|
||||
}
|
||||
|
||||
/* Calculates all build statistics and updates the entire display.
|
||||
*/
|
||||
function calculateBuildStats() {
|
||||
|
|
@ -738,11 +742,10 @@ function calculateBuildStats() {
|
|||
}
|
||||
|
||||
for (let i in player_build.items) {
|
||||
// displaysq2ExpandedItem(player_build.items[i], buildFields[i], true);
|
||||
displaysq2ExpandedItem(player_build.items[i], buildFields[i], false);
|
||||
collapse_element(equipment_keys[i]);
|
||||
}
|
||||
|
||||
update_fields()
|
||||
|
||||
displaysq2ArmorStats(player_build);
|
||||
displaysq2BuildStats("all-stats", player_build, build_all_display_commands);
|
||||
displaysq2BuildStats("minimal-offensive-stats",player_build, build_offensive_display_commands);
|
||||
|
|
|
|||
205
sq2display.js
205
sq2display.js
|
|
@ -145,39 +145,27 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
} else if (item.get("category") === "armor") {
|
||||
}
|
||||
|
||||
let display_commands = item_display_commands;
|
||||
let display_commands = sq2_item_display_commands;
|
||||
|
||||
// Clear the parent div.
|
||||
setHTML(parent_id, "");
|
||||
let parent_div = document.getElementById(parent_id);
|
||||
|
||||
let active_elem;
|
||||
let fix_id = item.has("fixID") && item.get("fixID");
|
||||
let elemental_format = false;
|
||||
for (let i = 0; i < display_commands.length; i++) {
|
||||
const command = display_commands[i];
|
||||
if (command.charAt(0) === "#") {
|
||||
if (command === "#cdiv") {
|
||||
active_elem = document.createElement('div');
|
||||
active_elem.classList.add('center');
|
||||
}
|
||||
else if (command === "#ldiv") {
|
||||
active_elem = document.createElement('div');
|
||||
active_elem.classList.add('left');
|
||||
}
|
||||
else if (command === "#table") {
|
||||
active_elem = document.createElement('table');
|
||||
active_elem.style.width = "100%";
|
||||
}
|
||||
|
||||
active_elem.classList.add('item-margin');
|
||||
parent_div.appendChild(active_elem);
|
||||
}
|
||||
else if (command.charAt(0) === "!") {
|
||||
if (command.charAt(0) === "!") {
|
||||
// TODO: This is sooo incredibly janky.....
|
||||
if (command === "!elemental") {
|
||||
elemental_format = !elemental_format;
|
||||
}
|
||||
else if (command === "!spacer") {
|
||||
let spacer = document.createElement('div');
|
||||
spacer.classList.add("row", "my-2");
|
||||
parent_div.appendChild(spacer);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
else {
|
||||
let id = command;
|
||||
|
|
@ -189,13 +177,13 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
}
|
||||
}
|
||||
if (id === "slots") {
|
||||
let p_elem = document.createElement("p");
|
||||
p_elem.classList.add('itemp')
|
||||
let p_elem = document.createElement("div");
|
||||
p_elem.classList.add("col");
|
||||
|
||||
// PROPER POWDER DISPLAYING
|
||||
let numerals = new Map([[1, "I"], [2, "II"], [3, "III"], [4, "IV"], [5, "V"], [6, "VI"]]);
|
||||
|
||||
let powderPrefix = document.createElement("b");
|
||||
powderPrefix.classList.add("powderLeft"); powderPrefix.classList.add("left");
|
||||
powderPrefix.textContent = "Powder Slots: " + item.get(id) + " [";
|
||||
p_elem.appendChild(powderPrefix);
|
||||
|
||||
|
|
@ -208,22 +196,21 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
}
|
||||
|
||||
let powderSuffix = document.createElement("b");
|
||||
powderSuffix.classList.add("powderRight"); powderSuffix.classList.add("left");
|
||||
powderSuffix.textContent = "]";
|
||||
p_elem.appendChild(powderSuffix);
|
||||
active_elem.appendChild(p_elem);
|
||||
parent_div.appendChild(p_elem);
|
||||
} else if (id === "set") {
|
||||
if (item.get("hideSet")) { continue; }
|
||||
|
||||
let p_elem = document.createElement("p");
|
||||
p_elem.classList.add("itemp");
|
||||
let p_elem = document.createElement("div");
|
||||
p_elem.classList.add("col");
|
||||
p_elem.textContent = "Set: " + item.get(id).toString();
|
||||
active_elem.appendChild(p_elem);
|
||||
parent_div.appendChild(p_elem);
|
||||
} else if (id === "majorIds") {
|
||||
console.log(item.get(id));
|
||||
for (let majorID of item.get(id)) {
|
||||
let p_elem = document.createElement("p");
|
||||
p_elem.classList.add("itemp");
|
||||
let p_elem = document.createElement("div");
|
||||
p_elem.classList.add("col");
|
||||
|
||||
let title_elem = document.createElement("b");
|
||||
let b_elem = document.createElement("b");
|
||||
|
|
@ -244,17 +231,16 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
b_elem.textContent = name;
|
||||
p_elem.appendChild(b_elem);
|
||||
}
|
||||
active_elem.appendChild(p_elem);
|
||||
parent_div.appendChild(p_elem);
|
||||
}
|
||||
} else if (id === "lvl" && item.get("tier") === "Crafted") {
|
||||
let p_elem = document.createElement("p");
|
||||
p_elem.classList.add("itemp");
|
||||
let p_elem = document.createElement("div");
|
||||
p_elems.classList.add("col");
|
||||
p_elem.textContent = "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id);
|
||||
active_elem.appendChild(p_elem);
|
||||
parent_div.appendChild(p_elem);
|
||||
} else if (id === "displayName") {
|
||||
let p_elem = document.createElement("a");
|
||||
p_elem.classList.add('itemp');
|
||||
p_elem.classList.add("smalltitle");
|
||||
let p_elem = document.createElement("div");
|
||||
p_elem.classList.add("col", "text-center", "no-collapse");
|
||||
p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "none");
|
||||
|
||||
if (item.get("custom")) {
|
||||
|
|
@ -268,44 +254,40 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
p_elem.textContent = item.get("displayName");
|
||||
}
|
||||
|
||||
p_elem.target = "_blank";
|
||||
active_elem.appendChild(p_elem);
|
||||
parent_div.appendChild(p_elem);
|
||||
let img = document.createElement("img");
|
||||
if (item && item.has("type")) {
|
||||
img.src = "./media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png";
|
||||
img.alt = item.get("type");
|
||||
if (mini) {
|
||||
img.style = " z=index: 1;max-width: 32px; max-height: 32px; position: relative; top: 50%; transform: translateY(-50%);";
|
||||
img.style = " z=index: 1; position: relative;";
|
||||
} else {
|
||||
img.style = " z=index: 1;max-width: 48px; max-height: 48px; position: relative; top: 50%; transform: translateY(-50%);";
|
||||
img.style = " z=index: 1; position: relative;";
|
||||
}
|
||||
let bckgrd = document.createElement("p");
|
||||
let bckgrd = document.createElement("div");
|
||||
bckgrd.classList.add("col", "px-0", "d-flex", "align-items-center", "justify-content-center", "no-collapse");
|
||||
if (mini) {
|
||||
bckgrd.style = "width: 48px; height: 48px; border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "#121516 80%); margin-left: auto; margin-right: auto;"
|
||||
bckgrd.style = "border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "hsl(0, 0%, 16%) 80%); margin-left: auto; margin-right: auto;"
|
||||
} else {
|
||||
bckgrd.style = "width: 64px; height: 64px; border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "#121516 80%); margin-left: auto; margin-right: auto;"
|
||||
bckgrd.style = "border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "hsl(0, 0%, 16%) 80%); margin-left: auto; margin-right: auto;"
|
||||
bckgrd.classList.add("scaled-bckgrd");
|
||||
}
|
||||
bckgrd.classList.add("center");
|
||||
bckgrd.classList.add("itemp");
|
||||
active_elem.appendChild(bckgrd);
|
||||
parent_div.appendChild(bckgrd);
|
||||
bckgrd.appendChild(img);
|
||||
}
|
||||
} else {
|
||||
let p_elem;
|
||||
if ( !(item.get("tier") === "Crafted" && item.get("category") === "armor" && id === "hp") && (!skp_order.includes(id)) || (skp_order.includes(id) && item.get("tier") !== "Crafted" && active_elem.nodeName === "DIV") ) { //skp warp
|
||||
p_elem = displaysq2FixedID(active_elem, id, item.get(id), elemental_format);
|
||||
if ( !(item.get("tier") === "Crafted" && item.get("category") === "armor" && id === "hp") && (!skp_order.includes(id)) || (skp_order.includes(id) && item.get("tier") !== "Crafted" && parent_div.nodeName === "table") ) { //skp warp
|
||||
p_elem = displaysq2FixedID(parent_div, id, item.get(id), elemental_format);
|
||||
} else if (item.get("tier") === "Crafted" && item.get("category") === "armor" && id === "hp") {
|
||||
p_elem = displaysq2FixedID(active_elem, id, item.get(id+"Low")+"-"+item.get(id), elemental_format);
|
||||
p_elem = displaysq2FixedID(parent_div, id, item.get(id+"Low")+"-"+item.get(id), elemental_format);
|
||||
}
|
||||
if (id === "lore") {
|
||||
p_elem.style = "font-style: italic";
|
||||
p_elem.classList.add("lore");
|
||||
} else if (skp_order.includes(id)) { //id = str, dex, int, def, or agi
|
||||
if ( item.get("tier") !== "Crafted" && active_elem.nodeName === "DIV") {
|
||||
p_elem.textContent = "";
|
||||
p_elem.classList.add("itemp");
|
||||
row = document.createElement("p");
|
||||
row.classList.add("left");
|
||||
if ( item.get("tier") !== "Crafted" && parent_div.nodeName === "DIV") {
|
||||
row = document.createElement("div");
|
||||
row.classList.add("col");
|
||||
|
||||
let title = document.createElement("b");
|
||||
title.textContent = idPrefixes[id] + " ";
|
||||
|
|
@ -318,10 +300,10 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
boost.textContent = item.get(id);
|
||||
row.appendChild(title);
|
||||
row.appendChild(boost);
|
||||
p_elem.appendChild(row);
|
||||
} else if ( item.get("tier") === "Crafted" && active_elem.nodeName === "TABLE") {
|
||||
parent_div.appendChild(row);
|
||||
} else if ( item.get("tier") === "Crafted" && parent_div.nodeName === "TABLE") {
|
||||
let row = displaysq2RolledID(item, id, elemental_format);
|
||||
active_elem.appendChild(row);
|
||||
parent_div.appendChild(row);
|
||||
}
|
||||
} else if (id === "restrict") {
|
||||
p_elem.classList.add("restrict");
|
||||
|
|
@ -339,11 +321,17 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
style === "positive" ? style = "negative" : style = "positive";
|
||||
}
|
||||
if (fix_id) {
|
||||
displaysq2FixedID(active_elem, id, item.get("minRolls").get(id), elemental_format, style);
|
||||
p_elem = document.createElement("div");
|
||||
p_elem.classList.add("col", "text-nowrap");
|
||||
if (id == "dex") {
|
||||
console.log("dex activated at fix_id")
|
||||
}
|
||||
displaysq2FixedID(p_elem, id, item.get("minRolls").get(id), elemental_format, style);
|
||||
parent_div.appendChild(p_elem);
|
||||
}
|
||||
else {
|
||||
let row = displaysq2RolledID(item, id, elemental_format);
|
||||
active_elem.appendChild(row);
|
||||
parent_div.appendChild(row);
|
||||
}
|
||||
}else{
|
||||
// :/
|
||||
|
|
@ -353,8 +341,8 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
//Show powder specials ;-;
|
||||
let nonConsumables = ["relik", "wand", "bow", "spear", "dagger", "chestplate", "helmet", "leggings", "boots", "ring", "bracelet", "necklace"];
|
||||
if(nonConsumables.includes(item.get("type"))) {
|
||||
let powder_special = document.createElement("p");
|
||||
powder_special.classList.add("left");
|
||||
let powder_special = document.createElement("div");
|
||||
powder_special.classList.add("col");
|
||||
let powders = item.get("powders");
|
||||
let element = "";
|
||||
let power = 0;
|
||||
|
|
@ -375,10 +363,9 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
if (element !== "") {//powder special is "[e,t,w,f,a]+[0,1,2,3,4]"
|
||||
let powderSpecial = powderSpecialStats[ skp_elements.indexOf(element)];
|
||||
let specialSuffixes = new Map([ ["Duration", " sec"], ["Radius", " blocks"], ["Chains", ""], ["Damage", "%"], ["Damage Boost", "%"], ["Knockback", " blocks"] ]);
|
||||
let specialTitle = document.createElement("p");
|
||||
let specialEffects = document.createElement("p");
|
||||
addClasses(specialTitle, ["left", "itemp", damageClasses[skp_elements.indexOf(element) + 1]]);
|
||||
addClasses(specialEffects, ["left", "itemp", "nocolor"]);
|
||||
let specialTitle = document.createElement("span");
|
||||
let specialEffects = document.createElement("span");
|
||||
addClasses(specialTitle, [damageClasses[skp_elements.indexOf(element) + 1]]);
|
||||
let effects;
|
||||
if (item.get("category") === "weapon") {//weapon
|
||||
effects = powderSpecial["weaponSpecialEffects"];
|
||||
|
|
@ -390,7 +377,7 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
for (const [key,value] of effects.entries()) {
|
||||
if (key !== "Description") {
|
||||
let effect = document.createElement("p");
|
||||
effect.classList.add("itemp");
|
||||
effect.classList.add("m-0");
|
||||
effect.textContent = key + ": " + value[power] + specialSuffixes.get(key);
|
||||
if(key === "Damage"){
|
||||
effect.textContent += elementIcons[skp_elements.indexOf(element)];
|
||||
|
|
@ -410,8 +397,8 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
}
|
||||
|
||||
if(item.get("tier") && item.get("tier") === "Crafted") {
|
||||
let dura_elem = document.createElement("p");
|
||||
dura_elem.classList.add("itemp");
|
||||
let dura_elem = document.createElement("div");
|
||||
dura_elem.classList.add("col");
|
||||
let dura = [];
|
||||
let suffix = "";
|
||||
if(nonConsumables.includes(item.get("type"))) {
|
||||
|
|
@ -423,8 +410,7 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
suffix = " sec."
|
||||
let charges = document.createElement("b");
|
||||
charges.textContent = "Charges: " + item.get("charges");
|
||||
charges.classList.add("spaceleft");
|
||||
active_elem.appendChild(charges);
|
||||
parent_div.appendChild(charges);
|
||||
}
|
||||
|
||||
if (typeof(dura) === "string") {
|
||||
|
|
@ -432,16 +418,16 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
} else {
|
||||
dura_elem.textContent += dura[0]+"-"+dura[1] + suffix;
|
||||
}
|
||||
active_elem.append(dura_elem);
|
||||
parent_div.append(dura_elem);
|
||||
|
||||
}
|
||||
//Show item tier
|
||||
if (item.get("tier") && item.get("tier") !== " ") {
|
||||
let item_desc_elem = document.createElement("p");
|
||||
item_desc_elem.classList.add('itemp');
|
||||
let item_desc_elem = document.createElement("div");
|
||||
item_desc_elem.classList.add("col");
|
||||
item_desc_elem.classList.add(item.get("tier"));
|
||||
item_desc_elem.textContent = item.get("tier")+" "+item.get("type");
|
||||
active_elem.append(item_desc_elem);
|
||||
parent_div.append(item_desc_elem);
|
||||
}
|
||||
|
||||
//Show item hash if applicable
|
||||
|
|
@ -452,7 +438,7 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
item_desc_elem.style.wordWrap = "break-word";
|
||||
item_desc_elem.style.wordBreak = "break-word";
|
||||
item_desc_elem.textContent = item.get("hash");
|
||||
active_elem.append(item_desc_elem);
|
||||
parent_div.append(item_desc_elem);
|
||||
}
|
||||
|
||||
if (item.get("category") === "weapon") {
|
||||
|
|
@ -476,10 +462,14 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
|
|||
}
|
||||
|
||||
function displaysq2RolledID(item, id, elemental_format) {
|
||||
let row = document.createElement('tr');
|
||||
let min_elem = document.createElement('td');
|
||||
min_elem.classList.add('shaded-table');
|
||||
min_elem.classList.add('left');
|
||||
let row = document.createElement('div');
|
||||
row.classList.add('col');
|
||||
|
||||
let item_div = document.createElement('div');
|
||||
item_div.classList.add('row');
|
||||
|
||||
let min_elem = document.createElement('div');
|
||||
min_elem.classList.add('col', 'text-start');
|
||||
let id_min = item.get("minRolls").get(id)
|
||||
let style = id_min < 0 ? "negative" : "positive";
|
||||
if(reversedIDs.includes(id)){
|
||||
|
|
@ -487,11 +477,10 @@ function displaysq2RolledID(item, id, elemental_format) {
|
|||
}
|
||||
min_elem.classList.add(style);
|
||||
min_elem.textContent = id_min + idSuffixes[id];
|
||||
row.appendChild(min_elem);
|
||||
item_div.appendChild(min_elem);
|
||||
|
||||
let desc_elem = document.createElement('td');
|
||||
desc_elem.classList.add('center');
|
||||
desc_elem.classList.add('shaded-table')
|
||||
let desc_elem = document.createElement('div');
|
||||
desc_elem.classList.add('col', 'text-center', 'text-nowrap');
|
||||
//TODO elemental format jank
|
||||
if (elemental_format) {
|
||||
apply_elemental_format(desc_elem, id);
|
||||
|
|
@ -499,19 +488,19 @@ function displaysq2RolledID(item, id, elemental_format) {
|
|||
else {
|
||||
desc_elem.textContent = idPrefixes[id];
|
||||
}
|
||||
row.appendChild(desc_elem);
|
||||
item_div.appendChild(desc_elem);
|
||||
|
||||
let max_elem = document.createElement('td');
|
||||
let max_elem = document.createElement('div');
|
||||
let id_max = item.get("maxRolls").get(id)
|
||||
max_elem.classList.add('right');
|
||||
max_elem.classList.add('shaded-table')
|
||||
max_elem.classList.add('col', 'text-end');
|
||||
style = id_max < 0 ? "negative" : "positive";
|
||||
if(reversedIDs.includes(id)){
|
||||
style === "positive" ? style = "negative" : style = "positive";
|
||||
}
|
||||
max_elem.classList.add(style);
|
||||
max_elem.textContent = id_max + idSuffixes[id];
|
||||
row.appendChild(max_elem);
|
||||
item_div.appendChild(max_elem);
|
||||
row.appendChild(item_div);
|
||||
return row;
|
||||
}
|
||||
|
||||
|
|
@ -573,8 +562,8 @@ function displaysq2FixedID(active, id, value, elemental_format, style) {
|
|||
if (value === "0-0" || value === "0-0\u279c0-0") {
|
||||
return;
|
||||
}
|
||||
let p_elem = document.createElement('p');
|
||||
p_elem.classList.add('itemp');
|
||||
let p_elem = document.createElement('div');
|
||||
p_elem.classList.add('col');
|
||||
if (elemental_format) {
|
||||
apply_elemental_format(p_elem, id, value);
|
||||
}
|
||||
|
|
@ -1029,8 +1018,11 @@ function displaysq2DefenseStats(parent_elem, build, insertSummary){
|
|||
}
|
||||
}
|
||||
|
||||
function displaysq2PowderSpecials(parent_elem, powderSpecials, build) {
|
||||
parent_elem.textContent = "Powder Specials";
|
||||
function displaysq2PowderSpecials(parent_elem, powderSpecials, build, overall=false) {
|
||||
parent_elem.textContent = ""
|
||||
let title = document.createElement("b");
|
||||
title.textContent = "Powder Specials";
|
||||
parent_elem.appendChild(title);
|
||||
let specials = powderSpecials.slice();
|
||||
let stats = build.statMap;
|
||||
let expandedStats = new Map();
|
||||
|
|
@ -1038,19 +1030,17 @@ function displaysq2PowderSpecials(parent_elem, powderSpecials, build) {
|
|||
for (special of specials) {
|
||||
//iterate through the special and display its effects.
|
||||
let powder_special = document.createElement("p");
|
||||
powder_special.classList.add("left");
|
||||
let specialSuffixes = new Map([ ["Duration", " sec"], ["Radius", " blocks"], ["Chains", ""], ["Damage", "%"], ["Damage Boost", "%"], ["Knockback", " blocks"] ]);
|
||||
let specialTitle = document.createElement("p");
|
||||
let specialEffects = document.createElement("p");
|
||||
specialTitle.classList.add("left");
|
||||
specialTitle.classList.add(damageClasses[powderSpecialStats.indexOf(special[0]) + 1]);
|
||||
specialEffects.classList.add("left");
|
||||
let effects = special[0]["weaponSpecialEffects"];
|
||||
let power = special[1];
|
||||
specialTitle.textContent = special[0]["weaponSpecialName"] + " " + Math.floor((power-1)*0.5 + 4) + (power % 2 == 0 ? ".5" : "");
|
||||
|
||||
if (!overall || powderSpecialStats.indexOf(special[0]) == 2 || powderSpecialStats.indexOf(special[0]) == 3 || powderSpecialStats.indexOf(special[0]) == 4) {
|
||||
for (const [key,value] of effects) {
|
||||
let effect = document.createElement("p");
|
||||
effect.classList.add("item-margin");
|
||||
effect.textContent += key + ": " + value[power-1] + specialSuffixes.get(key);
|
||||
if(key === "Damage"){
|
||||
effect.textContent += elementIcons[powderSpecialStats.indexOf(special[0])];
|
||||
|
|
@ -1060,7 +1050,7 @@ function displaysq2PowderSpecials(parent_elem, powderSpecials, build) {
|
|||
}
|
||||
specialEffects.appendChild(effect);
|
||||
}
|
||||
|
||||
}
|
||||
powder_special.appendChild(specialTitle);
|
||||
powder_special.appendChild(specialEffects);
|
||||
|
||||
|
|
@ -1090,13 +1080,19 @@ function displaysq2PowderSpecials(parent_elem, powderSpecials, build) {
|
|||
let critAverage = (totalDamCrit[0]+totalDamCrit[1])/2 || 0;
|
||||
let averageDamage = (1-critChance)*nonCritAverage+critChance*critAverage || 0;
|
||||
|
||||
let averageLabel = document.createElement("p");
|
||||
averageLabel.textContent = "Average: "+averageDamage.toFixed(2);
|
||||
averageLabel.classList.add("damageSubtitle");
|
||||
averageLabel.classList.add("item-margin");
|
||||
specialDamage.append(averageLabel);
|
||||
let averageWrap = document.createElement("p");
|
||||
let averageLabel = document.createElement("span");
|
||||
averageLabel.textContent = "Average: ";
|
||||
|
||||
let averageLabelDmg = document.createElement("span");
|
||||
averageLabelDmg.classList.add("Damage");
|
||||
averageLabelDmg.textContent = averageDamage.toFixed(2);
|
||||
|
||||
averageWrap.appendChild(averageLabel);
|
||||
averageWrap.appendChild(averageLabelDmg);
|
||||
specialDamage.appendChild(averageWrap);
|
||||
|
||||
if (!overall) {
|
||||
let nonCritLabel = document.createElement("p");
|
||||
nonCritLabel.textContent = "Non-Crit Average: "+nonCritAverage.toFixed(2);
|
||||
nonCritLabel.classList.add("damageSubtitle");
|
||||
|
|
@ -1146,6 +1142,7 @@ function displaysq2PowderSpecials(parent_elem, powderSpecials, build) {
|
|||
specialDamage.append(critChanceLabel);
|
||||
|
||||
save_damages.push(averageDamage);
|
||||
}
|
||||
|
||||
powder_special.append(specialDamage);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,3 +58,51 @@ let build_basic_display_commands = [
|
|||
"atkTier",
|
||||
]
|
||||
|
||||
let sq2_item_display_commands = [
|
||||
"displayName",
|
||||
"atkSpd",
|
||||
"!elemental",
|
||||
"hp",
|
||||
"nDam_", "fDam_", "wDam_", "aDam_", "tDam_", "eDam_",
|
||||
"!spacer",
|
||||
"fDef", "wDef", "aDef", "tDef", "eDef",
|
||||
"!elemental",
|
||||
"classReq",
|
||||
"lvl",
|
||||
"strReq", "dexReq", "intReq", "defReq","agiReq",
|
||||
"!spacer",
|
||||
"str", "dex", "int", "def", "agi",
|
||||
"hpBonus",
|
||||
"hprRaw", "hprPct",
|
||||
"sdRaw", "sdPct",
|
||||
"mdRaw", "mdPct",
|
||||
"mr", "ms",
|
||||
"ref", "thorns",
|
||||
"ls",
|
||||
"poison",
|
||||
"expd",
|
||||
"spd",
|
||||
"atkTier",
|
||||
"!elemental",
|
||||
"fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct",
|
||||
"fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct",
|
||||
"!elemental",
|
||||
"spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4",
|
||||
"rainbowRaw",
|
||||
"sprint", "sprintReg",
|
||||
"jh",
|
||||
"xpb", "lb", "lq",
|
||||
"spRegen",
|
||||
"eSteal",
|
||||
"gXp", "gSpd",
|
||||
"majorIds",
|
||||
"!spacer",
|
||||
"slots",
|
||||
"!spacer",
|
||||
"set",
|
||||
"lore",
|
||||
"quest",
|
||||
"restrict"
|
||||
];
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue