wynnfo overhaul, move advanced item search help to wynnfo, new powder mechanics wynnfo post, add damage type tags to wynnstyles.css
This commit is contained in:
ferricles
parent
11842d4fce
commit
73a456ddf5
18 changed files with 427 additions and 676 deletions
|
|
@ -2,6 +2,13 @@ main {
|
|||
margin: 24px 0 48px;
|
||||
}
|
||||
|
||||
main h1 {
|
||||
margin: 0 0 8px;
|
||||
color: #bbb;
|
||||
/* font-size: 24pt; */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main h2 {
|
||||
margin: 0 0 8px;
|
||||
color: #bbb;
|
||||
|
|
@ -18,6 +25,20 @@ main p {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
main span {
|
||||
font-size: 13pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
main li {
|
||||
margin-left: 6%;
|
||||
font-size: 13pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
main ul {
|
||||
font-size: 13pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
main .footer {
|
||||
font-size: 10pt;
|
||||
text-align: center;
|
||||
|
|
@ -86,6 +107,7 @@ main .heart {
|
|||
color: #e44078;
|
||||
}
|
||||
|
||||
|
||||
@keyframes scroll-bg {
|
||||
0% {
|
||||
background-position-x: 0;
|
||||
|
|
|
|||
|
|
@ -141,43 +141,43 @@ Wynn-Related CSS
|
|||
color: rgb(255, 198, 85)
|
||||
}
|
||||
|
||||
.nDam, .Neutral {
|
||||
.nDam, .Neutral, Neutral {
|
||||
color: #FFAA00;
|
||||
}
|
||||
|
||||
.nDam:before, .Neutral:before {
|
||||
.nDam:before, .Neutral:before, Neutral:before {
|
||||
content: "\2724" ' ';
|
||||
}
|
||||
|
||||
.eDam, .Earth, .Earth_powder {
|
||||
.eDam, .Earth, .Earth_powder, Earth {
|
||||
color: #00AA00;
|
||||
}
|
||||
|
||||
.eDam:before, .Earth:before, .Earth_powder:before { content: "\2724" ' '; }
|
||||
.eDam:before, .Earth:before, .Earth_powder:before, Earth:before { content: "\2724" ' '; }
|
||||
|
||||
.tDam, .Thunder, .Thunder_powder {
|
||||
.tDam, .Thunder, .Thunder_powder, Thunder{
|
||||
color: #FFFF55;
|
||||
}
|
||||
|
||||
.tDam:before, .Thunder:before, .Thunder_powder:before { content: "\2726" ' '; }
|
||||
.tDam:before, .Thunder:before, .Thunder_powder:before, Thunder:before { content: "\2726" ' '; }
|
||||
|
||||
.wDam, .Water, .Water_powder {
|
||||
.wDam, .Water, .Water_powder, Water {
|
||||
color: #55FFFF
|
||||
}
|
||||
|
||||
.wDam:before, .Water:before, .Water_powder:before { content: "\2749" ' '; }
|
||||
.wDam:before, .Water:before, .Water_powder:before, Water:before { content: "\2749" ' '; }
|
||||
|
||||
.fDam, .Fire, .Fire_powder {
|
||||
.fDam, .Fire, .Fire_powder, Fire {
|
||||
color: #FF5555;
|
||||
}
|
||||
|
||||
.fDam:before, .Fire:before, .Fire_powder:before { content: "\2739" ' '; }
|
||||
.fDam:before, .Fire:before, .Fire_powder:before, Fire:before { content: "\2739" ' '; }
|
||||
|
||||
.aDam, .Air, .Air_powder {
|
||||
.aDam, .Air, .Air_powder, Air {
|
||||
color: #FFFFFF
|
||||
}
|
||||
|
||||
.aDam:before, .Air:before, .Air_powder:before { content: "\274b" ' '; }
|
||||
.aDam:before, .Air:before, .Air_powder:before, Air:before { content: "\274b" ' '; }
|
||||
|
||||
.restrict {
|
||||
color: #ff8180;
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html scroll-behavior="smooth">
|
||||
<head>
|
||||
<title>WynnDocs</title>
|
||||
<link rel="icon" href="/media/icons/new/searcher.png">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
|
||||
<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://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||
<link href="/thirdparty/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="/thirdparty/autoComplete.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/article.css"> <!-- This one is the important one for docs -->
|
||||
<link rel="stylesheet" href="/css/docs_home.css">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="/css/sidebar.css">
|
||||
<link rel="stylesheet" href="/css/wynnstyles.css">
|
||||
|
||||
<script text = "text/javascript" src = "/js/docs.js"></script>
|
||||
<script text = "text/javascript">document.addEventListener("DOMContentLoaded", (event) => {populate_post_previews();})</script>
|
||||
</head>
|
||||
<body class="all" style="overflow-y: scroll">
|
||||
<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 = "."><img src = "/media/icons/new/book.png" alt = "Docs" title = "Docs"><b>Docs</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/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
</div>
|
||||
<main>
|
||||
<div class="full-width text-center">
|
||||
<img src="/media/items/new.png"/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Welcome to the WynnBuilder Docs</h2>
|
||||
<p>Documentation Homepage - sections coming soon!</p>
|
||||
</div>
|
||||
|
||||
<div class ="section" id = "post-list">
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script type="text/javascript" src="../../js/icons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -22,13 +22,13 @@
|
|||
</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 = "/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 = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</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/"><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/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
</div>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<a href="../credits.txt" class="link">Additional credits</a>
|
||||
</div>
|
||||
<div class = "col text-center" id = "help">
|
||||
<a href="/docs/items_adv_help/" class="link" target="_blank">Search Guide</a>
|
||||
<a href="/wynnfo/items_adv_help/" class="link" target="_blank">Search Guide</a>
|
||||
</div>
|
||||
<div class = "col text-end">
|
||||
<a href = "../items/">Basic Item Search</a>
|
||||
|
|
|
|||
82
js/docs.js
82
js/docs.js
|
|
@ -1,32 +1,102 @@
|
|||
/** Vanilla JS does not allow dynamically fetching files in a local directory. We have to hard code the list to loop over.
|
||||
* Each entry is the name of a subfolder in /docs/.
|
||||
*/
|
||||
const docs_post_titles = [
|
||||
const docs_post_names = [
|
||||
"items_adv_help",
|
||||
"damage_calc"
|
||||
"damage_calc",
|
||||
"powders"
|
||||
]
|
||||
|
||||
/** Map of
|
||||
* Key: post_name - the subdirectory name also present in docs_post_names
|
||||
* Value: [Title, Summary, Author(s)]
|
||||
*/
|
||||
docs_post_thumbnails = new Map();
|
||||
docs_post_thumbnails.set("items_adv_help", ["Advanced Item Search Help", "A practical guide on how to use WynnBuilder's advanced item search feature.", "Phanta"]);
|
||||
docs_post_thumbnails.set("damage_calc", ["Damage Calculation", "All the ins and outs of Wynncraft damage calculation. Includes spells, powder specials, abilities, and major IDs!", "hppeng, ferricles"]);
|
||||
docs_post_thumbnails.set("powders", ["Weapon Powder Application", "Read this to learn the mechanics of powder application on weapons!", "ferricles, hppeng"]);
|
||||
|
||||
/** Populates the HTML element with the id 'post-list'
|
||||
*
|
||||
*/
|
||||
function populate_post_previews() {
|
||||
post_list_parent = document.getElementById('post-list');
|
||||
|
||||
docs_post_titles.forEach((post_title) => {
|
||||
docs_post_names.forEach((post_name) => {
|
||||
post = document.createElement('article');
|
||||
post_info = docs_post_thumbnails.get(post_name);
|
||||
console.log(post_info);
|
||||
if (post_info == undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
title = document.createElement('h2');
|
||||
title.innerHTML = post_title;
|
||||
title.innerHTML = post_info[0];
|
||||
post.appendChild(title);
|
||||
|
||||
summary = document.createElement('p');
|
||||
summary.innerHTML = 'temporary content'
|
||||
summary.innerHTML = post_info[1];
|
||||
post.appendChild(summary);
|
||||
|
||||
authors = document.createElement('p');
|
||||
authors.innerHTML = "Author(s): " + post_info[2];
|
||||
post.appendChild(authors);
|
||||
|
||||
link = document.createElement("a");
|
||||
link.setAttribute('href', `/docs/${post_title}/`);
|
||||
link.setAttribute('href', `/wynnfo/${post_name}/`);
|
||||
post.appendChild(link);
|
||||
|
||||
post_list_parent.appendChild(post);
|
||||
});
|
||||
}
|
||||
|
||||
function initDropdownSections() {
|
||||
dropdowns = document.querySelectorAll('span.dropdown');
|
||||
for (const dropdown of dropdowns) {
|
||||
let inner_content = dropdown.children[0]
|
||||
|
||||
dropdown.classList.add("up", "row");
|
||||
let title = document.createElement("div");
|
||||
title.classList.add("col-10", "item-title", "text-start", "dropdown-title")
|
||||
title.style.margin = "0 0 0";
|
||||
title.textContent = dropdown.title;
|
||||
dropdown.textContent = "";
|
||||
let indicator = document.createElement("div");
|
||||
indicator.classList.add("col-auto", "fw-bold", "box-title");
|
||||
indicator.textContent = "+";
|
||||
dropdown.prepend(indicator);
|
||||
dropdown.prepend(title);
|
||||
dropdown.appendChild(inner_content);
|
||||
inner_content.style.display = "none";
|
||||
|
||||
title.addEventListener("click", function(){
|
||||
if (dropdown.classList.contains("up")) {
|
||||
dropdown.classList.remove("up");
|
||||
dropdown.classList.add("down");
|
||||
indicator.textContent = "-";
|
||||
|
||||
inner_content.style.display = "";
|
||||
} else {
|
||||
dropdown.classList.remove("down");
|
||||
dropdown.classList.add("up");
|
||||
indicator.textContent = "+";
|
||||
|
||||
inner_content.style.display = "none";
|
||||
}
|
||||
});
|
||||
title.addEventListener("mouseover", function(){
|
||||
title.style.color = "#ddd";
|
||||
title.style.fontWeight = "bold";
|
||||
indicator.style.color = "#ddd";
|
||||
indicator.style.fontWeight = "bold";
|
||||
});
|
||||
title.addEventListener("mouseleave", function(){
|
||||
title.style.color = "";
|
||||
title.style.fontWeight = "normal";
|
||||
indicator.style.color = "";
|
||||
indicator.style.fontWeight = "normal";
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
2
thirdparty/katex.js
vendored
2
thirdparty/katex.js
vendored
|
|
@ -16,7 +16,7 @@ function add_katex() {
|
|||
scr_2.setAttribute('integrity', "sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk")
|
||||
scr_2.setAttribute('crossorigin', "anonymous")
|
||||
scr_2.setAttribute('defer', '')
|
||||
scr_2.setAttribute('onload', "renderMathInElement(document.body, {delimiters: [{left: '$$', right: '$$', display: true},{left: '\\[', right: '\\]', display: true},{left: '$', right: '$', display: false},{left: '\\(', right: '\\)', display: false}]});")
|
||||
scr_2.setAttribute('onload', "renderMathInElement(document.body, {delimiters: [{left: '$$', right: '$$', display: true},{left: '$', right: '$', display: false}]});")
|
||||
|
||||
head_elem.append(link, scr_1, scr_2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,85 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html scroll-behavior="smooth">
|
||||
<head>
|
||||
<title>WynnAtlas</title>
|
||||
<link rel="icon" href="../media/icons/new/searcher.png" type="image/icon type">
|
||||
|
||||
<title>WynnDocs</title>
|
||||
<link rel="icon" href="/media/icons/new/searcher.png">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
|
||||
<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://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||
<link href="/thirdparty/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="/thirdparty/autoComplete.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||
<link rel="stylesheet" href="/css/article.css"> <!-- This one is the important one for docs -->
|
||||
<link rel="stylesheet" href="/css/docs_home.css">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="/css/sidebar.css">
|
||||
<link rel="stylesheet" href="/css/wynnstyles.css">
|
||||
|
||||
<script text = "text/javascript" src = "/js/docs.js"></script>
|
||||
<script text = "text/javascript">document.addEventListener("DOMContentLoaded", (event) => {populate_post_previews();})</script>
|
||||
</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 = ""><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/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
<body class="all" style="overflow-y: scroll">
|
||||
<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 = "."><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/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
</div>
|
||||
<main>
|
||||
<div class="full-width text-center">
|
||||
<img src="/media/items/new.png"/>
|
||||
</div>
|
||||
<div id="mobile-navbar" class="navbar dark-5 dark-shadow fixed-top d-lg-none pb-0">
|
||||
<div class="container-fluid scaled-font justify-content-center" style="height: 5vh;">
|
||||
<div class="navbar-brand mx-auto scaled-font" style="height: 100%;">
|
||||
<img src="../media/icons/new/book.png" alt="" style="height: 100%;">
|
||||
<span>WynnFo</span>
|
||||
</div>
|
||||
<button class="btn dropdown-toggle dark-2 px-4 text-white scaled-font border-dark border-3" onclick="toggle_tab('mobile-navbar-dropdown');"></button>
|
||||
</div>
|
||||
<div class="container-fluid scaled-font dark-3 px-3 py-3" id="mobile-navbar-dropdown" style="display: none;">
|
||||
<a href="../builder/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||
<img src="../media/icons/new/builder.png" alt="" style="height: 100%;">
|
||||
<span>WynnBuilder</span>
|
||||
</a>
|
||||
<a href="../crafter/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||
<img src="../media/icons/new/crafter.png" alt="" style="height: 100%;">
|
||||
<span>WynnCrafter</span>
|
||||
</a>
|
||||
<a href="../items/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||
<img src="../media/icons/new/searcher.png" alt="" style="height: 100%;">
|
||||
<span>WynnAtlas</span>
|
||||
</a>
|
||||
<a href="../custom/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||
<img src="../media/icons/new/custom.png" alt="" style="height: 100%;">
|
||||
<span>WynnCustom</span>
|
||||
</a>
|
||||
<a href="../map/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||
<img src="../media/icons/new/compass.png" alt="" style="height: 100%;">
|
||||
<span>WynnGPS</span>
|
||||
</a>
|
||||
<a href="../wynnfo/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||
<img src="../media/icons/new/book.png" alt="" style="height: 100%;">
|
||||
<span>WynnFo</span>
|
||||
</a>
|
||||
<a onclick = "toggleIcons()" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||
<img src="../media/icons/new/reload.png" alt="" style="height: 100%;">
|
||||
<span>Swap Icon Style</span>
|
||||
</a>
|
||||
<a href="https://discord.gg/CGavnAnerv" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||
<img src="../media/icons/discord.png" alt="" style="height: 100%;">
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Welcome to the WynnBuilder Docs</h2>
|
||||
<p>Documentation Homepage - sections coming soon!</p>
|
||||
</div>
|
||||
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font mt-lg-2" id = "main" style="margin-top: 6vh;">
|
||||
<div class = "row item-title">Welcome!</div>
|
||||
<p class = "row">This page is the main page for Wynnfo. Wynnfo is Wynnbuilder's page for all sorts of Wynncraft-related literature, including code documenation, game mechanic novels, and other literature! Browse at your leisure below.</p>
|
||||
|
||||
<!-- Gets populated by populate_post_previews() -->
|
||||
<div class ="section" id = "post-list">
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src = "scripts/main.js"></script>
|
||||
<script type="text/javascript" src = "../js/utils.js"></script>
|
||||
<script type="text/javascript" src = "../js/icons.js"></script>
|
||||
</body>
|
||||
</main>
|
||||
<script type="text/javascript" src="/js/icons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
|
@ -40,6 +40,9 @@
|
|||
<div class="full-width text-center">
|
||||
<img src="./help_photo.png"/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h1>Advanced Item Search Guide</h1>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>What the heck is “Advanced Item Search”?</h2>
|
||||
<p>The WynnBuilder team has been hard at work giving you the latest and greatest tools for optimizing your most complex Wynncraft builds. Now, we're introducing <strong class="rb-text">WynnAtlas</strong>, the new, bigger, better, smarter, powerful-er item guide! Featuring an extremely flexible expression language for filtering and sorting items, WynnAtlas' advanced item search system gives build engineers the power to select items with a high degree of granularity. Picking components for your brand-new Divzer WFA build has never been easier!</p>
|
||||
266
wynnfo/powders/index.html
Normal file
266
wynnfo/powders/index.html
Normal file
|
|
@ -0,0 +1,266 @@
|
|||
<!DOCTYPE html>
|
||||
<html scroll-behavior="smooth">
|
||||
<head>
|
||||
<title>WynnAtlas Help</title>
|
||||
<link rel="icon" href="/media/icons/new/searcher.png">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
|
||||
<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://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||
<link href="/thirdparty/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="/thirdparty/autoComplete.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/article.css"> <!-- This one is the important one for docs -->
|
||||
<link rel="stylesheet" href="/css/docs_home.css">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
<link rel="stylesheet" href="/css/sidebar.css">
|
||||
<link rel="stylesheet" href="/css/wynnstyles.css">
|
||||
|
||||
<script type="text/javascript" src="/js/docs.js"></script>
|
||||
<script text = "text/javascript">document.addEventListener("DOMContentLoaded", (event) => {initDropdownSections();})</script>
|
||||
</head>
|
||||
<body class="all" style="overflow-y: scroll">
|
||||
<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/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "/media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
</div>
|
||||
<main>
|
||||
<div class="full-width text-center">
|
||||
<!-- <img src="./help_photo.png"/> -->
|
||||
</div>
|
||||
<div class="section">
|
||||
<h1>Powder Application Guide</h1>
|
||||
<p>June 5, 2024 (Wynn 2.0)</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Basics</h2>
|
||||
<p>I assume you know what powders do - you apply them on armor to get elemental defense or on weapons to get extra damage. If you apply multiple high-tier powders of the same type, you get an extra ability on your weapon (powder special). In this post, we'll go over the calculations that get run when powders are applied on weapons.</p>
|
||||
<p>
|
||||
Here's some terminology that we'll use later:
|
||||
<li>Base damage range: the low and high damage ranges which are shown in the item display. </li>
|
||||
<li>Damage type: There are 6 types of damage. There is neutral damage (<buf class = 'Neutral'>N</buf>) and 5 elemental types: earth (<buf class = 'Earth'>E</buf>), thunder (<buf class = 'Thunder'>T</buf>), water (<buf class = 'Water'>W</buf>), fire (<buf class = 'Fire'>F</buf>), and air (<buf class = 'Air'>A</buf>). </li>
|
||||
<li>Conversion rate (<code>powder.conv_rate</code>): The percentage conversion rate of a powder from neutral to elemental damage.</li>
|
||||
<li>Powder range (<code>powder.range</code>): The raw boost to the base damage range of an element given by a powder.</li>
|
||||
</p>
|
||||
<p>Before we get into calculations, one last thing - there are two types of weapons we can powder: non-crafted (regular) and crafted. There are also two corresponding types of powder application which have their own mechanics: applied powders, when a powder master puts powders on your items, and ingredient powders, when you use a powder in the recipe to make a crafted item. We will start with the more common weapon type: regular weapons.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Powder Application on Regular Weapons</h2>
|
||||
<p>On regular weapons, only the applied powder mechanic is relevant. The algorithm for this mechanic can be broken down into two steps: the aggregation step and the application step.</p>
|
||||
<p>
|
||||
Loop one (aggregation step):
|
||||
<li>Record the order of powders in order of <b>first powder for each type</b>.</li>
|
||||
<li>Aggregate conversion stats for each element additively.</li>
|
||||
</p>
|
||||
<p>
|
||||
Loop two (application step):
|
||||
<li>In the order of elemental types determined in loop one, calculate powder conversion of <b>remaining neutral damage</b>.</li>
|
||||
<li>Neutral damage range is decreased by the total conversion range</li>
|
||||
<li>Elemental damage range is increased by the total conversion range</li>
|
||||
<li>Elemental damage range is also increased by the powder range</li>
|
||||
<li>At the end of all applications, the damage ranges are floored for display on the weapon. (Note: these values are not floored when performing damage calculations later)</li>
|
||||
</p>
|
||||
<p>In pseudocode, this process looks like:</p>
|
||||
<pre>
|
||||
powders = [] //populated with powders which have a type, a conversion rate, and a range
|
||||
order = []
|
||||
conversions = {type: {range: [low, high], conv_rate: float }}
|
||||
|
||||
for powder in powders:
|
||||
If powder.type not in order:
|
||||
order += powder.type
|
||||
conversions[powder.type][range] += powder.range
|
||||
conversions[powder.type][conv_rate] += powder.conv_rate
|
||||
|
||||
for powder_type in order:
|
||||
powder_conversion = conversions[powder_type]
|
||||
neu_conversion = (powder_conversion.conv_rate * weapon_neu_range)
|
||||
weapon_neu_range -= neu_conversion
|
||||
weapon_elem_range += neu_conversion + powder_conversion.range //the appropriate elemental type</pre>
|
||||
<p>We verified this algorithm by testing in-game. If you're interested, click on this dropdown for a worked example!</p>
|
||||
<span class="dropdown" title="Regular Applied Powder Example">
|
||||
<div>
|
||||
<p>We used a <a class = "link" href = "/item/#Crystal Senbon">Crystal Senbon</a> to test. Crystal Senbon has 5 powder slots and a base damage range of <tmp class = 'Neutral'>[77, 77]</tmp>.</p>
|
||||
<p>The powders we applied, in order: [<Earth>III</Earth>, <Thunder>III</Thunder>, <Water>III</Water>, <Earth>III</Earth>, <Earth>III</Earth>]</p>
|
||||
<p>And their stats:</p>
|
||||
<li><Earth>III</Earth>: [8, 14] range, 25% conversion </li>
|
||||
<li><Thunder>III</Thunder>: [2, 18] range, 13% conversion </li>
|
||||
<li><Water>III</Water>: [6, 10] range, 17% conversion </li>
|
||||
<p>We can start running the applied powder algorithm. After the aggregation step, we'd have:</p>
|
||||
<pre>
|
||||
order = [E, T, W]
|
||||
conversions: {
|
||||
E: {range: [24, 42], conv_rate: 0.75},
|
||||
T: {range: [2, 18], conv_rate: 0.13},
|
||||
W: {range: [6, 10], conv_rate: 0.17}
|
||||
}</pre>
|
||||
<p>Then we can run through the application step.</p>
|
||||
<pre>
|
||||
Starting neutral range = <Neutral>[77, 77]</Neutral>
|
||||
|
||||
Earth conversion: [77, 77] * .75 = 57.75
|
||||
<Neutral></Neutral>= [77, 77] - [57.75, 57.75] = <Neutral>[19.25, 19.25]</Neutral>
|
||||
<Earth></Earth>= [57.75, 57.75] + [24, 42] = <Earth>[81.75, 99.75]</Earth>
|
||||
|
||||
Thunder conversion: [19.25, 19.25] * .13 = 2.5025
|
||||
<Neutral></Neutral>= [19.25, 19.25] - [2.5025, 2.5025] = <Neutral>[16.7475, 16.7475]</Neutral>
|
||||
<Thunder></Thunder>= [2.5025, 2.5025] + [2, 18] = <Thunder>[4.5025, 20.5025]</Thunder>
|
||||
|
||||
Water conversion: [16.7475, 16.7475] * 0.17 = 2.847075
|
||||
<Neutral></Neutral>= [16.7475, 16.7475] - [2.847075, 2.847075] = <Neutral>[13.900425, 13.900425]</Neutral>
|
||||
<Water></Water>= [2.847075, 2.847075] + [6, 10] = <Water>[8.847, 12.847]</Water>
|
||||
|
||||
Final (displayed) ranges:
|
||||
floor(<Neutral>[13.900425, 13.900425]</Neutral>) = <Neutral>[13, 13]</Neutral>
|
||||
floor(<Earth>[81.75, 99.75]</Earth>) = <Earth>[81, 99]</Earth>
|
||||
floor(<Thunder>[4.5025, 20.5025]</Thunder>) = <Thunder>[4, 20]</Thunder>
|
||||
floor(<Water>[8.847, 12.847]</Water>) = <Water>[8, 12]</Water></pre>
|
||||
<p>After flooring all damage values, the Crystal Senbon should display damage ranges of <Neutral>[13, 13]</Neutral> <Earth>[43, 19]</Earth> <Thunder>[4, 20]</Thunder> <Water>[8, 12]</Water>. However, our weapon display suggests otherwise! This is because it is lying*.</p>
|
||||
<div class="text-center">
|
||||
<img src="./media/crystal_senbon_powdered.png" width = "500"/>
|
||||
</div>
|
||||
<p>We collected some data samples by melee-ing some combat dummies many times. Showing photo proof for many hits in this post is infeasible (we show one for good measure). We tested this on a character with 0 abilities, 0 external buffs, and only the skill points necessary for holding Crystal Senbon (10 in each).</p>
|
||||
<p>This is somewhat handwaving damage calculation, but here's the expected ranges of an assassin melee attack using the weapon damages we calculated.</p>
|
||||
<p>Stat bonuses:
|
||||
<li>3% earth damage (crystal senbon id)</li>
|
||||
<li>7% thunder damage (crystal senbon id)</li>
|
||||
<li>4% water damage (crystal senbon id)</li>
|
||||
<li>11.3% earth dmg boost (12 str)</li>
|
||||
<li>11.3% thunder dmg boost (12 dex)</li>
|
||||
<li>7.0% water dmg boost (12 int)</li>
|
||||
<li>11.3% total damage (12 strength)</li>
|
||||
</p>
|
||||
<p>The damage ranges we would expect to see from using a melee attack using our calculated base damage ranges:</p>
|
||||
<p><code><Neutral>[13.900425, 13.900425]</Neutral> * (1 + .113) ~= <Neutral>[15.4707, 15.4707]</Neutral></code> </p>
|
||||
<p><code><Earth>[81.75, 99.75]</Earth> * (1 + 0.03 + 0.113) * (1 + 0.113) ~= <Earth>[103.999, 126.898]</Earth></code></p>
|
||||
<p><code><Thunder>[4.5025, 20.5025]</Thunder> * (1 + 0.07 + 0.113) * (1 + 0.113) ~= <Thunder>[5.928, 26.995]</Thunder></code></p>
|
||||
<p><code><Water>[8.847, 12.847]</Water> * (1 + 0.04 + 0.07) * (1 + 0.113) ~= <Water>[10.930, 15.872]</Water></code></p>
|
||||
<div class="text-center">
|
||||
<img src="./media/crystal_senbon_attack.png" width = "500"/>
|
||||
<div>Note: the double damage hit is due to a dexterity crit.</div>
|
||||
</div>
|
||||
<p>Evidently, the observed damages match up much more closely the powder/damage calculations we've performed compared to the advertised damages on the weapon. Consider the fact that the weapon display doesn't even show neutral damage...</p>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Powder Application on Crafted Weapons</h2>
|
||||
<p>There are 2 algorithms relevant to powder mechanics on crafted weapons. First, we'll cover the ingredient powder mechanic.</p>
|
||||
<p>The ingredient powder mechanic:</p>
|
||||
<pre>
|
||||
powders = [crafting menu powders in order of reading english]
|
||||
for powder in powders:
|
||||
conversion factor = floor(neutral_remaining * powder.conv_rate)
|
||||
Neutral_base_dmg -= conv factor
|
||||
Elem_base_dmg += conv factor + floor((powder.range.low + powder.range.high) / 2)</pre>
|
||||
<p>For those unfamiliar with crafted weapon base damage: crafted weapons have a singular base damage value that is randomly chosen from a range when the item is crafted. The resulting base damage range is calculated using this value: if <code>base</code> is the base damage value, then the corresponding range is <code>[floor(0.9 * base), floor(1.1 * base)]</code>. The ingredient powder mechanic modifies the base damage values of a crafted weapon before they get converted to base damage ranges.</p>
|
||||
<p>If you use a powder as an ingredient in a crafting recipe for a crafted weapon, the above ingredient powder mechanic is applied. However, there's a more complex interaction when using both ingredient and applied powders. Using the ingredient powder mechanic and the applied powder mechanic as subroutines, we can define the algorithm for applying powders on crafted weapons as below:</p>
|
||||
<ul>1) Apply all applied powders with the ingredient powder mechanic.</ul>
|
||||
<ul>2) Apply all ingredient powders with the ingredient powder mechanic.</ul>
|
||||
<ul>3) Use the base damage values of the crafted weapon to get a full damage range.</ul>
|
||||
<ul>4) Apply all applied powders with the applied powder mechanic.</ul>
|
||||
<p>Both the ingredient powder mechanic and the full algorithm for crafted weapon powders were tested and verified in-game. For another worked-out example, expand the following dropdown.</p>
|
||||
<span class="dropdown" title="Crafted Weapon Powder Example">
|
||||
<div>
|
||||
<p>We crafted a wand using a <Air>III</Air> powder as an ingredient. Here's a <a href = "/crafter/#1+x+W+W+W+W+W9q10" class = "link">link to the recipe</a>. We then applied these powders, in order: [<Water>I</Water>, <Fire>I</Fire>, <Water>I</Water>]. Powder stats below:</p>
|
||||
<li><Air>III</Air>: [4, 11] range, 17% conversion rate</li>
|
||||
<li><Water>I</Water>: [3, 4] range, 13% conversion rate</li>
|
||||
<li><Fire>I</Fire>: [2, 5] range, 14% conversion rate</li>
|
||||
<div class="text-center">
|
||||
<img src="./media/CR_prepowder.png" width = "500"/>
|
||||
<div>The CR weapon pre-applied powders.</div>
|
||||
</div>
|
||||
<p>The CR weapon starts with 181 base (before applying any powders through any mechanic). We will run through the entire crafted weapon powder application process below:</p>
|
||||
<pre>
|
||||
Starting Neutral Base: <Neutral>181</Neutral>
|
||||
|
||||
1) Apply applied powders with ingredient powder mechanic
|
||||
<Neutral></Neutral>-= floor(.13 * 181) = 181 - 23 = <Neutral>158</Neutral>
|
||||
<Water></Water>+= 23 + floor((3+4)/2) = 23 + 3 = <Water>26</Water>
|
||||
|
||||
<Neutral></Neutral>-= floor(.14 * 158) = 158 - 22 = <Neutral>136</Neutral>
|
||||
<Fire></Fire>+= 22 + floor((2 + 5)/2) = 22 + 3 = <Fire>25</Fire>
|
||||
|
||||
<Neutral></Neutral>-= floor(.13 * 136) = 136 - 17 = <Neutral>119</Neutral>
|
||||
<Water></Water>+= 17 + floor((3 + 4) / 2) = 26 + 17 + 3 = <Water>46</Water>
|
||||
|
||||
2) Apply ingredient powders with ingredient powder mechanic
|
||||
|
||||
<Neutral></Neutral>-= floor(.17 * 119) = 119 - 20 = <Neutral>99</Neutral>
|
||||
<Air></Air>+= 20 + floor((4 + 11) / 2) = 20 + 7 = <Air>27</Air>
|
||||
|
||||
3) Convert base damage to ranges
|
||||
floor(<Neutral>99</Neutral> * [0.9, 1.1]) = <Neutral>[89, 108]</Neutral>
|
||||
floor(<Water>46</Water> * [0.9, 1.1]) = <Water>[41, 50]</Water>
|
||||
floor(<Fire>25</Fire> * [0.9, 1.1]) = <Fire>[22, 27]</Fire>
|
||||
floor(<Air>27</Air> * [0.9, 1.1]) = <Air>[24, 29]</Air>
|
||||
|
||||
4) Applied applied powders with applied powder mechanic
|
||||
|
||||
Starting base ranges:
|
||||
<Neutral>[89, 108]</Neutral>
|
||||
<Water>[41, 50]</Water>
|
||||
<Fire>[22, 27]</Fire>
|
||||
<Air>[24, 29]</Air>
|
||||
|
||||
Powders applied: [<Water>I</Water>, <Fire>I</Fire>, <Water>I</Water>]
|
||||
|
||||
Aggregation step:
|
||||
<Water></Water>[3, 4] *2, 13% * 2 = {range: [6, 8], conv_rate: .26}
|
||||
<Fire></Fire>[2, 5], 14% * 1 = {range: [2, 5], conv_rate: .14}
|
||||
|
||||
Application step:
|
||||
|
||||
W conversion: [89, 108] * .26 = [23.14, 28.08]
|
||||
<Water></Water>= [41, 50] + [23.14, 28.08] + [6, 8] = <Water>[70.16, 86.08]</Water>
|
||||
<Neutral></Neutral> = [89, 108] - [23.14, 28.08] = <Neutral>[65.86, 79.92]</Neutral>
|
||||
|
||||
F conversion: [65.86, 79.92] * .14 = [9.2204, 11.1888]
|
||||
<Fire></Fire> = [22, 27] + [9.2204, 11.1888] + [2, 5] = <Fire>[33.2204, 43.1888]</Fire>
|
||||
<Neutral></Neutral> = [65.86, 79.92] - [9.2204, 11.1888] = <Neutral>[56.6396, 68.7312]</Neutral>
|
||||
|
||||
Final (displayed) ranges
|
||||
floor(<Neutral>[56.6396, 68.7312]</Neutral>) = <Neutral>[56, 68]</Neutral>
|
||||
floor(<Water>[70.16, 86.08]</Water>) = <Water>[70, 86]</Water>
|
||||
floor(<Fire>[33.2204, 43.1888]</Fire>)= <Fire>[33, 43]</Fire>
|
||||
floor(<Air>[24, 29]</Air>) = <Air>[24, 29]</Air></pre>
|
||||
<p>And, to compare, here's the crafted weapon after applying powders. Again, the numbers are slightly off for the same reasons as they are with the regular weapon example.</p>
|
||||
<div class="text-center">
|
||||
<img src="./media/CR_postpowder.png" width = "500"/>
|
||||
<div>The CR weapon after applied powders.</div>
|
||||
</div>
|
||||
<p>We did the same melee attack testing on combat dummies. We leave damage calculation out of this example, but the damages observed more closely match the calculated numbers than the displayed numbers. Here's a screenshot:</p>
|
||||
<div class="text-center">
|
||||
<img src="./media/CR_attack.png" width = "500"/>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<div class="footer">Written by ferricles and hppeng</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="text/javascript" src="/thirdparty/katex.js"></script>
|
||||
<script type="text/javascript" src="/js/icons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
wynnfo/powders/media/CR_attack.png
Normal file
BIN
wynnfo/powders/media/CR_attack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 722 KiB |
BIN
wynnfo/powders/media/CR_postpowder.png
Normal file
BIN
wynnfo/powders/media/CR_postpowder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
wynnfo/powders/media/CR_prepowder.png
Normal file
BIN
wynnfo/powders/media/CR_prepowder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
wynnfo/powders/media/crystal_senbon_attack.png
Normal file
BIN
wynnfo/powders/media/crystal_senbon_attack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
wynnfo/powders/media/crystal_senbon_powdered.png
Normal file
BIN
wynnfo/powders/media/crystal_senbon_powdered.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
|
|
@ -1,172 +0,0 @@
|
|||
// ['Title', ["type of paper","file name"]]
|
||||
const pdfs = new Map([
|
||||
["Wynncraft Damage Calculation",
|
||||
["Mechanics", "Damage_calculation", "hppeng, ferricles, et al.", "A complete guide to Wynncraft's damage calculations. Includes formulas, tested game values, and worked examples."
|
||||
]],
|
||||
["Crafted Weapon Powder Mechanics",
|
||||
["Mechanics", "Crafted_Weapon_Powder_Mechanics", "ferricles", "A short guide to the mechanics of powder application on crafted weapons. Includes formulas and a worked example."
|
||||
]],
|
||||
["Spell Costs",
|
||||
["Mechanics", "Spell_Costs", "Bart MC, ferricles", "A documentation of spell costs and the mechanics of spell cost reduction."
|
||||
]],
|
||||
//[title ,[genre, filename, author(s), abstract/desc]]
|
||||
]);
|
||||
|
||||
|
||||
const changelog = new Map([
|
||||
["Build Version 6 (20 May 2022)",
|
||||
[
|
||||
" + Added Tomes",
|
||||
" + Changed Build encode and decode schemes to account for tomes",
|
||||
]
|
||||
],
|
||||
["WynnBuilder^2 (12 May 2022)",
|
||||
[
|
||||
" + Switched most of Wynnbuilder over to Bootstrap",
|
||||
" - Old UI",
|
||||
]
|
||||
],
|
||||
//[title ,[genre, filename, author(s), abstract/desc]]
|
||||
]);
|
||||
|
||||
|
||||
const sections = ["Changelog", "Mechanics", "History" ]
|
||||
|
||||
function init() {
|
||||
initSections();
|
||||
|
||||
for ([title, pdf] of pdfs) {
|
||||
let sec = document.getElementById(pdf[0]+"-section");
|
||||
if (sec) {
|
||||
let pre = document.createElement("pre");
|
||||
let firstline = document.createElement("div");
|
||||
firstline.style.display = "flex";
|
||||
firstline.style.justifyContent = "space-between";
|
||||
|
||||
let titleElem = document.createElement("p");
|
||||
titleElem.textContent = title;
|
||||
|
||||
let a = document.createElement("a");
|
||||
a.href = "./pdfs/" + pdf[1] + ".pdf";
|
||||
a.target = "_blank";
|
||||
a.textContent = pdf[1] + ".pdf";
|
||||
a.classList.add("link");
|
||||
a.style.display = "flex-end";
|
||||
|
||||
let secondline = document.createElement("div");
|
||||
secondline.style.display = "flex";
|
||||
let ul = document.createElement("ul");
|
||||
ul.style.wordBreak = "break-word";
|
||||
let li = document.createElement("li");
|
||||
let div = document.createElement("div");
|
||||
if (pdf[2]) {
|
||||
li.textContent = "Author(s): " + pdf[2];
|
||||
} else {
|
||||
li.textContent = "Author(s): Unknown";
|
||||
}
|
||||
ul.appendChild(li);
|
||||
li = document.createElement("li");
|
||||
div = document.createElement("div");
|
||||
if (pdf[3]) {
|
||||
div.textContent = "Description: " + pdf[3];
|
||||
} else {
|
||||
div.textContent = "Description: None";
|
||||
}
|
||||
ul.appendChild(li);
|
||||
li.appendChild(div);
|
||||
pre.appendChild(firstline);
|
||||
firstline.appendChild(titleElem);
|
||||
firstline.appendChild(a);
|
||||
pre.appendChild(secondline);
|
||||
secondline.appendChild(ul);
|
||||
|
||||
sec.appendChild(document.createElement("br"));
|
||||
sec.appendChild(pre);
|
||||
} else {
|
||||
console.log("Invalid paper type for " + title + ": " + pdf[0]);
|
||||
}
|
||||
}
|
||||
|
||||
let sec = document.getElementById("Changelog-section");
|
||||
for ([version, changes] of changelog) {
|
||||
let pre = document.createElement("pre");
|
||||
let firstline = document.createElement("div");
|
||||
firstline.style.display = "flex";
|
||||
firstline.style.justifyContent = "space-between";
|
||||
|
||||
let titleElem = document.createElement("p");
|
||||
titleElem.textContent = "Version " + version;
|
||||
|
||||
pre.appendChild(firstline);
|
||||
firstline.appendChild(titleElem);
|
||||
sec.appendChild(document.createElement("br"));
|
||||
sec.appendChild(pre);
|
||||
|
||||
let ul = document.createElement("ul");
|
||||
ul.style.listStyle = "none";
|
||||
for (change of changes) {
|
||||
let li = document.createElement("li");
|
||||
li.textContent = change;
|
||||
if (change.substring(0,3) === " + ") {
|
||||
li.classList.add("positive");
|
||||
} else if (change.substring(0,3) === " - ") {
|
||||
li.classList.add("negative");
|
||||
} else {
|
||||
}
|
||||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
pre.appendChild(ul);
|
||||
}
|
||||
}
|
||||
|
||||
function initSections() {
|
||||
let main = document.getElementById("main");
|
||||
for (const sec of sections) {
|
||||
let div = document.createElement("div");
|
||||
div.classList.add("row", "my-2");
|
||||
div.id = sec;
|
||||
|
||||
let secspan = document.createElement("span");
|
||||
secspan.classList.add("row", "up", "clickable");
|
||||
div.appendChild(secspan);
|
||||
let title = document.createElement("div");
|
||||
title.classList.add("col-10", "item-title", "text-start")
|
||||
title.style.margin = "0 0 0";
|
||||
title.textContent = "Section: " + sec;
|
||||
let indicator = document.createElement("div");
|
||||
indicator.classList.add("col-auto", "fw-bold", "box-title");
|
||||
indicator.textContent = "V";
|
||||
secspan.appendChild(title);
|
||||
secspan.appendChild(indicator);
|
||||
|
||||
|
||||
let section = document.createElement("section");
|
||||
section.classList.add("toggle-section");
|
||||
section.id = sec + "-section";
|
||||
section.style.display = "none";
|
||||
div.appendChild(section);
|
||||
main.appendChild(div);
|
||||
|
||||
secspan.addEventListener("click", function(){
|
||||
if (secspan.classList.contains("up")) {
|
||||
secspan.classList.remove("up");
|
||||
secspan.classList.add("down");
|
||||
indicator.style.transform = 'rotate(180deg)';
|
||||
|
||||
section.style.display = "";
|
||||
} else {
|
||||
secspan.classList.remove("down");
|
||||
secspan.classList.add("up");
|
||||
indicator.style.transform = 'rotate(0deg)';
|
||||
section.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
init();
|
||||
|
|
@ -1,354 +0,0 @@
|
|||
.header {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: 150%;
|
||||
}
|
||||
.smalltitle{
|
||||
text-align: center;
|
||||
font-size: 125%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.headericon {
|
||||
/* JANK FIX IF CAN */
|
||||
max-height: 48px;
|
||||
max-width: 48px;
|
||||
}
|
||||
.headerleft {
|
||||
display: inline-block;
|
||||
width: 35%;
|
||||
text-align: left;
|
||||
}
|
||||
.headercenter {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.headerright{
|
||||
display: inline-block;
|
||||
width: 35%;
|
||||
text-align: right;
|
||||
}
|
||||
.iconlink {
|
||||
position: relative;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.all {
|
||||
font-family: 'Nunito',sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
.left{
|
||||
margin: 2px 2%;
|
||||
text-align: left;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.itemp, .damagep {
|
||||
margin: 2px 2%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*Scrollbar*/
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px #BCBCBC;
|
||||
border: #BCBCBC;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #aaa;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Ugly Corner */
|
||||
::-webkit-scrollbar-corner{
|
||||
background: #110110;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
}
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
color: #ddd;
|
||||
background: #110110;
|
||||
/*width: min(200%, 75vw);*/
|
||||
display: inline-block;
|
||||
padding: 0 min(2%,10px) 0 min(2%,10px);
|
||||
text-align: center;
|
||||
border: 1px solid #BCBCBC;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
.header-tooltip {
|
||||
top: 100%;
|
||||
left: -20%;
|
||||
}
|
||||
|
||||
.button-narrow {
|
||||
background-color: #666;
|
||||
border: 2px solid #444;
|
||||
border-radius: 5px;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-family: 'Nunito',sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 90%;
|
||||
display: inline-block;
|
||||
}
|
||||
button {
|
||||
background-color: #666;
|
||||
border: 2px solid #444;
|
||||
border-radius: 5px;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-family: 'Nunito',sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 120%;
|
||||
display: inline-block;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #556;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #558;
|
||||
box-shadow: 0 3px #666;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/*==============================================================*/
|
||||
.all{
|
||||
background: #121516;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
a.link{
|
||||
color: #A5FDFF;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 24px 0 48px;
|
||||
}
|
||||
|
||||
main h2 {
|
||||
margin: 0 0 8px;
|
||||
color: #bbb;
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main p {
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.35em;
|
||||
text-indent: 2.5em;
|
||||
text-align: justify;
|
||||
font-size: 13pt;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
main .footer {
|
||||
font-size: 10pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main code {
|
||||
padding: 0 3px;
|
||||
background-color: #1d1f21;
|
||||
color: #de935f;
|
||||
font-family: 'Source Code Pro', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
main pre { /* tomorrow night: https://github.com/chriskempson/tomorrow-theme */
|
||||
margin: 14px 2px;
|
||||
padding: 10px 16px;
|
||||
border-left: 4px solid #7f7f7f;
|
||||
background-color: #1d1f21;
|
||||
color: #ddd;
|
||||
font-size: 12pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
main pre > .prop {
|
||||
color: #cc6666;
|
||||
}
|
||||
|
||||
main pre > .fn {
|
||||
color: #f0c674;
|
||||
}
|
||||
|
||||
main pre > .bool {
|
||||
color: #b294bb;
|
||||
}
|
||||
|
||||
main pre > .str {
|
||||
color: #b5bd68;
|
||||
}
|
||||
|
||||
main pre > .num {
|
||||
color: #81a2be;
|
||||
}
|
||||
|
||||
main pre > .op {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
main strong {
|
||||
color: #ccc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main .rb-text {
|
||||
background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00, #f5f);
|
||||
background-size: 300% 100%;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
animation: scroll-bg 4s linear infinite;
|
||||
}
|
||||
|
||||
main .math {
|
||||
font-family: 'CMU Serif', 'Cambria Math', 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
main .heart {
|
||||
color: #e44078;
|
||||
}
|
||||
|
||||
@keyframes scroll-bg {
|
||||
0% {
|
||||
background-position-x: 0;
|
||||
}
|
||||
100% {
|
||||
background-position-x: 300%;
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
margin: 4px 0 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.full-width > img {
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
filter: brightness(0.7) contrast(1.2) grayscale(0.5);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 0 10vw 28px;
|
||||
}
|
||||
|
||||
.docs {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.docs h3 {
|
||||
margin: 0 0 8px;
|
||||
color: #aaa;
|
||||
font-size: 20pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.docs-entry {
|
||||
margin: 4px 0 16px;
|
||||
}
|
||||
|
||||
.docs-entry-key {
|
||||
margin-bottom: 6px;
|
||||
padding: 4px 6px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: baseline;
|
||||
background-color: #1d1f21;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.docs-entry-key-id {
|
||||
color: #cc6666;
|
||||
font-size: 16pt;
|
||||
font-family: 'Source Code Pro', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.docs-entry-key-type {
|
||||
flex: 1;
|
||||
margin-left: 8px;
|
||||
color: #de935f;
|
||||
font-size: 11pt;
|
||||
font-family: 'Source Code Pro', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.docs-entry-key-alias {
|
||||
float: right;
|
||||
color: #515356;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.docs-entry-key-alias > .alias {
|
||||
float: none;
|
||||
color: #969896;
|
||||
font-family: 'Source Code Pro', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.docs-entry > p {
|
||||
margin-left: 1.5em;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.indicator-img {
|
||||
max-height: 24px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex-end;
|
||||
margin: auto 0 auto;
|
||||
}
|
||||
.span-flex > * {
|
||||
display: inline-block;
|
||||
}
|
||||
.span-flex {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.span-flex:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul{
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #5f5;
|
||||
/*text-shadow: 2px 2px 0 #153f15;*/
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: #f55;
|
||||
/*text-shadow: 2px 2px 0 #1f1515;*/
|
||||
}
|
||||
Loading…
Reference in a new issue