formal header and footer made, header icons + links added, minor fix to crafted item material tier display

This commit is contained in:
ferricles 2021-01-23 13:05:22 -08:00
parent 57e6a52f9c
commit ff5bca8276
7 changed files with 123 additions and 33 deletions

View file

@ -93,7 +93,7 @@ class Craft{
*/ */
let matmult = 1; let matmult = 1;
let sorted = this.mat_tiers.sort(); let sorted = this.mat_tiers.slice().sort();
//TODO - idfk how this works //TODO - idfk how this works
if( sorted[0] == 1 && sorted[1] == 1) { if( sorted[0] == 1 && sorted[1] == 1) {
matmult = 1; matmult = 1;

View file

@ -13,8 +13,32 @@
<title>WynnCrafter</title> <title>WynnCrafter</title>
</head> </head>
<body class="all"> <body class="all">
<div class="header" id="header"> <div class="center">
WynnBuilder Crafter <header class = "header nomarginp">
<div class = "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>
</div>
<div class = "headercenter">
<div >
<p class = "itemp" id = "header">Wynn build calculator</p>
<p class="itemp" id="help">
<a class = "link" href="https://forums.wynncraft.com/threads/wynnbuilder-release-thread-and-some-damage-calculation-updates.281438">Forum thread (instructions/help)</a>
</p>
</div>
</div>
<div class = "headerright">
</div>
</header>
</div> </div>
<div class = "container" display = "grid"> <div class = "container" display = "grid">
<div class = "crafter center" style = "grid-column:1;grid-row:1" > <div class = "crafter center" style = "grid-column:1;grid-row:1" >
@ -188,7 +212,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class = "center">
<footer>
<div class="center" id="header2"> <div class="center" id="header2">
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with Atlas Inc (JavaScript required to function, nothing works without js)</p> <p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with Atlas Inc (JavaScript required to function, nothing works without js)</p>
<p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p> <p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
@ -196,7 +221,8 @@
<div class="center" id="credits"> <div class="center" id="credits">
<a href="credits.txt" class="link">Additional credits</a> <a href="credits.txt" class="link">Additional credits</a>
</div> </div>
</footer>
</div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.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>

View file

@ -9,7 +9,7 @@ console.log(url_tag);
const BUILD_VERSION = "6.9.7"; const BUILD_VERSION = "6.9.9";
/* /*
* END testing section * END testing section
*/ */

View file

@ -16,12 +16,34 @@
<title>WynnBuilder</title> <title>WynnBuilder</title>
</head> </head>
<body class="all"> <body class="all">
<div class="header" id="header"> <div class="center">
Wynn build calculator <header class = "header nomarginp">
<div class = "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>
</div> </div>
<div class="header" id="help"> <div class = "headercenter">
<a href="https://forums.wynncraft.com/threads/wynnbuilder-release-thread-and-some-damage-calculation-updates.281438">Forum thread (instructions/help)</a> <div >
<p class = "itemp" id = "header">Wynn build calculator</p>
<p class="itemp" id="help">
<a class = "link" href="https://forums.wynncraft.com/threads/wynnbuilder-release-thread-and-some-damage-calculation-updates.281438">Forum thread (instructions/help)</a>
</p>
</div> </div>
</div>
<div class = "headerright">
</div>
</header>
</div>
<div class="summary"> <div class="summary">
<div class="equipment" style="grid-column:1/span 2;grid-row:1"> <div class="equipment" style="grid-column:1/span 2;grid-row:1">
<div style="grid-column:1/span 2;grid-row:1;width: 40vw"> <div style="grid-column:1/span 2;grid-row:1;width: 40vw">
@ -959,12 +981,17 @@
<div class = "center" id = "int-info">Next Spell Costs</div> <div class = "center" id = "int-info">Next Spell Costs</div>
</div> </div>
</div> </div>
<div class = "center">
<footer>
<div class="center" id="header2"> <div class="center" id="header2">
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with Atlas Inc (JavaScript required to function, nothing works without js)</p> <p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with Atlas Inc (JavaScript required to function, nothing works without js)</p>
<p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
</div> </div>
<div class="center" id="credits"> <div class="center" id="credits">
<a href="credits.txt" class="link">Additional credits</a> <a href="credits.txt" class="link">Additional credits</a>
</div> </div>
</footer>
</div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="powders.js"></script> <script type="text/javascript" src="powders.js"></script>

BIN
media/icons/builder.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 934 B

BIN
media/icons/crafter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 718 B

View file

@ -1,8 +1,37 @@
.header { .header {
padding: 2% 0% 0%; padding: 2% 0% 0%;
text-align: center; text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.headericon {
/* JANK FIX IF CAN */
max-height: 48px;
max-width: 48px;
}
.headerleft {
display: inline-block;
width: 20%;
text-align: left;
}
.headercenter {
display: inline-block;
width: 60%;
text-align: center;
}
.headerright{
display: inline-block;
width: 20%;
text-align: right;
}
.iconlink {
position: relative;
left: 0%;
right: 0%;
height: 100%;
width: 100%;
} }
.all { .all {
font-family: 'Nunito',sans-serif; font-family: 'Nunito',sans-serif;
font-weight: 700; font-weight: 700;
@ -17,7 +46,10 @@ th, td {
padding: 0px; padding: 0px;
} }
.nomarginp { .nomarginp {
margin: 0px; margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px; padding: 0px;
} }
div { div {
@ -129,6 +161,11 @@ table.center{
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.headertable {
width: 98%;
margin-left: 1%;
margin-right: 1%;
}
.itemp, .damagep { .itemp, .damagep {
margin: 2px 2%; margin: 2px 2%;
padding: 0; padding: 0;
@ -334,7 +371,7 @@ button.toggleOn:hover {
color: transparent; color: transparent;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
transform: translateX(calc(50vw - 50%));
} }
.Star { .Star {
@ -403,16 +440,16 @@ button.toggleOn:hover {
background: #110110; background: #110110;
width: min(200%, 75vw); width: min(200%, 75vw);
text-align: center; text-align: center;
border: 5px solid #BCBCBC; border: 3px solid #BCBCBC;
border-radius: 10px; border-radius: 10px;
padding: 5px 0; padding: 0 0;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
.recipe { .recipe {
z-index: 1; z-index: 1;
} }
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
} }