morphNon/wynnbuilder-idk
2
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

folder organization refactor; beginning sq2 bootstrap style UI refactor

Browse source
This commit is contained in:
ferricles 2022-05-12 01:48:59 -07:00
parent 4dfa12a471
commit 474d636a8c
26 changed files with 1114 additions and 1626 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
atlas.html
View file

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html scroll-behavior="smooth">
<head>
<meta charset="UTF-8" />
<!-- 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="icon" href="favicon.png">
<link rel="manifest" href="manifest.json">
<title>ATLAS???</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">Atlas???</p>
</div>
</div>
<div class = "headerright" id = "headerright">
<div>
<button class = "atlas" onclick = "atlasClick()" style = "padding:0">
<img src = "/favicon.png" style = "left:0;top:0;width:48px;height:48px"/>
</button>
</div>
</div>
</header>
</div>
<div class = "center" id = "flavortext">
...
</div>
<div class = "center bodydiv" id = "bodydiv">
</div>
<script type="text/javascript" src="/js/loadheader.js"></script>
<script type="text/javascript" src="/js/icons.js"></script>
<script type="text/javascript" src="/js/atlas.js"></script>
</body>
</html>

0
favicon.png → atlas/favicon.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 304 B

74
atlas/index.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#">
<head>
<title>ATLAS???</title>
<link rel="icon" href="favicon.png">
<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">
<meta property="og:title" content="WynnBuilder" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://hppeng-wynn.github.io/sq2bs.html" />
<meta property="og:image" content="https://i.kym-cdn.com/entries/icons/original/000/037/349/Screenshot_14.jpg" />
</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 = "/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>
<div class="container-fluid py-1 vh-100">
<div class = "row">
<div class = "col-4" id = "headerleft">
</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>
</div>
</div>
<div class = "col-4 d-flex justify-content-end" id = "headerright">
<div>
<button class = "rounded atlas" onclick = "atlasClick()" style = "padding:0; text-align: right">
<img src = "favicon.png" class = "rounded" style = "left:0;top:0;width:48px;height:48px"/>
</button>
</div>
</div>
</div>
<div class = "row d-flex text-center justify-content-center" 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;" >
</div>
</div>
<!-- sidebar -->
<!-- main body -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
<script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/icons.js"></script>
<script type="text/javascript" src="../js/atlas.js"></script>
</body>
</html>

111
sq2bs.html → builder/index.html
View file

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#"> <html prefix="og: https://ogp.me/ns#">
<head> <head>
<title>WynnBuilder^2</title> <title>WynnBuilder</title>
<link rel="icon" href="media/icons/new/builder.png" type="image/icon type"> <link rel="icon" href="../media/icons/new/builder.png" type="image/icon type">
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
@ -14,25 +14,28 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
<link rel="stylesheet" href="sq2bs.css"> <link rel="stylesheet" href="../css/sq2bs.css">
<link rel="stylesheet" href="../css/sidebar.css">
<link rel="stylesheet" href="../css/wynnstyles.css">
<meta property="og:title" content="WynnBuilder" /> <meta property="og:title" content="WynnBuilder" />
<meta property="og:type" content="video.movie" /> <meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://hppeng-wynn.github.io/sq2bs.html" /> <meta property="og:url" content="https://hppeng-wynn.github.io/builder/index.html" />
<meta property="og:image" content="https://i.kym-cdn.com/entries/icons/original/000/037/349/Screenshot_14.jpg" /> <meta property="og:image" content="https://i.kym-cdn.com/entries/icons/original/000/037/349/Screenshot_14.jpg" />
</head> </head>
<body class="text-light d-flex justify-content-center" style="background-color: #121212;"> <body class="text-light d-flex justify-content-center" id = "body">
<!-- hover tooltip stuff --> <!-- hover tooltip stuff -->
<!-- main --> <!-- main -->
<div id="main-sidebar" class="sidebar dark-7 dark-shadow"> <div id="main-sidebar" class="sidebar dark-7 dark-shadow">
<a href=""><img src="media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a> <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 = "../crafter/"><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 = "/items.html"><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 = "/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 = "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>
<div class="container py-5 vh-100 mx-0 mx-lg-auto"> <div class="container py-5 vh-100 mx-0 mx-lg-auto">
@ -44,8 +47,8 @@
<div class="row row-cols-1 row-cols-xl-2 rounded gy-4 gx-5 justify-content-center"> <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 rounded order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="helmet-img-loc"> <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" src="media/items/new/generic-helmet.png"> <img id="helmet-img" class="img-fluid rounded" src="../media/items/new/generic-helmet.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -71,8 +74,8 @@
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="ring1-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc">
<img id="ring1-img" class="img-fluid" src="media/items/new/generic-ring.png"> <img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -98,8 +101,8 @@
</div> </div>
<div class="col-auto 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="chestplate-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="chestplate-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc">
<img id="chestplate-img" class="img-fluid" src="media/items/new/generic-chestplate.png"> <img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -125,8 +128,8 @@
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="ring2-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc">
<img id="ring2-img" class="img-fluid" src="media/items/new/generic-ring.png"> <img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -152,8 +155,8 @@
</div> </div>
<div class="col-auto 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="leggings-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="leggings-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc">
<img id="leggings-img" class="img-fluid" src="media/items/new/generic-leggings.png"> <img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -179,8 +182,8 @@
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="bracelet-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc">
<img id="bracelet-img" class="img-fluid" src="media/items/new/generic-bracelet.png"> <img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -206,8 +209,8 @@
</div> </div>
<div class="col-auto 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="boots-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="boots-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc">
<img id="boots-img" class="img-fluid" src="media/items/new/generic-boots.png"> <img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -233,8 +236,8 @@
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown"> <div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="necklace-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc">
<img id="necklace-img" class="img-fluid" src="media/items/new/generic-necklace.png"> <img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -260,8 +263,8 @@
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'> <div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'>
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="weapon-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
<img id="weapon-img" class="img-fluid" src="media/items/new/generic-wand.png"> <img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-wand.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -287,8 +290,8 @@
</div> </div>
<div class="col-auto rounded order-xl-0 order-1"> <div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded"> <div class="row h-100 dark-shadow dark-6 rounded">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="weapon-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
<img class="img-fluid" src="media/icons/new/Gears.png"> <img class="img-fluid rounded" src="../media/icons/new/Gears.png">
</div> </div>
<div class="col"> <div class="col">
<div class="row align-items-center"> <div class="row align-items-center">
@ -757,7 +760,7 @@
<div class="col dark-5 scaled-font"> <div class="col dark-5 scaled-font">
<footer class="text-center"> <footer class="text-center">
<div id="header2"> <div id="header2">
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "./atlas.html" 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 = "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> <p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
</div> </div>
<div id="credits"> <div id="credits">
@ -1215,29 +1218,29 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/macy@2"></script> <script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
<script type="text/javascript" src="js/utils.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/build_utils.js"></script>
<script type="text/javascript" src="js/icons.js"></script> <!-- <script type="text/javascript" src="../js/icons.js"></script> -->
<script type="text/javascript" src="sq2icons.js"></script> <script type="text/javascript" src="../js/sq2icons.js"></script>
<script type="text/javascript" src="js/powders.js"></script> <script type="text/javascript" src="../js/powders.js"></script>
<script type="text/javascript" src="js/skillpoints.js"></script> <script type="text/javascript" src="../js/skillpoints.js"></script>
<script type="text/javascript" src="js/damage_calc.js"></script> <script type="text/javascript" src="../js/damage_calc.js"></script>
<script type="text/javascript" src="sq2display_constants.js"></script> <script type="text/javascript" src="../js/display_constants.js"></script>
<script type="text/javascript" src="js/display_constants.js"></script> <script type="text/javascript" src="../js/sq2display_constants.js"></script>
<script type="text/javascript" src="sq2display.js"></script> <script type="text/javascript" src="../js/display.js"></script>
<script type="text/javascript" src="js/display.js"></script> <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.js"></script>
<script type="text/javascript" src="js/load.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/load_ing.js"></script>
<script type="text/javascript" src="js/custom.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/craft.js"></script>
<script type="text/javascript" src="sq2build.js"></script> <script type="text/javascript" src="../js/sq2build.js"></script>
<script type="text/javascript" src="sq2builder.js"></script> <script type="text/javascript" src="../js/sq2builder.js"></script>
<script type="text/javascript" src="sq2items.js"></script> <script type="text/javascript" src="../js/sq2items.js"></script>
<script type="text/javascript" src="sq2bs.js"></script> <script type="text/javascript" src="../js/sq2bs.js"></script>
</body> </body>
</html> </html>

229
crafter.html
View file

@ -1,229 +0,0 @@
<!DOCTYPE html>
<html scroll-behavior="smooth">
<head>
<meta charset="UTF-8" />
<!-- 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" media="screen and (min-width: 1100px)" href="/css/crafter-wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="/css/crafter-narrow.css"/>
<link rel="icon" href="./media/icons/new/crafter.png">
<link rel="manifest" href="manifest.json">
<title>WynnCrafter</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">WynnCrafter</p>
</div>
</div>
<div class = "headerright" id = "headerright">
</div>
</header>
</div>
<div class = "container" display = "grid">
<div class = "center" style = "grid-column:1;grid-row:1" >
<div class = "crafter">
<table class = "center">
<tr>
<td>
<label for="recipe-choice">Recipe Type:</label>
<br/>
<input class="recipeinput" list="recipe-choices" id="recipe-choice" name="recipe-choice" placeholder="Potion"/>
<datalist id="recipe-choices">
</datalist>
</td>
<td >
<label for="level-choice">Recipe Level:</label>
<br/>
<input class="levelinput" list="level-choices" id="level-choice" name="level-choice" placeholder="103-105" />
<datalist id="level-choices">
</datalist>
</td>
</tr>
<tr>
<td class="center">
<label id = "mat-1" for="mat-1-tier-choice">Material 1 Tier:</label>
<br/>
<button class = "button Star" id = "mat-1-1" onclick = "toggleMaterial('mat-1-1')">1</button>
<button class = "button Star" id = "mat-1-2" onclick = "toggleMaterial('mat-1-2')">2</button>
<button class = "button Star" id = "mat-1-3" onclick = "toggleMaterial('mat-1-3')">3</button>
</td>
<td class="center">
<label id = "mat-2" for="mat-2-tier-choice">Material 2 Tier:</label>
<br/>
<button class = "button Star" id = "mat-2-1" onclick = "toggleMaterial('mat-2-1')">1</button>
<button class = "button Star" id = "mat-2-2" onclick = "toggleMaterial('mat-2-2')">2</button>
<button class = "button Star" id = "mat-2-3" onclick = "toggleMaterial('mat-2-3')">3</button>
</td>
</tr>
<tr>
<td class="center">
<label for="ing-choice-1">Ingredient 1:</label>
<br/>
<input class="inginput" list="ing-choices-1" id="ing-choice-1" name="ing-choice-1" placeholder="No Ingredient" />
<datalist id="ing-choices-1">
</datalist>
</td>
<td class="center">
<label for="ing-choice-2">Ingredient 2:</label>
<br/>
<input class="inginput" list="ing-choices-2" id="ing-choice-2" name="ing-choice-2" placeholder="No Ingredient" />
<datalist id="ing-choices-2">
</datalist>
</td>
</tr>
<tr>
<td class="center">
<label for="ing-choice-3">Ingredient 3:</label>
<br/>
<input class="inginput" list="ing-choices-3" id="ing-choice-3" name="ing-choice-3" placeholder="No Ingredient" />
<datalist id="ing-choices-3">
</datalist>
</td>
<td class="center">
<label for="ing-choice-4">Ingredient 4:</label>
<br/>
<input class="inginput" list="ing-choices-4" id="ing-choice-4" name="ing-choice-4" placeholder="No Ingredient" />
<datalist id="ing-choices-4">
</datalist>
</td>
</tr>
<tr>
<td class="center">
<label for="ing-choice-5">Ingredient 5:</label>
<br/>
<input class="inginput" list="ing-choices-5" id="ing-choice-5" name="ing-choice-5" placeholder="No Ingredient" />
<datalist id="ing-choices-5">
</datalist>
</td>
<td class="center">
<label for="ing-choice-6">Ingredient 6:</label>
<br/>
<input class="inginput" list="ing-choices-6" id="ing-choice-6" name="ing-choice-6" placeholder="No Ingredient" />
<datalist id="ing-choices-6">
</datalist>
</td>
</tr>
</table>
<label for = "atkSpdChoices"> Attack Speed (weapons only):</label>
<table class = "center" id = "atkSpdChoices">
<tr>
<td class = "center">
<button class = "button" id = "slow-atk-button" onclick = "toggleAtkSpd('slow-atk-button')">
Slow
</button>
</td>
<td class = "center">
<button class = "button" id = "normal-atk-button" onclick = "toggleAtkSpd('normal-atk-button')">
Normal
</button>
</td>
<td class = "center">
<button class = "button" id = "fast-atk-button" onclick = "toggleAtkSpd('fast-atk-button')">
Fast
</button>
</td>
</tr>
</table>
<table class = "center">
<tr>
<td class = "center">
<button class = "button" id = "craft-button" onclick = "calculateCraft()">
Craft Item
</button>
</td>
<td class = "center">
<button class = "button" id = "reset-button" onclick = "resetFields()">
Reset
</button>
</td>
<td class = "center">
<button class = "button" id = "copy-button" onclick = "copyRecipe()">
Copy Short
</button>
</td>
<td class = "center">
<button class = "button" id = "share-button" onclick = "shareRecipe()">
Copy Long
</button>
</td>
</tr>
</table>
</div>
</div>
<div class = "recipe center hide-container-block" style = "display:none">
<div class = "recipe-stats">
<div class = "center" id = "recipe-stats"></div>
</div>
<div class = "craft-warnings">
<div class = "center" id = "craft-warnings"></div>
</div>
</div>
<div class = "crafted center hide-container-block" style = "display:none">
<div class = "craft-stats">
<div class = "center" id = "craft-stats"></div>
</div>
</div>
<!--This is also incredibly janky.-->
<p></p>
<p></p>
<p></p>
<div class="ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
<p class="center title hide-container-block" style = "display:block">
Ingredients
</p>
<div class = "ingredients hide-container-grid" id = "ingreds">
<div class="ing-stats" id = "ing-1" style = "grid-item-1">
<div class = "center" id = "ing-1-stats"></div>
</div>
<div class="ing-stats" id = "ing-2" style = "grid-item-2">
<div class = "center" id = "ing-2-stats"></div>
</div>
<div class="ing-stats" id = "ing-3" style = "grid-item-3">
<div class = "center" id = "ing-3-stats"></div>
</div>
<div class="ing-stats" id = "ing-4" style = "grid-item-4">
<div class = "center" id = "ing-4-stats"></div>
</div>
<div class="ing-stats" id = "ing-5" style = "grid-item-5">
<div class = "center" id = "ing-5-stats"></div>
</div>
<div class="ing-stats" id = "ing-6" style = "grid-item-6">
<div class = "center" id = "ing-6-stats"></div>
</div>
</div>
</div>
</div>
<div class = "center">
<footer>
<div class="center" id="header2">
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "./atlas.html" target = "_blank" class = "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 class="center" id="credits">
<a href="credits.txt" class="link">Additional credits</a>
</div>
</footer>
</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/powders.js"></script>
<script type="text/javascript" src="/js/skillpoints.js"></script>
<script type="text/javascript" src="/js/damage_calc.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/load_ing.js"></script>
<script type="text/javascript" src="/js/craft.js"></script>
<script type="text/javascript" src="/js/crafter.js"></script>
</body>
</html>

314
crafter/index.html Normal file
View file

@ -0,0 +1,314 @@
<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#">
<head>
<title>WynnCrafter</title>
<link rel="icon" href="../media/icons/new/crafter.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">
<meta property="og:title" content="WynnCrafter" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://hppeng-wynn.github.io/crafter/index.html" />
<meta property="og:image" content="https://i.kym-cdn.com/entries/icons/original/000/037/349/Screenshot_14.jpg" />
</head>
<body id = "body" class = "text-light d-flex justify-content-center">
<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 = ""><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 = "/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>
<div class = "container py-5 vh-100 mx-0 mx-lg-auto">
<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 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-8 px-0">
<div class = "row align-items-center">
<div class = "col px-0">
<p class = "text-right mb-0 scaled-font fw-bold">Type:</p>
</div>
<div class = "col 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">
<p class = "text-right mb-0 scaled-font fw-bold">Lv:</p>
</div>
<div class = "col 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>
</div>
</div>
</div>
</div>
</div>
<div class = "col-6">
<div id = "atkSpdChoices" class = "row h-100 dark-shadow dark-6 rounded">
<div class = "col">
<div class = "row h-50 align-items-center">
<p class = "text-right mb-0 scaled-font fw-bold">Attack Speed (Weapons Only)</p>
</div>
<div class = "row h-50">
<div class = "col">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "slow-atk-button" onclick = "toggleAtkSpd('slow-atk-button')">
Slow
</button>
</div>
<div class = "col">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "normal-atk-button" onclick = "toggleAtkSpd('normal-atk-button')">
Normal
</button>
</div>
<div class = "col">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "fast-atk-button" onclick = "toggleAtkSpd('fast-atk-button')">
Fast
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "row gx-5 mb-1">
<div class = "col 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>
</div>
<div class = "col px-0">
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-1" onclick = "toggleMaterial('mat-1-1')">1</button>
</div>
<div class = "col px-0">
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-2" onclick = "toggleMaterial('mat-1-2')">2</button>
</div>
<div class = "col px-0">
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-3" onclick = "toggleMaterial('mat-1-3')">3</button>
</div>
</div>
</div>
<div class = "col 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>
</div>
<div class = "col px-0">
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-1" onclick = "toggleMaterial('mat-2-1')">1</button>
</div>
<div class = "col px-0">
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-2" onclick = "toggleMaterial('mat-2-2')">2</button>
</div>
<div class = "col px-0">
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-3" onclick = "toggleMaterial('mat-2-3')">3</button>
</div>
</div>
</div>
</div>
<div class = "row gx-5 mb-1">
<div class = "col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<p class = "mb-0 scaled-font fw-bold">Ing 1:</p>
</div>
<div class = "col-9 px-0">
<input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-1" id="ing-choice-1" name="ing-choice-1" placeholder="No Ingredient" />
<datalist id="ing-choices-1">
</datalist>
</div>
</div>
</div>
<div class = "col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<p class = "mb-0 scaled-font fw-bold">Ing 2:</p>
</div>
<div class = "col-9 px-0">
<input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-2" id="ing-choice-2" name="ing-choice-2" placeholder="No Ingredient" />
<datalist id="ing-choices-2">
</datalist>
</div>
</div>
</div>
</div>
<div class = "row gx-5 mb-1">
<div class = "col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<p class = "mb-0 scaled-font fw-bold">Ing 3:</p>
</div>
<div class = "col-9 px-0">
<input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-3" id="ing-choice-3" name="ing-choice-3" placeholder="No Ingredient" />
<datalist id="ing-choices-3">
</datalist>
</div>
</div>
</div>
<div class = "col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<p class = "mb-0 scaled-font fw-bold">Ing 4:</p>
</div>
<div class = "col-9 px-0">
<input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-4" id="ing-choice-4" name="ing-choice-4" placeholder="No Ingredient" />
<datalist id="ing-choices-4">
</datalist>
</div>
</div>
</div>
</div>
<div class = "row gx-5 mb-1">
<div class = "col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<p class = "mb-0 scaled-font fw-bold">Ing 5:</p>
</div>
<div class = "col-9 px-0">
<input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-5" id="ing-choice-5" name="ing-choice-5" placeholder="No Ingredient" />
<datalist id="ing-choices-5">
</datalist>
</div>
</div>
</div>
<div class = "col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<p class = "mb-0 scaled-font fw-bold">Ing 6:</p>
</div>
<div class = "col-9 px-0">
<input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-6" id="ing-choice-6" name="ing-choice-6" placeholder="No Ingredient" />
<datalist id="ing-choices-6">
</datalist>
</div>
</div>
</div>
</div>
<div class = "row rounded dark-shadow dark-6 py-2">
<div class = "col">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "craft-button" onclick = "calculateCraft()">
Craft Item
</button>
</div>
<div class = "col">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetFields()">
Reset
</button>
</div>
<div class = "col">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-button" onclick = "copyRecipe()">
Copy Short
</button>
</div>
<div class = "col">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "share-button" onclick = "shareRecipe()">
Copy Long
</button>
</div>
</div>
</div>
<div class = "col-lg-4">
<div class = "recipe hide-container-block px-3 col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" style = "display:none">
<div class = "row recipe-stats">
<div class = "col" id = "recipe-stats"></div>
</div>
<div class = "row craft-warnings">
<div class = "" id = "craft-warnings"></div>
</div>
</div>
</div>
<div class = "col-lg-3">
<div class = "crafted row hide-container-block" style = "display:none">
<div class = "craft-stats">
<div class = "col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" id = "craft-stats"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
<div class = "col-6 hide-container-grid" id = "ingreds">
<div class = "row mb-3">
<p class="box-title hide-container-block">
Ingredients
</p>
</div>
<div class = "row mb-3">
<div class="ing-stats col-lg-6 col-sm-12 scaled-font" id = "ing-1">
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-1-stats"></div>
</div>
<div class="ing-stats col-lg-6 col-sm-12 scaled-font" id = "ing-2">
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-2-stats"></div>
</div>
</div>
<div class = "row mb-3">
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-3">
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-3-stats"></div>
</div>
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-4">
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-4-stats"></div>
</div>
</div>
<div class = "row mb-3">
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-5">
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-5-stats"></div>
</div>
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-6">
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-6-stats"></div>
</div>
</div>
</div>
</div>
<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>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
</div>
<div id="credits">
<a href="credits.txt" class="link">Additional credits</a>
</div>
</footer>
</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/sq2icons.js"></script>
<script type="text/javascript" src="../js/powders.js"></script>
<script type="text/javascript" src="../js/skillpoints.js"></script>
<script type="text/javascript" src="../js/damage_calc.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/load_ing.js"></script>
<script type="text/javascript" src="../js/craft.js"></script>
<script type="text/javascript" src="../js/crafter.js"></script>
</body>
</html>

0
crafter/temp.html Normal file
View file

41
css/sidebar.css Normal file
View file

@ -0,0 +1,41 @@
/* sidebar stuff */
.sidebar {
height: 100%; /* 100% Full-height */
width: 3.5vw; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
top: 0;
left: 0;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
.sidebar:hover {
width: 11vw;
}
.sidebar a {
padding: .4vw .4vw .4vw .4vw;
display: block;
color: white;
white-space: nowrap;
text-decoration: none;
}
.sidebar a img {
margin-right: .6vw;
width: 2.5vw;
}
.sidebar a b {
font-size: .85vw;
}
.sidebar a:hover {
background-color: hsl(0, 0%, 8%);
color: rgb(210, 210, 210);
}
@media screen and (max-width: 992px) {
.sidebar {display: none;}
}

152
sq2bs.css → css/sq2bs.css
View file

@ -2,131 +2,13 @@
font-family: 'Nunito', sans-serif; font-family: 'Nunito', sans-serif;
} }
/* sidebar stuff */ #body {
.sidebar { background-color: #121212;
height: 100%; /* 100% Full-height */
width: 3.5vw; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
top: 0;
left: 0;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
.sidebar:hover {
width: 11vw;
}
.sidebar a {
padding: .4vw .4vw .4vw .4vw;
display: block;
color: white;
white-space: nowrap;
text-decoration: none;
}
.sidebar a img {
margin-right: .6vw;
width: 2.5vw;
}
.sidebar a b {
font-size: .8vw;
}
.sidebar a:hover {
background-color: hsl(0, 0%, 8%);
color: rgb(210, 210, 210);
}
@media screen and (max-width: 992px) {
.sidebar {display: none;}
} }
/* builder containers */ /* builder containers */
/* wynn-related css(es) */
.positive {
color: #5f5;
}
.negative {
color: #f55;
}
.Health {
color: #AA0000
}
.Health:before {
content: "\2764" ' ';
}
.lvl:before {
content: 'Lv. '
}
.Damage {
color: rgb(255, 198, 85)
}
.Normal {
color: #FFFFFF !important;
}
.Unique {
color: #FFFF55 !important;
}
.Rare {
color: #FF55FF !important;
}
.Legendary {
color: #55FFFF !important;
}
.Fabled {
color: #FF5555 !important;
}
.Mythic {
color: #AA00AA !important;
}
.Set {
color: #5f5 !important;
}
.eDam, .Earth, .Earth_powder {
color: #00AA00;
}
.eDam:before, .Earth:before, .Earth_powder:before { content: "\2724" ' '; }
.tDam, .Thunder, .Thunder_powder {
color: #FFFF55;
}
.tDam:before, .Thunder:before, .Thunder_powder:before { content: "\2726" ' '; }
.wDam, .Water, .Water_powder {
color: #55FFFF
}
.wDam:before, .Water:before, .Water_powder:before { content: "\2749" ' '; }
.fDam, .Fire, .Fire_powder {
color: #FF5555;
}
.fDam:before, .Fire:before, .Fire_powder:before { content: "\2739" ' '; }
.aDam, .Air, .Air_powder {
color: #FFFFFF
}
.aDam:before, .Air:before, .Air_powder:before { content: "\274b" ' '; }
.e_slider, .t_slider, .w_slider, .f_slider, .a_slider { .e_slider, .t_slider, .w_slider, .f_slider, .a_slider {
-webkit-appearance: none; -webkit-appearance: none;
@ -168,23 +50,6 @@ input[type=range]:focus {
} }
.nDam, .Neutral {
color: #FFAA00;
}
.nDam:before, .Neutral:before {
content: "\2724" ' ';
}
.Mana {
color: #5ff;
}
.Mana:after {
content: "\273A"
}
/* equipment field specifics */ /* equipment field specifics */
/* inputs and dropdowns */ /* inputs and dropdowns */
.form-control { .form-control {
@ -215,10 +80,11 @@ li.search-item:hover {
background-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1);
} }
.toggleOn { button.toggleOn {
background-color: #0a0 !important; background-color: #0a0 !important;
} }
/* floating tooltip styles */ /* floating tooltip styles */
.float-tooltip { .float-tooltip {
background-color: hsl(0, 0%, 16%); background-color: hsl(0, 0%, 16%);
@ -466,6 +332,11 @@ input.equipment-input {
background-color: hsl(0, 0%, 16%); background-color: hsl(0, 0%, 16%);
} }
.border-dark-7 {
border-color:hsl(0, 0%, 14%) !important;
}
/* BOX SHADOW STYLES */
.dark-shadow { .dark-shadow {
box-shadow: 0rem 0rem 0.5rem 0.075rem black; box-shadow: 0rem 0rem 0.5rem 0.075rem black;
} }
@ -474,6 +345,7 @@ input.equipment-input {
box-shadow: 0rem 0rem 0.25rem 0.05rem black; box-shadow: 0rem 0rem 0.25rem 0.05rem black;
} }
.border-dark-7 { .box-title {
border-color:hsl(0, 0%, 14%) !important; text-align: center;
font-size: 1.25rem;
} }

68
css/styles.css
View file

@ -356,43 +356,6 @@ input {
::placeholder{ ::placeholder{
color: #aaa; color: #aaa;
} }
/* Tier colors tier colors */
.none {
color: #aaa;
}
.lore {
color: #555;
}
.Normal{
color: #fff;
}
.Unique{
color:#ff5;
}
.Rare{
color:#f5f;
}
.Legendary{
color:#5ff;
}
.Fabled{
color:#f55;
}
.Mythic{
color:#a0a;
}
.Crafted {
color: #0aa;
}
.Custom {
color: #0aa;
}
.Set{
color:#5f5;
}
.restrict, .warning {
color: #ff8180;
}
button.toggleOn{ button.toggleOn{
background-color:#0a0; background-color:#0a0;
@ -411,40 +374,11 @@ button.toggleOn:hover {
} }
.Star {
color:rgb(255, 198, 85);
}
.Star:after {
content: "\272B";
}
.externalBuffs { .externalBuffs {
width: 100%; width: 100%;
} }
.T0 {
color: #555;
}
.T1 {
color: #ff5;
}
.T2 {
color: #f5f;
}
.T3 {
color: #5ff;
}
.T0-bracket {
color: #555;
}
.T1-bracket {
color: #fa0;
}
.T2-bracket {
color: #a0a;
}
.T3-bracket {
color: #0aa;
}
.hide-container-block, .hide-container-grid, .set-info-div, .fade-in { .hide-container-block, .hide-container-grid, .set-info-div, .fade-in {
animation-duration: 0.5s; animation-duration: 0.5s;
animation-name: fadeInFromNone; animation-name: fadeInFromNone;

175
css/wynnstyles.css Normal file
View file

@ -0,0 +1,175 @@
/*
Wynn-Related CSS
*/
/* Misc/Util Colors */
.positive {
color: #5f5;
}
.negative {
color: #f55;
}
.Health {
color: #AA0000
}
.Health:before {
content: "\2764" ' ';
}
.Mana {
color: #5ff;
}
.Mana:after {
content: "\273A"
}
.lvl:before {
content: 'Lv. '
}
/* Tier Colors */
.Normal {
color: #FFFFFF !important;
}
.Unique {
color: #FFFF55 !important;
}
.Rare {
color: #FF55FF !important;
}
.Legendary {
color: #55FFFF !important;
}
.Fabled {
color: #FF5555 !important;
}
.Mythic {
color: #AA00AA !important;
}
.Set {
color: #5f5 !important;
}
.Crafted, .Custom {
color: #0aa !important;
}
/* Tier Shadows */
.Normal-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #fff;
}
.Unique-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #ff5;
}
.Rare-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #f5f;
}
.Legendary-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #5ff;
}
.Fabled-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #f55;
}
.Mythic-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #a0a;
}
.Crafted-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #0aa;
}
.Custom-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #0aa;
}
.Set-shadow {
box-shadow: 0rem 0rem 0.25rem 0.05rem #5f5;
}
/* CR Styles */
.Star {
color:rgb(255, 198, 85);
}
.Star:after {
content: "\272B";
}
.T0 {
color: #555;
}
.T1 {
color: #ff5;
}
.T2 {
color: #f5f;
}
.T3 {
color: #5ff;
}
.T0-bracket {
color: #555;
}
.T1-bracket {
color: #fa0;
}
.T2-bracket {
color: #a0a;
}
.T3-bracket {
color: #0aa;
}
/* Damages */
.Damage {
color: rgb(255, 198, 85)
}
.nDam, .Neutral {
color: #FFAA00;
}
.nDam:before, .Neutral:before {
content: "\2724" ' ';
}
.eDam, .Earth, .Earth_powder {
color: #00AA00;
}
.eDam:before, .Earth:before, .Earth_powder:before { content: "\2724" ' '; }
.tDam, .Thunder, .Thunder_powder {
color: #FFFF55;
}
.tDam:before, .Thunder:before, .Thunder_powder:before { content: "\2726" ' '; }
.wDam, .Water, .Water_powder {
color: #55FFFF
}
.wDam:before, .Water:before, .Water_powder:before { content: "\2749" ' '; }
.fDam, .Fire, .Fire_powder {
color: #FF5555;
}
.fDam:before, .Fire:before, .Fire_powder:before { content: "\2739" ' '; }
.aDam, .Air, .Air_powder {
color: #FFFFFF
}
.aDam:before, .Air:before, .Air_powder:before { content: "\274b" ' '; }

1032
index.html
View file

File diff suppressed because it is too large Load diff

31
js/atlas.js
View file

@ -6,7 +6,8 @@ function setTitle() {
} }
setTitle(); setTitle();
const flavortexts = ["JALA?? \n ATLAS?? \n ANYONE??", const flavortexts = [
"JALA?? \n ATLAS?? \n ANYONE??",
"this really do be a bruh moment.", "this really do be a bruh moment.",
"OH, LOOK AT YOU. YOU FOUND THE FUNNY BUILDER GUILDER MEME PAGE. AREN'T YOU PROUD OF YOURSELF?", "OH, LOOK AT YOU. YOU FOUND THE FUNNY BUILDER GUILDER MEME PAGE. AREN'T YOU PROUD OF YOURSELF?",
"Downloading Atlas Inc Virus 2.0...", "Downloading Atlas Inc Virus 2.0...",
@ -16,15 +17,22 @@ const flavortexts = ["JALA?? \n ATLAS?? \n ANYONE??",
"WynnCraft is overrated. Stay on this page forever!", "WynnCraft is overrated. Stay on this page forever!",
"Now trading Smash invite letters for Atlas Inc invites!", "Now trading Smash invite letters for Atlas Inc invites!",
"You have reached the customer support page of Wynnbuilder. Please call [REDACTED] to get your problems solved!", "You have reached the customer support page of Wynnbuilder. Please call [REDACTED] to get your problems solved!",
"",
"Isn't this like that one game Amogus?",
"Mom, what does 'hppeng' mean?", "Mom, what does 'hppeng' mean?",
"hpgbegg", "hpgbegg",
"| |I || |_", "| |I || |_",
"", "Wynn was so good they made Wynn 2",
]; "Join Monumenta today!",
"do NOT look up the 25th largest island of Greece",
"whatever you do, don't search for lego piece 26047.",
"guys what does perbromic acid look like",
"Hello Chat",
"Goodbye Chat",
"Look up. Now look down. Now look up again. Spin your head 3 times clockwise. You look real silly.",
"There\'s \'guillble\' written on the ceiling",
"when the pretender is conspicuous...",
"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH"];
const dt = 10; //millis const dt = 10; //millis
const PIX_PER_SEC = 1000; const PIX_PER_SEC = 1337;
const EPSILON = 1E-7 * dt; const EPSILON = 1E-7 * dt;
let atli = []; let atli = [];
@ -32,11 +40,13 @@ let atli = [];
function atlasClick() { function atlasClick() {
let atlas = document.createElement("div"); let atlas = document.createElement("div");
let atlas_img = document.createElement("img"); let atlas_img = document.createElement("img");
atlas_img.src = "favicon.png"; atlas.style.maxWidth = "64px";
atlas.style.maxHeight = "64px";
atlas_img.src = "../atlas/favicon.png";
atlas_img.style.width = "100%"; atlas_img.style.width = "100%";
atlas_img.style.height = "100%"; atlas_img.style.height = "100%";
atlas_img.style.maxWidth = "48px"; atlas_img.style.maxWidth = "64px";
atlas_img.style.maxHeight = "48px"; atlas_img.style.maxHeight = "64px";
atlas_img.style.zIndex = 1; atlas_img.style.zIndex = 1;
atlas.classList.add("atlas"); atlas.classList.add("atlas");
let roll = Math.random(); let roll = Math.random();
@ -44,7 +54,7 @@ function atlasClick() {
let rollList = ["lmoa","doom","agony","enraged","sunglaso","thonk","unglaso"]; let rollList = ["lmoa","doom","agony","enraged","sunglaso","thonk","unglaso"];
for (let i = rollList.length-1; i > -1; i--) { for (let i = rollList.length-1; i > -1; i--) {
if (roll < (i+1) * rollchance) { if (roll < (i+1) * rollchance) {
atlas_img.src = "./media/memes/" + rollList[i] + ".png"; atlas_img.src = "../media/memes/" + rollList[i] + ".png";
} }
} }
atlas.appendChild(atlas_img); atlas.appendChild(atlas_img);
@ -52,6 +62,7 @@ function atlasClick() {
atlas.style.position = "absolute"; atlas.style.position = "absolute";
rect = document.getElementById("bodydiv").getBoundingClientRect(); //use rect.top, rect.left, rect.bottom, and rect.top rect = document.getElementById("bodydiv").getBoundingClientRect(); //use rect.top, rect.left, rect.bottom, and rect.top
console.log(rect)
atlasrect = atlas.getBoundingClientRect(); atlasrect = atlas.getBoundingClientRect();
atlas.style.left = Math.floor((rect.right - rect.left - 2*(atlasrect.right - atlasrect.left) ) * Math.random() + rect.left + (atlasrect.right - atlasrect.left) )+ "px"; atlas.style.left = Math.floor((rect.right - rect.left - 2*(atlasrect.right - atlasrect.left) ) * Math.random() + rect.left + (atlasrect.right - atlasrect.left) )+ "px";

26
js/crafter.js
View file

@ -22,10 +22,10 @@ const ING_BUILD_VERSION = "7.0.1";
*/ */
let player_craft; let player_craft;
function setTitle() { // function setTitle() {
document.getElementById("header").textContent = "WynnCrafter version "+ING_BUILD_VERSION+" (ingredient db version "+ING_DB_VERSION+")"; // document.getElementById("header").textContent = "WynnCrafter version "+ING_BUILD_VERSION+" (ingredient db version "+ING_DB_VERSION+")";
document.getElementById("header").classList.add("funnynumber"); // document.getElementById("header").classList.add("funnynumber");
} // }
@ -51,7 +51,6 @@ function init_crafter() {
populateFields(); populateFields();
decodeCraft(ing_url_tag); decodeCraft(ing_url_tag);
setTitle();
} catch (error) { } catch (error) {
console.log("If you are seeing this while building, do not worry. Oherwise, panic! (jk contact ferricles)"); console.log("If you are seeing this while building, do not worry. Oherwise, panic! (jk contact ferricles)");
console.log(error); console.log(error);
@ -117,7 +116,8 @@ function calculateCraft() {
} }
let ingreds = []; let ingreds = [];
for (i = 1; i < 7; i++) { for (i = 1; i < 7; i++) {
console.log(getValue("ing-choice-"+i)); console.log("ing-choice-"+i);
// console.log(getValue("ing-choice-"+i));
getValue("ing-choice-" + i) === "" ? ingreds.push(expandIngredient(ingMap.get("No Ingredient"))) : ingreds.push(expandIngredient(ingMap.get(getValue("ing-choice-" + i)))); getValue("ing-choice-" + i) === "" ? ingreds.push(expandIngredient(ingMap.get("No Ingredient"))) : ingreds.push(expandIngredient(ingMap.get(getValue("ing-choice-" + i))));
} }
let atkSpd = "NORMAL"; //default attack speed will be normal. let atkSpd = "NORMAL"; //default attack speed will be normal.
@ -138,19 +138,21 @@ function calculateCraft() {
console.log(levelrange) console.log(levelrange)
console.log(mat_tiers) console.log(mat_tiers)
console.log(ingreds)*/ console.log(ingreds)*/
document.getElementById("mat-1").textContent = recipe.get("materials")[0].get("item").split(" ").slice(1).join(" ") + " Tier:"; document.getElementById("mat-1").textContent = recipe.get("materials")[0].get("item").split(" ").slice(1).join(" ") + " Tier:";
document.getElementById("mat-2").textContent = recipe.get("materials")[1].get("item").split(" ").slice(1).join(" ") + " Tier:"; document.getElementById("mat-2").textContent = recipe.get("materials")[1].get("item").split(" ").slice(1).join(" ") + " Tier:";
//Display Recipe Stats //Display Recipe Stats
displayRecipeStats(player_craft, "recipe-stats"); displaysq2RecipeStats(player_craft, "recipe-stats");
for(let i = 0; i < 6; i++) {
displayExpandedIngredient(player_craft["ingreds"][i],"tooltip-" + i);
}
//Display Craft Stats //Display Craft Stats
displayCraftStats(player_craft, "craft-stats"); // displayCraftStats(player_craft, "craft-stats");
let mock_item = player_craft.statMap;
displaysq2ExpandedItem(mock_item, "craft-stats");
//Display Ingredients' Stats //Display Ingredients' Stats
for (let i = 1; i < 7; i++) { for (let i = 1; i < 7; i++) {
displayExpandedIngredient(player_craft.ingreds[i-1] , "ing-"+i+"-stats"); displaysq2ExpandedIngredient(player_craft.ingreds[i-1] , "ing-"+i+"-stats");
} }
//Display Warnings - only ingred type warnings for now //Display Warnings - only ingred type warnings for now
let warning_elem = document.getElementById("craft-warnings"); let warning_elem = document.getElementById("craft-warnings");

2
js/display.js
View file

@ -519,7 +519,7 @@ function displayExpandedItem(item, parent_id){
active_elem.appendChild(p_elem); active_elem.appendChild(p_elem);
let img = document.createElement("img"); let img = document.createElement("img");
if (item && item.has("type")) { if (item && item.has("type")) {
img.src = "./media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png"; img.src = "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png";
img.alt = item.get("type"); img.alt = item.get("type");
img.style = " z=index: 1;max-width: 64px; max-height: 64px; position: relative; top: 50%; transform: translateY(-50%);"; img.style = " z=index: 1;max-width: 64px; max-height: 64px; position: relative; top: 50%; transform: translateY(-50%);";
let bckgrd = document.createElement("p"); let bckgrd = document.createElement("p");

10
sq2bs.js → js/sq2bs.js
View file

@ -107,7 +107,8 @@ function doSearchSchedule(){
function update_field(field) { function update_field(field) {
// built on the assumption of no one will type in CI/CR letter by letter // built on the assumption of no one will type in CI/CR letter by letter
// resets // resets
document.querySelector("#"+field+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set'); document.querySelector("#"+field+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set', 'Crafted', 'Custom');
document.querySelector("#" + field + "-img").classList.remove('Normal-shadow', 'Unique-shadow', 'Rare-shadow', 'Legendary-shadow', 'Fabled-shadow', 'Mythic-shadow', 'Set-shadow', 'Crafted-shadow', 'Custom-shadow');
item = document.querySelector("#"+field+"-choice").value item = document.querySelector("#"+field+"-choice").value
let powder_slots; let powder_slots;
@ -160,6 +161,8 @@ function update_field(field) {
// set item color // set item color
document.querySelector("#"+field+"-choice").classList.add(tier); document.querySelector("#"+field+"-choice").classList.add(tier);
document.querySelector("#"+field+"-img").classList.add(tier + "-shadow");
if (powderable_keys.includes(field)) { if (powderable_keys.includes(field)) {
@ -175,9 +178,11 @@ function update_field(field) {
// set weapon img // set weapon img
if (category == 'weapon') { if (category == 'weapon') {
document.querySelector("#weapon-img").setAttribute('src', 'media/items/new/generic-'+type+'.png'); document.querySelector("#weapon-img").setAttribute('src', '../media/items/new/generic-'+type+'.png');
} }
// call calc build // call calc build
} }
/* tabulars | man i hate this code but too lazy to fix /shrug */ /* tabulars | man i hate this code but too lazy to fix /shrug */
@ -403,3 +408,4 @@ function init_autocomplete() {
})); }));
} }
} }

0
sq2build.js → js/sq2build.js
View file

0
sq2builder.js → js/sq2builder.js
View file

356
sq2display.js → js/sq2display.js
View file

@ -238,7 +238,7 @@ function displaysq2ExpandedItem(item, parent_id){
} }
} else if (id === "lvl" && item.get("tier") === "Crafted") { } else if (id === "lvl" && item.get("tier") === "Crafted") {
let p_elem = document.createElement("div"); let p_elem = document.createElement("div");
p_elems.classList.add("col"); p_elem.classList.add("col");
p_elem.textContent = "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id); p_elem.textContent = "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id);
parent_div.appendChild(p_elem); parent_div.appendChild(p_elem);
} else if (id === "displayName") { } else if (id === "displayName") {
@ -275,7 +275,7 @@ function displaysq2ExpandedItem(item, parent_id){
let img = document.createElement("img"); let img = document.createElement("img");
if (item && item.has("type")) { if (item && item.has("type")) {
img.src = "./media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png"; img.src = "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png";
img.alt = item.get("type"); img.alt = item.get("type");
img.style = " z=index: 1; position: relative;"; img.style = " z=index: 1; position: relative;";
let container = document.createElement("div"); let container = document.createElement("div");
@ -561,7 +561,7 @@ function displaysq2WeaponStats(build) {
document.getElementById("weapon-lv").textContent = item.get("lvl"); document.getElementById("weapon-lv").textContent = item.get("lvl");
if (item.get("type")) { if (item.get("type")) {
document.getElementById("weapon-img").src = "./media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png"; document.getElementById("weapon-img").src = "../media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png";
} }
} }
@ -1531,5 +1531,353 @@ function updatePowders(elem_id) {
// elem.value = elem.value.substring(0, i) + powder_chars['etwfa'.indexOf(elem.value.charAt(i))] + elem.value.substring(i + 2); // elem.value = elem.value.substring(0, i) + powder_chars['etwfa'.indexOf(elem.value.charAt(i))] + elem.value.substring(i + 2);
// } // }
// } // }
}
/*
* Displays stats about a recipe that are NOT displayed in the craft stats.
* Includes: mat name and amounts, ingred names in an "array" with ingred effectiveness
*/
function displaysq2RecipeStats(craft, parent_id) {
let elem = document.getElementById(parent_id);
if (!elem.classList.contains("col")) {
elem.classList.add("col");
}
//local vars
elem.textContent = "";
recipe = craft["recipe"];
mat_tiers = craft["mat_tiers"];
ingreds = [];
for (const n of craft["ingreds"]) {
ingreds.push(n.get("name"));
}
let effectiveness = craft["statMap"].get("ingredEffectiveness");
let title = document.createElement("div");
title.classList.add("row", "box-title", "fw-bold", "justify-content-center");
title.textContent = "Recipe Stats";
elem.appendChild(title);
let mats = document.createElement("div");
mats.classList.add("row");
mats.textContent = "Crafting Materials: ";
elem.appendChild(mats);
for (let i = 0; i < 2; i++) {
let tier = mat_tiers[i];
let row = document.createElement("div");
row.classList.add("row", "px-0", "mx-0");
let b = document.createElement("div");
let mat = recipe.get("materials")[i];
b.textContent = "- " + mat.get("amount") + "x " + mat.get("item").split(" ").slice(1).join(" ");
b.classList.add("col");
row.appendChild(b);
let starsB = document.createElement("div");
starsB.classList.add("T1-bracket", "col-auto", "px-0");
starsB.textContent = "[";
row.appendChild(starsB);
for(let j = 0; j < 3; j ++) {
let star = document.createElement("div");
star.classList.add("col-auto", "px-0");
star.textContent = "\u272B";
if(j < tier) {
star.classList.add("T1");
} else {
star.classList.add("T0");
}
row.append(star);
}
let starsE = document.createElement("div");
starsE.classList.add("T1-bracket", "col-auto", "px-0");
starsE.textContent = "]";
row.appendChild(starsE);
elem.appendChild(row);
}
let ingredTable = document.createElement("div");
ingredTable.classList.add("row");
for (let i = 0; i < 3; i++) {
let row = document.createElement("div");
row.classList.add("row", "g-1", "justify-content-center");
for (let j = 0; j < 2; j++) {
if (j == 1) {
let spacer = document.createElement("div");
spacer.classList.add("col-1");
row.appendChild(spacer);
}
let ingredName = ingreds[2 * i + j];
let col = document.createElement("div");
col.classList.add("col-5", "rounded", "dark-6", "border", "border-3", "dark-shadow");
let temp_row = document.createElement("div");
temp_row.classList.add("row");
col.appendChild(temp_row);
let ingred_div = document.createElement("div");
ingred_div.classList.add("col");
ingred_div.textContent = ingredName;
temp_row.appendChild(ingred_div);
let eff_div = document.createElement("div");
eff_div.classList.add("col-auto");
let e = effectiveness[2 * i + j];
if (e > 0) {
eff_div.classList.add("positive");
} else if (e < 0) {
eff_div.classList.add("negative");
}
eff_div.textContent = "[" + e + "%]";
temp_row.appendChild(eff_div);
row.appendChild(col);
}
ingredTable.appendChild(row);
}
elem.appendChild(ingredTable);
}
/*
* Displays an ingredient in item format.
* However, an ingredient is too far from a normal item to display as one.
*/
function displaysq2ExpandedIngredient(ingred, parent_id) {
let parent_elem = document.getElementById(parent_id);
parent_elem.textContent = "";
let item_order = [
"dura",
"strReq",
"dexReq",
"intReq",
"defReq",
"agiReq"
]
let consumable_order = [
"dura",
"charges"
]
let posMods_order = [
"above",
"under",
"left",
"right",
"touching",
"notTouching"
];
let id_display_order = [
"eDefPct",
"tDefPct",
"wDefPct",
"fDefPct",
"aDefPct",
"eDamPct",
"tDamPct",
"wDamPct",
"fDamPct",
"aDamPct",
"str",
"dex",
"int",
"agi",
"def",
"hpBonus",
"mr",
"ms",
"ls",
"hprRaw",
"hprPct",
"sdRaw",
"sdPct",
"mdRaw",
"mdPct",
"xpb",
"lb",
"lq",
"ref",
"thorns",
"expd",
"spd",
"atkTier",
"poison",
"spRegen",
"eSteal",
"spRaw1",
"spRaw2",
"spRaw3",
"spRaw4",
"spPct1",
"spPct2",
"spPct3",
"spPct4",
"jh",
"sprint",
"sprintReg",
"gXp",
"gSpd",
];
let active_elem;
let elemental_format = false;
let style;
for (const command of sq2_ing_display_order) {
if (command.charAt(0) === "!") {
// TODO: This is sooo incredibly janky.....
if (command === "!elemental") {
elemental_format = !elemental_format;
}
else if (command === "!spacer") {
let spacer = document.createElement('div');
spacer.classList.add("row", "my-2");
parent_elem.appendChild(spacer);
continue;
}
} else {
let div = document.createElement("div");
div.classList.add("row");
if (command === "displayName") {
div.classList.add("box-title");
let title_elem = document.createElement("div");
title_elem.classList.add("col-auto", "justify-content-center", "pr-1");
title_elem.textContent = ingred.get("displayName");
div.appendChild(title_elem);
let tier = ingred.get("tier"); //tier in [0,3]
let begin = document.createElement("b");
begin.classList.add("T"+tier+"-bracket", "col-auto", "px-0");
begin.textContent = "[";
div.appendChild(begin);
for (let i = 0; i < 3; i++) {
let tier_elem = document.createElement("b");
if (i < tier) {
tier_elem.classList.add("T"+tier);
} else {
tier_elem.classList.add("T0");
}
tier_elem.classList.add("px-0", "col-auto");
tier_elem.textContent = "\u272B";
div.appendChild(tier_elem);
}
let end = document.createElement("b");
end.classList.add("T"+tier+"-bracket", "px-0", "col-auto");
end.textContent = "]";
div.appendChild(end);
}else if (command === "lvl") {
div.textContent = "Crafting Lvl Min: " + ingred.get("lvl");
}else if (command === "posMods") {
for (const [key,value] of ingred.get("posMods")) {
let posModRow = document.createElement("div");
posModRow.classList.add("row");
if (value != 0) {
let posMod = document.createElement("div");
posMod.classList.add("col-auto");
posMod.textContent = posModPrefixes[key];
posModRow.appendChild(posMod);
let val = document.createElement("div");
val.classList.add("col-auto", "px-0");
val.textContent = value + posModSuffixes[key];
if(value > 0) {
val.classList.add("positive");
} else {
val.classList.add("negative");
}
posModRow.appendChild(val);
div.appendChild(posModRow);
}
}
} else if (command === "itemIDs") { //dura, reqs
for (const [key,value] of ingred.get("itemIDs")) {
let idRow = document.createElement("div");
idRow.classList.add("row");
if (value != 0) {
let title = document.createElement("div");
title.classList.add("col-auto");
title.textContent = itemIDPrefixes[key];
idRow.appendChild(title);
}
let desc = document.createElement("div");
desc.classList.add("col-auto");
if(value > 0) {
if(key !== "dura") {
desc.classList.add("negative");
} else{
desc.classList.add("positive");
}
desc.textContent = "+"+value;
} else if (value < 0){
if(key !== "dura") {
desc.classList.add("positive");
} else{
desc.classList.add("negative");
}
desc.textContent = value;
}
if(value != 0){
idRow.appendChild(desc);
}
div.appendChild(idRow);
}
} else if (command === "consumableIDs") { //dura, charges
for (const [key,value] of ingred.get("consumableIDs")) {
let idRow = document.createElement("div");
idRow.classList.add("row");
if (value != 0) {
let title = document.createElement("div");
title.classList.add("col-auto");
title.textContent = consumableIDPrefixes[key];
idRow.appendChild(title);
}
let desc = document.createElement("div");
desc.classList.add("col-auto");
if(value > 0) {
desc.classList.add("positive");
desc.textContent = "+"+value;
} else if (value < 0){
desc.classList.add("negative");
desc.textContent = value;
}
if(value != 0){
idRow.appendChild(desc);
let suffix = document.createElement("div");
suffix.classList.add("col-auto");
suffix.textContent = consumableIDSuffixes[key];
idRow.appendChild(suffix);
}
div.appendChild(idRow);
}
}else if (command === "skills") {
let row = document.createElement("div");
row.classList.add("row");
let title = document.createElement("div");
title.classList.add("row");
title.textContent = "Used in:";
row.appendChild(title);
for(const skill of ingred.get("skills")) {
let skill_div = document.createElement("div");
skill_div.classList.add("row");
skill_div.textContent = skill.charAt(0) + skill.substring(1).toLowerCase();
row.appendChild(skill_div);
}
div.appendChild(row);
} else if (command === "ids") { //warp
for (let [key,value] of ingred.get("ids").get("maxRolls")) {
if (value !== undefined && value != 0) {
let row = displaysq2RolledID(ingred.get("ids"), key, elemental_format);
row.classList.remove("col");
row.classList.remove("col-12");
div.appendChild(row);
}
}
} else {//this shouldn't be happening
}
parent_elem.appendChild(div);
}
}
} }

13
sq2display_constants.js → js/sq2display_constants.js
View file

@ -145,4 +145,15 @@ let sq2_item_display_commands = [
"restrict" "restrict"
]; ];
let sq2_ing_display_order = [
"displayName", //tier will be displayed w/ name
"!spacer",
"ids",
"!spacer",
"posMods",
"itemIDs",
"consumableIDs",
"!spacer",
"lvl",
"skills",
]

0
sq2icons.js → js/sq2icons.js
View file

0
sq2items.js → js/sq2items.js
View file

2
js/utils.js
View file

@ -381,6 +381,6 @@ async function hardReload() {
const dbs = await window.indexedDB.databases(); const dbs = await window.indexedDB.databases();
await dbs.forEach(db => { window.indexedDB.deleteDatabase(db.name) }); await dbs.forEach(db => { window.indexedDB.deleteDatabase(db.name) });
location.reload(); location.reload(true);
} }

0
sq2.css → sq2/sq2.css
View file

34
sq2.html → sq2/sq2.html
View file

@ -1129,27 +1129,25 @@
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/utils.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/build_utils.js"></script>
<script type="text/javascript" src="sq2icons.js"></script> <script type="text/javascript" src="../js/sq2icons.js"></script>
<script type="text/javascript" src="js/powders.js"></script> <script type="text/javascript" src="../js/powders.js"></script>
<script type="text/javascript" src="js/skillpoints.js"></script> <script type="text/javascript" src="../js/skillpoints.js"></script>
<script type="text/javascript" src="js/damage_calc.js"></script> <script type="text/javascript" src="../js/damage_calc.js"></script>
<script type="text/javascript" src="sq2display_constants.js"></script> <script type="text/javascript" src="../js/sq2display_constants.js"></script>
<script type="text/javascript" src="js/display_constants.js"></script>
<script type="text/javascript" src="sq2display.js"></script> <script type="text/javascript" src="../js/sq2display.js"></script>
<script type="text/javascript" src="js/display.js"></script>
<script type="text/javascript" src="js/query.js"></script> <script type="text/javascript" src="../js/query.js"></script>
<script type="text/javascript" src="js/load.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/load_ing.js"></script>
<script type="text/javascript" src="js/custom.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/craft.js"></script>
<script type="text/javascript" src="sq2build.js"></script> <script type="text/javascript" src="../js/sq2build.js"></script>
<script type="text/javascript" src="sq2builder.js"></script> <script type="text/javascript" src="../js/sq2builder.js"></script>
<script type="text/javascript" src="sq2items.js"></script> <script type="text/javascript" src="../js/sq2items.js"></script>
<script type="text/javascript" src="sq2.js"></script> <script type="text/javascript" src="sq2.js"></script>
</body> </body>
</html> </html>

0
sq2.js → sq2/sq2.js
View file