vodofrede/erdtree
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

split optimizer page results into two

Browse Source
This commit is contained in:
Frederik Palmø 2022-03-21 15:32:50 +01:00
parent 6927375d1d
commit 3d7ddeb87a
4 changed files with 110 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/armor.html
View File

@ -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>
<thead>
<tr>
<th>Headgear</th>
<th>Chestpiece</th>
<th>Gauntlets</th>
<th>Leggings</th>
</tr>
</thead>
<tbody>
<tr>
<template id="locked-option"> <template id="locked-option">
<option value="">Placeholder</option> <option value="">Placeholder</option>
</template> </template>
<td>
<select type="text" id="select-helmet" name="locked-equipment" <div class="select">
onchange="update()"> <div>
<label for="select-helmet">Helmet</label>
<select type="text" id="select-helmet" name="locked-equipment" onchange="update()">
<option value="none">None</option> <option value="none">None</option>
</select> </select>
</td> </div>
<td>
<select type="text" id="select-chestpiece" name="locked-equipment" <div>
onchange="update()"> <label for="select-chestpiece">Chestpiece</label>
<select type="text" id="select-chestpiece" name="locked-equipment" onchange="update()">
<option value="none">None</option> <option value="none">None</option>
</select> </select>
</td> </div>
<td>
<select type=" text" id="select-gauntlets" name="locked-equipment" <div>
onchange="update()"> <label for="select-gauntlets">Gauntlets</label>
<select type=" text" id="select-gauntlets" name="locked-equipment" onchange="update()">
<option value="none">None</option> <option value="none">None</option>
</select> </select>
</td> </div>
<td>
<select type="text" id="select-leggings" name="locked-equipment" <div>
onchange="update()"> <label for="select-leggings">Leggings</label>
<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>
</tr> </div>
</tbody>
</table>
</li> </li>
<hr> <hr>

67
src/optimizer.html
View File

@ -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>

23
src/script/optimizer.js
View File

@ -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);
} }

36
src/style/main.css
View File

@ -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);
} }