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

added dark theme

Browse Source
This commit is contained in:
Frederik Palmø 2022-03-19 21:54:19 +01:00
parent 0cc9889f42
commit d9c6a7aa76
5 changed files with 365 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/data/talismans.json Normal file
View File

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

262
src/optimizer.html
View File

@ -11,6 +11,7 @@
<title>Erdtree - Class Optimizer</title> <title>Erdtree - Class Optimizer</title>
<meta name="description" content=""> <meta name="description" content="">
<script src="/script/common.js"></script>
<script src="/script/optimizer.js"></script> <script src="/script/optimizer.js"></script>
</head> </head>
@ -189,7 +190,7 @@
</div> </div>
</li> </li>
<li> <li>
<button onclick="clearDesired()">Clear All</button> <button onclick="clearAll()">Clear All</button>
</li> </li>
</ul> </ul>
</article> </article>
@ -205,44 +206,51 @@
<li> <li>
<div> <div>
<input type="checkbox" id="radagon-soreseal" oninput="talisman()" name="talisman"> <input class="talisman" type="checkbox" id="radagons-soreseal" oninput="talisman()"
<label for="radagon-soreseal">Radagon's Soreseal</label> name="equipment">
<label for="radagons-soreseal">Radagon's Soreseal</label>
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<input type="checkbox" id="marika-soreseal" oninput="talisman()" name="talisman"> <input class="talisman" type="checkbox" id="marikas-soreseal" oninput="talisman()"
<label for="marika-soreseal">Marika's Soreseal</label> name="equipment">
<label for="marikas-soreseal">Marika's Soreseal</label>
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<input type="checkbox" id="dexterity-talisman" oninput="talisman()" name="talisman"> <input class="talisman" type="checkbox" id="prosthesis-wearer-heirloom" oninput="talisman()"
<label for="dexterity-talisman">Prosthesis-Wearer Heirloom</label> name="equipment">
<label for="prosthesis-wearer-heirloom">Prosthesis-Wearer Heirloom</label>
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<input type="checkbox" id="intelligence-talisman" oninput="talisman()" name="talisman"> <input class="talisman" type="checkbox" id="stargazer-heirloom" oninput="talisman()"
<label for="intelligence-talisman">Stargazer Heirloom</label> name="equipment">
<label for="stargazer-heirloom">Stargazer Heirloom</label>
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<input type="checkbox" id="strength-talisman" oninput="talisman()" name="talisman"> <input class="talisman" type="checkbox" id="starscourge-heirloom" oninput="talisman()"
<label for="strength-talisman">Starscourge Heirloom</label> name="equipment">
<label for="starscourge-heirloom">Starscourge Heirloom</label>
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<input type="checkbox" id="faith-talisman" oninput="talisman()" name="talisman"> <input class="talisman" type="checkbox" id="two-fingers-heirloom" oninput="talisman()"
<label for="faith-talisman">Two Fingers Heirloom</label> name="equipment">
<label for="two-fingers-heirloom">Two Fingers Heirloom</label>
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<input type="checkbox" id="millicent" oninput="talisman()" name="talisman"> <input class="talisman" type="checkbox" id="millicents-prosthesis" oninput="talisman()"
<label for="millicent">Millicent's Prosthesis</label> name="equipment">
<label for="millicents-prosthesis">Millicent's Prosthesis</label>
</div> </div>
</li> </li>
</ul> </ul>
@ -250,93 +258,151 @@
<!-- equipment --> <!-- equipment -->
<article> <article>
<li> <ul>
<b>Equipment</b> <li>
</li> <b>Equipment (not currently functional)</b>
</li>
<hr> <hr>
<details> <!-- helms -->
<summary>Helms</summary>
<li> <li>
<div> <details>
<input type="radio" id="albinauric" oninput="update()" name="helm"> <summary>Helms</summary>
<label for="albinauric">Albinauric Mask</label> <ul>
</div> <li>
<div>
<input type="radio" id="none" oninput="update()" name="helm">
<label for="none">None</label>
</div>
</li>
<li>
<div>
<input type="radio" id="albinauric" oninput="update()" name="helm">
<label for="albinauric">Albinauric Mask</label>
</div>
</li>
<li>
<div>
<input type="radio" id="crimson" oninput="update()" name="helm">
<label for="crimson">Crimson Hood</label>
</div>
</li>
<li>
<div>
<input type="radio" id="navy" oninput="update()" name="helm">
<label for="navy">Navy Hood</label>
</div>
</li>
<li>
<div>
<input type="radio" id="haligtree-helm" oninput="update()" name="helm">
<label for="haligtree-helm">Haligtree Helm</label>
</div>
</li>
<li>
<div>
<input type="radio" id="mask-of-confidence" oninput="update()" name="helm">
<label for="mask-of-confidence">Mask of Confidence</label>
</div>
</li>
<li>
<div>
<input type="radio" id="queen" oninput="update()" name="helm">
<label for="queen">Queen's Crescent Crown</label>
</div>
</li>
<li>
<div>
<input type="radio" id="silver-tear" oninput="update()" name="helm">
<label for="silver-tear">Silver Tear Mask</label>
</div>
</li>
<li>
<div>
<input type="radio" id="twinsage-crown" oninput="update()" name="helm">
<label for="twinsage-crown">Twinsage Glintstone Crown</label>
</div>
</li>
<li>
<div>
<input type="radio" id="okina-mask" oninput="update()" name="helm">
<label for="okina-mask">Okina Mask</label>
</div>
</li>
<li>
<div>
<input type="radio" id="haima" oninput="update()" name="helm">
<label for="haima">Haima Glintstone Crown</label>
</div>
</li>
<li>
<div>
<input type="radio" id="haligtree-knight-helm" oninput="update()" name="helm">
<label for="haligtree-knight-helm">Haligtree Knight Helm</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-cat" oninput="update()" name="helm">
<label for="imp-cat">Imp Head (Cat)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-corpse" oninput="update()" name="helm">
<label for="imp-corpse">Imp Head (Corpse)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-elder" oninput="update()" name="helm">
<label for="imp-elder">Imp Head (Elder)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-fanged" oninput="update()" name="helm">
<label for="imp-fanged">Imp Head (Fanged)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-long-tongued" oninput="update()" name="helm">
<label for="imp-long-tongued">Imp Head (Long-Tongued)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-wolf" oninput="update()" name="helm">
<label for="imp-wolf">Imp Head (Wolf)</label>
</div>
</li>
</ul>
</details>
</li> </li>
<li>
<div>
<input type="radio" id="crimson" oninput="update()" name="helm">
<label for="crimson">Crimson Hood</label>
</div>
</li>
<li>
<div>
<input type="radio" id="navy" oninput="update()" name="helm">
<label for="navy">Navy Hood</label>
</div>
</li>
<li>
<div>
<input type="radio" id="haligtree" oninput="update()" name="helm">
<label for="haligtree">Haligtree Helm</label>
</div>
</li>
<li>
<div>
<input type="radio" id="mask-of-confidence" oninput="update()" name="helm">
<label for="mask-of-confidence">Mask of Confidence</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-cat" oninput="update()" name="helm">
<label for="imp-cat">Imp Head (Cat)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-corpse" oninput="update()" name="helm">
<label for="imp-corpse">Imp Head (Corpse)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-elder" oninput="update()" name="helm">
<label for="imp-elder">Imp Head (Elder)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-fanged" oninput="update()" name="helm">
<label for="imp-fanged">Imp Head (Fanged)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-long-tongued" oninput="update()" name="helm">
<label for="imp-long-tongued">Imp Head (Long-Tongued)</label>
</div>
</li>
<li>
<div>
<input type="radio" id="imp-wolf" oninput="update()" name="helm">
<label for="imp-wolf">Imp Head (Wolf)</label>
</div>
</li>
</details>
<details> <!-- chest armor-->
<summary>Chest Armor</summary> <li>
</details> <details>
<summary>Chest Armor</summary>
</details>
</li>
<details> <!-- gauntlets-->
<summary>Gauntlets</summary> <li>
</details> <details>
<summary>Gauntlets</summary>
</details>
</li>
<details> <!-- leg armor -->
<summary>Leg Armor</summary> <li>
</details> <details>
<summary>Leg Armor</summary>
</details>
</li>
</ul>
</article> </article>
</div> </div>
@ -346,8 +412,8 @@
<tr> <tr>
<td>Skill</td> <td>Skill</td>
<td>Stat</td> <td>Stat</td>
<td>Softcap</td> <td>Softcaps</td>
<td>Note</td> <td>Notes</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -360,7 +426,7 @@
<tr> <tr>
<td>Endurance</td> <td>Endurance</td>
<td>Stamina</td> <td>Stamina</td>
<td>30 (125 stamina)<br>50 (155 stamina)</td> <td>30 (125stm.)<br>50 (155stm.)</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>

3
src/script/common.js Normal file
View File

@ -0,0 +1,3 @@
function nameToId(name) {
return name.toLowerCase().replace(" ", "-");
}

47
src/script/optimizer.js
View File

@ -3,6 +3,11 @@ const CLASSES = fetch("/data/classes.json")
.then(data => data.classes) .then(data => data.classes)
.catch(error => console.log(error)); .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() { async function update() {
// get inputted stats // get inputted stats
let desired = [...document.getElementsByName("desired-stat")].map( 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 // calculate best class
let sorted = sortClasses(await CLASSES, desired); 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("class-stat").forEach((elem, i) => elem.value = best.stats[i]);
document.getElementsByName("virtual-stat").forEach((elem, 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"; // elem.style.color = IS_RADAGON[i] && virtual[i] ? "firebrick" : !IS_RADAGON[i] && virtual[i] ? "royalblue" : "unset";
}); });
} }
function statDelta(classStats, desiredStats) { function statDelta(classStats, desiredStats) {
return classStats 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); .reduce((total, n) => total + n);
} }
@ -49,43 +54,33 @@ function sortClasses(classes, desiredStats) {
c.total = c.level + statDelta(c.stats, desiredStats); c.total = c.level + statDelta(c.stats, desiredStats);
return c; return c;
}); });
deltas.sort((a, b) => { return a.total - b.total; }); deltas.sort((a, b) => a.total - b.total);
return deltas; return deltas;
} }
function virtualStats() { function itemStats(relevantItems) {
let [ let ids = [...document.getElementsByName("equipment")]
radagon, marika, dexterityTalisman, intelligenceTalisman, strengthTalisman, faithTalisman, millicent .filter(elem => elem.checked)
] = [...document.getElementsByName("talisman")].map(elem => { return elem.checked }); .map(elem => elem.id);
let relevant = relevantItems.filter(item => ids.includes(item.id));
return [ return relevant.reduce((total, item) => total.map((stat, i) => stat += item.stats[i]), [0, 0, 0, 0, 0, 0, 0, 0]);
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,
]
} }
function talisman() { function talisman() {
console.log("talisman()"); let talismans = [...document.getElementsByClassName("talisman")]
let talismans = [...document.getElementsByName("talisman")] if (talismans.filter(checkbox => checkbox.checked).length >= 4) {
talismans.forEach(checkbox => checkbox.disabled = !checkbox.checked);
if (talismans.filter(checkbox => { return checkbox.checked }).length >= 4) {
talismans.forEach(checkbox => { checkbox.disabled = !checkbox.checked });
} else { } else {
talismans.forEach(checkbox => { checkbox.disabled = false }); talismans.forEach(checkbox => checkbox.disabled = false);
} }
update(); update();
} }
function clearDesired() { function clearAll() {
document.getElementsByName("desired-stat").forEach(elem => { elem.value = null }); 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(); update();
} }

88
src/style/main.css
View File

@ -1,5 +1,30 @@
:root { /* colors */
--offwhite: #f8f8ff; @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 */ /* fonts */
@ -59,8 +84,8 @@ footer {
margin-top: auto; margin-top: auto;
outline: 1px solid grey; outline: 1px solid var(--border);
background-color: #f8f8ff; background-color: var(--secondary);
} }
/* nav */ /* nav */
@ -71,8 +96,8 @@ nav {
align-items: center; align-items: center;
/* look */ /* look */
background-color: #f8f8ff; background-color: var(--secondary);
outline: 1px solid grey; outline: 1px solid var(--border);
} }
nav ul { nav ul {
@ -118,15 +143,15 @@ p {
/* links */ /* links */
a { a {
text-decoration: none; text-decoration: none;
color: #1d7484; color: var(--link-color);
} }
a:hover { a:hover {
color: #144f5a; color: var(--link-color);
} }
a:visited { a:visited {
/* color: #982c61; */ /* color: #982c61; */
color: #1d7484; color: var(--link-color);
border-bottom: 2px solid #4a4a4a; border-bottom: 2px solid var(--link-color);
} }
/* lists & tables */ /* lists & tables */
@ -144,15 +169,17 @@ table {
text-align: justify; text-align: justify;
width: 100%; width: 100%;
border: 1px solid grey;
border-radius: 5px; border-radius: 5px;
margin-bottom: 10px; margin-bottom: 10px;
border: 1px solid var(--border);
background-color: var(--secondary);
} }
td, td,
th { th {
padding: 0.5em; padding: 0.5em;
border-bottom: 1px solid #f1f1f1; border-bottom: 1px solid var(--primary);
} }
thead { thead {
@ -174,21 +201,19 @@ tbody:first-child {
} }
.cards article { .cards article {
/* flex-grow: 0.45; */
/* flex-basis: 0px; */
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
min-width: 200px; min-width: 200px;
border: 1px solid grey; border: 1px solid var(--outline);
border-radius: 5px; border-radius: 5px;
/* look */ /* look */
background-color: #f8f8ff; background-color: var(--secondary);
} }
.card article * { .cards article * {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
} }
@ -200,20 +225,21 @@ tbody:first-child {
justify-content: center; justify-content: center;
padding: 15px; padding: 15px;
border: 1px solid grey; border: 1px solid var(--border);
border-radius: 5px; border-radius: 5px;
min-width: 320px; min-width: 320px;
background-color: #f8f8ff; background-color: var(--secondary);
} }
.app article { .app article {
border: 1px solid grey; border: 1px solid var(--border);
border-radius: 5px; border-radius: 5px;
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
min-width: 220px; flex-grow: 1;
flex-basis: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -222,24 +248,38 @@ tbody:first-child {
} }
.app ul { .app ul {
padding: 0; padding-left: 0;
padding-top: 5px;
margin: 0;
} }
.app li { .app li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: right;
width: 100%; width: 100%;
list-style: none; list-style: none;
} }
.app .stat { .app .stat {
text-align: center;
-webkit-appearance: none;
-moz-appearance: textfield;
margin-left: 10px; margin-left: 10px;
max-width: 40px; max-width: 40px;
align-self: flex-end; 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 { .app hr {
margin-top: 2px; margin-top: 2px;
margin-bottom: 4px; margin-bottom: 4px;