From 3d7ddeb87a96547eeb72e33f72699b8a3c067347 Mon Sep 17 00:00:00 2001 From: vodofrede Date: Mon, 21 Mar 2022 15:32:50 +0100 Subject: [PATCH] split optimizer page results into two --- src/armor.html | 78 ++++++++++++++++++----------------------- src/optimizer.html | 67 ++++++++++++++++------------------- src/script/optimizer.js | 25 +++++++++---- src/style/main.css | 36 ++++++++++++++----- 4 files changed, 110 insertions(+), 96 deletions(-) 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 @@
  • - - - - - - - - - - - - - - - - - - -
    HeadgearChestpieceGauntletsLeggings
    - - - - - - - -
    + + +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    • 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); }