diff --git a/loadheader.js b/loadheader.js index 71ec89c..46924d6 100644 --- a/loadheader.js +++ b/loadheader.js @@ -37,7 +37,8 @@ let header_icon_map = new Map([ ["crafter",["crafter","WynnCrafter"]], ["items",["searcher","WynnAtlas"]], ["customizer",["custom","WynnCustom"]], - ["map",["compass","WynnGPS"]] + ["map",["compass","WynnGPS"]], + ["wynnfo/index",["book","Wynnfo"]] ]); function setHeaders() { @@ -51,7 +52,7 @@ function setHeaders() { a_elem.classList.add("nomarginp"); a_elem.classList.add("iconlink"); a_elem.classList.add("tooltip"); - a_elem.href = "./" + name + ".html"; + a_elem.href = "../" + name + ".html"; img.classList.add("left"); img.classList.add("linkoptions"); img.classList.add("headericon"); diff --git a/media/icons/new/book.png b/media/icons/new/book.png new file mode 100644 index 0000000..9e41fc7 Binary files /dev/null and b/media/icons/new/book.png differ diff --git a/media/icons/old/book.png b/media/icons/old/book.png new file mode 100644 index 0000000..7fc8761 Binary files /dev/null and b/media/icons/old/book.png differ diff --git a/styles.css b/styles.css index b09fa0a..623f1e5 100644 --- a/styles.css +++ b/styles.css @@ -34,17 +34,17 @@ } .headerleft { display: inline-block; - width: 30%; + width: 35%; text-align: left; } .headercenter { display: inline-block; - width: 40%; + width: 30%; text-align: center; } .headerright{ display: inline-block; - width: 30%; + width: 35%; text-align: right; } .iconlink { @@ -103,7 +103,7 @@ div { grid-auto-rows: minmax(60px, auto); } -.equipment, .skillpoints, .center, .header, .all, .nocolor, .crafted, .crafter{ +.equipment, .skillpoints, .header, .all, .nocolor, .crafted, .crafter{ background: #121516; color: #aaa; } diff --git a/wynnfo/index.html b/wynnfo/index.html new file mode 100644 index 0000000..2fddca4 --- /dev/null +++ b/wynnfo/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + WynnAtlas + + +
+
+
+
+
+ +
+
+
+
+
+
+
+

Welcome!

+

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.

+
+
+ + + + + diff --git a/wynnfo/media/indicator-down.png b/wynnfo/media/indicator-down.png new file mode 100644 index 0000000..26ee6f4 Binary files /dev/null and b/wynnfo/media/indicator-down.png differ diff --git a/wynnfo/media/indicator-up.png b/wynnfo/media/indicator-up.png new file mode 100644 index 0000000..52f1302 Binary files /dev/null and b/wynnfo/media/indicator-up.png differ diff --git a/wynnfo/pdfs/Crafted_Weapon_Powder_Mechanics.pdf b/wynnfo/pdfs/Crafted_Weapon_Powder_Mechanics.pdf new file mode 100644 index 0000000..95da702 Binary files /dev/null and b/wynnfo/pdfs/Crafted_Weapon_Powder_Mechanics.pdf differ diff --git a/wynnfo/pdfs/Damage_calculation.pdf b/wynnfo/pdfs/Damage_calculation.pdf new file mode 100644 index 0000000..ecaed28 Binary files /dev/null and b/wynnfo/pdfs/Damage_calculation.pdf differ diff --git a/wynnfo/scripts/main.js b/wynnfo/scripts/main.js new file mode 100644 index 0000000..b23cd18 --- /dev/null +++ b/wynnfo/scripts/main.js @@ -0,0 +1,115 @@ +// ['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."]], + + //[title ,[genre, filename, author(s), abstract/desc]] +]); + +const sections = ["mechanics", "documentation", "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.dipslay = "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]); + } + } +} + +function initSections() { + let main = document.getElementById("main"); + for (const sec of sections) { + let div = document.createElement("div"); + div.classList.add(["section"]); + div.id = sec; + + let secspan = document.createElement("span"); + secspan.classList.add("span-flex", "up"); + div.appendChild(secspan); + let title = document.createElement("h2"); + title.classList.add("indicator-title") + title.style.margin = "0 0 0"; + title.textContent = "Section: " + sec; + let indicator = document.createElement("img"); + indicator.classList.add("indicator-img"); + indicator.src = "./media/indicator-down.png"; + 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.src = "./media/indicator-up.png"; + section.style.display = ""; + } else { + secspan.classList.remove("down"); + secspan.classList.add("up"); + indicator.src = "./media/indicator-down.png"; + section.style.display = "none"; + } + }); + + + } +} + + + +init(); \ No newline at end of file diff --git a/wynnfo/styles/index.css b/wynnfo/styles/index.css new file mode 100644 index 0000000..6238ed5 --- /dev/null +++ b/wynnfo/styles/index.css @@ -0,0 +1,344 @@ +.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; +} \ No newline at end of file