class optimizer mvp
This commit is contained in:
parent
8782958f68
commit
ea3dc82728
144
src/data/classes.json
Normal file
144
src/data/classes.json
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
{
|
||||||
|
"classes": [
|
||||||
|
{
|
||||||
|
"name": "Wretch",
|
||||||
|
"level": 1,
|
||||||
|
"stats": [
|
||||||
|
10,
|
||||||
|
10,
|
||||||
|
10,
|
||||||
|
10,
|
||||||
|
10,
|
||||||
|
10,
|
||||||
|
10,
|
||||||
|
10
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Vagabond",
|
||||||
|
"level": 9,
|
||||||
|
"stats": [
|
||||||
|
15,
|
||||||
|
10,
|
||||||
|
11,
|
||||||
|
14,
|
||||||
|
13,
|
||||||
|
9,
|
||||||
|
9,
|
||||||
|
7
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Warrior",
|
||||||
|
"level": 8,
|
||||||
|
"stats": [
|
||||||
|
11,
|
||||||
|
12,
|
||||||
|
11,
|
||||||
|
10,
|
||||||
|
16,
|
||||||
|
10,
|
||||||
|
8,
|
||||||
|
9
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Hero",
|
||||||
|
"level": 7,
|
||||||
|
"stats": [
|
||||||
|
14,
|
||||||
|
9,
|
||||||
|
12,
|
||||||
|
16,
|
||||||
|
9,
|
||||||
|
7,
|
||||||
|
8,
|
||||||
|
11
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Bandit",
|
||||||
|
"level": 5,
|
||||||
|
"stats": [
|
||||||
|
10,
|
||||||
|
11,
|
||||||
|
10,
|
||||||
|
9,
|
||||||
|
13,
|
||||||
|
9,
|
||||||
|
8,
|
||||||
|
14
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Astrologer",
|
||||||
|
"level": 6,
|
||||||
|
"stats": [
|
||||||
|
9,
|
||||||
|
15,
|
||||||
|
9,
|
||||||
|
8,
|
||||||
|
12,
|
||||||
|
16,
|
||||||
|
7,
|
||||||
|
9
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Prophet",
|
||||||
|
"level": 7,
|
||||||
|
"stats": [
|
||||||
|
10,
|
||||||
|
14,
|
||||||
|
8,
|
||||||
|
11,
|
||||||
|
10,
|
||||||
|
7,
|
||||||
|
16,
|
||||||
|
10
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Samurai",
|
||||||
|
"level": 9,
|
||||||
|
"stats": [
|
||||||
|
12,
|
||||||
|
11,
|
||||||
|
13,
|
||||||
|
12,
|
||||||
|
15,
|
||||||
|
9,
|
||||||
|
8,
|
||||||
|
8
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Prisoner",
|
||||||
|
"level": 9,
|
||||||
|
"stats": [
|
||||||
|
11,
|
||||||
|
12,
|
||||||
|
11,
|
||||||
|
11,
|
||||||
|
14,
|
||||||
|
14,
|
||||||
|
6,
|
||||||
|
9
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Confessor",
|
||||||
|
"level": 10,
|
||||||
|
"stats": [
|
||||||
|
10,
|
||||||
|
13,
|
||||||
|
10,
|
||||||
|
12,
|
||||||
|
12,
|
||||||
|
9,
|
||||||
|
14,
|
||||||
|
9
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -75,6 +75,10 @@
|
|||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
<h3>Credits</h3>
|
||||||
|
<p>
|
||||||
|
This page was heavily inspired by the awesome <a href="https://mugenmonkey.com">MugenMonkey</a> website.
|
||||||
|
</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
@ -8,11 +8,13 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="style/main.css">
|
<link rel="stylesheet" href="style/main.css">
|
||||||
|
|
||||||
<title></title>
|
<title>Erdtree - Class Optimizer</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
|
|
||||||
|
<script src="/script/optimizer.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="update();">
|
||||||
<nav>
|
<nav>
|
||||||
<h1><a href="/index.html">Elden Ring Build Planner</a></h1>
|
<h1><a href="/index.html">Elden Ring Build Planner</a></h1>
|
||||||
<ul>
|
<ul>
|
||||||
@ -27,69 +29,291 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<script src="script/"></script>
|
<ul id="class-options">
|
||||||
<!-- input fields -->
|
|
||||||
<ul>
|
|
||||||
<!-- <li>
|
|
||||||
<pre>Base</pre>
|
|
||||||
<pre>Total</pre>
|
|
||||||
</li> -->
|
|
||||||
<li>
|
<li>
|
||||||
<label><b>Level</b></label>
|
<label><b>Class</b></label>
|
||||||
<input type="number" disabled>
|
<input id="best-class" type="text" disabled>
|
||||||
<input type="number" name="total-level" disabled>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<li><b>Options</b></li>
|
||||||
|
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
<li name="option">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<b>Level</b>
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<input class="stat" type="text" id="class-level" oninput="update()" disabled>
|
||||||
|
<input class="stat" type="text" id="total-level" oninput="update()" disabled>
|
||||||
|
<input class="stat" type="text" id="virtual-level" oninput="update()" disabled>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<label>Vigor</label>
|
<label>Vigor</label>
|
||||||
<input type="number" disabled>
|
<div>
|
||||||
<input type="number" name="vigor" min=0 max=99>
|
<input name="class-stat" class="stat" type="text" id="class-vigor" oninput="update()" disabled>
|
||||||
|
<input name="desired-stat" class="stat" type="number" id="vigor" oninput="update()" min=0 max=99
|
||||||
|
maxLength=2>
|
||||||
|
<input name="virtual-stat" class="stat" type="text" id="virtual-vigor" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label>Mind</label>
|
<label>Mind</label>
|
||||||
<input type="number" disabled>
|
<div>
|
||||||
|
<input name="class-stat" class="stat" type="text" id="class-mind" oninput="update()" disabled>
|
||||||
|
<input name="desired-stat" class="stat" type="number" id="mind" oninput="update()" min=0 max=99>
|
||||||
|
<input name="virtual-stat" class="stat" type="text" id="virtual-mind" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label>Endurance</label>
|
<label>Endurance</label>
|
||||||
<input type="number" disabled>
|
<div>
|
||||||
|
<input name="class-stat" class="stat" type="text" id="class-endurance" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
<input name="desired-stat" class="stat" type="number" id="endurance" oninput="update()" min=0
|
||||||
|
max=99>
|
||||||
|
<input name="virtual-stat" class="stat" type="text" id="virtal-endurance" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label>Strength</label>
|
<label>Strength</label>
|
||||||
<input type="number" disabled>
|
<div>
|
||||||
|
<input name="class-stat" class="stat" type="text" id="class-strength" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
<input name="desired-stat" class="stat" type="number" id="strength" oninput="update()" min=0
|
||||||
|
max=99>
|
||||||
|
<input name="virtual-stat" class="stat" type="text" id="virtual-strength" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label>Dexterity</label>
|
<label>Dexterity</label>
|
||||||
<input type="number" disabled>
|
<div>
|
||||||
|
<input name="class-stat" class="stat" type="text" id="class-dexterity" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
<input name="desired-stat" class="stat" type="number" id="dexterity" oninput="update()" min=0
|
||||||
|
max=99>
|
||||||
|
<input name="virtual-stat" class="stat" type="text" id="virtual-dexterity" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label>Intelligence</label>
|
<label>Intelligence</label>
|
||||||
<input type="number" disabled>
|
<div>
|
||||||
|
<input name="class-stat" class="stat" type="text" id="class-intelligence" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
<input name="desired-stat" class="stat" type="number" id="intelligence" oninput="update()" min=0
|
||||||
|
max=99>
|
||||||
|
<input name="virtual-stat" class="stat" type="text" id="virtual-intelligence" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label>Faith</label>
|
<label>Faith</label>
|
||||||
<input type="number" disabled>
|
<div>
|
||||||
|
<input name="class-stat" class="stat" type="text" id="class-faith" oninput="update()" disabled>
|
||||||
|
<input name="desired-stat" class="stat" type="number" id="faith" oninput="update()" min=0
|
||||||
|
max=99>
|
||||||
|
<input name="virtual-stat" class="stat" type="text" id="virtual-faith" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label>Arcane</label>
|
<label>Arcane</label>
|
||||||
<input type="number" disabled>
|
<div>
|
||||||
|
<input name="class-stat" class="stat" type="text" id="class-arcane" oninput="update()" disabled>
|
||||||
|
<input name="desired-stat" class="stat" type="number" id="arcane" oninput="update()" min=0
|
||||||
|
max=99>
|
||||||
|
<input name="virtual-stat" class="stat" type="text" id="virtual-arcane" oninput="update()"
|
||||||
|
disabled>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button onclick="clearDesired()">Clear All</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li></li>
|
<li>
|
||||||
<li></li>
|
<b>Talismans</b>
|
||||||
<li><input type="number" name="mind" min=0 max=99></li>
|
</li>
|
||||||
<li><input type="number" name="endurance" min=0 max=99></li>
|
|
||||||
<li><input type="number" name="strength" min=0 max=99></li>
|
<hr>
|
||||||
<li><input type="number" name="dexterity" min=0 max=99></li>
|
|
||||||
<li><input type="number" name="intelligence" min=0 max=99></li>
|
<li>
|
||||||
<li><input type="number" name="faith" min=0 max=99></li>
|
<div>
|
||||||
<li><input type="number" name="arcane" min=0 max=99></li>
|
<input type="checkbox" id="radagon-soreseal" oninput="talisman()" name="talisman">
|
||||||
|
<label for="radagon-soreseal">Radagon's Soreseal</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="marika-soreseal" oninput="talisman()" name="talisman">
|
||||||
|
<label for="marika-soreseal">Marika's Soreseal</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="dexterity-talisman" oninput="talisman()" name="talisman">
|
||||||
|
<label for="dexterity-talisman">Prosthesis-Wearer Heirloom</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="intelligence-talisman" oninput="talisman()" name="talisman">
|
||||||
|
<label for="intelligence-talisman">Stargazer Heirloom</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="strength-talisman" oninput="talisman()" name="talisman">
|
||||||
|
<label for="strength-talisman">Starscourge Heirloom</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="faith-talisman" oninput="talisman()" name="talisman">
|
||||||
|
<label for="faith-talisman">Two Fingers Heirloom</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="millicent" oninput="talisman()" name="talisman">
|
||||||
|
<label for="millicent">Millicent's Prosthesis</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<b>Helms</b>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<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" 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>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
<h5>Erdtree Planner (available under BSD-3-Clause license)</h5>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
@ -1,3 +1,91 @@
|
|||||||
"use strict";
|
const CLASSES = fetch("/data/classes.json")
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => data.classes)
|
||||||
|
.catch(error => console.log(error));
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
// get inputted stats
|
||||||
|
let desired = [...document.getElementsByName("desired-stat")].map(
|
||||||
|
elem => {
|
||||||
|
elem.value = Math.min(Math.max(elem.value, 0), 99) || null;
|
||||||
|
return parseInt(elem.value) || 0;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
let virtual = virtualStats();
|
||||||
|
|
||||||
|
// calculate best class
|
||||||
|
let sorted = sortClasses(await CLASSES, desired);
|
||||||
|
let best = sorted[0];
|
||||||
|
|
||||||
|
// update document
|
||||||
|
document.getElementsByName("option").forEach((elem, i) => {
|
||||||
|
let [name, level] = elem.children;
|
||||||
|
name.innerHTML = sorted[i].name;
|
||||||
|
level.innerHTML = "lvl. " + sorted[i].total;
|
||||||
|
})
|
||||||
|
document.getElementById("best-class").value = best.name;
|
||||||
|
|
||||||
|
document.getElementById("class-level").value = best.level;
|
||||||
|
document.getElementById("total-level").value = best.total;
|
||||||
|
document.getElementById("virtual-level").value = best.total;
|
||||||
|
|
||||||
|
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.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 })
|
||||||
|
.reduce((total, n) => total + n);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sortClasses(classes, desiredStats) {
|
||||||
|
let deltas = classes.map(c => {
|
||||||
|
c.total = c.level + statDelta(c.stats, desiredStats);
|
||||||
|
return c;
|
||||||
|
});
|
||||||
|
deltas.sort((a, b) => { return a.total - b.total; });
|
||||||
|
return deltas;
|
||||||
|
}
|
||||||
|
|
||||||
|
function virtualStats() {
|
||||||
|
let [
|
||||||
|
radagon, marika, dexterityTalisman, intelligenceTalisman, strengthTalisman, faithTalisman, millicent
|
||||||
|
] = [...document.getElementsByName("talisman")].map(elem => { return elem.checked });
|
||||||
|
|
||||||
|
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,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function talisman() {
|
||||||
|
console.log("talisman()");
|
||||||
|
|
||||||
|
let talismans = [...document.getElementsByName("talisman")]
|
||||||
|
|
||||||
|
if (talismans.filter(checkbox => { return checkbox.checked }).length >= 4) {
|
||||||
|
talismans.forEach(checkbox => { checkbox.disabled = !checkbox.checked });
|
||||||
|
} else {
|
||||||
|
talismans.forEach(checkbox => { checkbox.disabled = false });
|
||||||
|
}
|
||||||
|
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearDesired() {
|
||||||
|
document.getElementsByName("desired-stat").forEach(elem => { elem.value = null });
|
||||||
|
document.getElementsByName("talisman").forEach(elem => { elem.checked = false });
|
||||||
|
update();
|
||||||
|
}
|
@ -44,6 +44,10 @@ body {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -117,7 +121,8 @@ a:hover {
|
|||||||
color: #144f5a;
|
color: #144f5a;
|
||||||
}
|
}
|
||||||
a:visited {
|
a:visited {
|
||||||
color: #982c61;
|
/* color: #982c61; */
|
||||||
|
color: #1d7484;
|
||||||
border-bottom: 2px solid #4a4a4a;
|
border-bottom: 2px solid #4a4a4a;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -165,31 +170,47 @@ li {
|
|||||||
/* apps */
|
/* apps */
|
||||||
.app {
|
.app {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-flow: row wrap;
|
||||||
justify-content: stretch;
|
justify-content: center;
|
||||||
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border: 1px solid grey;
|
border: 1px solid grey;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
min-width: 320px;
|
||||||
|
|
||||||
background-color: #f8f8ff;
|
background-color: #f8f8ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app ul {
|
.app ul {
|
||||||
|
border: 1px solid grey;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
min-width: 220px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: top;
|
||||||
}
|
align-items: stretch;
|
||||||
|
|
||||||
.app ul li * {
|
|
||||||
width: 200px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app li {
|
.app li {
|
||||||
height: 20px;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app ul input {
|
.app ul .stat {
|
||||||
width: 40px;
|
margin-left: 10px;
|
||||||
|
max-width: 40px;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app hr {
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user