From d9c6a7aa76b90bebd2abd1c8fb0594a4bfe56e3b Mon Sep 17 00:00:00 2001 From: vodofrede Date: Sat, 19 Mar 2022 21:54:19 +0100 Subject: [PATCH] added dark theme --- src/data/talismans.json | 113 +++++++++++++++++ src/optimizer.html | 262 +++++++++++++++++++++++++--------------- src/script/common.js | 3 + src/script/optimizer.js | 47 ++++--- src/style/main.css | 88 ++++++++++---- 5 files changed, 365 insertions(+), 148 deletions(-) create mode 100644 src/data/talismans.json create mode 100644 src/script/common.js diff --git a/src/data/talismans.json b/src/data/talismans.json new file mode 100644 index 0000000..a95ff96 --- /dev/null +++ b/src/data/talismans.json @@ -0,0 +1,113 @@ +{ + "talismans": [ + { + "id": "radagons-soreseal", + "name": "Radagon's Soreseal", + "weight": 0.8, + "stats": [ + 5, + 0, + 5, + 5, + 5, + 0, + 0, + 0 + ] + }, + { + "id": "marikas-soreseal", + "name": "Marika's Soreseal", + "weight": 0.8, + "stats": [ + 0, + 5, + 0, + 0, + 0, + 5, + 5, + 5 + ] + }, + { + "id": "prosthesis-wearer-heirloom", + "name": "Prosthesis-Wearer Heirloom", + "weight": 0.8, + "stats": [ + 0, + 0, + 0, + 0, + 5, + 0, + 0, + 0 + ] + }, + { + "id": "stargazer-heirloom", + "name": "Stargazer Heirloom", + "weight": 0.8, + "stats": [ + 0, + 0, + 0, + 0, + 0, + 5, + 0, + 0 + ] + }, + { + "id": "starscourge-heirloom", + "name": "Starscourge Heirloom", + "weight": 0.8, + "stats": [ + 0, + 0, + 0, + 5, + 0, + 0, + 0, + 0 + ] + }, + { + "id": "two-fingers-heirloom", + "name": "Two Fingers Heirloom", + "weight": 0.8, + "stats": [ + 0, + 0, + 0, + 0, + 0, + 0, + 5, + 0 + ] + }, + { + "id": "millicents-prosthesis", + "name": "Millicent's Prosthesis", + "weight": 0.8, + "stats": [ + 0, + 0, + 0, + 0, + 5, + 0, + 0, + 0 + ] + }, + { + "name": "Arrow's Reach Talisman", + "weight": 0.7 + } + ] +} \ No newline at end of file diff --git a/src/optimizer.html b/src/optimizer.html index 8aa08d9..cd68747 100644 --- a/src/optimizer.html +++ b/src/optimizer.html @@ -11,6 +11,7 @@ Erdtree - Class Optimizer + @@ -189,7 +190,7 @@
  • - +
    • @@ -205,44 +206,51 @@
  • - - + +
  • - - + +
  • - - + +
  • - - + +
  • - - + +
  • - - + +
  • - - + +
    • @@ -250,93 +258,151 @@
    -
  • - Equipment -
    • +
    @@ -346,8 +412,8 @@ Skill Stat - Softcap - Note + Softcaps + Notes @@ -360,7 +426,7 @@ Endurance Stamina - 30 (125 stamina)
    50 (155 stamina) + 30 (125stm.)
    50 (155stm.) diff --git a/src/script/common.js b/src/script/common.js new file mode 100644 index 0000000..7850d5c --- /dev/null +++ b/src/script/common.js @@ -0,0 +1,3 @@ +function nameToId(name) { + return name.toLowerCase().replace(" ", "-"); +} \ No newline at end of file diff --git a/src/script/optimizer.js b/src/script/optimizer.js index fb6f62d..b79eaa7 100644 --- a/src/script/optimizer.js +++ b/src/script/optimizer.js @@ -3,6 +3,11 @@ const CLASSES = fetch("/data/classes.json") .then(data => data.classes) .catch(error => console.log(error)); +const TALISMANS = fetch("/data/talismans.json") + .then(response => response.json()) + .then(data => data.talismans) + .catch(error => console.log(error)); + async function update() { // get inputted stats let desired = [...document.getElementsByName("desired-stat")].map( @@ -12,7 +17,7 @@ async function update() { } ) - let virtual = virtualStats(); + let items = itemStats(await TALISMANS); // calculate best class let sorted = sortClasses(await CLASSES, desired); @@ -33,14 +38,14 @@ async function update() { 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]) + virtual[i]); + elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]) + items[i]); // elem.style.color = IS_RADAGON[i] && virtual[i] ? "firebrick" : !IS_RADAGON[i] && virtual[i] ? "royalblue" : "unset"; }); } function statDelta(classStats, desiredStats) { return classStats - .map((e, i) => { return e < desiredStats[i] ? desiredStats[i] - e : 0 }) + .map((e, i) => e < desiredStats[i] ? desiredStats[i] - e : 0) .reduce((total, n) => total + n); } @@ -49,43 +54,33 @@ function sortClasses(classes, desiredStats) { c.total = c.level + statDelta(c.stats, desiredStats); return c; }); - deltas.sort((a, b) => { return a.total - b.total; }); + deltas.sort((a, b) => a.total - b.total); return deltas; } -function virtualStats() { - let [ - radagon, marika, dexterityTalisman, intelligenceTalisman, strengthTalisman, faithTalisman, millicent - ] = [...document.getElementsByName("talisman")].map(elem => { return elem.checked }); +function itemStats(relevantItems) { + let ids = [...document.getElementsByName("equipment")] + .filter(elem => elem.checked) + .map(elem => elem.id); + let relevant = relevantItems.filter(item => ids.includes(item.id)); - return [ - radagon ? 5 : 0, - marika ? 5 : 0, - radagon ? 5 : 0, - (radagon ? 5 : 0) + (strengthTalisman ? 5 : 0), - (radagon ? 5 : 0) + (dexterityTalisman ? 5 : 0) + (millicent ? 5 : 0), - (marika ? 5 : 0) + (intelligenceTalisman ? 5 : 0), - (marika ? 5 : 0) + (faithTalisman ? 5 : 0), - marika ? 5 : 0, - ] + return relevant.reduce((total, item) => total.map((stat, i) => stat += item.stats[i]), [0, 0, 0, 0, 0, 0, 0, 0]); } function talisman() { - console.log("talisman()"); + let talismans = [...document.getElementsByClassName("talisman")] - let talismans = [...document.getElementsByName("talisman")] - - if (talismans.filter(checkbox => { return checkbox.checked }).length >= 4) { - talismans.forEach(checkbox => { checkbox.disabled = !checkbox.checked }); + if (talismans.filter(checkbox => checkbox.checked).length >= 4) { + talismans.forEach(checkbox => checkbox.disabled = !checkbox.checked); } else { - talismans.forEach(checkbox => { checkbox.disabled = false }); + talismans.forEach(checkbox => checkbox.disabled = false); } update(); } -function clearDesired() { +function clearAll() { document.getElementsByName("desired-stat").forEach(elem => { elem.value = null }); - document.getElementsByName("talisman").forEach(elem => { elem.checked = false }); + [...document.getElementsByClassName("talisman")].forEach(elem => { elem.checked = false }); update(); } \ No newline at end of file diff --git a/src/style/main.css b/src/style/main.css index 8c70147..a7e3c99 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -1,5 +1,30 @@ -:root { - --offwhite: #f8f8ff; +/* colors */ +@media (prefers-color-scheme: light) { + :root { + --primary: white; + --secondary: #f8f8ff; + --border: grey; + --font-color: black; + --link-color: #1d7484; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --primary: #2b2a33; + --secondary: #1c1b22; + --border: black; + --font-color: white; + --link-color: tomato; + } +} + +html { + background-color: var(--primary); +} + +html * { + color: var(--font-color); } /* fonts */ @@ -59,8 +84,8 @@ footer { margin-top: auto; - outline: 1px solid grey; - background-color: #f8f8ff; + outline: 1px solid var(--border); + background-color: var(--secondary); } /* nav */ @@ -71,8 +96,8 @@ nav { align-items: center; /* look */ - background-color: #f8f8ff; - outline: 1px solid grey; + background-color: var(--secondary); + outline: 1px solid var(--border); } nav ul { @@ -118,15 +143,15 @@ p { /* links */ a { text-decoration: none; - color: #1d7484; + color: var(--link-color); } a:hover { - color: #144f5a; + color: var(--link-color); } a:visited { /* color: #982c61; */ - color: #1d7484; - border-bottom: 2px solid #4a4a4a; + color: var(--link-color); + border-bottom: 2px solid var(--link-color); } /* lists & tables */ @@ -144,15 +169,17 @@ table { text-align: justify; width: 100%; - border: 1px solid grey; border-radius: 5px; margin-bottom: 10px; + + border: 1px solid var(--border); + background-color: var(--secondary); } td, th { padding: 0.5em; - border-bottom: 1px solid #f1f1f1; + border-bottom: 1px solid var(--primary); } thead { @@ -174,21 +201,19 @@ tbody:first-child { } .cards article { - /* flex-grow: 0.45; */ - /* flex-basis: 0px; */ text-align: center; flex-grow: 1; min-width: 200px; - border: 1px solid grey; + border: 1px solid var(--outline); border-radius: 5px; /* look */ - background-color: #f8f8ff; + background-color: var(--secondary); } -.card article * { +.cards article * { display: inline-block; text-align: center; } @@ -200,20 +225,21 @@ tbody:first-child { justify-content: center; padding: 15px; - border: 1px solid grey; + border: 1px solid var(--border); border-radius: 5px; min-width: 320px; - background-color: #f8f8ff; + background-color: var(--secondary); } .app article { - border: 1px solid grey; + border: 1px solid var(--border); border-radius: 5px; margin: 10px; padding: 10px; - min-width: 220px; + flex-grow: 1; + flex-basis: 300px; display: flex; flex-direction: column; @@ -222,24 +248,38 @@ tbody:first-child { } .app ul { - padding: 0; + padding-left: 0; + padding-top: 5px; + margin: 0; } .app li { display: flex; justify-content: space-between; - text-align: right; - width: 100%; + list-style: none; } .app .stat { + text-align: center; + -webkit-appearance: none; + -moz-appearance: textfield; margin-left: 10px; max-width: 40px; align-self: flex-end; } +.app input:is([disabled]) { + text-align: center; + background-color: var(--primary); + border: 1px solid var(--border); +} + +.app .stat:not([disabled]) { + color: var(--primary); +} + .app hr { margin-top: 2px; margin-bottom: 4px;