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 sorted = this.mat_tiers.sort();
let sorted = this.mat_tiers.slice().sort();
//TODO - idfk how this works
if( sorted[0] == 1 && sorted[1] == 1) {
matmult = 1;

View file

@ -13,8 +13,32 @@
<title>WynnCrafter</title>
</head>
<body class="all">
<div class="header" id="header">
WynnBuilder Crafter
<div class="center">
<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 class = "container" display = "grid">
<div class = "crafter center" style = "grid-column:1;grid-row:1" >
@ -188,7 +212,8 @@
</div>
</div>
</div>
<div class = "center">
<footer>
<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>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">
<a href="credits.txt" class="link">Additional credits</a>
</div>
</footer>
</div>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="powders.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
*/

View file

@ -16,12 +16,34 @@
<title>WynnBuilder</title>
</head>
<body class="all">
<div class="header" id="header">
Wynn build calculator
<div class="center">
<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="header" id="help">
<a href="https://forums.wynncraft.com/threads/wynnbuilder-release-thread-and-some-damage-calculation-updates.281438">Forum thread (instructions/help)</a>
<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 class="summary">
<div class="equipment" style="grid-column:1/span 2;grid-row:1">
<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>
</div>
<div class = "center">
<footer>
<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>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
</div>
<div class="center" id="credits">
<a href="credits.txt" class="link">Additional credits</a>
</div>
</footer>
</div>
<script type="text/javascript" src="utils.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 {
padding: 2% 0% 0%;
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 {
font-family: 'Nunito',sans-serif;
font-weight: 700;
@ -17,7 +46,10 @@ th, td {
padding: 0px;
}
.nomarginp {
margin: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
}
div {
@ -129,6 +161,11 @@ table.center{
margin-left: auto;
margin-right: auto;
}
.headertable {
width: 98%;
margin-left: 1%;
margin-right: 1%;
}
.itemp, .damagep {
margin: 2px 2%;
padding: 0;
@ -334,7 +371,7 @@ button.toggleOn:hover {
color: transparent;
display: inline-block;
text-align: center;
transform: translateX(calc(50vw - 50%));
}
.Star {
@ -403,9 +440,9 @@ button.toggleOn:hover {
background: #110110;
width: min(200%, 75vw);
text-align: center;
border: 5px solid #BCBCBC;
border: 3px solid #BCBCBC;
border-radius: 10px;
padding: 5px 0;
padding: 0 0;
position: absolute;
z-index: 1;
}