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
let eledefs = stats[5];
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 eledefTitle = document.createElement("td");
let eledef = document.createElement("td");
eledef.classList.add("left")
let eledefTitle = document.createElement("b");
eledefTitle.textContent = damageClasses[i+1];
eledefTitle.classList.add(damageClasses[i+1]);
let defense = document.createElement("td");
defense.textContent = "Defense: ";
defense.classList.add("spaceLeft");
let defense = document.createElement("b");
defense.textContent = " Defense: ";
eledef.appendChild(eledefTitle);
eledef.appendChild(defense);
eledefElemRow.appendChild(eledef);
eledefElemRow.appendChild(eledefTitle);
eledefElemRow.appendChild(defense);
eledefElem.appendChild(eledefElemRow);
//"Defense: ";
let boost = document.createElement("td");
boost.textContent = eledefs[i];
boost.classList.add("right");
eledefElemRow.appendChild(boost);
row.appendChild(eledefElem);
row.appendChild(boost);
statsTable.appendChild(row);
statsTable.appendChild(eledefElemRow);
}
//skp
let defRow = document.createElement("tr");
@ -862,7 +858,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
save_damages.push(averageDamage);
}
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");
healLabel.textContent = heal_amount;
healLabel.classList.add("damagep");

326
index.html
View file

@ -14,198 +14,175 @@
<div class="header" id="header">
Wynn build calculator
</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>
<div class="equipment">
<div class="left" style="grid-column:1/span 2;grid-row:1">
<table>
<tr>
<th class="center title">
<label>Equipments</label>
</th>
<th class="center title">
<label>Powdering</label>
</th>
</tr>
<tr>
<td class="right">
<br/>
<label for="helmet-choice">Helmet:</label>
<input list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
<datalist id="helmet-items">
</datalist>
</td>
<td>
<div id="helmet-slots">
X slots
</div>
<div>
<input type="text" id="helmet-powder" name="helmet-powder"/>
</div>
</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>
<div class="summary">
<div class="equipment" style="grid-column:1/span 3;grid-row:1">
<div style="grid-column:1/span 2;grid-row:1">
<table>
<tr>
<th class="center title">
<label>Equipment</label>
</th>
<th class="center title">
<label>Powdering</label>
</th>
</tr>
<tr>
<td class="right">
<label for="helmet-choice">Helmet:</label>
<input list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
<datalist id="helmet-items">
</datalist>
</td>
<td class="right">
<label id="helmet-slots" for="helmet-powder">X slots</label>
<input type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6"/>
</td>
</tr>
<tr>
<td class="right">
<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 class="right">
<label id="chestplate-slots" for="chestplate-powder">X slots</label>
<input type="text" id="chestplate-powder" name="chestplate-powder" />
</div>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="leggings-choice">Leggings:</label>
<input list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" />
<datalist id="leggings-items">
</datalist>
</td>
<td>
<div id="leggings-slots">
X slots
</div>
<div>
</td>
</tr>
<tr>
<td class="right">
<label for="leggings-choice">Leggings:</label>
<input list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" />
<datalist id="leggings-items">
</datalist>
</td>
<td class="right">
<label id="leggings-slots" for="leggings-powder">X slots</label>
<input type="text" id="leggings-powder" name="leggings-powder" />
</div>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="boots-choice">Boots:</label>
<input list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" />
<datalist id="boots-items">
</datalist>
</td>
<td>
<div id="boots-slots">
X slots
</div>
<div style="grid-column:1;grid-row:4">
<input type="text" id="boots-powder" name="boots-powder"/>
</div>
</td>
</tr>
<tr>
<td class="right">
<br/>
<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">
<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>
</td>
</tr>
<tr>
<td class="right">
<label for="boots-choice">Boots:</label>
<input list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" />
<datalist id="boots-items">
</datalist>
</td>
<td class="right">
<label id="boots-slots" for="boots-powder">X slots</label>
<input type="text" id="boots-powder" name="boots-powder" />
</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 class="right">
<br>
<label id="weapon-slots" for="weapon-powder">X slots</label>
<input type="text" id="weapon-powder" name="weapon-powder" />
</div>
</td>
</tr>
<tr>
<td class="right">
<br/>
<label for="level-choice">Level:</label>
<input id="level-choice" name="level-choice" placeholder="106" value=""/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<br/>
<button class = "button" id = "calc-button" onclick = "calculateBuild()">
Update Items (Resets stats)
</button>
</td>
<td>
<br/>
<button class = "reset" id = "reset-button" onclick = "resetFields()">
Reset
</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br/>
<button class = "button" id = "calc-button" onclick = "calculateBuild()">
Update Items (Resets stats)
</button>
</td>
<td class="right">
<br/>
<button class = "button" id = "reset-button" onclick = "resetFields()">
Reset
</button>
</td>
</tr>
</table>
</div>
<div style="grid-column:3/span 1;grid-row:1">
<table>
<tr>
<th class="center title">
<label>Accessories</label>
</th>
</tr>
<tr>
<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 class="center" style="grid-column:3;grid-row:1">
<div class="center" style="grid-column:4">
<div class = "center build-overall" id = "build-overall">
<br/>
<div class = "center" id = "build-overall-stats"></div>
</div>
</div>
<div class="center" style="grid-column:4;">
<div class="spell-info" style="grid-row:1;">
<div class="center" style="grid-column:5;">
<div class="spell-info">
<div class="center" id="build-melee-statsAvg">melee</div>
</div>
<div class="spell-info" style="grid-row:1;">
<div class="spell-info">
<div class="center" id="spell0-infoAvg">spell1</div>
</div>
<div class="spell-info" style="grid-row:2">
<div class="spell-info">
<div class="center" id="spell1-infoAvg">spell2</div>
</div>
<div class="spell-info" style="grid-row:3">
<div class="spell-info">
<div class="center" id="spell2-infoAvg">spell3</div>
</div>
<div class="spell-info" style="grid-row:4">
<div class="spell-info">
<div class="center" id="spell3-infoAvg">spell4</div>
</div>
</div>
</div>
<div class="center" id="summary-box">
Summary:
</div>
<div class="skillpoints">
<div class="center" style="grid-column:1;grid-row:1">
<div>
@ -341,6 +318,13 @@
<div class = "center" id = "set-info">Set info</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="skillpoints.js"></script>

36
styles.css
View file

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

9
test.js
View file

@ -157,7 +157,12 @@ function init() {
for (const item of items) {
itemLists.get(item.type).push(item.displayName);
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) {
@ -450,7 +455,7 @@ function calculateBuildStats() {
let summarybox = document.getElementById("summary-box");
summarybox.textContent = "";
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");
summarybox.append(skpSummary);
if(player_build.assigned_skillpoints > levelToSkillPoints(player_build.level)){