split optimizer page results into two
This commit is contained in:
parent
6927375d1d
commit
3d7ddeb87a
@ -36,12 +36,12 @@
|
||||
<hr>
|
||||
|
||||
<li>
|
||||
<label for="max-equip-load"><b>Max. Equip Load</b></label>
|
||||
<label for="max-equip-load">Max. Equip Load</label>
|
||||
<input style="max-width: 50px" class="stat" id="max-equip-load" type="number"
|
||||
onchange="update()" min=0 step=0.1 value=30>
|
||||
</li>
|
||||
<li>
|
||||
<label for="current-equip-load"><b>Current Equip Load</b></label>
|
||||
<label for="current-equip-load">Current Equip Load</label>
|
||||
<input style="max-width: 50px" class="stat" id="current-equip-load" type="number"
|
||||
onchange="update()" min=0 step=0.1 value=0>
|
||||
</li>
|
||||
@ -182,47 +182,39 @@
|
||||
<button id="clear-equipment" onclick="clearEquipment()">Clear Locked Equipment</button>
|
||||
</li>
|
||||
<li>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Headgear</th>
|
||||
<th>Chestpiece</th>
|
||||
<th>Gauntlets</th>
|
||||
<th>Leggings</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<template id="locked-option">
|
||||
<option value="">Placeholder</option>
|
||||
</template>
|
||||
<td>
|
||||
<select type="text" id="select-helmet" name="locked-equipment"
|
||||
onchange="update()">
|
||||
|
||||
<div class="select">
|
||||
<div>
|
||||
<label for="select-helmet">Helmet</label>
|
||||
<select type="text" id="select-helmet" name="locked-equipment" onchange="update()">
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select type="text" id="select-chestpiece" name="locked-equipment"
|
||||
onchange="update()">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="select-chestpiece">Chestpiece</label>
|
||||
<select type="text" id="select-chestpiece" name="locked-equipment" onchange="update()">
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select type=" text" id="select-gauntlets" name="locked-equipment"
|
||||
onchange="update()">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="select-gauntlets">Gauntlets</label>
|
||||
<select type=" text" id="select-gauntlets" name="locked-equipment" onchange="update()">
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select type="text" id="select-leggings" name="locked-equipment"
|
||||
onchange="update()">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="select-leggings">Leggings</label>
|
||||
<select type="text" id="select-leggings" name="locked-equipment" onchange="update()">
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<hr>
|
||||
|
@ -91,9 +91,10 @@
|
||||
<b>Level</b>
|
||||
</label>
|
||||
<div>
|
||||
<input class="stat" type="text" id="class-level" oninput="update()" disabled>
|
||||
<input class="stat" type="text" id="total-level" oninput="update()" disabled>
|
||||
<input class="stat" type="text" id="virtual-level" oninput="update()" disabled>
|
||||
<input class="stat" type="text" id="class-level" disabled>
|
||||
<input class="stat" type="text" id="total-level" disabled style="visibility: hidden;">
|
||||
<input class="stat" type="text" id="subtractive-level" disabled>
|
||||
<input class="stat" type="text" id="additive-level" disabled>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -102,89 +103,81 @@
|
||||
<li>
|
||||
<label>Vigor</label>
|
||||
<div>
|
||||
<input name="class-stat" class="stat" type="text" id="class-vigor" oninput="update()"
|
||||
disabled>
|
||||
<input name="class-stat" class="stat" type="text" id="class-vigor" disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="vigor" oninput="update()" min=0
|
||||
max=99 maxLength=2>
|
||||
<input name="virtual-stat" class="stat" type="text" id="virtual-vigor" oninput="update()"
|
||||
disabled>
|
||||
<input name="subtractive-stat" class="stat" type="text" id="subtractive-vigor" disabled>
|
||||
<input name="additive-stat" class="stat" type="text" id="additive-vigor" disabled>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Mind</label>
|
||||
<div>
|
||||
<input name="class-stat" class="stat" type="text" id="class-mind" oninput="update()"
|
||||
disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="mind" oninput="update()" min=0
|
||||
max=99>
|
||||
<input name="virtual-stat" class="stat" type="text" id="virtual-mind" oninput="update()"
|
||||
disabled>
|
||||
<input name="class-stat" class="stat" type="text" id="class-mind" disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="mind" min=0 max=99>
|
||||
<input name="subtractive-stat" class="stat" type="text" id="subtractive-mind" disabled>
|
||||
<input name="additive-stat" class="stat" type="text" id="additive-mind" disabled>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Endurance</label>
|
||||
<div>
|
||||
<input name="class-stat" class="stat" type="text" id="class-endurance" oninput="update()"
|
||||
disabled>
|
||||
<input name="class-stat" class="stat" type="text" id="class-endurance" disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="endurance" oninput="update()"
|
||||
min=0 max=99>
|
||||
<input name="virtual-stat" class="stat" type="text" id="virtal-endurance" oninput="update()"
|
||||
disabled>
|
||||
<input name="subtractive-stat" class="stat" type="text" id="subtractive-endurance" disabled>
|
||||
<input name="additive-stat" class="stat" type="text" id="additive-endurance" disabled>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Strength</label>
|
||||
<div>
|
||||
<input name="class-stat" class="stat" type="text" id="class-strength" oninput="update()"
|
||||
disabled>
|
||||
<input name="class-stat" class="stat" type="text" id="class-strength" disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="strength" oninput="update()" min=0
|
||||
max=99>
|
||||
<input name="virtual-stat" class="stat" type="text" id="virtual-strength" oninput="update()"
|
||||
disabled>
|
||||
<input name="subtractive-stat" class="stat" type="text" id="subtractive-strength" disabled>
|
||||
<input name="additive-stat" class="stat" type="text" id="additive-strength" disabled>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Dexterity</label>
|
||||
<div>
|
||||
<input name="class-stat" class="stat" type="text" id="class-dexterity" oninput="update()"
|
||||
disabled>
|
||||
<input name="class-stat" class="stat" type="text" id="class-dexterity" disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="dexterity" oninput="update()"
|
||||
min=0 max=99>
|
||||
<input name="virtual-stat" class="stat" type="text" id="virtual-dexterity"
|
||||
oninput="update()" disabled>
|
||||
<input name="subtractive-stat" class="stat" type="text" id="subtractive-dexterity" disabled>
|
||||
<input name="additive-stat" class="stat" type="text" id="additive-dexterity" disabled>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Intelligence</label>
|
||||
<div>
|
||||
<input name="class-stat" class="stat" type="text" id="class-intelligence" oninput="update()"
|
||||
disabled>
|
||||
<input name="class-stat" class="stat" type="text" id="class-intelligence" disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="intelligence" oninput="update()"
|
||||
min=0 max=99>
|
||||
<input name="virtual-stat" class="stat" type="text" id="virtual-intelligence"
|
||||
oninput="update()" disabled>
|
||||
<input name="subtractive-stat" class="stat" type="text" id="subtractive-intelligence"
|
||||
disabled>
|
||||
<input name="additive-stat" class="stat" type="text" id="additive-intelligence" disabled>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Faith</label>
|
||||
<div>
|
||||
<input name="class-stat" class="stat" type="text" id="class-faith" oninput="update()"
|
||||
disabled>
|
||||
<input name="class-stat" class="stat" type="text" id="class-faith" disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="faith" oninput="update()" min=0
|
||||
max=99>
|
||||
<input name="virtual-stat" class="stat" type="text" id="virtual-faith" oninput="update()"
|
||||
disabled>
|
||||
<input name="subtractive-stat" class="stat" type="text" id="subtractive-faith" disabled>
|
||||
<input name="additive-stat" class="stat" type="text" id="additive-faith" disabled>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Arcane</label>
|
||||
<div>
|
||||
<input name="class-stat" class="stat" type="text" id="class-arcane" oninput="update()"
|
||||
disabled>
|
||||
<input name="class-stat" class="stat" type="text" id="class-arcane" disabled>
|
||||
<input name="desired-stat" class="stat" type="number" id="arcane" oninput="update()" min=0
|
||||
max=99>
|
||||
<input name="virtual-stat" class="stat" type="text" id="virtual-arcane" oninput="update()"
|
||||
disabled>
|
||||
<input name="subtractive-stat" class="stat" type="text" id="subtractive-arcane" disabled>
|
||||
<input name="additive-stat" class="stat" type="text" id="additive-arcane" disabled>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
@ -55,13 +55,15 @@ async function update() {
|
||||
}
|
||||
)
|
||||
|
||||
// get added stats from items
|
||||
let items = itemStats((await TALISMANS).concat(await HELMETS));
|
||||
|
||||
desired = desired.map((stat, i) => stat - items[i]);
|
||||
|
||||
// calculate best class
|
||||
let sorted = sortClasses(await CLASSES, desired);
|
||||
let best = sorted[0];
|
||||
|
||||
// get added stats from items
|
||||
let items = itemStats((await TALISMANS).concat(await HELMETS));
|
||||
|
||||
// update document
|
||||
document.getElementsByName("option").forEach((elem, i) => {
|
||||
let [name, level] = elem.children;
|
||||
@ -72,15 +74,23 @@ async function update() {
|
||||
|
||||
document.getElementById("class-level").value = best.level;
|
||||
document.getElementById("total-level").value = best.total;
|
||||
document.getElementById("virtual-level").value = best.total;
|
||||
document.getElementById("subtractive-level").value = best.total;
|
||||
document.getElementById("additive-level").value = [...document.getElementsByName("additive-stat")].reduce((total, elem, i) => {
|
||||
return total + (desired[i] > best.stats[i] ? desired[i] : best.stats[i]) + items[i];
|
||||
}, 0) - 79;
|
||||
|
||||
document.getElementsByName("class-stat").forEach((elem, i) => elem.value = best.stats[i]);
|
||||
|
||||
document.getElementsByName("virtual-stat").forEach((elem, i) => {
|
||||
elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]) + items[i]);
|
||||
document.getElementsByName("subtractive-stat").forEach((elem, i) => {
|
||||
elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]));
|
||||
elem.value > desired[i] && elem.value > best.stats[i] ? (elem.style.color = "tomato", elem.style.fontWeight = "bold") : (elem.style.color = "unset", elem.style.fontWeight = "unset");
|
||||
});
|
||||
|
||||
document.getElementsByName("additive-stat").forEach((elem, i) => {
|
||||
elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]) + items[i]);
|
||||
elem.value < desired[i] || elem.value < best.stats[i] ? (elem.style.color = "deepskyblue", elem.style.fontWeight = "bold") : (elem.style.color = "unset", elem.style.fontWeight = "unset");
|
||||
});
|
||||
|
||||
// update talismans
|
||||
let talismans = [...document.getElementsByClassName("talisman")]
|
||||
|
||||
@ -146,3 +156,4 @@ function cloneTemplate(template, destination, item) {
|
||||
|
||||
destination.appendChild(clone);
|
||||
}
|
||||
|
||||
|
@ -3,6 +3,7 @@
|
||||
:root {
|
||||
--primary: white;
|
||||
--secondary: #f8f8ff;
|
||||
--tertiary: #f3f3f3;
|
||||
--border: grey;
|
||||
--font-color: black;
|
||||
--font-inverted: white;
|
||||
@ -14,6 +15,7 @@
|
||||
:root {
|
||||
--primary: #2b2a33;
|
||||
--secondary: #1c1b22;
|
||||
--tertiary: #1c1b22;
|
||||
--border: black;
|
||||
--font-color: white;
|
||||
--font-inverted: black;
|
||||
@ -35,7 +37,7 @@ html {
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 899px) {
|
||||
html {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@ -237,14 +239,14 @@ button {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.app article {
|
||||
.app > article {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-basis: 300px;
|
||||
flex-basis: 320px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -276,7 +278,7 @@ button {
|
||||
}
|
||||
|
||||
.app input:is([disabled]) {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
|
||||
.app .stat {
|
||||
@ -298,9 +300,25 @@ button {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.app select {
|
||||
background-color: var(--secondary);
|
||||
width: 100%;
|
||||
color: var(--font-color);
|
||||
border: 1px solid var(--border);
|
||||
.select {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.select * {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 20%;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.select select {
|
||||
border: 1px solid var(--border);
|
||||
|
||||
background-color: var(--primary);
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user