Merge branch 'UI_test' of https://github.com/hppeng-wynn/hppeng-wynn.github.io into UI_test
This commit is contained in:
reschan
commit
75e290872a
|
|
@ -14,13 +14,14 @@
|
|||
|
||||
<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/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||
</head>
|
||||
<body class="text-light d-flex justify-content-center" id = "body">
|
||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow col">
|
||||
<a href=""><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
|
||||
<a href = "/crafter.html"><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||
<a href = "/items.html"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
|
||||
<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 = "/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>
|
||||
|
|
@ -34,7 +35,7 @@
|
|||
</div>
|
||||
<div class = "col-4 d-flex justify-content-center" id = "headercenter" style = "color:#fbcd49; font-size: 200%;">
|
||||
<div>
|
||||
<p class = "itemp" id = "header">Atlas???</p>
|
||||
<p class = "itemp box-title" id = "header">Atlas???</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col-4 d-flex justify-content-end" id = "headerright">
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row d-flex text-center justify-content-center" id = "flavortext">
|
||||
<div class = "row d-flex text-center justify-content-center scaled-font" id = "flavortext">
|
||||
...
|
||||
</div>
|
||||
<div class = "col navbar navbar-fixed-bottom vh-75 min-vh-50 text-break ml-5" id = "bodydiv" style = "min-height: 75vh; display: flex; flex-direction: column;" >
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
<div class="row row-cols-1 gy-5">
|
||||
<div class="col">
|
||||
<div class="row row-cols-1 row-cols-xl-2 rounded gy-4 gx-5 justify-content-center">
|
||||
<div class="col rounded order-xl-0 order-0">
|
||||
<div class="col-auto rounded order-xl-0 order-0">
|
||||
<div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown">
|
||||
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
|
||||
<img id="helmet-img" class="img-fluid rounded" src="../media/items/new/generic-helmet.png">
|
||||
|
|
@ -771,7 +771,7 @@
|
|||
<div class="col dark-5 scaled-font">
|
||||
<footer class="text-center">
|
||||
<div id="header2">
|
||||
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "../atlas" target = "_blank" class = "link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
|
||||
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "../atlas" target = "_blank" class = "atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
|
||||
<p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
|
||||
</div>
|
||||
<div id="credits">
|
||||
|
|
@ -802,8 +802,8 @@
|
|||
<input class="search-field" id="rarity-choice" name="rarity-choice" placeholder="Rarity"/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label for="search-level-choice">Level:</label>
|
||||
<input class="search-field" type="text" id="search-level-choice" name="search-level-choice" value="1-106"/>
|
||||
<label for="level-choice">Level:</label>
|
||||
<input class="search-field" type="text" id="level-choice" name="level-choice" placeholder="1-106"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-xl-4 justify-content-center mt-1">
|
||||
|
|
@ -825,6 +825,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-4">
|
||||
<div class="row justify-content-center" id="summary"></div>
|
||||
</div>
|
||||
<div class="col p-4">
|
||||
<div class="row justify-content-center" id="search-results"></div>
|
||||
</div>
|
||||
|
|
@ -1244,12 +1247,15 @@
|
|||
<script type="text/javascript" src="../js/sq2display.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../js/query.js"></script>
|
||||
<script type="text/javascript" src="../js/query_2.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/custom.js"></script>
|
||||
<script type="text/javascript" src="../js/craft.js"></script>
|
||||
<script type="text/javascript" src="../js/sq2build.js"></script>
|
||||
<script type="text/javascript" src="../js/sq2builder.js"></script>
|
||||
<script type="text/javascript" src="../js/expr_parser.js"></script>
|
||||
<script type="text/javascript" src="../js/items.js"></script>
|
||||
<script type="text/javascript" src="../js/sq2items.js"></script>
|
||||
<script type="text/javascript" src="../js/sq2bs.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -35,28 +35,28 @@
|
|||
<div class = "col">
|
||||
<div class = "row g-3">
|
||||
<div class = "col-lg-5 col-sm-12 text-center">
|
||||
<div class = "row gx-5 mb-1">
|
||||
<div class = "col-6">
|
||||
<div class = "row gx-5 mb-2">
|
||||
<div class = "col-lg-6 col-sm-12">
|
||||
<div id = "recipe-dropdown" class = "row h-100 dark-shadow dark-6 rounded">
|
||||
<div id = "recipe-img-loc" class = "col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon">
|
||||
<img id = "recipe-img" class = "img-fluid rounded Crafted-shadow" src = "../media/items/new/generic-potion.png">
|
||||
</div>
|
||||
<div class = "col px-0">
|
||||
<div class = "row align-items-center">
|
||||
<div class = "col px-0">
|
||||
<div class = "col-4 px-0">
|
||||
<p class = "text-right mb-0 scaled-font fw-bold">Type:</p>
|
||||
</div>
|
||||
<div class = "col px-0">
|
||||
<div class = "col-7 px-0">
|
||||
<input class="recipeinput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="recipe-choices" id="recipe-choice" name="recipe-choice" placeholder="Potion"/>
|
||||
<datalist id="recipe-choices">
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row align-items-center">
|
||||
<div class = "col px-0">
|
||||
<div class = "col-4 px-0">
|
||||
<p class = "text-right mb-0 scaled-font fw-bold">Lv:</p>
|
||||
</div>
|
||||
<div class = "col px-0">
|
||||
<div class = "col-7 px-0">
|
||||
<input class="levelinput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="level-choices" id="level-choice" name="level-choice" placeholder="103-105" />
|
||||
<datalist id="level-choices">
|
||||
</datalist>
|
||||
|
|
@ -65,9 +65,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col-6">
|
||||
<div class = "col-lg-6 col-sm-12">
|
||||
<div id = "atkSpdChoices" class = "row h-100 dark-shadow dark-6 rounded">
|
||||
<div class = "col">
|
||||
<div class = "col py-2">
|
||||
<div class = "row h-50 align-items-center">
|
||||
<p class = "text-right mb-0 scaled-font fw-bold">Attack Speed</p>
|
||||
</div>
|
||||
|
|
@ -92,8 +92,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row gx-5 mb-1">
|
||||
<div class = "col justify-content-center">
|
||||
<div class = "row gx-5 mb-2">
|
||||
<div class = "col-lg-6 col-sm-12 justify-content-center">
|
||||
<div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
|
||||
<div class = "col-6 px-0">
|
||||
<p class = "mb-0 scaled-font fw-bold" id = "mat-1">Mat 1 Tier:</p>
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col justify-content-center">
|
||||
<div class = "col-lg-6 col-sm-12 justify-content-center">
|
||||
<div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
|
||||
<div class = "col-6 px-0">
|
||||
<p class = "mb-0 scaled-font fw-bold" id = "mat-2">Mat 2 Tier:</p>
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
<div class="col dark-5 scaled-font">
|
||||
<footer class="text-center">
|
||||
<div id="header2">
|
||||
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "../atlas" target = "_blank" class = "link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
|
||||
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "../atlas" target = "_blank" class = "atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
|
||||
<p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
|
||||
</div>
|
||||
<div id="credits">
|
||||
|
|
@ -292,6 +292,8 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="../js/query.js"></script>
|
||||
<script type="text/javascript" src="../js/query_2.js"></script>
|
||||
<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/sq2icons.js"></script>
|
||||
|
|
@ -305,5 +307,8 @@
|
|||
<script type="text/javascript" src="../js/load_ing.js"></script>
|
||||
<script type="text/javascript" src="../js/craft.js"></script>
|
||||
<script type="text/javascript" src="../js/crafter.js"></script>
|
||||
<script type="text/javascript" src="../js/expr_parser.js"></script>
|
||||
<script type="text/javascript" src="../js/items.js"></script>
|
||||
<script type="text/javascript" src="../js/sq2items.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -130,6 +130,17 @@ input.equipment-input {
|
|||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
text-align: center;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.skp-tooltip {
|
||||
font-size: 2.1875rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -168,6 +179,14 @@ input.equipment-input {
|
|||
.scaled-font {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.skp-tooltip {
|
||||
font-size: .625rem;
|
||||
|
|
@ -208,6 +227,14 @@ input.equipment-input {
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.skp-tooltip {
|
||||
font-size: .78rem;
|
||||
}
|
||||
|
|
@ -353,4 +380,8 @@ input.equipment-input {
|
|||
.item-title {
|
||||
text-align: center;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.atlas {
|
||||
color: #fbcd49;
|
||||
}
|
||||
|
|
@ -482,7 +482,3 @@ button.toggleOn:hover {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.atlas{
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<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><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>
|
||||
|
|
|
|||
20
js/items.js
20
js/items.js
|
|
@ -103,15 +103,17 @@ const special_mappings = {
|
|||
};
|
||||
|
||||
let itemFilters = document.getElementById("filter-items");
|
||||
for (let x in translate_mappings) {
|
||||
let el = document.createElement("option");
|
||||
el.value = x;
|
||||
itemFilters.appendChild(el);
|
||||
}
|
||||
for (let x in special_mappings) {
|
||||
let el = document.createElement("option");
|
||||
el.value = x;
|
||||
itemFilters.appendChild(el);
|
||||
if (itemFilters) {
|
||||
for (let x in translate_mappings) {
|
||||
let el = document.createElement("option");
|
||||
el.value = x;
|
||||
itemFilters.appendChild(el);
|
||||
}
|
||||
for (let x in special_mappings) {
|
||||
let el = document.createElement("option");
|
||||
el.value = x;
|
||||
itemFilters.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
let itemCategories = [ "armor", "accessory", "weapon" ];
|
||||
|
|
|
|||
|
|
@ -190,6 +190,13 @@ function doItemSearch() {
|
|||
displayItems(items_copy);
|
||||
}
|
||||
|
||||
function resetItemSearch() {
|
||||
resetFields = ["name-choice", "category-choice", "rarity-choice", "level-choice", "filter1-choice", "filter2-choice", "filter3-choice", "filter4-choice"]
|
||||
for (const field of resetFields) {
|
||||
document.getElementById(field).value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function init_items() {
|
||||
items_expanded = items.filter( (i) => !("remapID" in i) ).map( (i) => expandItem(i, []) );
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue