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