item info page in bootstrap + items link to item info page

This commit is contained in:
ferricles 2022-05-16 19:44:40 -07:00
parent 3a75db643d
commit c5645ffa0c
18 changed files with 573 additions and 514 deletions

View file

@ -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 = "/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 = "/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 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> <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
</div> </div>

View file

@ -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-->

View file

@ -27,7 +27,6 @@
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</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 = "../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 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> <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
</div> </div>

View file

@ -29,7 +29,6 @@
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</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 = "../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 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> <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
</div> </div>

69
item/index.html Normal file
View 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>

View file

@ -27,7 +27,6 @@
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</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 = "../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 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> <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
</div> </div>

View file

@ -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>

View file

@ -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 = "/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 = "/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 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> <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
</div> </div>

View file

@ -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 = "/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 = "/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 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> <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
</div> </div>

View file

@ -76,4 +76,3 @@ for (const [k, v] of translations) {
reversetranslations.set(v, k); reversetranslations.set(v, k);
} }
console.log(translations);

View file

@ -2438,7 +2438,6 @@ function stringPDF(id,val,base,amp) {
document.getElementById(id + "-pdf").appendChild(b1); document.getElementById(id + "-pdf").appendChild(b1);
document.getElementById(id + "-pdf").appendChild(b2); document.getElementById(id + "-pdf").appendChild(b2);
document.getElementById(id + "-pdf").appendChild(b3); document.getElementById(id + "-pdf").appendChild(b3);
document.getElementById(id + "-pdf").style.textAlign = "left";
} }
function stringCDF(id,val,base,amp) { function stringCDF(id,val,base,amp) {
let p; let min; let max; let minr; let maxr; let minround; let maxround; 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(b1);
document.getElementById(id + "-cdf").appendChild(b2); document.getElementById(id + "-cdf").appendChild(b2);
document.getElementById(id + "-cdf").appendChild(b3); document.getElementById(id + "-cdf").appendChild(b3);
document.getElementById(id + "-cdf").style.textAlign = "left";
} }

View file

@ -1,13 +1,9 @@
//which icons to use //which icons to use
let window_storage = window.localStorage; let window_storage = window.localStorage;
console.log(window_storage);
icon_state_stored = window_storage.getItem("newicons"); icon_state_stored = window_storage.getItem("newicons");
newIcons = true; newIcons = true;
if (icon_state_stored === "false") {toggleIcons()} 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. /** Toggle icons on the ENTIRE page.
* *
*/ */

View file

@ -10,13 +10,6 @@ const item_url_tag = location.hash.slice(1);
const ITEM_BUILD_VERSION = "7.0.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 item;
let amp_state = 0; //the level of corkian map used for ID purposes. Default 0. 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"); //displayExpandedItem(expandItem(itemMap.get(item_url_tag).statMap, []), "item-view");
try{ try{
item = expandItem(itemMap.get(item_url_tag.replaceAll("%20"," ")), []); item = expandItem(itemMap.get(item_url_tag.replaceAll("%20"," ")), []);
displayExpandedItem(item, "item-view"); displaysq2ExpandedItem(item, "item-view");
displayAdditionalInfo("additional-info", item); displaysq2AdditionalInfo("additional-info", item);
displayIDCosts("identification-costs", item); displaysq2IDCosts("identification-costs", item);
if (item.get("set") && sets[item.get("set")]) { 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); console.log(item);
displayIDProbabilities("identification-probabilities", item, amp_state); displaysq2IDProbabilities("identification-probabilities", item, amp_state);
} catch (error) { } catch (error) {
console.log(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. * @param {Number} button_id the ID of the button just pressed.
*/ */
function toggleAmps(button_id) { function toggleAmps(button_id) {
console.log(button_id);
amp_state = 0; amp_state = 0;
if (button_id == 0) {return;} if (button_id == 0) {return;}
else { else {
@ -59,7 +52,7 @@ function toggleAmps(button_id) {
amp_state = button_id; amp_state = button_id;
} }
} }
displayIDProbabilities("identification-probabilities", item, amp_state); displaysq2IDProbabilities("identification-probabilities", item, amp_state);
} }

View file

@ -233,7 +233,7 @@ function pullguilds() {
.then(res => { .then(res => {
guildTags.set(guild, res.prefix); guildTags.set(guild, res.prefix);
guildColors.set(guild, randomColorHSL([0,1],[0,1],[0.4,1])); 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 => { .catch(error => {
console.log(error); console.log(error);

View file

@ -299,7 +299,6 @@ function init_autocomplete() {
let dropdowns = new Map() let dropdowns = new Map()
for (const eq of equipment_keys) { for (const eq of equipment_keys) {
// build dropdown // build dropdown
console.log('init dropdown for '+ eq)
let item_arr = []; let item_arr = [];
if (eq == 'weapon') { if (eq == 'weapon') {
for (const weaponType of weapon_keys) { for (const weaponType of weapon_keys) {
@ -377,8 +376,6 @@ function init_autocomplete() {
} }
let filter_loc = ["filter1", "filter2", "filter3", "filter4"]; let filter_loc = ["filter1", "filter2", "filter3", "filter4"];
for (const i of filter_loc) { for (const i of filter_loc) {
console.log(i);
console.log('init dropdown for '+i+"-choice" )
dropdowns.set(i+"-choice", new autoComplete({ dropdowns.set(i+"-choice", new autoComplete({
data: { data: {
src: sq2ItemFilters, src: sq2ItemFilters,

View file

@ -249,10 +249,10 @@ function displaysq2ExpandedItem(item, parent_id){
} else if (id === "displayName") { } else if (id === "displayName") {
let row = document.createElement("div"); let row = document.createElement("div");
let p_elem = document.createElement("div"); let p_elem = document.createElement("a");
row.classList.add("row", "no-collapse"); row.classList.add("row", "no-collapse");
p_elem.classList.add("col", "text-center", "item-title"); 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; p_elem.style.textGrow = 1;
row.appendChild(p_elem); row.appendChild(p_elem);
@ -271,13 +271,13 @@ function displaysq2ExpandedItem(item, parent_id){
// row.appendChild(plusminus); // row.appendChild(plusminus);
if (item.get("custom")) { 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"); p_elem.textContent = item.get("displayName");
} else if (item.get("crafted")) { } 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); p_elem.textContent = item.get(id);
} else { } 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"); 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.classList.add('text-center');
set_summary_elem.textContent = "Set Bonuses"; set_summary_elem.textContent = "Set Bonuses";
parent_div.append(set_summary_elem); 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) { for (const [setName, count] of build.activeSetCounts) {
const active_set = sets[setName]; const active_set = sets[setName];
@ -1892,4 +1884,494 @@ function displaysq2ExpandedIngredient(ingred, parent_id) {
parent_elem.appendChild(div); 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);
}

View file

@ -41,7 +41,6 @@
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a> <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 = ""><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 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> <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
</div> </div>

View file

@ -27,7 +27,6 @@
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</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 = "../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 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> <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
<hr/> <hr/>
</div> </div>