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;