item info page in bootstrap + items link to item info page
This commit is contained in:
ferricles
parent
3a75db643d
commit
c5645ffa0c
|
|
@ -25,7 +25,6 @@
|
|||
<a href = "/customizer.html"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "/map.html"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "/wynnfo/index.html"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||
<a onclick = "document.querySelector('#search-container').style.display = '';"><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,396 +0,0 @@
|
|||
<!--div id="drag-edit-ids" style="display: none;">
|
||||
<div class="id-box fade-in" id="id-edit" style="display: none">
|
||||
<div class="id-edit1">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<h1>Damage values:</h1>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="sdPct" class="idLabel" id="sdPct-label">Spell Dmg %:</label><br>
|
||||
<input type="number" id="sdPct" name="sdPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="sdPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="sdRaw" class="idLabel" id="sdRaw-label">Raw Spell:</label><br>
|
||||
<input type="number" id="sdRaw" name="sdRaw" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="sdRaw-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="mdPct" class="idLabel" id="mdPct-label">Melee Dmg %:</label><br>
|
||||
<input type="number" id="mdPct" name="mdPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="mdPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="mdRaw" class="idLabel" id="mdRaw-label">Raw Melee:</label><br>
|
||||
<input type="number" id="mdRaw" name="mdRaw" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="mdRaw-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="poison" class="idLabel" id="poison-label">Poison:</label><br>
|
||||
<input type="number" id="poison" name="poison" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="poison-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="eDamPct" class="idLabel Earth" id="eDamPct-label">Damage %:</label><br>
|
||||
<input type="number" id="eDamPct" name="eDamPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="eDamPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="tDamPct" class="idLabel Thunder" id="tDamPct-label">Damage %:</label><br>
|
||||
<input type="number" id="tDamPct" name="tDamPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="tDamPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="wDamPct" class="idLabel Water" id="wDamPct-label">Damage %:</label><br>
|
||||
<input type="number" id="wDamPct" name="wDamPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="wDamPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="fDamPct" class="idLabel Fire" id="fDamPct-label">Damage %:</label><br>
|
||||
<input type="number" id="fDamPct" name="fDamPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="fDamPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="aDamPct" class="idLabel Air" id="aDamPct-label">Damage %:</label><br>
|
||||
<input type="number" id="aDamPct" name="aDamPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="aDamPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="atkTier" class="idLabel" id="atkTier-label">+Tier:</label><br>
|
||||
<input type="number" id="atkTier" name="atkTier" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="atkTier-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="id-edit1">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<h1>Defense values:</h1>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="eDefPct" class="idLabel Earth" id="eDefPct-label">Defense %:</label><br>
|
||||
<input type="number" id="eDefPct" name="eDefPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="eDefPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="tDefPct" class="idLabel Thunder" id="tDefPct-label">Defense %:</label><br>
|
||||
<input type="number" id="tDefPct" name="tDefPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="tDefPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="wDefPct" class="idLabel Water" id="wDefPct-label">Defense %:</label><br>
|
||||
<input type="number" id="wDefPct" name="wDefPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="wDefPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="fDefPct" class="idLabel Fire" id="fDefPct-label">Defense %:</label><br>
|
||||
<input type="number" id="fDefPct" name="fDefPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="fDefPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="aDefPct" class="idLabel Air" id="aDefPct-label">Defense %:</label><br>
|
||||
<input type="number" id="aDefPct" name="aDefPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="aDefPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="hprRaw" class="idLabel" id="hprRaw-label">HPR Raw:</label><br>
|
||||
<input type="number" id="hprRaw" name="hprRaw" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="hprRaw-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="hprPct" class="idLabel" id="hprPct-label">HPR %:</label><br>
|
||||
<input type="number" id="hprPct" name="hprPct" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="hprPct-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="hpBonus" class="idLabel" id="hpBonus-label">Health Bonus:</label><br>
|
||||
<input type="number" id="hpBonus" name="hpBonus" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="hpBonus-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="id-edit1">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<h1>Utility values:</h1>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="spPct1" class="idLabel" id="spPct1-label">1st Spell Cost %:</label><br>
|
||||
<input type="number" id="spPct1" name="spPct1" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="spPct1-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="spPct2" class="idLabel" id="spPct2-label">2nd Spell Cost %:</label><br>
|
||||
<input type="number" id="spPct2" name="spPct2" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="spPct2-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="spPct3" class="idLabel" id="spPct3-label">3rd Spell Cost %:</label><br>
|
||||
<input type="number" id="spPct3" name="spPct3" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="spPct3-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="spPct4" class="idLabel" id="spPct4-label">4th Spell Cost %:</label><br>
|
||||
<input type="number" id="spPct4" name="spPct4" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="spPct4-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="spRaw1" class="idLabel" id="spRaw1-label">1st Spell Cost Raw:</label><br>
|
||||
<input type="number" id="spRaw1" name="spRaw1" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="spRaw1-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="spRaw2" class="idLabel" id="spRaw2-label">2nd Spell Cost Raw:</label><br>
|
||||
<input type="number" id="spRaw2" name="spRaw2" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="spRaw2-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="spRaw3" class="idLabel" id="spRaw3-label">3rd Spell Cost Raw:</label><br>
|
||||
<input type="number" id="spRaw3" name="spRaw3" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="spRaw3-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="idLeft">
|
||||
<div class="idWrap">
|
||||
<div>
|
||||
<label for="spRaw4" class="idLabel" id="spRaw4-label">4th Spell Cost Raw:</label><br>
|
||||
<input type="number" id="spRaw4" name="spRaw4" value="0" class="idInput"/>
|
||||
</div>
|
||||
<div id="spRaw4-base" class="idDesc">
|
||||
Original Value: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div-->
|
||||
|
|
@ -27,7 +27,6 @@
|
|||
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "../map/"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "../wynnfo/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "../map/"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "../wynnfo/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||
</div>
|
||||
|
|
|
|||
69
item/index.html
Normal file
69
item/index.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html scroll-behavior="smooth">
|
||||
<head>
|
||||
<title>WB Item Viewer</title>
|
||||
<link rel="icon" href="../media/icons/new/searcher.png" type="image/icon type">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
|
||||
|
||||
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||
</head>
|
||||
<body class = "text-light d-flex justify-content-center" id = "body">
|
||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||
<a href = "../builder/"><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
|
||||
<a href = "../crafter/"><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||
<a href = "../items/"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
|
||||
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "../map/"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "../wynnfo/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||
<a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
||||
<div class="col">
|
||||
<div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-0 mb-3">
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "rounded col g-0 scaled-font border border-3 border-dark dark-shadow p-3 dark-7" id = "item-view">
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col-lg-6 col-sm-12">
|
||||
<div class = "rounded col scaled-font border border-3 border-dark dark-shadow p-3" id = "additional-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row mb-3 rounded border border-semi-dark border-3 p-3" id = "set-bonus-info" style = "display: none">
|
||||
</div>
|
||||
<div class = "row mb-3 rounded border border-semi-dark border-3 p-3" id = "identification-costs" style = "display: none">
|
||||
</div>
|
||||
<div class = "row mb-3 rounded border border-semi-dark border-3 p-3" id = "identification-probabilities" style = "display: none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="/js/utils.js"></script>
|
||||
<script type="text/javascript" src="/js/build_utils.js"></script>
|
||||
<script type="text/javascript" src="/js/icons.js"></script>
|
||||
<!-- <script type="text/javascript" src="/js/damage_calc.js"></script> -->
|
||||
<!-- <script type="text/javascript" src="/js/powders.js"></script> -->
|
||||
<script type="text/javascript" src="/js/load.js"></script>
|
||||
<script type="text/javascript" src="/js/load_ing.js"></script>
|
||||
<script type="text/javascript" src="/js/display_constants.js"></script>
|
||||
<script type="text/javascript" src="/js/display.js"></script>
|
||||
<script type="text/javascript" src="/js/sq2display_constants.js"></script>
|
||||
<script type="text/javascript" src="/js/sq2display.js"></script>
|
||||
<script type="text/javascript" src="/js/item.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -27,7 +27,6 @@
|
|||
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "../map/"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "../wynnfo/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html scroll-behavior="smooth">
|
||||
<head>
|
||||
<meta name="HandheldFriendly" content="true" />
|
||||
<meta name="MobileOptimized" content="320" />
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
|
||||
<!-- nunito font, copying wynndata -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="/css/items.css">
|
||||
<link rel="stylesheet" media="screen and (min-width: 800px)" href="/css/item-wide.css"/>
|
||||
<link rel="stylesheet" media="screen and (max-width: 799px)" href="/css/item-narrow.css"/>
|
||||
<link rel="icon" href="./favicon.png">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<title>Wynn Clientside</title>
|
||||
</head>
|
||||
<body class="all">
|
||||
<div class="center">
|
||||
<header class = "header nomarginp">
|
||||
<div class = "headerleft" id = "headerleft">
|
||||
</div>
|
||||
<div class = "headercenter" id = "headercenter">
|
||||
<div >
|
||||
<p class = "itemp" id = "header">Item Info</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "headerright" id = "headerright">
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<br>
|
||||
<div class = "overall center">
|
||||
<div class = "overall-container" style = "display:grid">
|
||||
<div class = "item-view-container hide-container-grid" display = "grid-item-1">
|
||||
<p class = "title"></p>
|
||||
<div class = "item-view container" id = "item-view">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class = "info" display = "grid-item-2">
|
||||
<p class = "title" >Additional Info</p>
|
||||
<div class = "additional-info" id = "additional-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "container set-bonus-info bigcontainer" id = "set-bonus-info" style = "display: none">
|
||||
</div>
|
||||
<div class = "container identification-costs bigcontainer" id = "identification-costs" style = "display: none">
|
||||
</div>
|
||||
<div class = "container identification-probabilities bigcontainer" id = "identification-probabilities" style = "display: none">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="/js/utils.js"></script>
|
||||
<script type="text/javascript" src="/js/build_utils.js"></script>
|
||||
<script type="text/javascript" src="/js/loadheader.js"></script>
|
||||
<script type="text/javascript" src="/js/icons.js"></script>
|
||||
<script type="text/javascript" src="/js/damage_calc.js"></script>
|
||||
<script type="text/javascript" src="/js/powders.js"></script>
|
||||
<script type="text/javascript" src="/js/load.js"></script>
|
||||
<script type="text/javascript" src="/js/load_ing.js"></script>
|
||||
<script type="text/javascript" src="/js/crafter.js"></script>
|
||||
<script type="text/javascript" src="/js/craft.js"></script>
|
||||
<script type="text/javascript" src="/js/display_constants.js"></script>
|
||||
<script type="text/javascript" src="/js/display.js"></script>
|
||||
<script type="text/javascript" src="/js/custom.js"></script>
|
||||
<script type="text/javascript" src="/js/customizer.js"></script>
|
||||
<script type="text/javascript" src="/js/item.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -28,7 +28,6 @@
|
|||
<a href = "/customizer.html"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "/map.html"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "/wynnfo/index.html"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
<a href = "/customizer.html"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "/map.html"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "/wynnfo/index.html"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -76,4 +76,3 @@ for (const [k, v] of translations) {
|
|||
reversetranslations.set(v, k);
|
||||
}
|
||||
|
||||
console.log(translations);
|
||||
|
|
|
|||
|
|
@ -2438,7 +2438,6 @@ function stringPDF(id,val,base,amp) {
|
|||
document.getElementById(id + "-pdf").appendChild(b1);
|
||||
document.getElementById(id + "-pdf").appendChild(b2);
|
||||
document.getElementById(id + "-pdf").appendChild(b3);
|
||||
document.getElementById(id + "-pdf").style.textAlign = "left";
|
||||
}
|
||||
function stringCDF(id,val,base,amp) {
|
||||
let p; let min; let max; let minr; let maxr; let minround; let maxround;
|
||||
|
|
@ -2473,5 +2472,4 @@ function stringCDF(id,val,base,amp) {
|
|||
document.getElementById(id + "-cdf").appendChild(b1);
|
||||
document.getElementById(id + "-cdf").appendChild(b2);
|
||||
document.getElementById(id + "-cdf").appendChild(b3);
|
||||
document.getElementById(id + "-cdf").style.textAlign = "left";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
//which icons to use
|
||||
let window_storage = window.localStorage;
|
||||
console.log(window_storage);
|
||||
icon_state_stored = window_storage.getItem("newicons");
|
||||
newIcons = true;
|
||||
if (icon_state_stored === "false") {toggleIcons()}
|
||||
|
||||
//REMOVE THIS IN THE REAL VERSION 7 OR SOMETHING
|
||||
window_storage.removeItem("rick");
|
||||
|
||||
/** Toggle icons on the ENTIRE page.
|
||||
*
|
||||
*/
|
||||
|
|
|
|||
21
js/item.js
21
js/item.js
|
|
@ -10,13 +10,6 @@ const item_url_tag = location.hash.slice(1);
|
|||
|
||||
const ITEM_BUILD_VERSION = "7.0.1";
|
||||
|
||||
function setTitle() {
|
||||
let text = "WynnInfo version "+ITEM_BUILD_VERSION;
|
||||
document.getElementById("header").classList.add("funnynumber");
|
||||
document.getElementById("header").textContent = text;
|
||||
}
|
||||
|
||||
setTitle();
|
||||
|
||||
let item;
|
||||
let amp_state = 0; //the level of corkian map used for ID purposes. Default 0.
|
||||
|
|
@ -27,16 +20,17 @@ function init_itempage() {
|
|||
//displayExpandedItem(expandItem(itemMap.get(item_url_tag).statMap, []), "item-view");
|
||||
try{
|
||||
item = expandItem(itemMap.get(item_url_tag.replaceAll("%20"," ")), []);
|
||||
displayExpandedItem(item, "item-view");
|
||||
displayAdditionalInfo("additional-info", item);
|
||||
displayIDCosts("identification-costs", item);
|
||||
displaysq2ExpandedItem(item, "item-view");
|
||||
displaysq2AdditionalInfo("additional-info", item);
|
||||
displaysq2IDCosts("identification-costs", item);
|
||||
if (item.get("set") && sets[item.get("set")]) {
|
||||
displayAllSetBonuses("set-bonus-info",item.get("set"));
|
||||
displaysq2AllSetBonuses("set-bonus-info",item.get("set"));
|
||||
}
|
||||
console.log(item);
|
||||
displayIDProbabilities("identification-probabilities", item, amp_state);
|
||||
displaysq2IDProbabilities("identification-probabilities", item, amp_state);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log(error.stack);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +39,6 @@ function init_itempage() {
|
|||
* @param {Number} button_id the ID of the button just pressed.
|
||||
*/
|
||||
function toggleAmps(button_id) {
|
||||
console.log(button_id);
|
||||
amp_state = 0;
|
||||
if (button_id == 0) {return;}
|
||||
else {
|
||||
|
|
@ -59,7 +52,7 @@ function toggleAmps(button_id) {
|
|||
amp_state = button_id;
|
||||
}
|
||||
}
|
||||
displayIDProbabilities("identification-probabilities", item, amp_state);
|
||||
displaysq2IDProbabilities("identification-probabilities", item, amp_state);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ function pullguilds() {
|
|||
.then(res => {
|
||||
guildTags.set(guild, res.prefix);
|
||||
guildColors.set(guild, randomColorHSL([0,1],[0,1],[0.4,1]));
|
||||
console.log("Succesfully pulled guild data for " + guild + ".");
|
||||
// console.log("Succesfully pulled guild data for " + guild + ".");
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
|
|
|
|||
|
|
@ -299,7 +299,6 @@ function init_autocomplete() {
|
|||
let dropdowns = new Map()
|
||||
for (const eq of equipment_keys) {
|
||||
// build dropdown
|
||||
console.log('init dropdown for '+ eq)
|
||||
let item_arr = [];
|
||||
if (eq == 'weapon') {
|
||||
for (const weaponType of weapon_keys) {
|
||||
|
|
@ -377,8 +376,6 @@ function init_autocomplete() {
|
|||
}
|
||||
let filter_loc = ["filter1", "filter2", "filter3", "filter4"];
|
||||
for (const i of filter_loc) {
|
||||
console.log(i);
|
||||
console.log('init dropdown for '+i+"-choice" )
|
||||
dropdowns.set(i+"-choice", new autoComplete({
|
||||
data: {
|
||||
src: sq2ItemFilters,
|
||||
|
|
|
|||
510
js/sq2display.js
510
js/sq2display.js
|
|
@ -249,10 +249,10 @@ function displaysq2ExpandedItem(item, parent_id){
|
|||
} else if (id === "displayName") {
|
||||
let row = document.createElement("div");
|
||||
|
||||
let p_elem = document.createElement("div");
|
||||
let p_elem = document.createElement("a");
|
||||
row.classList.add("row", "no-collapse");
|
||||
p_elem.classList.add("col", "text-center", "item-title");
|
||||
p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "none");
|
||||
p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "Normal");
|
||||
p_elem.style.textGrow = 1;
|
||||
|
||||
row.appendChild(p_elem);
|
||||
|
|
@ -271,13 +271,13 @@ function displaysq2ExpandedItem(item, parent_id){
|
|||
// row.appendChild(plusminus);
|
||||
|
||||
if (item.get("custom")) {
|
||||
// p_elem.href = url_base.replace(/\w+.html/, "") + "customizer.html#" + item.get("hash");
|
||||
p_elem.href = "../custom/#" + item.get("hash");
|
||||
p_elem.textContent = item.get("displayName");
|
||||
} else if (item.get("crafted")) {
|
||||
// p_elem.href = url_base.replace(/\w+.html/, "") + "crafter.html#" + item.get("hash");
|
||||
p_elem.href = "../crafter/#" + item.get("hash");
|
||||
p_elem.textContent = item.get(id);
|
||||
} else {
|
||||
// p_elem.href = url_base.replace(/\w+.html/, "") + "item.html#" + item.get("displayName");
|
||||
p_elem.href = "../item/#" + item.get("displayName");
|
||||
p_elem.textContent = item.get("displayName");
|
||||
}
|
||||
|
||||
|
|
@ -1482,14 +1482,6 @@ function displaysq2SetBonuses(parent_id,build) {
|
|||
set_summary_elem.classList.add('text-center');
|
||||
set_summary_elem.textContent = "Set Bonuses";
|
||||
parent_div.append(set_summary_elem);
|
||||
|
||||
/*
|
||||
if (build.activeSetCounts.size) {
|
||||
parent_div.parentElement.style.display = "block";
|
||||
} else {
|
||||
parent_div.parentElement.style.display = "none";
|
||||
}
|
||||
*/
|
||||
|
||||
for (const [setName, count] of build.activeSetCounts) {
|
||||
const active_set = sets[setName];
|
||||
|
|
@ -1892,4 +1884,494 @@ function displaysq2ExpandedIngredient(ingred, parent_id) {
|
|||
parent_elem.appendChild(div);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//TODO: translate the below to BS
|
||||
|
||||
/** Displays Additional Info for
|
||||
*
|
||||
* @param {String} elemID - the parent element's id
|
||||
* @param {Map} item - the statMap of the item
|
||||
* @returns
|
||||
*/
|
||||
function displaysq2AdditionalInfo(elemID, item) {
|
||||
let parent_elem = document.getElementById(elemID);
|
||||
|
||||
let title = document.createElement("div");
|
||||
title.classList.add("big-title", "justify-content-center");
|
||||
title.textContent = "Additional Info";
|
||||
parent_elem.appendChild(title);
|
||||
|
||||
let droptype_elem = document.createElement("div");
|
||||
droptype_elem.classList.add("row");
|
||||
droptype_elem.textContent = "Drop type: " + (item.has("drop") ? item.get("drop"): "NEVER");
|
||||
parent_elem.appendChild(droptype_elem);
|
||||
|
||||
let warning_elem = document.createElement("div");
|
||||
warning_elem.classList.add("row");
|
||||
warning_elem.textContent = "This page is incomplete. Will work on it later.";
|
||||
parent_elem.appendChild(warning_elem);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/** Displays the ID costs of an item
|
||||
*
|
||||
* @param {String} elemID - the id of the parent element.
|
||||
* @param {Map} item - the statMap of an item.
|
||||
*/
|
||||
function displaysq2IDCosts(elemID, item) {
|
||||
let parent_elem = document.getElementById(elemID);
|
||||
let tier = item.get("tier");
|
||||
if ( (item.has("fixID") && item.get("fixID")) || ["Normal","Crafted","Custom","none", " ",].includes(item.get("tier"))) {
|
||||
return;
|
||||
} else {
|
||||
/** Returns the number of inventory slots minimum an amount of emeralds would take up + the configuration of doing so.
|
||||
* Returns an array of [invSpace, E, EB, LE, Stx LE]
|
||||
*
|
||||
* @param {number} ems - the total numerical value of emeralds to compact.
|
||||
*/
|
||||
function emsToInvSpace(ems) {
|
||||
let stx = Math.floor(ems/262144);
|
||||
ems -= stx*4096*64;
|
||||
let LE = Math.floor(ems/4096);
|
||||
ems -= LE*4096;
|
||||
let EB = Math.floor(ems/64);
|
||||
ems -= EB*64;
|
||||
let e = ems;
|
||||
return [ stx + Math.ceil(LE/64) + Math.ceil(EB/64) + Math.ceil(e/64) , e, EB, LE, stx];
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @param {String} tier - item tier
|
||||
* @param {Number} lvl - item level
|
||||
*/
|
||||
function getIDCost(tier, lvl) {
|
||||
switch (tier) {
|
||||
case "Unique":
|
||||
return Math.round(0.5*lvl + 3);
|
||||
case "Rare":
|
||||
return Math.round(1.2*lvl + 8);
|
||||
case "Legendary":
|
||||
return Math.round(4.5*lvl + 12);
|
||||
case "Fabled":
|
||||
return Math.round(12*lvl + 26);
|
||||
case "Mythic":
|
||||
return Math.round(18*lvl + 90);
|
||||
case "Set":
|
||||
return Math.round(1.5*lvl + 8)
|
||||
default:
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
parent_elem.style = "display: visible";
|
||||
let lvl = item.get("lvl");
|
||||
if (typeof(lvl) === "string") { lvl = parseFloat(lvl); }
|
||||
|
||||
let title_elem = document.createElement("div");
|
||||
title_elem.classList.add("big-title", "justify-content-center", "Set");
|
||||
title_elem.textContent = "Identification Costs";
|
||||
parent_elem.appendChild(title_elem);
|
||||
|
||||
let grid_item = document.createElement("div");
|
||||
grid_item.classList.add("row", "g-3");
|
||||
parent_elem.appendChild(grid_item);
|
||||
|
||||
let IDcost = getIDCost(tier, lvl);
|
||||
let initIDcost = IDcost;
|
||||
let invSpace = emsToInvSpace(IDcost);
|
||||
let rerolls = 0;
|
||||
|
||||
while(invSpace[0] <= 28 && IDcost > 0) {
|
||||
let container_container = document.createElement("div");
|
||||
container_container.classList.add("col-lg-3", "col-sm-12");
|
||||
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("col", "rounded", "border", "border-dark", "border-2");
|
||||
|
||||
container_container.appendChild(container);
|
||||
|
||||
let container_title = document.createElement("div");
|
||||
container_title.classList.add("row", "box-title", "justify-content-center");
|
||||
|
||||
if (rerolls == 0) {
|
||||
container_title.textContent = "Initial ID Cost: ";
|
||||
} else {
|
||||
container_title.textContent = "Reroll to [" + (rerolls+1) + "] Cost:";
|
||||
}
|
||||
container.appendChild(container_title);
|
||||
let total_cost_container = document.createElement("div");
|
||||
total_cost_container.classList.add("row");
|
||||
let total_cost_number = document.createElement("b");
|
||||
total_cost_number.classList.add("Set", "fw-bold", "col-6", "text-end");
|
||||
total_cost_number.textContent = IDcost + " ";
|
||||
let total_cost_suffix = document.createElement("div");
|
||||
total_cost_suffix.classList.add("col-6", "text-start");
|
||||
total_cost_suffix.textContent = "emeralds."
|
||||
total_cost_container.appendChild(total_cost_number);
|
||||
total_cost_container.appendChild(total_cost_suffix);
|
||||
container.appendChild(total_cost_container);
|
||||
|
||||
let OR = document.createElement("div");
|
||||
OR.classList.add("row");
|
||||
container.appendChild(OR);
|
||||
let OR_text = document.createElement("div");
|
||||
OR_text.classList.add("col", "text-center");
|
||||
OR_text.textContent = "OR";
|
||||
OR.appendChild(OR_text);
|
||||
|
||||
let esuffixes = ["", "emeralds.", "EB.", "LE.", "stacks of LE."];
|
||||
for (let i = 4; i > 0; i--) {
|
||||
let n_container = document.createElement("div");
|
||||
n_container.classList.add("row");
|
||||
let n_number = document.createElement("b");
|
||||
n_number.classList.add("Set", "fw-bold", "col-6", "text-end");
|
||||
n_number.textContent = invSpace[i] + " ";
|
||||
let n_suffix = document.createElement("div");
|
||||
n_suffix.classList.add("col-6", "text-start");
|
||||
n_suffix.textContent = esuffixes[i];
|
||||
n_container.appendChild(n_number);
|
||||
n_container.appendChild(n_suffix);
|
||||
container.appendChild(n_container);
|
||||
}
|
||||
grid_item.appendChild(container_container);
|
||||
|
||||
rerolls += 1;
|
||||
IDcost = Math.round(initIDcost * (5 ** rerolls));
|
||||
invSpace = emsToInvSpace(IDcost);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Displays all set bonuses (0/n, 1/n, ... n/n) for a given set
|
||||
*
|
||||
* @param {String} parent_id - id of the parent element
|
||||
* @param {String} setName - the name of the set
|
||||
*/
|
||||
function displaysq2AllSetBonuses(parent_id, setName) {
|
||||
let parent_elem = document.getElementById(parent_id);
|
||||
parent_elem.style.display = "";
|
||||
let set = sets[setName];
|
||||
let title_elem = document.createElement("div");
|
||||
title_elem.textContent = setName + " Set Bonuses";
|
||||
title_elem.classList.add("Set", "big-title", "justify-content-center");
|
||||
parent_elem.appendChild(title_elem);
|
||||
|
||||
let grid_elem = document.createElement("div");
|
||||
grid_elem.classList.add("row");
|
||||
parent_elem.appendChild(grid_elem);
|
||||
|
||||
for (let i = 0; i < set.items.length; i++) {
|
||||
|
||||
let set_elem = document.createElement('div');
|
||||
set_elem.classList.add("col-lg-3", "col-sm-12", "py-2", "my-1");
|
||||
grid_elem.appendChild(set_elem);
|
||||
const bonus = set.bonuses[i];
|
||||
|
||||
let set_elem_display = document.createElement("div");
|
||||
set_elem_display.classList.add("rounded", "col", "g-0", "scaled-font", "border", "border-3", "border-dark", "dark-shadow", "dark-7", "p-3");
|
||||
set_elem_display.id = "set-"+setName+"-"+i;
|
||||
set_elem.appendChild(set_elem_display);
|
||||
|
||||
let mock_item = new Map();
|
||||
mock_item.set("fixID", true);
|
||||
mock_item.set("tier", "Set");
|
||||
mock_item.set("displayName", setName+" Set: " + (i+1) + "/"+sets[setName].items.length);
|
||||
// set_elem.textContent = mock_item.get("displayName");
|
||||
let mock_minRolls = new Map();
|
||||
let mock_maxRolls = new Map();
|
||||
mock_item.set("minRolls", mock_minRolls);
|
||||
mock_item.set("maxRolls", mock_maxRolls);
|
||||
for (const id in bonus) {
|
||||
if (rolledIDs.includes(id)) {
|
||||
mock_minRolls.set(id, bonus[id]);
|
||||
mock_maxRolls.set(id, bonus[id]);
|
||||
}
|
||||
else {
|
||||
mock_item.set(id, bonus[id]);
|
||||
}
|
||||
}
|
||||
mock_item.set("powders", []);
|
||||
displaysq2ExpandedItem(mock_item, set_elem_display.id);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/** Displays the individual probabilities of each possible value of each rollable ID for this item.
|
||||
*
|
||||
* @param {String} parent_id the document id of the parent element
|
||||
* @param {String} item expandedItem object
|
||||
* @param {String} amp the level of corkian amplifier used. 0 means no amp, 1 means Corkian Amplifier I, etc. [0,3]
|
||||
*/
|
||||
function displaysq2IDProbabilities(parent_id, item, amp) {
|
||||
if (item.has("fixID") && item.get("fixID")) {return}
|
||||
let parent_elem = document.getElementById(parent_id);
|
||||
parent_elem.style.display = "";
|
||||
parent_elem.innerHTML = "";
|
||||
let title_elem = document.createElement("div");
|
||||
title_elem.textContent = "Identification Probabilities";
|
||||
title_elem.classList.add("row", "Legendary", "big-title", "justify-content-center");
|
||||
parent_elem.appendChild(title_elem);
|
||||
|
||||
let disclaimer_elem = document.createElement("div");
|
||||
disclaimer_elem.classList.add("row", "justify-content-center");
|
||||
disclaimer_elem.textContent = "IDs are rolled on a uniform distribution. A chance of 0% means that either the minimum or maximum possible multiplier must be rolled to get this value."
|
||||
parent_elem.appendChild(disclaimer_elem);
|
||||
|
||||
let amp_row = document.createElement("div");
|
||||
amp_row.classList.add("row", "justify-content-center");
|
||||
amp_row.id = "amp_row";
|
||||
let amp_text = document.createElement("div");
|
||||
amp_text.classList.add("col-lg-2", "col-sm-3");
|
||||
amp_text.textContent = "Corkian Amplifier Used: "
|
||||
amp_row.appendChild(amp_text);
|
||||
|
||||
let amp_1 = document.createElement("button");
|
||||
amp_1.classList.add("col-lg-1", "col-sm-3", "border-dark", "text-light", "dark-5", "rounded", "scaled-font");
|
||||
amp_1.id = "cork_amp_1";
|
||||
amp_1.textContent = "I";
|
||||
amp_row.appendChild(amp_1);
|
||||
let amp_2 = document.createElement("button");
|
||||
amp_2.classList.add("col-lg-1", "col-sm-3", "border-dark", "text-light", "dark-5", "rounded", "scaled-font");
|
||||
amp_2.id = "cork_amp_2";
|
||||
amp_2.textContent = "II";
|
||||
amp_row.appendChild(amp_2);
|
||||
let amp_3 = document.createElement("button");
|
||||
amp_3.classList.add("col-lg-1", "col-sm-3", "border-dark", "text-light", "dark-5", "rounded", "scaled-font");
|
||||
amp_3.id = "cork_amp_3";
|
||||
amp_3.textContent = "III";
|
||||
amp_row.appendChild(amp_3);
|
||||
amp_1.addEventListener("click", (event) => {toggleAmps(1)});
|
||||
amp_2.addEventListener("click", (event) => {toggleAmps(2)});
|
||||
amp_3.addEventListener("click", (event) => {toggleAmps(3)});
|
||||
parent_elem.appendChild(amp_row);
|
||||
|
||||
if (amp != 0) {toggleButton("cork_amp_" + amp)}
|
||||
|
||||
item_name = item.get("displayName");
|
||||
for (const [id,val] of Object.entries(itemMap.get(item_name))) {
|
||||
if (rolledIDs.includes(id)) {
|
||||
let min = item.get("minRolls").get(id);
|
||||
let max = item.get("maxRolls").get(id);
|
||||
|
||||
if (min != 0 || max != 0) {
|
||||
//Apply corkian amps
|
||||
if (val > 0) {
|
||||
let base = itemMap.get(item_name)[id];
|
||||
if (reversedIDs.includes(id)) {max = Math.max( Math.round((0.3 + 0.05*amp) * base), 1)}
|
||||
else {min = Math.max( Math.round((0.3 + 0.05*amp) * base), 1)}
|
||||
}
|
||||
|
||||
let row_elem = document.createElement("div");
|
||||
row_elem.classList.add("row");
|
||||
parent_elem.appendChild(row_elem);
|
||||
|
||||
let base_and_range = document.createElement("div");
|
||||
base_and_range.classList.add("col-lg-4", "col-sm-12");
|
||||
|
||||
|
||||
let base_elem = document.createElement("div");
|
||||
let base_val = document.createElement("div");
|
||||
base_elem.classList.add("row");
|
||||
base_prefix = document.createElement("div");
|
||||
base_prefix.classList.add("col-auto");
|
||||
base_val.classList.add("col-auto");
|
||||
|
||||
base_prefix.textContent = idPrefixes[id] + "Base ";
|
||||
base_val.textContent = val + idSuffixes[id];
|
||||
if (val > 0 == !reversedIDs.includes(id)) {
|
||||
base_val.classList.add("positive");
|
||||
} else if (val > 0 == reversedIDs.includes(id)) {
|
||||
base_val.classList.add("negative");
|
||||
}
|
||||
base_elem.appendChild(base_prefix);
|
||||
base_elem.appendChild(base_val);
|
||||
|
||||
let range_elem = document.createElement("div");
|
||||
range_elem.classList.add("row", "justify-content-center");
|
||||
|
||||
range_elem.textContent = "[ " + min + idSuffixes[id] + ", " + max + idSuffixes[id] + " ]";
|
||||
if ( (min > 0 && max > 0 && !reversedIDs.includes(id)) || (min < 0 && max < 0 && reversedIDs.includes(id)) ) {
|
||||
range_elem.classList.add("positive");
|
||||
} else if ( (min < 0 && max < 0 && !reversedIDs.includes(id)) || (min > 0 && max > 0 && reversedIDs.includes(id)) ) {
|
||||
range_elem.classList.add("negative");
|
||||
}
|
||||
|
||||
base_and_range.appendChild(base_elem);
|
||||
base_and_range.appendChild(range_elem);
|
||||
row_elem.appendChild(base_and_range);
|
||||
|
||||
|
||||
let pdf_and_cdf = document.createElement("div");
|
||||
pdf_and_cdf.classList.add("col-lg-4", "col-sm-12");
|
||||
|
||||
let pdf_elem = document.createElement("div");
|
||||
pdf_elem.id = id + "-pdf";
|
||||
let cdf_elem = document.createElement("div");
|
||||
cdf_elem.id = id + "-cdf";
|
||||
pdf_elem.classList.add("row");
|
||||
cdf_elem.classList.add("row");
|
||||
|
||||
pdf_and_cdf.appendChild(pdf_elem);
|
||||
pdf_and_cdf.appendChild(cdf_elem);
|
||||
row_elem.appendChild(pdf_and_cdf);
|
||||
|
||||
let input_sec = document.createElement("div");
|
||||
input_sec.classList.add("col-lg-4", "col-sm-12");
|
||||
|
||||
let title_input_slider = document.createElement("input");
|
||||
title_input_slider.classList.add("row");
|
||||
title_input_slider.type = "range";
|
||||
title_input_slider.id = id+"-slider";
|
||||
if (!reversedIDs.includes(id)) {
|
||||
title_input_slider.step = 1;
|
||||
title_input_slider.min = `${min}`;
|
||||
title_input_slider.max = `${max}`;
|
||||
title_input_slider.value = `${max}`;
|
||||
} else {
|
||||
title_input_slider.step = 1;
|
||||
title_input_slider.min = `${-1*min}`;
|
||||
title_input_slider.max = `${-1*max}`;
|
||||
title_input_slider.value = `${-1*max}`;
|
||||
}
|
||||
let title_input_textbox = document.createElement("input");
|
||||
title_input_textbox.classList.add("row");
|
||||
title_input_textbox.type = "text";
|
||||
title_input_textbox.value = `${max}`;
|
||||
title_input_textbox.id = id+"-textbox";
|
||||
title_input_textbox.classList.add("rounded", "border", "border-dark", "border-2", "dark-5", "text-light");
|
||||
input_sec.appendChild(title_input_slider);
|
||||
input_sec.appendChild(title_input_textbox);
|
||||
|
||||
row_elem.appendChild(input_sec);
|
||||
|
||||
sq2StringPDF(id, max, val, amp); //val is base roll
|
||||
sq2StringCDF(id, max, val, amp); //val is base roll
|
||||
title_input_slider.addEventListener("change", (event) => {
|
||||
let id_name = event.target.id.split("-")[0];
|
||||
let textbox_elem = document.getElementById(id_name+"-textbox");
|
||||
|
||||
if (reversedIDs.includes(id_name)) {
|
||||
if (event.target.value < -1*min) { event.target.value = -1*min}
|
||||
if (event.target.value > -1*max) { event.target.value = -1*max}
|
||||
sq2StringPDF(id_name, -1*event.target.value, val, amp); //val is base roll
|
||||
sq2StringCDF(id_name, -1*event.target.value, val, amp); //val is base roll
|
||||
} else {
|
||||
if (event.target.value < min) { event.target.value = min}
|
||||
if (event.target.value > max) { event.target.value = max}
|
||||
sq2StringPDF(id_name, 1*event.target.value, val, amp); //val is base roll
|
||||
sq2StringCDF(id_name, 1*event.target.value, val, amp); //val is base roll
|
||||
}
|
||||
|
||||
if (textbox_elem && textbox_elem.value !== event.target.value) {
|
||||
if (reversedIDs.includes(id_name)) {
|
||||
textbox_elem.value = -event.target.value;
|
||||
} else {
|
||||
textbox_elem.value = event.target.value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
title_input_textbox.addEventListener("change", (event) => {
|
||||
let id_name = event.target.id.split("-")[0];
|
||||
if (reversedIDs.includes(id_name)) {
|
||||
if (event.target.value > min) { event.target.value = min}
|
||||
if (event.target.value < max) { event.target.value = max}
|
||||
} else {
|
||||
if (event.target.value < min) { event.target.value = min}
|
||||
if (event.target.value > max) { event.target.value = max}
|
||||
}
|
||||
let slider_elem = document.getElementById(id_name+"-slider");
|
||||
if (slider_elem.value !== event.target.value) {
|
||||
slider_elem.value = -event.target.value;
|
||||
}
|
||||
|
||||
sq2StringPDF(id_name, 1*event.target.value, val, amp);
|
||||
sq2StringCDF(id_name, 1*event.target.value, val, amp);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//helper functions. id - the string of the id's name, val - the value of the id, base - the base value of the item for this id
|
||||
function sq2StringPDF(id,val,base,amp) {
|
||||
/** [0.3b,1.3b] positive normal
|
||||
* [1.3b,0.3b] positive reversed
|
||||
* [1.3b,0.7b] negative normal
|
||||
* [0.7b,1.3b] negative reversed
|
||||
*
|
||||
* [0.3, 1.3] minr, maxr [0.3b, 1.3b] min, max
|
||||
* the minr/maxr decimal roll that corresponds to val -> minround, maxround
|
||||
*/
|
||||
let p; let min; let max; let minr; let maxr; let minround; let maxround;
|
||||
if (base > 0) {
|
||||
minr = 0.3 + 0.05*amp; maxr = 1.3;
|
||||
min = Math.max(1, Math.round(minr*base)); max = Math.max(1, Math.round(maxr*base));
|
||||
minround = (min == max) ? (minr) : ( Math.max(minr, (val-0.5) / base) );
|
||||
maxround = (min == max) ? (maxr) : ( Math.min(maxr, (val+0.5) / base) );
|
||||
} else {
|
||||
minr = 1.3; maxr = 0.7;
|
||||
min = Math.min(-1, Math.round(minr*base)); max = Math.min(-1, Math.round(maxr*base));
|
||||
minround = (min == max) ? (minr) : ( Math.min(minr, (val-0.5) / base) );
|
||||
maxround = (min == max) ? (maxr) : ( Math.max(maxr, (val+0.5) / base) );
|
||||
}
|
||||
|
||||
p = Math.abs(maxround-minround)/Math.abs(maxr-minr)*100;
|
||||
p = p.toFixed(3);
|
||||
|
||||
let div1 = document.createElement("div");
|
||||
div1.textContent = "Roll exactly ";
|
||||
div1.classList.add("col-auto", "px-0");
|
||||
let div2 = document.createElement("div");
|
||||
div2.textContent = val + idSuffixes[id];
|
||||
div2.classList.add("col-auto", "px-1");
|
||||
if (val > 0 == !reversedIDs.includes(id)) {div2.classList.add("positive")}
|
||||
if (val > 0 == reversedIDs.includes(id)) {div2.classList.add("negative")}
|
||||
let div3 = document.createElement("div");
|
||||
div3.textContent = ": " + p + "%";
|
||||
div3.classList.add("col-auto", "px-0");
|
||||
document.getElementById(id + "-pdf").innerHTML = "";
|
||||
document.getElementById(id + "-pdf").appendChild(div1);
|
||||
document.getElementById(id + "-pdf").appendChild(div2);
|
||||
document.getElementById(id + "-pdf").appendChild(div3);
|
||||
}
|
||||
function sq2StringCDF(id,val,base,amp) {
|
||||
let p; let min; let max; let minr; let maxr; let minround; let maxround;
|
||||
if (base > 0) {
|
||||
minr = 0.3 + 0.05*amp; maxr = 1.3;
|
||||
min = Math.max(1, Math.round(minr*base)); max = Math.max(1, Math.round(maxr*base));
|
||||
minround = (min == max) ? (minr) : ( Math.max(minr, (val-0.5) / base) );
|
||||
maxround = (min == max) ? (maxr) : ( Math.min(maxr, (val+0.5) / base) );
|
||||
} else {
|
||||
minr = 1.3; maxr = 0.7;
|
||||
min = Math.min(-1, Math.round(minr*base)); max = Math.min(-1, Math.round(maxr*base));
|
||||
minround = (min == max) ? (minr) : ( Math.min(minr, (val-0.5) / base) );
|
||||
maxround = (min == max) ? (maxr) : ( Math.max(maxr, (val+0.5) / base) );
|
||||
}
|
||||
|
||||
if (reversedIDs.includes(id)) {
|
||||
p = Math.abs(minr-maxround)/Math.abs(maxr-minr)*100;
|
||||
} else {
|
||||
p = Math.abs(maxr-minround)/Math.abs(maxr-minr)*100;
|
||||
}
|
||||
p = p.toFixed(3);
|
||||
|
||||
let div1 = document.createElement("div");
|
||||
div1.textContent = "Roll ";
|
||||
div1.classList.add("col-auto", "px-0");
|
||||
let div2 = document.createElement("div");
|
||||
div2.textContent = val + idSuffixes[id];
|
||||
div2.classList.add("col-auto", "px-1");
|
||||
if (val > 0 == !reversedIDs.includes(id)) {div2.classList.add("positive")}
|
||||
if (val > 0 == reversedIDs.includes(id)) {div2.classList.add("negative")}
|
||||
let div3 = document.createElement("div");
|
||||
div3.textContent= " or better: " + p + "%";
|
||||
div3.classList.add("col-auto", "px-0");
|
||||
document.getElementById(id + "-cdf").innerHTML = "";
|
||||
document.getElementById(id + "-cdf").appendChild(div1);
|
||||
document.getElementById(id + "-cdf").appendChild(div2);
|
||||
document.getElementById(id + "-cdf").appendChild(div3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = ""><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = "../wynnfo/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||
<a href = "../map/"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||
<a href = ""><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue