added dark theme
This commit is contained in:
parent
0cc9889f42
commit
d9c6a7aa76
113
src/data/talismans.json
Normal file
113
src/data/talismans.json
Normal 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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -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
3
src/script/common.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
function nameToId(name) {
|
||||||
|
return name.toLowerCase().replace(" ", "-");
|
||||||
|
}
|
@ -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();
|
||||||
}
|
}
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user