Move item input field into class, vars for scaling font, fullwidth
This commit is contained in:
hppeng
parent
ce5532e1d9
commit
958017fc5c
5 changed files with 104 additions and 38 deletions
|
|
@ -34,7 +34,7 @@
|
|||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||
</head>
|
||||
<body class="text-light d-flex justify-content-center" id = "body">
|
||||
<body class="text-light" id = "body">
|
||||
<!-- hover tooltip stuff -->
|
||||
|
||||
<!-- 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>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="container py-5 vh-100 mx-0 mx-lg-auto">
|
||||
<div class="my-container">
|
||||
<div class="col">
|
||||
<div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-0">
|
||||
<div class="col-xl-6">
|
||||
|
|
@ -74,16 +74,16 @@
|
|||
<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-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 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 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="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">
|
||||
|
|
@ -101,16 +101,16 @@
|
|||
<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-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 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 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="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">
|
||||
|
|
@ -128,16 +128,16 @@
|
|||
<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-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 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 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="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">
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
<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-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 class="col d-flex justify-content-end" style="height: 100%;">
|
||||
</div>
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
</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="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">
|
||||
|
|
@ -181,16 +181,16 @@
|
|||
<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-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 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 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="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">
|
||||
|
|
@ -208,7 +208,7 @@
|
|||
<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-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 class="col d-flex justify-content-end" style="height: 100%;">
|
||||
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
</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="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">
|
||||
|
|
@ -235,16 +235,16 @@
|
|||
<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-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 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 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="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">
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
<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-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 class="col d-flex justify-content-end" style="height: 100%;">
|
||||
</div>
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
</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="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">
|
||||
|
|
@ -288,16 +288,16 @@
|
|||
<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-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 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 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="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">
|
||||
|
|
@ -308,15 +308,15 @@
|
|||
Level:
|
||||
</div>
|
||||
<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 class="row align-items-center">
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
:root {
|
||||
--sidebar-width: 3.5vw;
|
||||
}
|
||||
|
||||
/* sidebar stuff */
|
||||
.sidebar {
|
||||
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 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -38,5 +41,8 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
:root {
|
||||
--sidebar-width: 0px;
|
||||
}
|
||||
.sidebar {display: none;}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,6 +101,19 @@ input {
|
|||
|
||||
input.equipment-input {
|
||||
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 {
|
||||
|
|
@ -124,6 +137,9 @@ input.equipment-input {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
:root {
|
||||
--scaled-fontsize: 2.5rem;
|
||||
}
|
||||
.scaled-font {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
|
@ -180,8 +196,11 @@ input.equipment-input {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 1200px) and (max-width: 1400px) {
|
||||
:root {
|
||||
--scaled-fontsize: 1rem;
|
||||
}
|
||||
.scaled-font {
|
||||
font-size: .8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
|
|
@ -231,6 +250,9 @@ input.equipment-input {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 1400px) {
|
||||
:root {
|
||||
--scaled-fontsize: 1rem;
|
||||
}
|
||||
.scaled-font {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -407,4 +429,4 @@ input[type=number]::-webkit-outer-spin-button {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,14 @@ class ComputeNode {
|
|||
this.inputs = [];
|
||||
this.children = [];
|
||||
this.value = 0;
|
||||
this.compute_func = null;
|
||||
this.callback_func = null;
|
||||
this.name = name;
|
||||
this.update_task = null;
|
||||
this.update_time = Date.now();
|
||||
}
|
||||
|
||||
/***
|
||||
* Request update of this compute node. Pushes updates to children.
|
||||
*/
|
||||
update(timestamp) {
|
||||
if (timestamp < this.update_time) {
|
||||
return;
|
||||
|
|
@ -32,16 +33,25 @@ class ComputeNode {
|
|||
for (const input of this.inputs) {
|
||||
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) {
|
||||
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() {
|
||||
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.
|
||||
*
|
||||
* @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);
|
||||
this.input_field.setAttribute("onInput", "calcSchedule('"+name+"');");
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -118,6 +118,7 @@ function update_field(field) {
|
|||
// built on the assumption of no one will type in CI/CR letter by letter
|
||||
// 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.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');
|
||||
|
||||
item = document.querySelector("#"+field+"-choice").value
|
||||
|
|
|
|||
Loading…
Reference in a new issue