margin 'fix'
This commit is contained in:
ferricles
commit
ae46df287d
6 changed files with 221 additions and 103 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-10 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-10 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-10 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-10 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-10 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-10 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-10 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-10 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-10 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-10 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-10 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-10 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-10 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,56 +288,36 @@
|
|||
<div class="col g-0 rounded">
|
||||
<div class="row row-cols-1 h-100 align-items-center">
|
||||
<div class="col d-flex justify-content-end">
|
||||
<input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="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-10 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">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row row-cols-1 h-100 align-items-center">
|
||||
<div class="col scaled-font fw-bold gx-3" id="weapon-dps">
|
||||
base dps: 0
|
||||
</div>
|
||||
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="weapon-lv">
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col g-0 rounded">
|
||||
<div class="row row-cols-1 h-100 align-items-center">
|
||||
<div class="col d-flex justify-content-end">
|
||||
<input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" 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-10 rounded scaled-font form-control form-control-sm" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="col">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-3 text-nowrap scaled-font">
|
||||
Level:
|
||||
</div>
|
||||
<div class="col d-flex justify-content-end">
|
||||
<input class="border-dark text-light dark-10 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="button text-light dark-5 rounded scaled-font" id=copy-button onclick="copyBuild()">Copy short</button>
|
||||
<button class="button fw-bold 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="button text-light dark-5 rounded scaled-font" id=share-button onclick="shareBuild()">Copy for sharing</button>
|
||||
<button class="button fw-bold text-light dark-5 scaled-font rounded" id=share-button onclick="shareBuild()">Copy for sharing</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1292,44 +1272,51 @@
|
|||
</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 dark-shadow p-3">
|
||||
<!-- Row wrapping so that we maintain padding like above rows -->
|
||||
<div class = "col">
|
||||
<div class = "row">
|
||||
<div class="col-12 mx-4" id="masonry-container">
|
||||
<div id="helmet-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="chestplate-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="chestplate-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="leggings-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="leggings-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="boots-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="boots-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="ring1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="ring1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="ring2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="ring2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="bracelet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="bracelet-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="necklace-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="necklace-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="weapon-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="weaponTome1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="weaponTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="weaponTome2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="weaponTome2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="armorTome1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="armorTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="armorTome2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="armorTome2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="armorTome3-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="armorTome3-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="armorTome4-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="armorTome4-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div id="guildTome1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
<div id="guildTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
|
||||
</div>
|
||||
<div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order">
|
||||
<div class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order">
|
||||
</div>
|
||||
<div class = "rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info"></div>
|
||||
<div class = "rounded row g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info"></div>
|
||||
</div>
|
||||
<div class="col dark-5 scaled-font">
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col">
|
||||
<div class = "row h-100 gx-lg-5 gy-3 mx-2 mx-lg-0">
|
||||
<div class="col-12 dark-5 scaled-font">
|
||||
<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" target = "_blank" class = "atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
|
||||
|
|
@ -1341,6 +1328,8 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container h-75 mx-0 mx-lg-auto dark-2 border border-4 scaled-font align-self-center" style="position: fixed; z-index: 2; overflow: auto; display: none;" id="search-container">
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-auto">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -412,3 +434,13 @@ input[type=number]::-webkit-outer-spin-button {
|
|||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* Make links bold when hovered over */
|
||||
|
||||
a:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
|
@ -1,27 +1,117 @@
|
|||
let _ALL_NODES = new Map();
|
||||
|
||||
class ComputeNode() {
|
||||
class ComputeNode {
|
||||
/***
|
||||
* Make a generic compute node.
|
||||
* Adds the node to the global map of nodenames to nodes (for calling from html listeners).
|
||||
*
|
||||
* @param name : Name of the node (string). Must be unique. Must "fit in" a JS string (terminated by single quotes).
|
||||
*/
|
||||
constructor(name) {
|
||||
if (_ALL_NODES.has(name)) {
|
||||
throw 'Duplicate node name: ' + name;
|
||||
}
|
||||
_ALL_NODES.set(name, this)
|
||||
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();
|
||||
}
|
||||
|
||||
update() {
|
||||
/***
|
||||
* Request update of this compute node. Pushes updates to children.
|
||||
*/
|
||||
update(timestamp) {
|
||||
if (timestamp < this.update_time) {
|
||||
return;
|
||||
}
|
||||
this.update_time = timestamp;
|
||||
|
||||
let value_map = Map();
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
/***
|
||||
* Schedule a ComputeNode to be updated.
|
||||
*
|
||||
* @param node_name : ComputeNode name to schedule an update for.
|
||||
*/
|
||||
function calcSchedule(node_name) {
|
||||
node = _ALL_NODES.get(node_name);
|
||||
if (node.update_task !== null) {
|
||||
clearTimeout(node.update_task);
|
||||
}
|
||||
node.update_task = setTimeout(function() {
|
||||
const timestamp = Date.now();
|
||||
node.update(timestamp);
|
||||
node.update_task = null;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
/***
|
||||
* Node for getting an item's stats from an item input field.
|
||||
*/
|
||||
class ItemStats extends ComputeNode {
|
||||
/***
|
||||
* Make an item stat pulling compute node.
|
||||
*
|
||||
* @param name: Name of this node.
|
||||
* @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, 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -139,6 +139,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
|
||||
|
|
|
|||
|
|
@ -256,7 +256,7 @@ function decodeBuild(url_tag) {
|
|||
}
|
||||
}
|
||||
|
||||
/* Stores the entire build in a string using B64 encryption and adds it to the URL.
|
||||
/* Stores the entire build in a string using B64 encoding and adds it to the URL.
|
||||
*/
|
||||
function encodeBuild() {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue