This commit is contained in:
b 2021-03-17 08:39:12 -07:00
commit 83e1af7c5e
81 changed files with 185 additions and 281 deletions

View file

@ -16,42 +16,14 @@
<body class="all"> <body class="all">
<div class="center"> <div class="center">
<header class = "header nomarginp"> <header class = "header nomarginp">
<div class = "headerleft"> <div class = "headerleft" id = "headerleft">
<a href = "./" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/builder.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnBuilder</div>
</a>
<a href = "./crafter.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/crafter.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCrafter</div>
</a>
<a href = "./items.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/searcher.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnAtlas</div>
</a>
<a href = "./customizer.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/custom.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCustom</div>
</a>
<a href = "./map.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/compass.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnGPS</div>
</a>
</div> </div>
<div class = "headercenter"> <div class = "headercenter" id = "headercenter">
<div > <div >
<p class = "itemp" id = "header">Atlas???</p> <p class = "itemp" id = "header">Atlas???</p>
</div> </div>
</div> </div>
<div class = "headerright"> <div class = "headerright" id = "headerright">
<button class = "atlas" onclick = "atlasClick()">
<img src = "favicon.png"/>
</button>
</div> </div>
</header> </header>
</div> </div>
@ -61,7 +33,9 @@
<div class = "center bodydiv" id = "bodydiv"> <div class = "center bodydiv" id = "bodydiv">
</div> </div>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
<script type="text/javascript" src="atlas.js"></script> <script type="text/javascript" src="atlas.js"></script>
</body> </body>
</html> </html>

View file

@ -9,47 +9,21 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="wide.css"/> <link rel="stylesheet" media="screen and (min-width: 1100px)" href="wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.css"/> <link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.css"/>
<link rel="icon" href="./media/icons/crafter.png"> <link rel="icon" href="./media/icons/new/crafter.png">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<title>WynnCrafter</title> <title>WynnCrafter</title>
</head> </head>
<body class="all"> <body class="all">
<div class="center"> <div class="center">
<header class = "header nomarginp"> <header class = "header nomarginp">
<div class = "headerleft"> <div class = "headerleft" id = "headerleft">
<a href = "./" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/builder.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnBuilder</div>
</a>
<a href = "./crafter.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/crafter.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCrafter</div>
</a>
<a href = "./items.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/searcher.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnAtlas</div>
</a>
<a href = "./customizer.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/custom.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCustom</div>
</a>
<a href = "./map.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/compass.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnGPS</div>
</a>
</div> </div>
<div class = "headercenter"> <div class = "headercenter" id = "headercenter">
<div > <div >
<p class = "itemp" id = "header">WynnCrafter</p> <p class = "itemp" id = "header">WynnCrafter</p>
</div> </div>
</div> </div>
<div class = "headerright"> <div class = "headerright" id = "headerright">
</div> </div>
</header> </header>
</div> </div>
@ -240,6 +214,8 @@
</footer> </footer>
</div> </div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
<script type="text/javascript" src="powders.js"></script> <script type="text/javascript" src="powders.js"></script>
<script type="text/javascript" src="build_utils.js"></script> <script type="text/javascript" src="build_utils.js"></script>
<script type="text/javascript" src="skillpoints.js"></script> <script type="text/javascript" src="skillpoints.js"></script>

View file

@ -16,40 +16,14 @@
<body class="all"> <body class="all">
<div class="center"> <div class="center">
<header class = "header nomarginp"> <header class = "header nomarginp">
<div class = "headerleft"> <div class = "headerleft" id = "headerleft">
<a href = "./" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/builder.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnBuilder</div>
</a>
<a href = "./crafter.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/crafter.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCrafter</div>
</a>
<a href = "./items.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/searcher.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnAtlas</div>
</a>
<a href = "./customizer.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/custom.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCustom</div>
</a>
<a href = "./map.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/compass.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnGPS</div>
</a>
</div> </div>
<div class = "headercenter"> <div class = "headercenter" id = "headercenter">
<div> <div>
<p class = "itemp" id = "header">WynnCustom</p> <p class = "itemp" id = "header">WynnCustom</p>
</div> </div>
</div> </div>
<div class = "headerright"> <div class = "headerright" id = "headerright">
</div> </div>
</header> </header>
</div> </div>
@ -1899,6 +1873,8 @@
</footer> </footer>
</div> </div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
<script type="text/javascript" src="powders.js"></script> <script type="text/javascript" src="powders.js"></script>
<script type="text/javascript" src="build_utils.js"></script> <script type="text/javascript" src="build_utils.js"></script>
<script type="text/javascript" src="skillpoints.js"></script> <script type="text/javascript" src="skillpoints.js"></script>

View file

@ -36,9 +36,6 @@
margin-bottom: 5px; margin-bottom: 5px;
padding-bottom: 5px; padding-bottom: 5px;
} }
.button {
padding: 2%;
}
.sticky-box { .sticky-box {
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;

View file

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

34
icons.js Normal file
View file

@ -0,0 +1,34 @@
//which icons to use
let window_storage = window.localStorage;
console.log(window_storage);
icon_state_stored = window_storage.getItem("newicons");
newIcons = true;
if (icon_state_stored === "false") {toggleIcons()}
/** Toggle icons on the ENTIRE page.
*
*/
function toggleIcons() {
newIcons = !newIcons;
let imgs = document.getElementsByTagName("IMG");
let favicon = document.querySelector("link[rel~='icon']");
let toggleiconbutton = document.getElementById("toggle-icon-button");
if (newIcons) { //switch to new
favicon.href = favicon.href.replace("media/icons/old","media/icons/new");
for (const img of imgs) {
if (img.src.includes("media/icons/old")) {img.src = img.src.replace("media/icons/old","media/icons/new");}
if (img.src.includes("media/items/old")) {img.src = img.src.replace("media/items/old","media/items/new");}
}
toggleiconbutton.textContent = "Use Old Icons";
window_storage.setItem("newicons","true");
} else { //switch to old
favicon.href = favicon.href.replace("media/icons/new","media/icons/old");
for (const img of imgs) {
if (img.src.includes("media/icons/new")) {img.src = img.src.replace("media/icons/new","media/icons/old");}
if (img.src.includes("media/items/new")) {img.src = img.src.replace("media/items/new","media/items/old");}
}
toggleiconbutton.textContent = "Use New Icons";
window_storage.setItem("newicons","false");
}
}

View file

@ -12,41 +12,16 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="wide.css"/> <link rel="stylesheet" media="screen and (min-width: 1100px)" href="wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.css"/> <link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.css"/>
<link rel="icon" href="./media/icons/builder.png"> <link rel="icon" href="./media/icons/new/builder.png">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<title>WynnBuilder</title> <title>WynnBuilder</title>
</head> </head>
<body class="all"> <body class="all">
<div class="center"> <div class="center">
<header class = "header nomarginp"> <header class = "header nomarginp">
<div class = "headerleft"> <div class = "headerleft" id = "headerleft">
<a href = "./" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/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/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/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/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/compass.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnGPS</div>
</a>
</div> </div>
<div class = "headercenter"> <div class = "headercenter" id = "headercenter">
<div > <div >
<p class = "itemp" id = "header">Wynn build calculator</p> <p class = "itemp" id = "header">Wynn build calculator</p>
<p class="itemp" id="help"> <p class="itemp" id="help">
@ -54,8 +29,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class = "headerright"> <div class = "headerright" id = "headerright">
</div> </div>
</header> </header>
</div> </div>
@ -1009,6 +983,8 @@
</div> </div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
<script type="text/javascript" src="powders.js"></script> <script type="text/javascript" src="powders.js"></script>
<script type="text/javascript" src="build_utils.js"></script> <script type="text/javascript" src="build_utils.js"></script>
<script type="text/javascript" src="skillpoints.js"></script> <script type="text/javascript" src="skillpoints.js"></script>

View file

@ -19,39 +19,14 @@
<body class="all"> <body class="all">
<div class="center"> <div class="center">
<header class = "header nomarginp"> <header class = "header nomarginp">
<div class = "headerleft"> <div class = "headerleft" id = "headerleft">
<a href = "./" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/builder.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnBuilder</div>
</a>
<a href = "./crafter.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/crafter.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCrafter</div>
</a>
<a href = "./items.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/searcher.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnAtlas</div>
</a>
<a href = "./customizer.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/custom.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCustom</div>
</a>
<a href = "./map.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/compass.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnGPS</div>
</a>
</div> </div>
<div class = "headercenter"> <div class = "headercenter" id = "headercenter">
<div > <div >
<p class = "itemp" id = "header">Item Info</p> <p class = "itemp" id = "header">Item Info</p>
</div> </div>
</div> </div>
<div class = "headerright"> <div class = "headerright" id = "headerright">
</div> </div>
</header> </header>
</div> </div>
@ -73,6 +48,8 @@
</div> </div>
</div> </div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
<script type="text/javascript" src="build_utils.js"></script> <script type="text/javascript" src="build_utils.js"></script>
<script type="text/javascript" src="damage_calc.js"></script> <script type="text/javascript" src="damage_calc.js"></script>
<script type="text/javascript" src="powders.js"></script> <script type="text/javascript" src="powders.js"></script>

View file

@ -13,46 +13,21 @@
<link rel="stylesheet" href="items.css"> <link rel="stylesheet" href="items.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="items-wide.css"/> <link rel="stylesheet" media="screen and (min-width: 1100px)" href="items-wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="items-narrow.css"/> <link rel="stylesheet" media="screen and (max-width: 1099px)" href="items-narrow.css"/>
<link rel="icon" href="./media/icons/searcher.png"> <link rel="icon" href="./media/icons/new/searcher.png">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<title>Wynn Clientside</title> <title>Wynn Clientside</title>
</head> </head>
<body class="all"> <body class="all">
<div class="center"> <div class="center">
<header class = "header nomarginp"> <header class = "header nomarginp">
<div class = "headerleft"> <div class = "headerleft" id = "headerleft">
<a href = "./" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/builder.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnBuilder</div>
</a>
<a href = "./crafter.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/crafter.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCrafter</div>
</a>
<a href = "./items.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/searcher.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnAtlas</div>
</a>
<a href = "./customizer.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/custom.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCustom</div>
</a>
<a href = "./map.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/compass.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnGPS</div>
</a>
</div> </div>
<div class = "headercenter"> <div class = "headercenter" id = "headercenter">
<div > <div >
<p class = "itemp" id = "header">WynnAtlas</p> <p class = "itemp" id = "header">WynnAtlas</p>
</div> </div>
</div> </div>
<div class = "headerright"> <div class = "headerright" id = "headerright">
<div class="center" id="advanced"> <div class="center" id="advanced">
<a href="./items_2.html" class = "link">Advanced Search</a> <a href="./items_2.html" class = "link">Advanced Search</a>
</div> </div>
@ -147,6 +122,8 @@
</div> </div>
</div> </div>
<script type="text/javascript" src="/utils.js"></script> <script type="text/javascript" src="/utils.js"></script>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
<script type="text/javascript" src="/build_utils.js"></script> <script type="text/javascript" src="/build_utils.js"></script>
<script type="text/javascript" src="/damage_calc.js"></script> <script type="text/javascript" src="/damage_calc.js"></script>
<script type="text/javascript" src="/display.js"></script> <script type="text/javascript" src="/display.js"></script>

View file

@ -7,45 +7,20 @@
<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 rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="icon" href="./media/icons/searcher.png"> <link rel="icon" href="./media/icons/new/searcher.png">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<title>WynnAtlas</title> <title>WynnAtlas</title>
</head> </head>
<body class="all" style="overflow-y: scroll"> <body class="all" style="overflow-y: scroll">
<header class="header nomarginp"> <header class="header nomarginp">
<div class="headerleft"> <div class="headerleft" id = "headerleft">
<a href="./" class="nomarginp iconlink tooltip">
<img src="/media/icons/builder.png" class="left linkoptions headericon">
</img>
<div class="tooltiptext center">WynnBuilder</div>
</a>
<a href="./crafter.html" class="nomarginp iconlink tooltip">
<img src="/media/icons/crafter.png" class="left linkoptions headericon">
</img>
<div class="tooltiptext center">WynnCrafter</div>
</a>
<a href="./items_2.html" class="nomarginp iconlink tooltip">
<img src="/media/icons/searcher.png" class="left linkoptions headericon">
</img>
<div class="tooltiptext center">WynnAtlas</div>
</a>
<a href="./customizer.html" class="nomarginp iconlink tooltip">
<img src="/media/icons/custom.png" class="left linkoptions headericon">
</img>
<div class="tooltiptext center">WynnCustom</div>
</a>
<a href = "./map.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/compass.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnGPS</div>
</a>
</div> </div>
<div class="headercenter"> <div class="headercenter" id = "headercenter">
<div> <div>
<p class="itemp" id="header">WynnAtlas</p> <p class="itemp" id="header">WynnAtlas</p>
</div> </div>
</div> </div>
<div class="headerright"> <div class="headerright" id = "headerright">
<div class="center" id="basic"> <div class="center" id="basic">
<a href="./items.html" class="link">Basic Search</a> <a href="./items.html" class="link">Basic Search</a>
</div> </div>
@ -84,6 +59,8 @@
</div> </div>
</div> </div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
<script type="text/javascript" src="build_utils.js"></script> <script type="text/javascript" src="build_utils.js"></script>
<script type="text/javascript" src="damage_calc.js"></script> <script type="text/javascript" src="damage_calc.js"></script>
<script type="text/javascript" src="display.js"></script> <script type="text/javascript" src="display.js"></script>

View file

@ -7,40 +7,21 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="article.css"> <link rel="stylesheet" href="article.css">
<link rel="icon" href="./media/icons/searcher.png"> <link rel="icon" href="./media/icons/new/searcher.png">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<title>WynnAtlas</title> <title>WynnAtlas</title>
</head> </head>
<body class="all" style="overflow-y: scroll"> <body class="all" style="overflow-y: scroll">
<header class="header nomarginp"> <header class="header nomarginp">
<div class="headerleft"> <div class="headerleft" id = "headerleft">
<a href="./" class="nomarginp iconlink tooltip">
<img src="/media/icons/builder.png" class="left linkoptions headericon">
</img>
<div class="tooltiptext center">WynnBuilder</div>
</a>
<a href="./crafter.html" class="nomarginp iconlink tooltip">
<img src="/media/icons/crafter.png" class="left linkoptions headericon">
</img>
<div class="tooltiptext center">WynnCrafter</div>
</a>
<a href="./items_2.html" class="nomarginp iconlink tooltip">
<img src="/media/icons/searcher.png" class="left linkoptions headericon">
</img>
<div class="tooltiptext center">WynnAtlas</div>
</a>
<a href="./customizer.html" class="nomarginp iconlink tooltip">
<img src="/media/icons/custom.png" class="left linkoptions headericon">
</img>
<div class="tooltiptext center">WynnCustom</div>
</a>
</div> </div>
<div class="headercenter"> <div class="headercenter" id = "headercenter">
<div> <div>
<p class="itemp" id="header">WynnAtlas</p> <p class="itemp" id="header">WynnAtlas</p>
</div> </div>
</div> </div>
<div class="headerright"></div> <div class="headerright" id = "headerright">
</div>
</header> </header>
<main> <main>
<div class="full-width"> <div class="full-width">
@ -227,5 +208,7 @@
docsFns.append(genDocEntry(entry[0], entry[1], null, entry[2])); docsFns.append(genDocEntry(entry[0], entry[1], null, entry[2]));
} }
</script> </script>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
</body> </body>
</html> </html>

77
loadheader.js Normal file
View file

@ -0,0 +1,77 @@
/*
<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 = new Map([
["index",["builder","WynnBuilder"]],
["crafter",["crafter","WynnCrafter"]],
["items",["searcher","WynnAtlas"]],
["customizer",["custom","WynnCustom"]],
["map",["compass","WynnGPS"]]
]);
function setHeaders() {
let headerleft = document.getElementById("headerleft");
let headerright = document.getElementById("headerright");
for (const [name,data] of header_icon_map) {
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("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);
console.log("Set Header");
}
setHeaders();

View file

@ -13,7 +13,7 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="screen and (min-width: 900px)" href="map-wide.css"/> <link rel="stylesheet" media="screen and (min-width: 900px)" href="map-wide.css"/>
<link rel="stylesheet" media="screen and (max-width: 899px)" href="map-narrow.css"/> <link rel="stylesheet" media="screen and (max-width: 899px)" href="map-narrow.css"/>
<link rel="icon" href="./media/icons/compass2.png"> <link rel="icon" href="./media/icons/new/compass2.png">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<!--Leaflet for map--> <!--Leaflet for map-->
@ -29,40 +29,14 @@
<body class="all"> <body class="all">
<div class="center"> <div class="center">
<header class = "header nomarginp"> <header class = "header nomarginp">
<div class = "headerleft"> <div class = "headerleft" id = "headerleft">
<a href = "./" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/builder.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnBuilder</div>
</a>
<a href = "./crafter.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/crafter.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCrafter</div>
</a>
<a href = "./items.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/searcher.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnAtlas</div>
</a>
<a href = "./customizer.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/custom.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnCustom</div>
</a>
<a href = "./map.html" class = "nomarginp iconlink tooltip">
<img src = "/media/icons/compass.png" class = "left linkoptions headericon">
</img>
<div class = "tooltiptext center">WynnGPS</div>
</a>
</div> </div>
<div class = "headercenter"> <div class = "headercenter" id = "headercenter">
<div> <div>
<p class = "itemp" id = "header">WynnGPS</p> <p class = "itemp" id = "header">WynnGPS</p>
</div> </div>
</div> </div>
<div class = "headerright"> <div class = "headerright" id = "headerright">
<p class = "center">Right click to place marker.</p> <p class = "center">Right click to place marker.</p>
</div> </div>
</header> </header>
@ -82,12 +56,12 @@
<p class = "nomargin" display = "grid-item-3">Z</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-x" display = "grid-item-4"></p>
<p class = "nomargin" id = "coord-img" display = "grid-item-5"> <p class = "nomargin" id = "coord-img" display = "grid-item-5">
<img src = "/media/icons/compass2.png" alt style = "max-width:32px; max-height:32px"/> <img src = "/media/icons/new/compass2.png" alt style = "max-width:32px; max-height:32px"/>
</p> </p>
<p class = "nomargin" id = "coord-z" display = "grid-item-6"></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-x" display = "none"></p>
<p class = "nomargin" id = "marker-coord-img" display = "none"> <p class = "nomargin" id = "marker-coord-img" display = "none">
<img src = "/media/icons/marker.png" alt style = "max-width:32px; max-height:32px"/> <img src = "/media/icons/new/marker.png" alt style = "max-width:32px; max-height:32px"/>
</p> </p>
<p class = "nomargin" id = "marker-coord-z" display = "none"></p> <p class = "nomargin" id = "marker-coord-z" display = "none"></p>
</div> </div>
@ -122,13 +96,13 @@
<div id = "resources-key" style = "display:none"> <div id = "resources-key" style = "display:none">
<p class = "left">Resource Key:</p> <p class = "left">Resource Key:</p>
<ul id = "resourcelist"> <ul id = "resourcelist">
<li><img src= "media/icons/Emeralds.png" style ="max-width:16px;max-height:16px" class = "Emeralds"/> Emeralds</li> <li><img src= "media/icons/new/Emeralds.png" style ="max-width:16px;max-height:16px" class = "Emeralds"/> Emeralds</li>
<li><img src= "media/icons/Ore.png" style ="max-width:16px;max-height:16px" class = "Ore"/> Ore</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/Wood.png" style ="max-width:16px;max-height:16px" class = "Wood"/> Wood</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/Crops.png" style ="max-width:16px;max-height:16px" class = "Crops"/> Crops</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/Fish.png" style ="max-width:16px;max-height:16px" class = "Fish"/> Fish</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/Chest.png" style ="max-width:16px;max-height:16px" class = "Wood"/> Storage</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/Gears.png" style ="max-width:16px;max-height:16px" class = "Ore"/> Production</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> <li>Double image means double generation</li>
</ul> </ul>
@ -142,6 +116,8 @@
</div> </div>
<script type = "text/javascript" src="utils.js"></script> <script type = "text/javascript" src="utils.js"></script>
<script type="text/javascript" src="loadheader.js"></script>
<script type="text/javascript" src="icons.js"></script>
<script type = "text/javascript" src="load_map.js"></script> <script type = "text/javascript" src="load_map.js"></script>
<script type = "text/javascript" src="map.js"></script> <script type = "text/javascript" src="map.js"></script>
</body> </body>

12
map.js
View file

@ -139,10 +139,10 @@ function placeMarker(lat, lng) {
} }
marker = L.marker([lat, lng], {icon: L.icon({ marker = L.marker([lat, lng], {icon: L.icon({
iconUrl: '/media/icons/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/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"
@ -391,10 +391,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/"+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/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) {
@ -403,10 +403,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/"+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/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);
} }

View file

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View file

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

Before

Width:  |  Height:  |  Size: 478 B

After

Width:  |  Height:  |  Size: 478 B

View file

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

Before

Width:  |  Height:  |  Size: 470 B

After

Width:  |  Height:  |  Size: 470 B

View file

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 358 B

View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View file

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View file

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View file

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View file

Before

Width:  |  Height:  |  Size: 323 B

After

Width:  |  Height:  |  Size: 323 B

View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View file

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View file

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View file

Before

Width:  |  Height:  |  Size: 6 KiB

After

Width:  |  Height:  |  Size: 6 KiB

View file

Before

Width:  |  Height:  |  Size: 81 B

After

Width:  |  Height:  |  Size: 81 B

BIN
media/icons/old/Chest.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
media/icons/old/Crops.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 B

BIN
media/icons/old/Fish.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
media/icons/old/Gears.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
media/icons/old/Ore.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 470 B

BIN
media/icons/old/Wood.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

Before

Width:  |  Height:  |  Size: 934 B

After

Width:  |  Height:  |  Size: 934 B

BIN
media/icons/old/compass.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 794 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 731 B

View file

Before

Width:  |  Height:  |  Size: 718 B

After

Width:  |  Height:  |  Size: 718 B

BIN
media/icons/old/cursor.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 323 B

View file

Before

Width:  |  Height:  |  Size: 923 B

After

Width:  |  Height:  |  Size: 923 B

BIN
media/icons/old/marker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 816 B

View file

Before

Width:  |  Height:  |  Size: 924 B

After

Width:  |  Height:  |  Size: 924 B

BIN
media/icons/old/shadow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 B

View file

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View file

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View file

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View file

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View file

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View file

Before

Width:  |  Height:  |  Size: 930 B

After

Width:  |  Height:  |  Size: 930 B

View file

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View file

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View file

Before

Width:  |  Height:  |  Size: 650 B

After

Width:  |  Height:  |  Size: 650 B

View file

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View file

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View file

Before

Width:  |  Height:  |  Size: 705 B

After

Width:  |  Height:  |  Size: 705 B

View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View file

Before

Width:  |  Height:  |  Size: 223 B

After

Width:  |  Height:  |  Size: 223 B

View file

Before

Width:  |  Height:  |  Size: 418 B

After

Width:  |  Height:  |  Size: 418 B

View file

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 588 B

View file

Before

Width:  |  Height:  |  Size: 677 B

After

Width:  |  Height:  |  Size: 677 B

View file

Before

Width:  |  Height:  |  Size: 484 B

After

Width:  |  Height:  |  Size: 484 B

View file

Before

Width:  |  Height:  |  Size: 559 B

After

Width:  |  Height:  |  Size: 559 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 930 B

View file

Before

Width:  |  Height:  |  Size: 395 B

After

Width:  |  Height:  |  Size: 395 B

View file

Before

Width:  |  Height:  |  Size: 411 B

After

Width:  |  Height:  |  Size: 411 B

View file

Before

Width:  |  Height:  |  Size: 682 B

After

Width:  |  Height:  |  Size: 682 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 650 B

View file

Before

Width:  |  Height:  |  Size: 713 B

After

Width:  |  Height:  |  Size: 713 B

View file

Before

Width:  |  Height:  |  Size: 622 B

After

Width:  |  Height:  |  Size: 622 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 B

View file

Before

Width:  |  Height:  |  Size: 596 B

After

Width:  |  Height:  |  Size: 596 B

View file

Before

Width:  |  Height:  |  Size: 568 B

After

Width:  |  Height:  |  Size: 568 B

View file

@ -398,8 +398,9 @@ button.toggleOn:hover {
} }
.funnynumber { .funnynumber {
background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00); -webkit-background-clip: text; background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00);
color: transparent; color: transparent;
-webkit-background-clip: text;
display: inline-block; display: inline-block;
text-align: center; text-align: center;

View file

@ -16,9 +16,12 @@ const tiers = ["Normal", "Unique", "Rare", "Legendary", "Fabled", "Mythic", "Set
const types = armorTypes.concat(accessoryTypes).concat(weaponTypes).concat(consumableTypes).map(x => x.substring(0,1).toUpperCase() + x.substring(1)); const types = armorTypes.concat(accessoryTypes).concat(weaponTypes).concat(consumableTypes).map(x => x.substring(0,1).toUpperCase() + x.substring(1));
let itemTypes = armorTypes.concat(accessoryTypes).concat(weaponTypes); let itemTypes = armorTypes.concat(accessoryTypes).concat(weaponTypes);
let elementIcons = ["\u2724","\u2726", "\u2749", "\u2739", "\u274b" ]; let elementIcons = ["\u2724","\u2726", "\u2749", "\u2739", "\u274b" ];
let skpReqs = skp_order.map(x => x + "Req"); let skpReqs = skp_order.map(x => x + "Req");
function clamp(num, low, high){ function clamp(num, low, high){
return Math.min(Math.max(num, low), high); return Math.min(Math.max(num, low), high);
} }