morphNon/wynnbuilder-idk
2
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Misc. UI fixes, move skillpoint summary up to top of page

Browse source
This commit is contained in:
b 2021-01-10 19:42:09 -06:00
parent f4aa0b212b
commit 76367a065a
4 changed files with 198 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
display.js
View file

@ -704,31 +704,27 @@ function displayDefenseStats(parent_elem,defenseStats){
//eledefs //eledefs
let eledefs = stats[5]; let eledefs = stats[5];
for (let i = 0; i < eledefs.length; i++){ for (let i = 0; i < eledefs.length; i++){
let row = document.createElement("tr");
let eledefElem = document.createElement("p");
eledefElem.classList.add("itemtable");
eledefElem.classList.add("itemp");
let eledefElemRow = document.createElement("tr"); let eledefElemRow = document.createElement("tr");
let eledefTitle = document.createElement("td"); let eledef = document.createElement("td");
eledef.classList.add("left")
let eledefTitle = document.createElement("b");
eledefTitle.textContent = damageClasses[i+1]; eledefTitle.textContent = damageClasses[i+1];
eledefTitle.classList.add(damageClasses[i+1]); eledefTitle.classList.add(damageClasses[i+1]);
let defense = document.createElement("td"); let defense = document.createElement("b");
defense.textContent = "Defense: "; defense.textContent = " Defense: ";
defense.classList.add("spaceLeft");
eledef.appendChild(eledefTitle);
eledef.appendChild(defense);
eledefElemRow.appendChild(eledef);
eledefElemRow.appendChild(eledefTitle);
eledefElemRow.appendChild(defense);
eledefElem.appendChild(eledefElemRow);
//"Defense: ";
let boost = document.createElement("td"); let boost = document.createElement("td");
boost.textContent = eledefs[i]; boost.textContent = eledefs[i];
boost.classList.add("right"); boost.classList.add("right");
eledefElemRow.appendChild(boost);
row.appendChild(eledefElem); statsTable.appendChild(eledefElemRow);
row.appendChild(boost);
statsTable.appendChild(row);
} }
//skp //skp
let defRow = document.createElement("tr"); let defRow = document.createElement("tr");
@ -862,7 +858,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
save_damages.push(averageDamage); save_damages.push(averageDamage);
} }
else if (part.type == "heal") { else if (part.type == "heal") {
let heal_amount = (part.strength * build.getDefenseStats()[0] * Math.max(0, Math.min(1.5, 1 + 0.05 * stats.get("wDamPct")))).toFixed(2); let heal_amount = (part.strength * build.getDefenseStats()[0] * Math.max(0, Math.min(1.5, 1 + 0.05 * stats.get("wDamPct")/100))).toFixed(2);
let healLabel = document.createElement("p"); let healLabel = document.createElement("p");
healLabel.textContent = heal_amount; healLabel.textContent = heal_amount;
healLabel.classList.add("damagep"); healLabel.classList.add("damagep");

326
index.html
View file

@ -14,198 +14,175 @@
<div class="header" id="header"> <div class="header" id="header">
Wynn build calculator Wynn build calculator
</div> </div>
<div class="center" id="header2"> <div class="summary">
<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> <div class="equipment" style="grid-column:1/span 3;grid-row:1">
<p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p> <div style="grid-column:1/span 2;grid-row:1">
</div> <table>
<div class="center" id="credits"> <tr>
<a href="credits.txt" class="link">Additional credits</a> <th class="center title">
</div> <label>Equipment</label>
<div class="equipment"> </th>
<div class="left" style="grid-column:1/span 2;grid-row:1"> <th class="center title">
<table> <label>Powdering</label>
<tr> </th>
<th class="center title"> </tr>
<label>Equipments</label> <tr>
</th> <td class="right">
<th class="center title"> <label for="helmet-choice">Helmet:</label>
<label>Powdering</label> <input list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
</th> <datalist id="helmet-items">
</tr> </datalist>
<tr> </td>
<td class="right"> <td class="right">
<br/> <label id="helmet-slots" for="helmet-powder">X slots</label>
<label for="helmet-choice">Helmet:</label> <input type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6"/>
<input list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/> </td>
<datalist id="helmet-items"> </tr>
</datalist> <tr>
</td> <td class="right">
<td> <label for="chestplate-choice">Chestplate:</label>
<div id="helmet-slots"> <input list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate" />
X slots <datalist id="chestplate-items">
</div> </datalist>
<div> </td>
<input type="text" id="helmet-powder" name="helmet-powder"/> <td class="right">
</div> <label id="chestplate-slots" for="chestplate-powder">X slots</label>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="chestplate-choice">Chestplate:</label>
<input list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate" />
<datalist id="chestplate-items">
</datalist>
</td>
<td>
<div id="chestplate-slots">
X slots
</div>
<div>
<input type="text" id="chestplate-powder" name="chestplate-powder" /> <input type="text" id="chestplate-powder" name="chestplate-powder" />
</div> </td>
</td> </tr>
</tr> <tr>
<tr> <td class="right">
<td class="right"> <label for="leggings-choice">Leggings:</label>
<br/> <input list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" />
<label for="leggings-choice">Leggings:</label> <datalist id="leggings-items">
<input list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" /> </datalist>
<datalist id="leggings-items"> </td>
</datalist> <td class="right">
</td> <label id="leggings-slots" for="leggings-powder">X slots</label>
<td>
<div id="leggings-slots">
X slots
</div>
<div>
<input type="text" id="leggings-powder" name="leggings-powder" /> <input type="text" id="leggings-powder" name="leggings-powder" />
</div> </td>
</td> </tr>
</tr> <tr>
<tr> <td class="right">
<td class="right"> <label for="boots-choice">Boots:</label>
<br/> <input list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" />
<label for="boots-choice">Boots:</label> <datalist id="boots-items">
<input list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" /> </datalist>
<datalist id="boots-items"> </td>
</datalist> <td class="right">
</td> <label id="boots-slots" for="boots-powder">X slots</label>
<td> <input type="text" id="boots-powder" name="boots-powder" />
<div id="boots-slots"> </td>
X slots </tr>
</div> <tr>
<div style="grid-column:1;grid-row:4"> <td class="right">
<input type="text" id="boots-powder" name="boots-powder"/> <br>
</div> <label for="weapon-choice">Weapon:</label>
</td> <input list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value=""/>
</tr> <datalist id="weapon-items">
<tr> </datalist>
<td class="right"> </td>
<br/> <td class="right">
<label for="ring1-choice">Ring 1:</label> <br>
<input list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1"/> <label id="weapon-slots" for="weapon-powder">X slots</label>
<datalist id="ring1-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="ring2-choice">Ring 2:</label>
<input list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" />
<datalist id="ring2-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="bracelet-choice">Bracelet:</label>
<input list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" />
<datalist id="bracelet-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="necklace-choice">Necklace:</label>
<input list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
<datalist id="necklace-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="weapon-choice">Weapon:</label>
<input list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value=""/>
<datalist id="weapon-items">
</datalist>
</td>
<td>
<div id="weapon-slots">
X slots
</div>
<div>
<input type="text" id="weapon-powder" name="weapon-powder" /> <input type="text" id="weapon-powder" name="weapon-powder" />
</div> </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td class="right"> <br/>
<br/> <button class = "button" id = "calc-button" onclick = "calculateBuild()">
<label for="level-choice">Level:</label> Update Items (Resets stats)
<input id="level-choice" name="level-choice" placeholder="106" value=""/> </button>
</td> </td>
<td> <td class="right">
</td> <br/>
</tr> <button class = "button" id = "reset-button" onclick = "resetFields()">
<tr> Reset
<td> </button>
<br/> </td>
<button class = "button" id = "calc-button" onclick = "calculateBuild()"> </tr>
Update Items (Resets stats) </table>
</button> </div>
</td> <div style="grid-column:3/span 1;grid-row:1">
<td> <table>
<br/> <tr>
<button class = "reset" id = "reset-button" onclick = "resetFields()"> <th class="center title">
Reset <label>Accessories</label>
</button> </th>
</td> </tr>
</tr> <tr>
</table> <td class="right">
<label for="ring1-choice">Ring 1:</label>
<input list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1"/>
<datalist id="ring1-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<label for="ring2-choice">Ring 2:</label>
<input list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" />
<datalist id="ring2-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<label for="bracelet-choice">Bracelet:</label>
<input list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" />
<datalist id="bracelet-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<label for="necklace-choice">Necklace:</label>
<input list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
<datalist id="necklace-items">
</datalist>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="level-choice">Level:</label>
<input id="level-choice" name="level-choice" placeholder="106" value=""/>
</td>
</tr>
</table>
</div>
<div class="center" style="grid-column:1/span 3;grid-row:2">
<br><br>
<div class="center" id="summary-box">
Summary:
</div>
</div>
</div> </div>
<div class="center" style="grid-column:3;grid-row:1"> <div class="center" style="grid-column:4">
<div class = "center build-overall" id = "build-overall"> <div class = "center build-overall" id = "build-overall">
<br/> <br/>
<div class = "center" id = "build-overall-stats"></div> <div class = "center" id = "build-overall-stats"></div>
</div> </div>
</div> </div>
<div class="center" style="grid-column:4;"> <div class="center" style="grid-column:5;">
<div class="spell-info" style="grid-row:1;"> <div class="spell-info">
<div class="center" id="build-melee-statsAvg">melee</div> <div class="center" id="build-melee-statsAvg">melee</div>
</div> </div>
<div class="spell-info" style="grid-row:1;"> <div class="spell-info">
<div class="center" id="spell0-infoAvg">spell1</div> <div class="center" id="spell0-infoAvg">spell1</div>
</div> </div>
<div class="spell-info" style="grid-row:2"> <div class="spell-info">
<div class="center" id="spell1-infoAvg">spell2</div> <div class="center" id="spell1-infoAvg">spell2</div>
</div> </div>
<div class="spell-info" style="grid-row:3"> <div class="spell-info">
<div class="center" id="spell2-infoAvg">spell3</div> <div class="center" id="spell2-infoAvg">spell3</div>
</div> </div>
<div class="spell-info" style="grid-row:4"> <div class="spell-info">
<div class="center" id="spell3-infoAvg">spell4</div> <div class="center" id="spell3-infoAvg">spell4</div>
</div> </div>
</div> </div>
</div> </div>
<div class="center" id="summary-box">
Summary:
</div>
<div class="skillpoints"> <div class="skillpoints">
<div class="center" style="grid-column:1;grid-row:1"> <div class="center" style="grid-column:1;grid-row:1">
<div> <div>
@ -341,6 +318,13 @@
<div class = "center" id = "set-info">Set info</div> <div class = "center" id = "set-info">Set info</div>
</div> </div>
</div> </div>
<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>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="skillpoints.js"></script> <script type="text/javascript" src="skillpoints.js"></script>

36
styles.css
View file

@ -1,5 +1,5 @@
.header { .header {
padding: 2%; padding: 2% 0% 0%;
text-align: center; text-align: center;
} }
@ -12,16 +12,32 @@ th, td {
padding-right: 20px; padding-right: 20px;
} }
.equipment { .nomargin {
padding: 4%; padding: 0px;
}
.summary {
padding: 2% 4% 4%;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(5, 1fr);
gap: 15px; gap: 5px;
grid-auto-rows: minmax(60px, auto); grid-auto-rows: minmax(60px, auto);
} }
div {
padding: 0%;
}
.equipment {
padding: 0%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
grid-template-rows: min-content auto;
}
.skillpoints { .skillpoints {
padding: 4%; padding: 0% 4% 2%;
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
gap: 5px; gap: 5px;
@ -94,10 +110,6 @@ a.link{
width: 94%; width: 94%;
margin-bottom: 16px; margin-bottom: 16px;
} }
/* VERY BAD. NEED FIX. */
.spaceLeft {
padding-left: 5px;
}
.itemp, .damagep { .itemp, .damagep {
margin: 2px 2%; margin: 2px 2%;
@ -230,7 +242,7 @@ input {
display: inline-block; display: inline-block;
} }
::placeholder{ ::placeholder{
color: #ddd; color: #aaa;
} }
/* Tier colors tier colors */ /* Tier colors tier colors */
.Normal{ .Normal{
@ -256,4 +268,4 @@ input {
} }
.restrict{ .restrict{
color: #ff006a; color: #ff006a;
} }

9
test.js
View file

@ -157,7 +157,12 @@ function init() {
for (const item of items) { for (const item of items) {
itemLists.get(item.type).push(item.displayName); itemLists.get(item.type).push(item.displayName);
itemMap.set(item.displayName, item); itemMap.set(item.displayName, item);
idMap.set(item.id, item.displayName); if (noneItems.includes(item)) {
idMap.set(item.id, "");
}
else {
idMap.set(item.id, item.displayName);
}
} }
for (const armorType of armorTypes) { for (const armorType of armorTypes) {
@ -450,7 +455,7 @@ function calculateBuildStats() {
let summarybox = document.getElementById("summary-box"); let summarybox = document.getElementById("summary-box");
summarybox.textContent = ""; summarybox.textContent = "";
let skpSummary = document.createElement("p"); let skpSummary = document.createElement("p");
skpSummary.textContent = "Summary: Assigned "+player_build.assigned_skillpoints+" skillpoints."; skpSummary.textContent = "Summary: Assigned "+player_build.assigned_skillpoints+" skillpoints. Total: ( " + player_build.total_skillpoints.join(" | ") + " )";
skpSummary.classList.add("itemp"); skpSummary.classList.add("itemp");
summarybox.append(skpSummary); summarybox.append(skpSummary);
if(player_build.assigned_skillpoints > levelToSkillPoints(player_build.level)){ if(player_build.assigned_skillpoints > levelToSkillPoints(player_build.level)){