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

Move item input field into class, vars for scaling font, fullwidth

Browse source
This commit is contained in:
hppeng 2022-05-21 19:14:00 -07:00
parent ce5532e1d9
commit 958017fc5c
5 changed files with 104 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
builder/index.html
View file

@ -34,7 +34,7 @@
<link rel="stylesheet" href="../css/sidebar.css"> <link rel="stylesheet" href="../css/sidebar.css">
<link rel="stylesheet" href="../css/wynnstyles.css"> <link rel="stylesheet" href="../css/wynnstyles.css">
</head> </head>
<body class="text-light d-flex justify-content-center" id = "body"> <body class="text-light" id = "body">
<!-- hover tooltip stuff --> <!-- hover tooltip stuff -->
<!-- main --> <!-- main -->
@ -49,7 +49,7 @@
<a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</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/> <hr/>
</div> </div>
<div class="container py-5 vh-100 mx-0 mx-lg-auto"> <div class="my-container">
<div class="col"> <div class="col">
<div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-0"> <div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-0">
<div class="col-xl-6"> <div class="col-xl-6">
@ -74,16 +74,16 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/> <input class="equipment-input text-light form-control" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/>
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/> <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>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc">
<img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png"> <img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
@ -101,16 +101,16 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/> <input class="equipment-input text-light form-control" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
</div> </div>
<div class="col d-flex justify-content-end" style="height: 100%;"> <div class="col d-flex justify-content-end" style="height: 100%;">
<!-- <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> --> <!-- <input class="equipment-input text-light form-control" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc">
<img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png"> <img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png">
@ -128,16 +128,16 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/> <input class="equipment-input text-light form-control" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/>
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/> <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>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc">
<img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png"> <img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
@ -155,7 +155,7 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/> <input class="equipment-input text-light form-control" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/>
</div> </div>
<div class="col d-flex justify-content-end" style="height: 100%;"> <div class="col d-flex justify-content-end" style="height: 100%;">
</div> </div>
@ -163,7 +163,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc">
<img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png"> <img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png">
@ -181,16 +181,16 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/> <input class="equipment-input text-light form-control" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/>
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="leggings-powder" name="leggings-powder" placeholder="no powders" tabindex="1"/> <input class="equipment-input text-light form-control" type="text" id="leggings-powder" name="leggings-powder" placeholder="no powders" tabindex="1"/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc">
<img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png"> <img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png">
@ -208,7 +208,7 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/> <input class="equipment-input text-light form-control" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/>
</div> </div>
<div class="col d-flex justify-content-end" style="height: 100%;"> <div class="col d-flex justify-content-end" style="height: 100%;">
@ -217,7 +217,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc">
<img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png"> <img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png">
@ -235,16 +235,16 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/> <input class="equipment-input text-light form-control" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/>
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/> <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>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc">
<img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png"> <img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png">
@ -262,7 +262,7 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/> <input class="equipment-input text-light form-control" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/>
</div> </div>
<div class="col d-flex justify-content-end" style="height: 100%;"> <div class="col d-flex justify-content-end" style="height: 100%;">
</div> </div>
@ -270,7 +270,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'> <div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'>
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
<img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-wand.png"> <img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-wand.png">
@ -288,16 +288,16 @@
<div class="col g-0 rounded"> <div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/> <input class="equipment-input text-light form-control" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/> <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>
</div> </div>
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded"> <div class="row h-100 dark-shadow dark-6 rounded">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
<img class="img-fluid rounded" src="../media/icons/new/Gears.png"> <img class="img-fluid rounded" src="../media/icons/new/Gears.png">
@ -308,15 +308,15 @@
Level: Level:
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<input class="border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/> <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>
</div> </div>
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto px-1 text-nowrap scaled-font"> <div class="col-auto px-1 text-nowrap scaled-font">
<button class="border-dark text-light dark-5 rounded scaled-font rounded" id=copy-button onclick="copyBuild()">Copy short</button> <button class="border-dark text-light dark-5 scaled-font rounded" id=copy-button onclick="copyBuild()">Copy short</button>
</div> </div>
<div class="col-auto px-1 text-nowrap scaled-font"> <div class="col-auto px-1 text-nowrap scaled-font">
<button class="border-dark text-light dark-5 rounded scaled-font rounded" id=share-button onclick="shareBuild()">Copy for sharing</button> <button class="border-dark text-light dark-5 scaled-font rounded" id=share-button onclick="shareBuild()">Copy for sharing</button>
</div> </div>
</div> </div>
</div> </div>

8
css/sidebar.css
View file

@ -1,8 +1,11 @@
:root {
--sidebar-width: 3.5vw;
}
/* sidebar stuff */ /* sidebar stuff */
.sidebar { .sidebar {
height: 100%; /* 100% Full-height */ height: 100%; /* 100% Full-height */
width: 3.5vw; /* 0 width - change this with JavaScript */ width: var(--sidebar-width); /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
top: 0; top: 0;
left: 0; left: 0;
@ -38,5 +41,8 @@
} }
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
:root {
--sidebar-width: 0px;
}
.sidebar {display: none;} .sidebar {display: none;}
} }

26
css/sq2bs.css
View file

@ -101,6 +101,19 @@ input {
input.equipment-input { input.equipment-input {
font-weight: bold; font-weight: bold;
background-color: hsl(0, 0%, 21%) !important;
border-radius: 0.375rem !important;
border-color: rgba(33, 37, 41, 1) !important;
min-height: calc(1.2 * var(--scaled-fontsize) + 2px);
padding: 0rem 0.5rem;
font-size: var(--scaled-fontsize);
}
.my-container {
position: fixed; /* Stay in place */
left: var(--sidebar-width);
overflow-y: scroll;
height: 100%;
} }
.text-right { .text-right {
@ -124,6 +137,9 @@ input.equipment-input {
cursor: pointer; cursor: pointer;
} }
:root {
--scaled-fontsize: 2.5rem;
}
.scaled-font { .scaled-font {
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -180,8 +196,11 @@ input.equipment-input {
} }
@media screen and (min-width: 1200px) and (max-width: 1400px) { @media screen and (min-width: 1200px) and (max-width: 1400px) {
:root {
--scaled-fontsize: 1rem;
}
.scaled-font { .scaled-font {
font-size: .8rem; font-size: 1rem;
} }
.box-title { .box-title {
@ -231,6 +250,9 @@ input.equipment-input {
} }
@media screen and (min-width: 1400px) { @media screen and (min-width: 1400px) {
:root {
--scaled-fontsize: 1rem;
}
.scaled-font { .scaled-font {
font-size: 1rem; font-size: 1rem;
} }
@ -407,4 +429,4 @@ input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }

49
js/computation_graph.js
View file

@ -15,13 +15,14 @@ class ComputeNode {
this.inputs = []; this.inputs = [];
this.children = []; this.children = [];
this.value = 0; this.value = 0;
this.compute_func = null;
this.callback_func = null;
this.name = name; this.name = name;
this.update_task = null; this.update_task = null;
this.update_time = Date.now(); this.update_time = Date.now();
} }
/***
* Request update of this compute node. Pushes updates to children.
*/
update(timestamp) { update(timestamp) {
if (timestamp < this.update_time) { if (timestamp < this.update_time) {
return; return;
@ -32,16 +33,25 @@ class ComputeNode {
for (const input of this.inputs) { for (const input of this.inputs) {
value_map.set(input.name, input.get_value()); value_map.set(input.name, input.get_value());
} }
this.value = this.compute_func(this.value_map); this.value = this.compute_func();
for (const child of this.children) { for (const child of this.children) {
child.update(); child.update();
} }
this.callback_func(this.value);
} }
/***
* Get value of this compute node. Can't trigger update cascades (push based update, not pull based.)
*/
get_value() { get_value() {
return this.value return this.value
} }
/***
* Abstract method for computing something. Return value is set into this.value
*/
compute_func() {
throw "no compute func specified";
}
} }
/*** /***
@ -69,12 +79,39 @@ class ItemStats extends ComputeNode {
* Make an item stat pulling compute node. * Make an item stat pulling compute node.
* *
* @param name: Name of this node. * @param name: Name of this node.
* @oaram item_input_field: Input field (html element) to listen for item names from. * @param item_input_field: Input field (html element) to listen for item names from.
* @param none_item: Item object to use as the "none" for this field.
*/ */
constructor(name, item_input_field) { constructor(name, item_input_field, none_item) {
super(name); super(name);
this.input_field.setAttribute("onInput", "calcSchedule('"+name+"');"); this.input_field.setAttribute("onInput", "calcSchedule('"+name+"');");
this.input_field = item_input_field; this.input_field = item_input_field;
this.none_item = none_item;
}
compute_func() {
// built on the assumption of no one will type in CI/CR letter by letter
let item_text = this.input_field.value;
let item;
if (item_text.slice(0, 3) == "CI-") {
item = getCustomFromHash(item_text);
}
else if (item_text.slice(0, 3) == "CR-") {
item = getCraftFromHash(item_text);
}
else if (itemMap.has(item_text)) {
item = itemMap.get(item_text);
}
else if (tomeMap.has(item_text)) {
item = tomeMap.get(item_text);
}
if (!item) {
return this.none_item;
}
return item;
} }
} }

1
js/sq2bs.js
View file

@ -118,6 +118,7 @@ function update_field(field) {
// built on the assumption of no one will type in CI/CR letter by letter // built on the assumption of no one will type in CI/CR letter by letter
// resets // resets
document.querySelector("#"+field+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set', 'Crafted', 'Custom'); document.querySelector("#"+field+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set', 'Crafted', 'Custom');
document.querySelector("#"+field+"-choice").classList.add("text-light");
document.querySelector("#" + field + "-img").classList.remove('Normal-shadow', 'Unique-shadow', 'Rare-shadow', 'Legendary-shadow', 'Fabled-shadow', 'Mythic-shadow', 'Set-shadow', 'Crafted-shadow', 'Custom-shadow'); document.querySelector("#" + field + "-img").classList.remove('Normal-shadow', 'Unique-shadow', 'Rare-shadow', 'Legendary-shadow', 'Fabled-shadow', 'Mythic-shadow', 'Set-shadow', 'Crafted-shadow', 'Custom-shadow');
item = document.querySelector("#"+field+"-choice").value item = document.querySelector("#"+field+"-choice").value