ALL MAJOR PAGES HAVE UI UPDATES
This commit is contained in:
ferricles
parent
a2ec3fb897
commit
5f701d829e
24 changed files with 2195 additions and 4209 deletions
|
|
@ -42,10 +42,10 @@
|
||||||
<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/"><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/"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</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 = "../custom/"><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/"><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/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||||
<a onclick = "document.querySelector('#search-container').style.display = '';"><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</b></a>
|
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</b></a>
|
||||||
<a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -24,10 +24,10 @@
|
||||||
<a href = "../builder/"><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
|
<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 = ""><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 = "../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 = "../custom/"><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/"><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/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||||
<a onclick = "document.querySelector('#search-container').style.display = '';"><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</b></a>
|
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</b></a>
|
||||||
<a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
|
<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>
|
||||||
|
|
@ -305,6 +305,7 @@
|
||||||
<script type="text/javascript" src="../js/sq2display_constants.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/sq2display.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/load.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="../js/crafter.js"></script>
|
<script type="text/javascript" src="../js/crafter.js"></script>
|
||||||
<script type="text/javascript" src="../js/expr_parser.js"></script>
|
<script type="text/javascript" src="../js/expr_parser.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,6 @@
|
||||||
.overall-container{
|
.overall-container{
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.container{
|
|
||||||
width: 95%;
|
|
||||||
border: 3px solid #BCBCBC;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 2% 4% 4%;
|
|
||||||
}
|
|
||||||
.coord-container {
|
.coord-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
|
|
||||||
|
|
@ -15,11 +15,6 @@
|
||||||
grid-column-gap: 5px;
|
grid-column-gap: 5px;
|
||||||
grid-auto-rows: minmax(32px, auto);
|
grid-auto-rows: minmax(32px, auto);
|
||||||
}
|
}
|
||||||
.container{
|
|
||||||
width: 95%;
|
|
||||||
border: 3px solid #BCBCBC;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.leaflet-tooltip.labelp {
|
.leaflet-tooltip.labelp {
|
||||||
font-family: 'Nunito', sans-serif;
|
font-family: 'Nunito', sans-serif;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
overflow-x: hidden; /* Disable horizontal scroll */
|
overflow-x: hidden; /* Disable horizontal scroll */
|
||||||
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
|
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
|
||||||
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar:hover {
|
.sidebar:hover {
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,7 @@
|
||||||
|
|
||||||
#body {
|
#body {
|
||||||
background-color: #121212;
|
background-color: #121212;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* builder containers */
|
/* builder containers */
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -141,6 +139,12 @@ input.equipment-input {
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.big-title {
|
||||||
|
text-align: center;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
font-size: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.skp-tooltip {
|
.skp-tooltip {
|
||||||
font-size: 2.1875rem;
|
font-size: 2.1875rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -185,9 +189,13 @@ input.equipment-input {
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-title {
|
.item-title {
|
||||||
font-size: 1rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.big-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.skp-tooltip {
|
.skp-tooltip {
|
||||||
font-size: .625rem;
|
font-size: .625rem;
|
||||||
}
|
}
|
||||||
|
|
@ -235,6 +243,10 @@ input.equipment-input {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.big-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.skp-tooltip {
|
.skp-tooltip {
|
||||||
font-size: .78rem;
|
font-size: .78rem;
|
||||||
}
|
}
|
||||||
|
|
@ -373,19 +385,18 @@ input.equipment-input {
|
||||||
box-shadow: 0rem 0rem 0.25rem 0.05rem black;
|
box-shadow: 0rem 0rem 0.25rem 0.05rem black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
text-align: center;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.atlas {
|
.atlas {
|
||||||
color: #fbcd49;
|
color: #fbcd49;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #88FFFF;
|
color: #88FFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #ff88ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-semi-light {
|
||||||
|
border-color: #aaa;
|
||||||
|
}
|
||||||
|
|
|
||||||
1914
custom/index.html
Normal file
1914
custom/index.html
Normal file
File diff suppressed because it is too large
Load diff
1893
customizer.html
1893
customizer.html
File diff suppressed because it is too large
Load diff
|
|
@ -24,9 +24,9 @@
|
||||||
<a href = "../builder/"><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</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 = "../crafter/"><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||||
<a href = ""><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
|
<a href = ""><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 = "../custom/"><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/"><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/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||||
<a><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</b></a>
|
<a><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/>
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,6 @@ function init_crafter() {
|
||||||
populateFields();
|
populateFields();
|
||||||
decodeCraft(ing_url_tag);
|
decodeCraft(ing_url_tag);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log("If you are seeing this while building, do not worry. Oherwise, panic! (jk contact ferricles)");
|
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -53,14 +53,12 @@ function encodeCustom(custom, verbose) {
|
||||||
let damages = ["nDam", "eDam", "tDam", "wDam", "fDam", "aDam"]; //"nDam_", "eDam_", "tDam_", "wDam_", "fDam_", "aDam_"
|
let damages = ["nDam", "eDam", "tDam", "wDam", "fDam", "aDam"]; //"nDam_", "eDam_", "tDam_", "wDam_", "fDam_", "aDam_"
|
||||||
let val = custom.get(id);
|
let val = custom.get(id);
|
||||||
if (id == "majorIds") {
|
if (id == "majorIds") {
|
||||||
console.log(val);
|
|
||||||
if (val.length > 0) {
|
if (val.length > 0) {
|
||||||
val = val[0];
|
val = val[0];
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
val = "";
|
val = "";
|
||||||
}
|
}
|
||||||
console.log(val);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof(val) === "string" && val !== "") {
|
if (typeof(val) === "string" && val !== "") {
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,6 @@
|
||||||
const custom_url_base = location.href.split("#")[0];
|
const custom_url_base = location.href.split("#")[0];
|
||||||
const custom_url_tag = location.hash.slice(1);
|
const custom_url_tag = location.hash.slice(1);
|
||||||
|
|
||||||
const CUSTOM_BUILD_VERSION = "7.0.1";
|
|
||||||
|
|
||||||
function setTitle() {
|
|
||||||
let text = "WynnCustom version "+CUSTOM_BUILD_VERSION;
|
|
||||||
document.getElementById("header").classList.add("funnynumber");
|
|
||||||
document.getElementById("header").textContent = text;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTitle();
|
|
||||||
|
|
||||||
let player_custom_item;
|
let player_custom_item;
|
||||||
let player_custom_ing;
|
let player_custom_ing;
|
||||||
let base_item; //the item that a user starts from, if any
|
let base_item; //the item that a user starts from, if any
|
||||||
|
|
@ -51,7 +41,6 @@ function init_customizer() {
|
||||||
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log("If you are seeing this while building, do not worry. Oherwise, panic! (jk contact ferricles)");
|
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -74,7 +63,7 @@ function calculateCustom() {
|
||||||
statMap.set("maxRolls", new Map());
|
statMap.set("maxRolls", new Map());
|
||||||
let inputs = document.getElementsByTagName("input");
|
let inputs = document.getElementsByTagName("input");
|
||||||
|
|
||||||
if (document.getElementById("fixID-choice").textContent === "yes") {//Fixed IDs
|
if (document.getElementById("fixID-choice").classList.contains("toggleOn")) {//Fixed IDs
|
||||||
for (const input of inputs) {
|
for (const input of inputs) {
|
||||||
if (input.id.includes("-min") || input.id.includes("-max")) {
|
if (input.id.includes("-min") || input.id.includes("-max")) {
|
||||||
continue;
|
continue;
|
||||||
|
|
@ -187,33 +176,34 @@ function calculateCustom() {
|
||||||
|
|
||||||
player_custom_item = new Custom(statMap);
|
player_custom_item = new Custom(statMap);
|
||||||
|
|
||||||
document.getElementById("right-container").classList.remove("sticky-box");
|
|
||||||
let custom_str = encodeCustom(player_custom_item.statMap, true);
|
let custom_str = encodeCustom(player_custom_item.statMap, true);
|
||||||
location.hash = custom_str;
|
location.hash = custom_str;
|
||||||
player_custom_item.setHash(custom_str);
|
player_custom_item.setHash(custom_str);
|
||||||
//console.log(player_custom_item.statMap.get("hash"));
|
|
||||||
|
|
||||||
|
|
||||||
displayExpandedItem(player_custom_item.statMap, "custom-stats");
|
displaysq2ExpandedItem(player_custom_item.statMap, "custom-stats");
|
||||||
|
|
||||||
//console.log(player_custom_item.statMap);
|
|
||||||
|
|
||||||
}catch (error) {
|
}catch (error) {
|
||||||
//USE THE ERROR <p>S!
|
//The error elements no longer exist in the page. Add them back if needed.
|
||||||
|
|
||||||
|
// console.log(error.stack);
|
||||||
|
|
||||||
let msg = error.stack;
|
let msg = error.stack;
|
||||||
let lines = msg.split("\n");
|
let lines = msg.split("\n");
|
||||||
let header = document.getElementById("header");
|
for (line of lines) {
|
||||||
header.textContent = "";
|
console.log(line);
|
||||||
for (const line of lines) {
|
|
||||||
let p = document.createElement("p");
|
|
||||||
p.classList.add("itemp");
|
|
||||||
p.textContent = line;
|
|
||||||
header.appendChild(p);
|
|
||||||
}
|
}
|
||||||
let p2 = document.createElement("p");
|
// let header = document.getElementById("header");
|
||||||
p2.textContent = "If you believe this is an error, contact hppeng on forums or discord.";
|
// header.textContent = "";
|
||||||
header.appendChild(p2);
|
// for (const line of lines) {
|
||||||
|
// let p = document.createElement("p");
|
||||||
|
// p.classList.add("itemp");
|
||||||
|
// p.textContent = line;
|
||||||
|
// header.appendChild(p);
|
||||||
|
// }
|
||||||
|
// let p2 = document.createElement("p");
|
||||||
|
// p2.textContent = "If you believe this is an error, contact hppeng on forums or discord.";
|
||||||
|
// header.appendChild(p2);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -236,8 +226,7 @@ function decodeCustom(custom_url_tag) {
|
||||||
if (fixID) {
|
if (fixID) {
|
||||||
statMap.set("fixId", true);
|
statMap.set("fixId", true);
|
||||||
toggleButton("fixID-choice");
|
toggleButton("fixID-choice");
|
||||||
toggleYN("fixID-choice");
|
toggleFixed(document.getElementById("fixID-choice").classList.contains("toggleOn"));
|
||||||
toggleFixed(document.getElementById("fixID-choice"));
|
|
||||||
}
|
}
|
||||||
while (tag !== "") {
|
while (tag !== "") {
|
||||||
let id = ci_save_order[Base64.toInt(tag.slice(0,2))];
|
let id = ci_save_order[Base64.toInt(tag.slice(0,2))];
|
||||||
|
|
@ -350,27 +339,15 @@ function populateFields() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Changes an element's text content from yes to no or vice versa
|
|
||||||
*/
|
|
||||||
function toggleYN(elemId) {
|
|
||||||
let elem = document.getElementById(elemId);
|
|
||||||
if (elem.textContent && elem.textContent === "no") {
|
|
||||||
elem.textContent = "yes";
|
|
||||||
} else if (elem.textContent === "yes") {
|
|
||||||
elem.textContent = "no";
|
|
||||||
} else {
|
|
||||||
elem.textContent = "no";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param fixed : a boolean for the state of the fixID button.
|
* @param fixed : a boolean for the state of the fixID button.
|
||||||
*/
|
*/
|
||||||
function toggleFixed(fixed) {
|
function toggleFixed() {
|
||||||
|
let fixedID_bool = document.getElementById("fixID-choice").classList.contains("toggleOn");
|
||||||
for (const id of rolledIDs) {
|
for (const id of rolledIDs) {
|
||||||
let elem = document.getElementById(id);
|
let elem = document.getElementById(id);
|
||||||
if (elem) {
|
if (elem) {
|
||||||
if (fixed.textContent === "yes") { //now fixed IDs -> go to 1 input
|
if (fixedID_bool) { //now fixed IDs -> go to 1 input
|
||||||
document.getElementById(id+"-choice-fixed-container").style = "";
|
document.getElementById(id+"-choice-fixed-container").style = "";
|
||||||
document.getElementById(id+"-choice-container").style = "display:none";
|
document.getElementById(id+"-choice-container").style = "display:none";
|
||||||
} else { //now rollable -> go to 2 inputs
|
} else { //now rollable -> go to 2 inputs
|
||||||
|
|
|
||||||
102
js/loadheader.js
102
js/loadheader.js
|
|
@ -1,102 +0,0 @@
|
||||||
/*
|
|
||||||
<div class = "headerleft">
|
|
||||||
<a href = "./index.html" class = "nomarginp iconlink tooltip">
|
|
||||||
<img src = "/media/icons/new/builder.png" class = "left linkoptions headericon">
|
|
||||||
<div class = "tooltiptext center">WynnBuilder</div>
|
|
||||||
</img>
|
|
||||||
</a>
|
|
||||||
<a href = "./crafter.html" class = "nomarginp iconlink tooltip">
|
|
||||||
<img src = "/media/icons/new/crafter.png" class = "left linkoptions headericon">
|
|
||||||
<div class = "tooltiptext center">WynnCrafter</div>
|
|
||||||
</img>
|
|
||||||
</a>
|
|
||||||
<a href = "./items.html" class = "nomarginp iconlink tooltip">
|
|
||||||
<img src = "/media/icons/new/searcher.png" class = "left linkoptions headericon">
|
|
||||||
<div class = "tooltiptext center">WynnAtlas</div>
|
|
||||||
</img>
|
|
||||||
</a>
|
|
||||||
<a href = "./customizer.html" class = "nomarginp iconlink tooltip">
|
|
||||||
<img src = "/media/icons/new/custom.png" class = "left linkoptions headericon">
|
|
||||||
<div class = "tooltiptext center">WynnCustom</div>
|
|
||||||
</img>
|
|
||||||
</a> <a href = "./map.html" class = "nomarginp iconlink tooltip">
|
|
||||||
<img src = "/media/icons/new/compass.png" class = "left linkoptions headericon">
|
|
||||||
</img>
|
|
||||||
<div class = "tooltiptext center">WynnGPS</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class = "headerright">
|
|
||||||
<button class = "button" id = "toggle-icon-button" onclick="toggleIcons();">
|
|
||||||
Use Old Icons
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
let header_icon_map_left = new Map([
|
|
||||||
["index",["builder","WynnBuilder"]],
|
|
||||||
["crafter",["crafter","WynnCrafter"]],
|
|
||||||
["items",["searcher","WynnAtlas"]],
|
|
||||||
["customizer",["custom","WynnCustom"]],
|
|
||||||
["map",["compass","WynnGPS"]],
|
|
||||||
["wynnfo/index",["book","Wynnfo"]]
|
|
||||||
]);
|
|
||||||
|
|
||||||
function setHeaders() {
|
|
||||||
let headerleft = document.getElementById("headerleft");
|
|
||||||
let headerright = document.getElementById("headerright");
|
|
||||||
|
|
||||||
for (const [name,data] of header_icon_map_left) {
|
|
||||||
let a_elem = document.createElement("a");
|
|
||||||
let img = document.createElement("img");
|
|
||||||
let div = document.createElement("div");
|
|
||||||
a_elem.classList.add("nomarginp");
|
|
||||||
a_elem.classList.add("iconlink");
|
|
||||||
a_elem.classList.add("tooltip");
|
|
||||||
a_elem.href = "../" + name + ".html";
|
|
||||||
img.classList.add("left");
|
|
||||||
img.classList.add("linkoptions");
|
|
||||||
img.classList.add("headericon");
|
|
||||||
img.src = "/media/icons/new/" + data[0] + ".png";
|
|
||||||
div.classList.add("tooltiptext");
|
|
||||||
div.classList.add("header-tooltip");
|
|
||||||
div.classList.add("center");
|
|
||||||
div.textContent = data[1];
|
|
||||||
a_elem.appendChild(img);
|
|
||||||
a_elem.appendChild(div);
|
|
||||||
headerleft.appendChild(a_elem);
|
|
||||||
}
|
|
||||||
|
|
||||||
let toggle_icon_button = document.createElement("button");
|
|
||||||
toggle_icon_button.classList.add("button");
|
|
||||||
toggle_icon_button.id = "toggle-icon-button";
|
|
||||||
toggle_icon_button.onclick = function() {toggleIcons()};
|
|
||||||
toggle_icon_button.textContent = "Use Old Icons";
|
|
||||||
headerright.appendChild(toggle_icon_button);
|
|
||||||
|
|
||||||
let reload_div = document.createElement("div");
|
|
||||||
let reload_button = document.createElement("button");
|
|
||||||
reload_button.classList.add("button");
|
|
||||||
reload_button.style.left = '0px';
|
|
||||||
reload_button.style.top = '0px';
|
|
||||||
reload_button.style.width = '48px';
|
|
||||||
reload_button.style.height = '48px';
|
|
||||||
reload_button.style.padding = '0px';
|
|
||||||
reload_button.onclick = hardReload;
|
|
||||||
let reload_img = document.createElement("img");
|
|
||||||
reload_img.src = "/media/icons/new/reload.png"
|
|
||||||
reload_img.style.width = "100%";
|
|
||||||
let reload_tooltip;
|
|
||||||
reload_tooltip = createTooltip(reload_tooltip, "p", "Reload", reload_button, ["center","reloadtooltip"]);
|
|
||||||
//reload_tooltip.style.position = "relative";
|
|
||||||
reload_tooltip.style.left = "-50%";
|
|
||||||
reload_tooltip.style.top = "70%";
|
|
||||||
|
|
||||||
reload_div.appendChild(reload_button);
|
|
||||||
reload_button.appendChild(reload_img);
|
|
||||||
headerright.appendChild(reload_div);
|
|
||||||
|
|
||||||
|
|
||||||
console.log("Set Header");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
setHeaders();
|
|
||||||
26
js/map.js
26
js/map.js
|
|
@ -9,16 +9,6 @@ const map_url_tag = location.hash.slice(1);
|
||||||
// console.log(map_url_base);
|
// console.log(map_url_base);
|
||||||
// console.log(map_url_tag);
|
// console.log(map_url_tag);
|
||||||
|
|
||||||
const MAP_BUILD_VERSION = "7";
|
|
||||||
|
|
||||||
function setTitle() {
|
|
||||||
let text = "WynnGPS version "+MAP_BUILD_VERSION;
|
|
||||||
document.getElementById("header").classList.add("funnynumber");
|
|
||||||
document.getElementById("header").textContent = text;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTitle();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -73,7 +63,7 @@ function init_map(){ //async just in case we need async stuff
|
||||||
zoomControl: false,
|
zoomControl: false,
|
||||||
zoom: 1
|
zoom: 1
|
||||||
}).setView([0,0], 1);
|
}).setView([0,0], 1);
|
||||||
L.imageOverlay("/media/maps/world-map.png", bounds).addTo(map);
|
L.imageOverlay("../media/maps/world-map.png", bounds).addTo(map);
|
||||||
|
|
||||||
map.fitBounds(bounds);
|
map.fitBounds(bounds);
|
||||||
|
|
||||||
|
|
@ -144,10 +134,10 @@ function placeMarker(lat, lng) {
|
||||||
}
|
}
|
||||||
|
|
||||||
marker = L.marker([lat, lng], {icon: L.icon({
|
marker = L.marker([lat, lng], {icon: L.icon({
|
||||||
iconUrl: '/media/icons/' + (newIcons ? "new/" : "old/" ) + 'marker.png',
|
iconUrl: '../media/icons/' + (newIcons ? "new/" : "old/" ) + 'marker.png',
|
||||||
iconSize: [32, 32],
|
iconSize: [32, 32],
|
||||||
iconAnchor: [16, 32],
|
iconAnchor: [16, 32],
|
||||||
shadowUrl: '/media/icons/' + (newIcons ? "new/" : "old/" ) + 'shadow.png',
|
shadowUrl: '../media/icons/' + (newIcons ? "new/" : "old/" ) + 'shadow.png',
|
||||||
shadowSize: [1,1],
|
shadowSize: [1,1],
|
||||||
shadowAnchor: [16, 32],
|
shadowAnchor: [16, 32],
|
||||||
className: "marker"
|
className: "marker"
|
||||||
|
|
@ -286,7 +276,7 @@ function pullguilds() {
|
||||||
let li = document.createElement("li");
|
let li = document.createElement("li");
|
||||||
|
|
||||||
let i = document.createElement("img");
|
let i = document.createElement("img");
|
||||||
i.src = "./media/icons/locations/" + img;
|
i.src = "../media/icons/locations/" + img;
|
||||||
i.style.maxWidth = "32px";
|
i.style.maxWidth = "32px";
|
||||||
i.style.maxHeight = "32px";
|
i.style.maxHeight = "32px";
|
||||||
li.appendChild(i);
|
li.appendChild(i);
|
||||||
|
|
@ -467,10 +457,10 @@ function toggleResources() {
|
||||||
let imgBounds = [ [ TRcorner[0]-(16*n)-20-gap*n,TRcorner[1]+4], [ TRcorner[0]-(16*n)-4-gap*n,TRcorner[1]+20] ];
|
let imgBounds = [ [ TRcorner[0]-(16*n)-20-gap*n,TRcorner[1]+4], [ TRcorner[0]-(16*n)-4-gap*n,TRcorner[1]+20] ];
|
||||||
imgBounds = [xytolatlng(imgBounds[0][0],imgBounds[0][1]), xytolatlng(imgBounds[1][0],imgBounds[1][1])];
|
imgBounds = [xytolatlng(imgBounds[0][0],imgBounds[0][1]), xytolatlng(imgBounds[1][0],imgBounds[1][1])];
|
||||||
|
|
||||||
let resourceObj = L.imageOverlay("/media/icons/" + (newIcons ? "new/" : "old/" ) +resource+".png", imgBounds, {className: `${resource} resourceimg`}).addTo(map);
|
let resourceObj = L.imageOverlay("../media/icons/" + (newIcons ? "new/" : "old/" ) +resource+".png", imgBounds, {className: `${resource} resourceimg`}).addTo(map);
|
||||||
resourceObjs.push(resourceObj);
|
resourceObjs.push(resourceObj);
|
||||||
}
|
}
|
||||||
let gearObj = L.imageOverlay("/media/icons/" + (newIcons ? "new/" : "old/" ) + "Gears.png", [xytolatlng(TRcorner[0]-(16*terr_resources.length)-20-gap*terr_resources.length,TRcorner[1]+4), xytolatlng(TRcorner[0]-(16*terr_resources.length)-4-gap*terr_resources.length,TRcorner[1]+20)], {className: `Ore resourceimg`}).addTo(map);
|
let gearObj = L.imageOverlay("../media/icons/" + (newIcons ? "new/" : "old/" ) + "Gears.png", [xytolatlng(TRcorner[0]-(16*terr_resources.length)-20-gap*terr_resources.length,TRcorner[1]+4), xytolatlng(TRcorner[0]-(16*terr_resources.length)-4-gap*terr_resources.length,TRcorner[1]+20)], {className: `Ore resourceimg`}).addTo(map);
|
||||||
resourceObjs.push(gearObj);
|
resourceObjs.push(gearObj);
|
||||||
//draw resource storage
|
//draw resource storage
|
||||||
for (const n in terr_storage) {
|
for (const n in terr_storage) {
|
||||||
|
|
@ -479,10 +469,10 @@ function toggleResources() {
|
||||||
let imgBounds = [ [ DRcorner[0]-(16*n)-20-gap*n,DRcorner[1]-20], [ DRcorner[0]-(16*n)-4-gap*n,DRcorner[1]-4] ];
|
let imgBounds = [ [ DRcorner[0]-(16*n)-20-gap*n,DRcorner[1]-20], [ DRcorner[0]-(16*n)-4-gap*n,DRcorner[1]-4] ];
|
||||||
imgBounds = [xytolatlng(imgBounds[0][0],imgBounds[0][1]), xytolatlng(imgBounds[1][0],imgBounds[1][1])];
|
imgBounds = [xytolatlng(imgBounds[0][0],imgBounds[0][1]), xytolatlng(imgBounds[1][0],imgBounds[1][1])];
|
||||||
|
|
||||||
let resourceObj = L.imageOverlay("/media/icons/" + (newIcons ? "new/" : "old/" ) +storage+".png", imgBounds, {alt: `${storage}`, className: `${storage} resourceimg`}).addTo(map);
|
let resourceObj = L.imageOverlay("../media/icons/" + (newIcons ? "new/" : "old/" ) +storage+".png", imgBounds, {alt: `${storage}`, className: `${storage} resourceimg`}).addTo(map);
|
||||||
resourceObjs.push(resourceObj);
|
resourceObjs.push(resourceObj);
|
||||||
}
|
}
|
||||||
let chestObj = L.imageOverlay("/media/icons/" + (newIcons ? "new/" : "old/" ) + "Chest.png", [xytolatlng(DRcorner[0]-(16*terr_storage.length)-20-gap*terr_storage.length,DRcorner[1]-20), xytolatlng(DRcorner[0]-(16*terr_storage.length)-4-gap*terr_storage.length,DRcorner[1]-4)], {className: `Wood resourceimg`}).addTo(map);
|
let chestObj = L.imageOverlay("../media/icons/" + (newIcons ? "new/" : "old/" ) + "Chest.png", [xytolatlng(DRcorner[0]-(16*terr_storage.length)-20-gap*terr_storage.length,DRcorner[1]-20), xytolatlng(DRcorner[0]-(16*terr_storage.length)-4-gap*terr_storage.length,DRcorner[1]-4)], {className: `Wood resourceimg`}).addTo(map);
|
||||||
resourceObjs.push(chestObj);
|
resourceObjs.push(chestObj);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -153,6 +153,7 @@ function displaysq2ExpandedItem(item, parent_id){
|
||||||
// Clear the parent div.
|
// Clear the parent div.
|
||||||
setHTML(parent_id, "");
|
setHTML(parent_id, "");
|
||||||
let parent_div = document.getElementById(parent_id);
|
let parent_div = document.getElementById(parent_id);
|
||||||
|
parent_div.classList.add("border", "border-2", "border-dark");
|
||||||
|
|
||||||
let fix_id = item.has("fixID") && item.get("fixID");
|
let fix_id = item.has("fixID") && item.get("fixID");
|
||||||
let elemental_format = false;
|
let elemental_format = false;
|
||||||
|
|
|
||||||
132
map.html
132
map.html
|
|
@ -1,132 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html scroll-behavior="smooth">
|
|
||||||
<head>
|
|
||||||
<meta name="HandheldFriendly" content="true" />
|
|
||||||
<meta name="MobileOptimized" content="320" />
|
|
||||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
|
|
||||||
<!-- nunito font, copying wynndata -->
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/css/styles.css">
|
|
||||||
<link rel="stylesheet" media="screen and (min-width: 900px)" href="/css/map-wide.css"/>
|
|
||||||
<link rel="stylesheet" media="screen and (max-width: 899px)" href="/css/map-narrow.css"/>
|
|
||||||
<link rel="icon" href="./media/icons/new/compass2.png">
|
|
||||||
<link rel="manifest" href="manifest.json">
|
|
||||||
|
|
||||||
<!--Leaflet for map-->
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
|
||||||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
|
||||||
crossorigin="anonymous"/>
|
|
||||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
|
||||||
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
|
||||||
crossorigin="anonymous"></script>
|
|
||||||
|
|
||||||
<title>WynnGPS</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">WynnGPS</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class = "headerright" id = "headerright">
|
|
||||||
<p class = "center">Right click to place marker.</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div class = "overall-container" display = "grid">
|
|
||||||
<div id = "mapdiv" class ="mapdiv container" display = "grid-item-1">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id = "mapoptions-container" class = "container" display = "grid-item-2">
|
|
||||||
<div id = "coord-container" class = "center coord-container" display = "grid">
|
|
||||||
<p class = "nomargin"></p>
|
|
||||||
<p class = "title center nomargin">Options</p>
|
|
||||||
<p class = "nomargin"></p>
|
|
||||||
<p class = "nomargin" display = "grid-item-1">X</p>
|
|
||||||
<p class = "nomargin" display = "grid-item-2"></p>
|
|
||||||
<p class = "nomargin" display = "grid-item-3">Z</p>
|
|
||||||
<p class = "nomargin" id = "coord-x" display = "grid-item-4"></p>
|
|
||||||
<p class = "nomargin" id = "coord-img" display = "grid-item-5">
|
|
||||||
<img src = "/media/icons/new/compass2.png" alt style = "max-width:32px; max-height:32px"/>
|
|
||||||
</p>
|
|
||||||
<p class = "nomargin" id = "coord-z" display = "grid-item-6"></p>
|
|
||||||
<p class = "nomargin" id = "marker-coord-x" display = "none"></p>
|
|
||||||
<p class = "nomargin" id = "marker-coord-img" display = "none">
|
|
||||||
<img src = "/media/icons/new/marker.png" alt style = "max-width:32px; max-height:32px"/>
|
|
||||||
</p>
|
|
||||||
<p class = "nomargin" id = "marker-coord-z" display = "none"></p>
|
|
||||||
</div>
|
|
||||||
<div id = "button-choices container">
|
|
||||||
<button class = "left" id = "territories-button" onclick = "toggleButton('territories-button'); toggleTerritories()">Show Territories</button>
|
|
||||||
<button class = "left" id = "claims-button" onclick = "toggleButton('claims-button'); toggleClaims()">Show Claims</button>
|
|
||||||
<button class = "left" id = "routes-button" onclick = "toggleButton('routes-button'); toggleRoutes()">Show Routes</button>
|
|
||||||
<button class = "left" id = "resources-button" onclick = "toggleButton('resources-button'); toggleResources()">Show Resources</button>
|
|
||||||
<button class = "left" id = "locations-button" onclick = "toggleButton('locations-button'); toggleLocations()">Show Locations</button>
|
|
||||||
<button class = "left" id = "pull-button" onclick = "refreshData()">Refresh Data</button>
|
|
||||||
<p class = "left" style = "color:red">Do NOT refresh too often.</p>
|
|
||||||
</div>
|
|
||||||
<div id ="territory-stats">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id = "key-container" class = "container">
|
|
||||||
<div id = "key-title" class = "center">
|
|
||||||
<p class = "center title"> All Keys </p>
|
|
||||||
</div>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div id = "guild-key" style = "display:none">
|
|
||||||
<p class = "left">Guild Key:</p>
|
|
||||||
<ul id = "guildkeylist">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div id = "resources-key" style = "display:none">
|
|
||||||
<p class = "left">Resource Key:</p>
|
|
||||||
<ul id = "resourcelist">
|
|
||||||
<li><img src= "media/icons/new/Emeralds.png" style ="max-width:16px;max-height:16px" class = "Emeralds"/> Emeralds</li>
|
|
||||||
<li><img src= "media/icons/new/Ore.png" style ="max-width:16px;max-height:16px" class = "Ore"/> Ore</li>
|
|
||||||
<li><img src= "media/icons/new/Wood.png" style ="max-width:16px;max-height:16px" class = "Wood"/> Wood</li>
|
|
||||||
<li><img src= "media/icons/new/Crops.png" style ="max-width:16px;max-height:16px" class = "Crops"/> Crops</li>
|
|
||||||
<li><img src= "media/icons/new/Fish.png" style ="max-width:16px;max-height:16px" class = "Fish"/> Fish</li>
|
|
||||||
<li><img src= "media/icons/new/Chest.png" style ="max-width:16px;max-height:16px" class = "Wood"/> Storage</li>
|
|
||||||
<li><img src= "media/icons/new/Gears.png" style ="max-width:16px;max-height:16px" class = "Ore"/> Production</li>
|
|
||||||
<li>Double image means double generation</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div id = "locations-key" style = "display:none">
|
|
||||||
<p class = "left">Locations Key:</p>
|
|
||||||
<ul id = "locationlist">
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="/js/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/load_map.js"></script>
|
|
||||||
<script type="text/javascript" src="/js/map.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
164
map/index.html
Normal file
164
map/index.html
Normal file
|
|
@ -0,0 +1,164 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html scroll-behavior="smooth">
|
||||||
|
<head>
|
||||||
|
<meta name="HandheldFriendly" content="true" />
|
||||||
|
<meta name="MobileOptimized" content="320" />
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
|
||||||
|
<!-- nunito font, copying wynndata -->
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
|
||||||
|
<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" media="screen and (min-width: 900px)" href="/css/map-wide.css"/>
|
||||||
|
<link rel="stylesheet" media="screen and (max-width: 899px)" href="/css/map-narrow.css"/>
|
||||||
|
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||||
|
<link rel="stylesheet" href="../css/sidebar.css">
|
||||||
|
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||||
|
<link rel="icon" href="../media/icons/new/compass2.png">
|
||||||
|
<link rel="manifest" href="manifest.json">
|
||||||
|
|
||||||
|
<!--Leaflet for map-->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||||||
|
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||||||
|
crossorigin="anonymous"/>
|
||||||
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
||||||
|
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<title>WynnGPS</title>
|
||||||
|
</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 = ""><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><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 row py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
||||||
|
<div id = "mapdiv" class = "col-lg-8 col-sm-12 rounded border border-light border-3">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id = "mapoptions-container" class = "col-lg-3 col-sm-12 rounded border border-light border-3 mx-1">
|
||||||
|
<div id = "coord-container" class = "row justify-content-center text-center">
|
||||||
|
<div class = "row big-title justify-content-center">Options</div>
|
||||||
|
<div class = "row justify-content-center">Right click to place marker.</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col-4">X</div>
|
||||||
|
<div class = "col-4"></div>
|
||||||
|
<div class = "col-4">Z</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row mb-1">
|
||||||
|
<div class = "col-4" id = "coord-x"></div>
|
||||||
|
<div class = "col-4">
|
||||||
|
<p class = "nomargin" id = "coord-img">
|
||||||
|
<img src = "../media/icons/new/compass2.png" alt style = "max-width:32px; max-height:32px"/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class = "col-4" id = "coord-z"></div>
|
||||||
|
</div>
|
||||||
|
<div class = "row mb-1">
|
||||||
|
<div class = "col-4" id = "marker-coord-x"></div>
|
||||||
|
<div class = "col-4">
|
||||||
|
<p class = "nomargin" id = "marker-coord-img" display = "none">
|
||||||
|
<img src = "../media/icons/new/marker.png" alt style = "max-width:32px; max-height:32px"/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class = "col-4" id = "marker-coord-z"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id = "button-choices row">
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col mb-1">
|
||||||
|
<button class = "w-100 button rounded scaled-font fw-bold text-light dark-5" id = "territories-button" onclick = "toggleButton('territories-button'); toggleTerritories()">Show Territories</button>
|
||||||
|
</div>
|
||||||
|
<div class = "col mb-1">
|
||||||
|
<button class = "w-100 button rounded scaled-font fw-bold text-light dark-5" id = "claims-button" onclick = "toggleButton('claims-button'); toggleClaims()">Show Claims</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col mb-1">
|
||||||
|
<button class = "w-100 button rounded scaled-font fw-bold text-light dark-5" id = "routes-button" onclick = "toggleButton('routes-button'); toggleRoutes()">Show Routes</button>
|
||||||
|
</div>
|
||||||
|
<div class = "col mb-1">
|
||||||
|
<button class = "w-100 button rounded scaled-font fw-bold text-light dark-5" id = "resources-button" onclick = "toggleButton('resources-button'); toggleResources()">Show Resources</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col mb-1">
|
||||||
|
<button class = "w-100 button rounded scaled-font fw-bold text-light dark-5" id = "locations-button" onclick = "toggleButton('locations-button'); toggleLocations()">Show Locations</button>
|
||||||
|
</div>
|
||||||
|
<div class = "col mb-1">
|
||||||
|
<button class = "w-100 button rounded scaled-font fw-bold text-light dark-5" id = "pull-button" onclick = "refreshData()">Refresh Data</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<p class = "warning" style = "color:red">Do NOT refresh too often.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id ="territory-stats">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id = "key-container" class = "row rounded border border-light border-3 my-1">
|
||||||
|
<div id = "key-title" class = "row">
|
||||||
|
<p class = "item-title"> All Keys </p>
|
||||||
|
</div>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div id = "guild-key" style = "display:none">
|
||||||
|
<p class = "left">Guild Key:</p>
|
||||||
|
<ul id = "guildkeylist">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div id = "resources-key" style = "display:none">
|
||||||
|
<p class = "left">Resource Key:</p>
|
||||||
|
<ul id = "resourcelist">
|
||||||
|
<li><img src= "../media/icons/new/Emeralds.png" style ="max-width:16px;max-height:16px" class = "Emeralds"/> Emeralds</li>
|
||||||
|
<li><img src= "../media/icons/new/Ore.png" style ="max-width:16px;max-height:16px" class = "Ore"/> Ore</li>
|
||||||
|
<li><img src= "../media/icons/new/Wood.png" style ="max-width:16px;max-height:16px" class = "Wood"/> Wood</li>
|
||||||
|
<li><img src= "../media/icons/new/Crops.png" style ="max-width:16px;max-height:16px" class = "Crops"/> Crops</li>
|
||||||
|
<li><img src= "../media/icons/new/Fish.png" style ="max-width:16px;max-height:16px" class = "Fish"/> Fish</li>
|
||||||
|
<li><img src= "../media/icons/new/Chest.png" style ="max-width:16px;max-height:16px" class = "Wood"/> Storage</li>
|
||||||
|
<li><img src= "../media/icons/new/Gears.png" style ="max-width:16px;max-height:16px" class = "Ore"/> Production</li>
|
||||||
|
<li>Double image means double generation</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div id = "locations-key" style = "display:none">
|
||||||
|
<p class = "left">Locations Key:</p>
|
||||||
|
<ul id = "locationlist">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../js/utils.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/icons.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/load_map.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/map.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
440
sq2/sq2.css
440
sq2/sq2.css
|
|
@ -1,440 +0,0 @@
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
font-family: 'Nunito', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
input::-webkit-calendar-picker-indicator {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
-webkit-appearance : none;
|
|
||||||
border-radius : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea, input { outline: none; }
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden; /* makes the body non-scrollable (we will add scrolling to the sidebar and main content containers) */
|
|
||||||
margin: 0; /* removes default style */
|
|
||||||
display: flex; /* enables flex content for its children */
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'Nunito', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Works on Firefox */
|
|
||||||
* {
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: rgb(30, 30, 30) rgb(45, 45, 45);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Works on Chrome, Edge, and Safari */
|
|
||||||
*::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-track {
|
|
||||||
background: rgb(45, 45, 45);
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb {
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
|
||||||
height: 100%; /* allows both columns to span the full height of the browser window */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column; /* places the left and right headers above the bottom content */
|
|
||||||
}
|
|
||||||
|
|
||||||
#left { /* makes sure that content is not cut off in a smaller browser window */
|
|
||||||
flex-shrink: 1;
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
}
|
|
||||||
|
|
||||||
#right {
|
|
||||||
flex-grow: 1;
|
|
||||||
background-color: rgb(40, 40, 40);
|
|
||||||
color: rgb(240, 240, 240);
|
|
||||||
padding: 2%;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.item-icon {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
flex-grow: 1; /* ensures that the container will take up the full height of the parent container */
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-border, .box {
|
|
||||||
border: .3vw solid rgb(45, 45, 45);
|
|
||||||
}
|
|
||||||
|
|
||||||
.se-border {
|
|
||||||
border-left: .3vw solid rgb(45, 45, 45);
|
|
||||||
border-right: .3vw solid rgb(45, 45, 45);
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: .8vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
background-color: rgb(40, 40, 40);
|
|
||||||
border-top: .15vw solid rgb(25, 25, 25) !important;
|
|
||||||
border-left: .15vw solid rgb(25, 25, 25) !important;
|
|
||||||
border-bottom: .15vw solid rgb(45, 45, 45) !important;
|
|
||||||
border-right: .15vw solid rgb(45, 45, 45) !important;
|
|
||||||
box-sizing: border-box !important;
|
|
||||||
color: rgb(240, 240, 240);
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
font-size: .8vw;
|
|
||||||
box-sizing: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.item-name {
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
width: 10vw;
|
|
||||||
height: 1.2vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.search-field {
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
width: 9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.equipment-container {
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
flex-direction: column;
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.all-equipment {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weapon-container {
|
|
||||||
display: inline-flex;
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skp-container {
|
|
||||||
width: 38vw;
|
|
||||||
height: 10vw;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.mono-font {
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.damage-size {
|
|
||||||
width: 5vw;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.potency {
|
|
||||||
width: 36em;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skp-text {
|
|
||||||
width: 7.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skp-input {
|
|
||||||
width: 6vw;
|
|
||||||
height: 1.2vw;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-screen {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powder-input {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
font-weight: bold;
|
|
||||||
width: 10vw;
|
|
||||||
height: 1.2vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skp-tooltip {
|
|
||||||
font-size: .6vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spell-container {
|
|
||||||
display: inline-flex;
|
|
||||||
vertical-align: top;
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
width: 18vw;
|
|
||||||
height: 24.5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable {
|
|
||||||
position: absolute !important;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable-header {
|
|
||||||
cursor: move;
|
|
||||||
z-index: 10;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
p.Damage {
|
|
||||||
color: rgb(255, 198, 85)
|
|
||||||
}
|
|
||||||
|
|
||||||
.Set {
|
|
||||||
display: inline;
|
|
||||||
color: #5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Mana { color: #5ff;}
|
|
||||||
.Mana:after { content: "\273A"}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.f-w {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shaded-table {
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
padding-top: 2px;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
|
|
||||||
border-bottom: 1px solid rgb(45, 45, 45)
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer-table {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimal-stats-container {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
vertical-align: top;
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
width: 18vw;
|
|
||||||
height: 24.5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nDam {
|
|
||||||
color: #FFAA00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eDam, .Earth, .Earth_powder {
|
|
||||||
color: #00AA00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Earth:before, .Earth_powder:before { content: "\2724" ' '; }
|
|
||||||
|
|
||||||
.tDam, .Thunder, .Thunder_powder {
|
|
||||||
color: #FFFF55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Thunder:before, .Thunder_powder:before { content: "\2726" ' '; }
|
|
||||||
|
|
||||||
.wDam, .Water, .Water_powder {
|
|
||||||
color: #55FFFF
|
|
||||||
}
|
|
||||||
|
|
||||||
.Water:before, .Water_powder:before { content: "\2749" ' '; }
|
|
||||||
|
|
||||||
.fDam, .Fire, .Fire_powder {
|
|
||||||
color: #FF5555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Fire:before, .Fire_powder:before { content: "\2739" ' '; }
|
|
||||||
|
|
||||||
.aDam, .Air, .Air_powder {
|
|
||||||
color: #FFFFFF
|
|
||||||
}
|
|
||||||
|
|
||||||
.Air:before, .Air_powder:before { content: "\274b" ' '; }
|
|
||||||
|
|
||||||
.Neutral { color: #fa0; }
|
|
||||||
.Neutral:before { content: "\2724" ' '; }
|
|
||||||
.Damage { color: rgb(255, 198, 85)}
|
|
||||||
|
|
||||||
.Health {
|
|
||||||
color: #AA0000
|
|
||||||
}
|
|
||||||
|
|
||||||
.Health:before {
|
|
||||||
content: "\2764" ' ';
|
|
||||||
}
|
|
||||||
|
|
||||||
.Normal {
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Unique {
|
|
||||||
color: #FFFF55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Rare {
|
|
||||||
color: #FF55FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Legendary {
|
|
||||||
color: #55FFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Fabled {
|
|
||||||
color: #FF5555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Mythic {
|
|
||||||
color: #AA00AA
|
|
||||||
}
|
|
||||||
|
|
||||||
p.no-newline {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-text {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lvl {
|
|
||||||
color: #d4d4d4
|
|
||||||
}
|
|
||||||
|
|
||||||
.lvl:before {
|
|
||||||
content: "Lv. "
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.positive {
|
|
||||||
color: #5f5;
|
|
||||||
/*text-shadow: 2px 2px 0 #153f15;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.negative {
|
|
||||||
color: #f55;
|
|
||||||
/*text-shadow: 2px 2px 0 #1f1515;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-margin {
|
|
||||||
margin-top: .8vw;
|
|
||||||
margin-bottom: .8vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-tooltip {
|
|
||||||
width: 15rem;
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
color: white;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-container {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-header {
|
|
||||||
display: flex;
|
|
||||||
cursor: move;
|
|
||||||
background-color: rgb(45, 45, 45);
|
|
||||||
font-size: .8vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-result-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
flex-basis: 30vw;
|
|
||||||
max-width: 14.4vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-boost {
|
|
||||||
background-color: rgb(45, 45, 45);
|
|
||||||
width: 10rem;
|
|
||||||
border: 5px solid rgb(50, 50, 50)
|
|
||||||
}
|
|
||||||
|
|
||||||
button.toggleOn{
|
|
||||||
background-color:#0a0;
|
|
||||||
border: 3px solid rgb(0, 70, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.damageSubtitle {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemp {
|
|
||||||
font-size: .8vw;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
div:not(.item-tooltip) {
|
|
||||||
font-size: .8vw;
|
|
||||||
}*/
|
|
||||||
1153
sq2/sq2.html
1153
sq2/sq2.html
File diff suppressed because it is too large
Load diff
347
sq2/sq2.js
347
sq2/sq2.js
|
|
@ -1,347 +0,0 @@
|
||||||
let equipment_keys = ['weapon', 'helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace'];
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
// inits
|
|
||||||
|
|
||||||
$("#overall-window").toggle();
|
|
||||||
$("#search-container").toggle();
|
|
||||||
$("#boost-container").toggle();
|
|
||||||
|
|
||||||
// pot/base damage switch for weap display
|
|
||||||
/*
|
|
||||||
$(".damage-size").click(function(){
|
|
||||||
$(".damage-size").hide();
|
|
||||||
$(".potency").show();
|
|
||||||
});
|
|
||||||
$(".potency").click(function(){
|
|
||||||
$(".potency").hide();
|
|
||||||
$(".damage-size").show();
|
|
||||||
});*/
|
|
||||||
|
|
||||||
// windows
|
|
||||||
$("#overall-window").draggable({
|
|
||||||
handle: '#overall-window-header',
|
|
||||||
}).resizable({
|
|
||||||
alsoResize: "#all-stats",
|
|
||||||
handles: 'n, e, s ,w'
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#search-container").draggable({
|
|
||||||
handle: '#search-container-header',
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#boost-container").draggable({
|
|
||||||
handle: '#boost-container-header',
|
|
||||||
});
|
|
||||||
|
|
||||||
// window priority
|
|
||||||
$("#overall-window").mousedown(function() {
|
|
||||||
$(".window-container").css("z-index", 10);
|
|
||||||
$(this).css("z-index", 11);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#search-container").mousedown(function() {
|
|
||||||
$(".window-container").css("z-index", 10);
|
|
||||||
$(this).css("z-index", 11);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#boost-container").mousedown(function() {
|
|
||||||
$(".window-container").css("z-index", 10);
|
|
||||||
$(this).css("z-index", 11);
|
|
||||||
});
|
|
||||||
|
|
||||||
// update builds
|
|
||||||
jQuery(document).on("input", '.skp-input', function(event){
|
|
||||||
updateStatSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
jQuery(document).on("input", '.search-field', function(event){
|
|
||||||
doSearchSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
// set listeners/checks
|
|
||||||
$("#weapon-choice").on('input', function(){
|
|
||||||
set_input_style('weapon');
|
|
||||||
calcBuildSchedule();
|
|
||||||
update_powder_count('weapon');
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#weapon-powder").on('input', function(){
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#helmet-choice").on('input', function(){
|
|
||||||
set_input_style('helmet');
|
|
||||||
calcBuildSchedule();
|
|
||||||
update_powder_count('helmet', '|example: t6t6');
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#helmet-powder").on('input', function(){
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#chestplate-choice").on('input', function(){
|
|
||||||
set_input_style('chestplate');
|
|
||||||
calcBuildSchedule();
|
|
||||||
update_powder_count('chestplate');
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#chestplate-powder").on('input', function(){
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#leggings-choice").on('input', function(){
|
|
||||||
set_input_style('leggings');
|
|
||||||
calcBuildSchedule();
|
|
||||||
update_powder_count('leggings');
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#leggings-powder").on('input', function(){
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#boots-choice").on('input', function(){
|
|
||||||
set_input_style('boots');
|
|
||||||
calcBuildSchedule();
|
|
||||||
update_powder_count('boots');
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#boots-powder").on('input', function(){
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#ring1-choice").on('input', function(){
|
|
||||||
set_input_style('ring1');
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#ring2-choice").on('input', function(){
|
|
||||||
set_input_style('ring2');
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#bracelet-choice").on('input', function(){
|
|
||||||
set_input_style('bracelet');
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#necklace-choice").on('input', function(){
|
|
||||||
set_input_style('necklace');
|
|
||||||
calcBuildSchedule();
|
|
||||||
});
|
|
||||||
|
|
||||||
// control vars
|
|
||||||
let basic_stats_ctrl = true;
|
|
||||||
let off_stats_ctrl = false;
|
|
||||||
let def_stats_ctrl = false;
|
|
||||||
|
|
||||||
$("#basic-stats-btn").click(function(){
|
|
||||||
basic_stats_ctrl = true;
|
|
||||||
off_stats_ctrl = false;
|
|
||||||
def_stats_ctrl = false;
|
|
||||||
|
|
||||||
$("#minimal-stats").show();
|
|
||||||
$("#minimal-offensive-stats").hide();
|
|
||||||
$("#minimal-defensive-stats").hide();
|
|
||||||
|
|
||||||
$("#off-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
$("#def-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
});
|
|
||||||
$("#basic-stats-btn").hover(
|
|
||||||
function(){
|
|
||||||
$("#basic-stats-btn").css("background-color", "rgb(40, 40, 40)");
|
|
||||||
},function(){
|
|
||||||
if (basic_stats_ctrl) {
|
|
||||||
$("#basic-stats-btn").css("background-color", "rgb(30, 30, 30)");
|
|
||||||
} else {
|
|
||||||
$("#basic-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#off-stats-btn").click(function(){
|
|
||||||
basic_stats_ctrl = false;
|
|
||||||
off_stats_ctrl = true;
|
|
||||||
def_stats_ctrl = false;
|
|
||||||
|
|
||||||
$("#minimal-stats").hide();
|
|
||||||
$("#minimal-offensive-stats").show();
|
|
||||||
$("#minimal-defensive-stats").hide();
|
|
||||||
|
|
||||||
$("#basic-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
$("#def-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
});
|
|
||||||
$("#off-stats-btn").hover(
|
|
||||||
function(){
|
|
||||||
$("#off-stats-btn").css("background-color", "rgb(40, 40, 40)");
|
|
||||||
},function(){
|
|
||||||
if (off_stats_ctrl) {
|
|
||||||
$("#off-stats-btn").css("background-color", "rgb(30, 30, 30)");
|
|
||||||
} else {
|
|
||||||
$("#off-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#def-stats-btn").click(function(){
|
|
||||||
basic_stats_ctrl = false;
|
|
||||||
off_stats_ctrl = false;
|
|
||||||
def_stats_ctrl = true;
|
|
||||||
|
|
||||||
$("#minimal-stats").hide();
|
|
||||||
$("#minimal-offensive-stats").hide();
|
|
||||||
$("#minimal-defensive-stats").show();
|
|
||||||
|
|
||||||
$("#off-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
$("#basic-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
});
|
|
||||||
$("#def-stats-btn").hover(
|
|
||||||
function(){
|
|
||||||
$("#def-stats-btn").css("background-color", "rgb(40, 40, 40)");
|
|
||||||
},function(){
|
|
||||||
if (def_stats_ctrl) {
|
|
||||||
$("#def-stats-btn").css("background-color", "rgb(30, 30, 30)");
|
|
||||||
} else {
|
|
||||||
$("#def-stats-btn").css("background-color", "rgb(45, 45, 45)");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// item tooltip
|
|
||||||
|
|
||||||
$("#weapon-img-loc").hover(function(event){
|
|
||||||
$("#weapon-tooltip").show();
|
|
||||||
init_tooltip_loc('weapon');
|
|
||||||
}, function(){
|
|
||||||
$("#weapon-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#helmet-img-loc").hover(function(event){
|
|
||||||
$("#helmet-tooltip").show();
|
|
||||||
init_tooltip_loc('helmet');
|
|
||||||
}, function(){
|
|
||||||
$("#helmet-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#chestplate-img-loc").hover(function(event){
|
|
||||||
$("#chestplate-tooltip").show();
|
|
||||||
init_tooltip_loc('chestplate');
|
|
||||||
}, function(){
|
|
||||||
$("#chestplate-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#leggings-img-loc").hover(function(event){
|
|
||||||
$("#leggings-tooltip").show();
|
|
||||||
init_tooltip_loc('leggings');
|
|
||||||
}, function(){
|
|
||||||
$("#leggings-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#boots-img-loc").hover(function(event){
|
|
||||||
$("#boots-tooltip").show();
|
|
||||||
init_tooltip_loc('boots');
|
|
||||||
}, function(){
|
|
||||||
$("#boots-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#ring1-img-loc").hover(function(event){
|
|
||||||
$("#ring1-tooltip").show();
|
|
||||||
init_tooltip_loc('ring1');
|
|
||||||
}, function(){
|
|
||||||
$("#ring1-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#ring2-img-loc").hover(function(event){
|
|
||||||
$("#ring2-tooltip").show();
|
|
||||||
init_tooltip_loc('ring2');
|
|
||||||
}, function(){
|
|
||||||
$("#ring2-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#bracelet-img-loc").hover(function(event){
|
|
||||||
$("#bracelet-tooltip").show();
|
|
||||||
init_tooltip_loc('bracelet');
|
|
||||||
}, function(){
|
|
||||||
$("#bracelet-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#necklace-img-loc").hover(function(event){
|
|
||||||
$("#necklace-tooltip").show();
|
|
||||||
init_tooltip_loc('necklace');
|
|
||||||
}, function(){
|
|
||||||
$("#necklace-tooltip").hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
function set_input_style(type) {
|
|
||||||
let item = itemMap.get($("#"+type+"-choice").val());
|
|
||||||
if (item) {
|
|
||||||
$("#"+type+"-choice").addClass(item.tier);
|
|
||||||
if (type == 'weapon') {
|
|
||||||
$("#"+type+"-img").attr('src', 'media/items/new/generic-'+item.type+'.png');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
$("#"+type+"-choice").attr('class', 'item-name');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function init_tooltip_loc(equipment){
|
|
||||||
let ImgLoc = document.getElementById(equipment+'-img-loc').getBoundingClientRect();
|
|
||||||
let tooltipRect = document.getElementById(equipment+"-tooltip").getBoundingClientRect();
|
|
||||||
let windowHeight = $(window).height()
|
|
||||||
|
|
||||||
$("#"+equipment+"-tooltip").css('top', Math.min(ImgLoc.top, windowHeight - (tooltipRect.bottom - tooltipRect.top)));
|
|
||||||
$("#"+equipment+"-tooltip").css('left', ImgLoc.right);
|
|
||||||
}
|
|
||||||
|
|
||||||
function update_powder_count(type, alt="") {
|
|
||||||
let item = itemMap.get($("#"+type+"-choice").val());
|
|
||||||
if (item) {
|
|
||||||
$("#"+type+"-powder").attr("placeholder", item["slots"]+" slots"+alt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function init_equipUI() {
|
|
||||||
for (const i in equipment_keys) {
|
|
||||||
set_input_style(equipment_keys[i]);
|
|
||||||
}
|
|
||||||
update_powder_count('weapon');
|
|
||||||
update_powder_count('helmet', '|example: t6t6');
|
|
||||||
update_powder_count('chestplate');
|
|
||||||
update_powder_count('leggings');
|
|
||||||
update_powder_count('boots');
|
|
||||||
}
|
|
||||||
|
|
||||||
// phanta method of handling input <3
|
|
||||||
let calcBuildTask = null;
|
|
||||||
let updateStatTask = null;
|
|
||||||
let doSearchTask = null;
|
|
||||||
|
|
||||||
function calcBuildSchedule(){
|
|
||||||
if (calcBuildTask !== null) {
|
|
||||||
clearTimeout(calcBuildTask);
|
|
||||||
}
|
|
||||||
calcBuildTask = setTimeout(function(){
|
|
||||||
calcBuildTask = null;
|
|
||||||
calculateBuild();
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateStatSchedule(){
|
|
||||||
if (updateStatTask !== null) {
|
|
||||||
clearTimeout(updateStatTask);
|
|
||||||
}
|
|
||||||
updateStatTask = setTimeout(function(){
|
|
||||||
updateStatTask = null;
|
|
||||||
updateStats();
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
function doSearchSchedule(){
|
|
||||||
if (doSearchTask !== null) {
|
|
||||||
clearTimeout(doSearchTask);
|
|
||||||
}
|
|
||||||
doSearchTask = setTimeout(function(){
|
|
||||||
doSearchTask = null;
|
|
||||||
doItemSearch();
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +1,42 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html scroll-behavior="smooth">
|
<html scroll-behavior="smooth">
|
||||||
<head>
|
<head>
|
||||||
<!-- 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="./styles/index.css">
|
|
||||||
<link rel="icon" href="../media/icons/new/searcher.png">
|
|
||||||
<link rel="manifest" href="../manifest.json">
|
|
||||||
<title>WynnAtlas</title>
|
<title>WynnAtlas</title>
|
||||||
|
<link rel="icon" href="../media/icons/new/searcher.png" type="image/icon type">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
|
||||||
|
|
||||||
|
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||||
|
<link rel="stylesheet" href="../css/sidebar.css">
|
||||||
|
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="all" style="overflow-y: scroll">
|
<body class = "text-light d-flex justify-content-center" id = "body">
|
||||||
<header class="header nomarginp">
|
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||||
<div class="headerleft" id = "headerleft">
|
<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><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>
|
||||||
<div class="headercenter" id = "headercenter">
|
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font" id = "main">
|
||||||
<div>
|
<div class = "row item-title">Welcome!</div>
|
||||||
<p class="itemp" id="header">Wynnfo</p>
|
<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>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="headerright" id = "headerright">
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class = "body" id = "main">
|
|
||||||
<div class = "section" id = "title">
|
|
||||||
<h2>Welcome!</h2>
|
|
||||||
<p>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>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<script type="text/javascript" src = "scripts/main.js"></script>
|
<script type="text/javascript" src = "scripts/main.js"></script>
|
||||||
<script type="text/javascript" src = "../utils.js"></script>
|
<script type="text/javascript" src = "../js/utils.js"></script>
|
||||||
<script type="text/javascript" src = "../loadheader.js"></script>
|
<script type="text/javascript" src = "../js/icons.js"></script>
|
||||||
<script type="text/javascript" src = "../icons.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -14,11 +14,12 @@ const pdfs = new Map([
|
||||||
|
|
||||||
|
|
||||||
const changelog = new Map([
|
const changelog = new Map([
|
||||||
["7.0.8",
|
["WynnBuilder^2 (12 May 2022)",
|
||||||
[" + Created Changelog section in Wynnfo",
|
[
|
||||||
" + Added an empty cache + reload button to the right header",
|
" + Switched most of Wynnbuilder over to Bootstrap",
|
||||||
" - Deleted lack of on-page documentation",
|
" - Old UI",
|
||||||
]],
|
]
|
||||||
|
],
|
||||||
//[title ,[genre, filename, author(s), abstract/desc]]
|
//[title ,[genre, filename, author(s), abstract/desc]]
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
@ -116,25 +117,25 @@ function initSections() {
|
||||||
let main = document.getElementById("main");
|
let main = document.getElementById("main");
|
||||||
for (const sec of sections) {
|
for (const sec of sections) {
|
||||||
let div = document.createElement("div");
|
let div = document.createElement("div");
|
||||||
div.classList.add(["section"]);
|
div.classList.add("row", "my-2");
|
||||||
div.id = sec;
|
div.id = sec;
|
||||||
|
|
||||||
let secspan = document.createElement("span");
|
let secspan = document.createElement("span");
|
||||||
secspan.classList.add("span-flex", "up");
|
secspan.classList.add("row", "up");
|
||||||
div.appendChild(secspan);
|
div.appendChild(secspan);
|
||||||
let title = document.createElement("h2");
|
let title = document.createElement("div");
|
||||||
title.classList.add("indicator-title")
|
title.classList.add("col-10", "item-title", "text-start")
|
||||||
title.style.margin = "0 0 0";
|
title.style.margin = "0 0 0";
|
||||||
title.textContent = "Section: " + sec;
|
title.textContent = "Section: " + sec;
|
||||||
let indicator = document.createElement("img");
|
let indicator = document.createElement("div");
|
||||||
indicator.classList.add("indicator-img");
|
indicator.classList.add("col-auto", "fw-bold", "box-title");
|
||||||
indicator.src = "./media/indicator-down.png";
|
indicator.textContent = "V";
|
||||||
secspan.appendChild(title);
|
secspan.appendChild(title);
|
||||||
secspan.appendChild(indicator);
|
secspan.appendChild(indicator);
|
||||||
|
|
||||||
|
|
||||||
let section = document.createElement("section");
|
let section = document.createElement("section");
|
||||||
section.classList.add(["toggle-section"]);
|
section.classList.add("toggle-section");
|
||||||
section.id = sec + "-section";
|
section.id = sec + "-section";
|
||||||
section.style.display = "none";
|
section.style.display = "none";
|
||||||
div.appendChild(section);
|
div.appendChild(section);
|
||||||
|
|
@ -144,12 +145,13 @@ function initSections() {
|
||||||
if (secspan.classList.contains("up")) {
|
if (secspan.classList.contains("up")) {
|
||||||
secspan.classList.remove("up");
|
secspan.classList.remove("up");
|
||||||
secspan.classList.add("down");
|
secspan.classList.add("down");
|
||||||
indicator.src = "./media/indicator-up.png";
|
indicator.style.transform = 'rotate(180deg)';
|
||||||
|
|
||||||
section.style.display = "";
|
section.style.display = "";
|
||||||
} else {
|
} else {
|
||||||
secspan.classList.remove("down");
|
secspan.classList.remove("down");
|
||||||
secspan.classList.add("up");
|
secspan.classList.add("up");
|
||||||
indicator.src = "./media/indicator-down.png";
|
indicator.style.transform = 'rotate(0deg)';
|
||||||
section.style.display = "none";
|
section.style.display = "none";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue