diff --git a/src/armor.html b/src/armor.html
index b8573c3..30006ec 100644
--- a/src/armor.html
+++ b/src/armor.html
@@ -36,12 +36,12 @@
-
+
-
+
@@ -182,47 +182,39 @@
-
-
-
- Headgear |
- Chestpiece |
- Gauntlets |
- Leggings |
-
-
-
-
-
-
-
-
-
- |
-
-
- |
-
-
- |
-
-
- |
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/optimizer.html b/src/optimizer.html
index 6e9fd0c..b0e48d4 100644
--- a/src/optimizer.html
+++ b/src/optimizer.html
@@ -91,9 +91,10 @@
Level
-
-
-
+
+
+
+
@@ -102,89 +103,81 @@
-
+
-
+
+
-
-
-
+
+
+
+
-
+
-
+
+
-
+
-
+
+
-
+
-
+
+
-
+
-
+
+
-
+
-
+
+
-
+
-
+
+
diff --git a/src/script/optimizer.js b/src/script/optimizer.js
index 3245fcf..dc4ac52 100644
--- a/src/script/optimizer.js
+++ b/src/script/optimizer.js
@@ -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")]
@@ -145,4 +155,5 @@ function cloneTemplate(template, destination, item) {
aside.innerHTML = statsDescription(item.stats);
destination.appendChild(clone);
-}
\ No newline at end of file
+}
+
diff --git a/src/style/main.css b/src/style/main.css
index 650bb4b..638f87b 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -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);
}