Misc. UI fixes, move skillpoint summary up to top of page
This commit is contained in:
parent
f4aa0b212b
commit
76367a065a
4 changed files with 198 additions and 201 deletions
28
display.js
28
display.js
|
@ -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
326
index.html
|
@ -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
36
styles.css
|
@ -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
9
test.js
|
@ -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)){
|
||||
|
|
Loading…
Reference in a new issue